Сложить два числа javascript

Базовые математические операции в JavaScript

В этой статье для начинающих, ты узнаешь как в JS работает сложение, вычитание, умножение и деление разных типов данных.

JavaScript поддерживает все базовые арифметические операции. Сегодня я расскажу тебе об операторах + , — , * , и / .

Сложение

Оператор + используется в JavaScript, чтобы сложить два значения. Ему нужно два операнда (числа в нашем случае), чтобы правильно работать:

Результат получился ровно таким, как мы и ожидали. Два плюс два равно четыре. Но все становится сложнее и запутаннее, когда мы попробуем работать с другими типами данных.

Если один из операндов строка, то второй будет тоже рассматриваться как строка. Эти строки будут склеены вместе, чтобы получить результат.

const numberPlusString = 2 + '2'; // 22 const booleanPlusString = true + 'Story'; // trueStory const stringPlusString = 'just' + 'Strings'; // justStrings 

Также, можно поместить функцию, объект или массив с любой стороны оператора + . В этом случае они сначала будут конвертированы в строки.

const f = () => return 0>; const obj = type: 'regular'>; const arr = [1, 2, 3]; console.log('Hello!' + f); // Hello!() => console.log(true + obj); // true[object Object] console.log(1 + arr); // 11,2,3 

Заметь, что большинство объектов станут строками вида [object Object] . Это стандартная реализация toString в JavaScript. Если тебе нужно что-то другое, ты должен писать свою имплементацию функции toString() .

const obj = < type: 'regular', toString: function () < return JSON.stringify(this); >, >; console.log(1 + obj); // 1 

Интересные вещи происходят, если один из операндов — boolean (переменная логического типа), а другой число. Или оба операнда boolean . В таких случаях, переменные логического типа будут конвертированы в числа. true станет равно 1 , а false превратится в 0 .

const truePlusTrue = true + true; // 2 const truePlusFalse = true + false; // 1 const booleanPlusNumber = true + 5; // 6 

Вычитание, умножение и деление

Базовые правила сложения и выглядят сложно для разных типов данных. Но пока мы работаем с числами, все просто. То же верно и для JavaScript операторов * , / и — .

const subtractionResult = 10 - 2; // 8 const multiplicationResult = 2 * 2; // 4 const divisionResult = 10 / 2; // 5 

Булевы значения также конвертируются в 0 или 1 , когда с другой стороны оператора стоит другой boolean или число.

console.log(true / true); // 1 console.log(5 * false); // 0 console.log(true - false); // 1 

Infinity и -Infinity

Если ты попробуешь разделить число на 0 или false , то в результате получишь Infinity или -Infinity .

console.log(5 / 0); // Infinity console.log(-5 / false); // -Infinity 

NaN

В других случаях, когда JavaScript не может нормально посчитать результат выражения, ты получишь NaN . Это специальное “не-число”, сокращение от “not-a-number”.

console.log(false / false); // NaN console.log(10 / 'string'); // NaN console.log(5 * <>); // NaN console.log(<> - []) // NaN 

Пустой массив

Пустой массив превращается в пустую строку или 0 в зависимости от других операндов.

console.log('str1' + [] + 'str2'); // str1str2 console.log(12 * []); // 0 console.log(5 - []); // 5 console.log(1 / []); // Infinity 

Унарный инкремент и декремент в JavaScript

В JS, есть два очень полезных оператора, которые увеличивают или уменьшают значение числа на единицу. Их называют операторами унарного инкремента (увеличение) и декремента (уменьшение). Унарные они потому, что им нужен только один операнд для корректной работы.

Выглядят эти операторы, как двойной плюс ++ и двойной минус — .

let counter = 0; counter++; console.log(counter); // 1 counter--; console.log(counter); // 0 

Операторы ++ и — можно написать с любой стороны переменной. Записи counter++ и ++counter сделают почти одно и то же. Разницу покажу на примере:

let i = 0; console.log(i++); // 0 console.log(i); // 1 

Сначала мы берем значение i , выводим на экран и только после этого делаем инкремент. Результат инкремента станет виден во втором console.log .

А если написать ++i , то все будет наоборот. Сначала мы выполним инкремент, а уже потом обновленное значение i попадет в console.log .

let i = 0; console.log(++i); // 1 console.log(i); // 1 

Чтобы убедиться, что ты все правильно понял, посчитай этот пример. Ответить можешь мне на почту или в телеграм. Ссылки есть на главной странице.

let x = 1; let y = 2; let z = 3; console.log(++x - y-- + z++); // ? 

Вывод

Ты узнал о базовой математике JavaScript, ее правилах и исключениях.

Операции + , — , * , / работают как ожидается с числами, но со строками, объектами, массивами, булевыми переменными и функциями ведут себя иначе.

Понимание базовой математики JS полезно любому веб разработчику.

Источник

JavaScript | Как сложить два числа?

Мы можем открыть браузер и в нём перейти в инструменты разработчика. После этого мы можем открыть вкладку Консоль (Console). Теперь мы можем начинать вводить наши команды в пустое поле напротив символа >. После ввода команды нужно нажимать клавишу Enter, чтобы интерпретатор языка JavaScript начал свою работу и выполнил нашу команду. Что дальше?

Печатаем первое число. Ставим пробел » «. Печатаем символ сложения «+» (знак плюс). Ставим пробел » «. Печатаем второе число.

Чтобы проверить правильно ли JavaScript посчитает сумму двух чисел, нужно открыть «Инструменты разработчика» (CTRL+SHIFT+i) и вкладку «Console» в своём баузере (Google Chrome, Opera, Mozilla) и ввести туда эту команду.

Сложение двух чисел 5 и 6 - JavaScript

После ввода команды сложения нужно нажать на клавишу ввода (Enter). После этого нажатия выполнится команда сложения и мы увидим результат — число 11 (одиннадцать).

Инструкция для переменных

Наши числа могут храниться в переменных. Пример:

Как сложить два числа, которые находятся в переменных? Пользуемся аналогичной инструкцией сложения, только теперь вместо чисел мы вводим имена переменных:

Чтобы проверить правильно ли JavaScript посчитает сумму двух переменных, нужно открыть «Инструменты разработчика» (CTRL+SHIFT+i) и вкладку «Console» в своём баузере (Google Chrome, Opera, Mozilla) и ввести туда эту команду.

Сложение двух переменных из чисел - JavaScript

После ввода команды сложения нужно нажать на клавишу ввода (Enter). После этого нажатия выполнится команда сложения и мы увидим результат — число 10 (десять).

Функция, которая складывает два числа в JavaScript

Мы можем написать свою собственную функцию, внутрь которой мы будем передавать нужные нам значения для сложения. Функция будет производить сложение и возвращать сумму.

function sumAB(a,b)< return a + b >

Функция сложения двух чисел - JavaScript

Стрелочная функция, которая складывает два числа в JavaScript

Все стрелочные функции анонимны по своей природе. То есть у них нет имён — нет идентификаторов привязки. Для того чтобы иметь возможность обратиться к стрелочной функции, нужно положить её в какой-нибудь новый идентификатор через объявление переменной и символа присваивания =.

let sumQW = (q,w) => q+w sumQW(1,5) 6

Стрелочная функция сложения двух чисел - JavaScript

Справка

Оператор сложения ( + ) выполняет либо конкатенацию строк, либо числовое сложение.

Если два операнда будут типом данных Число(Number), то мы получим на выходе число.

Если один из операндов будет строкой, то мы просто склеим символьное представление числа со строкой.

Источник

Сложение двух чисел на HTML + JavaScript

В статье рассказывается как создать приложение сложения двух чисел на HTML + JavaScript.

Приготовления

Ничего не требуется кроме блокнота и браузера.

Создание болванки

Создаем текстовой документ под именем index.html .

Закинем в него простую болванку HTML5 документа:

  lang="ru">  charset="utf-8" />  name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> Программа сложения двух чисел   

Если мы сохраним документ и откроем в браузере, то увидим пустое белое окно, так как ничего видимого в документе пока нет — это просто болванка с шапкой, где располагаются некоторые мета-тэги (по сути их тоже можно было выкинуть), и пустое тело.

Наполнение HTML

Так как нам нужно приложение, которое будет складывать два числа, то нужно два поля ввода текстовой информации. Следовательно, их нужно будет размещать в некоторой форме. Поэтому в теле HTML документа разместим такую форму:

  id="a" type="text" value="1" /> />  id="b" type="text" value="1" /> />  

Каждое поле имеет свой идентификатор id с названием переменной a и b . Также они имеют начальное наполнение.

Нам нужна кнопка для вычислений. Обычно на форме используется input тэг с type=submit , но он вызовет передачу параметров в форме с переходом на эту же или другую страницу. Поэтому используем обычную кнопку:

 type="button" value="Сложить 2 два числа" onclick="addition();" /> /> 

При клике на кнопку будет вызываться функция JavaScript по имени addition() , которую позже пропишем.

Кроме этого, нам нужно место, куда JavaScript будет записывать результат вычислений. Для этого после формы пропишем пустой слой с определенным идентификатором id=»result» :

Общий документ будет иметь вид:

  lang="ru">  charset="utf-8" />  name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> Программа сложения двух чисел    id="a" type="text" value="1" /> />  id="b" type="text" value="1" /> />  type="button" value="Сложить 2 два числа" onclick="addition();" /> />   id="result">

Если мы сохраним документ и его откроем, то получим следующее:

Запущенная HTML страница

Функция JavaScript

Теперь пропишем функцию addition() . Для этого пропишем к голове страницы пока пустую функцию внутри тэга script :

Общий вид документа будет иметь вид:

  lang="ru">  charset="utf-8" />  name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> Программа сложения двух чисел function addition() <>     id="a" type="text" value="1" /> />  id="b" type="text" value="1" /> />  type="button" value="Сложить 2 два числа" onclick="addition();" /> />   id="result">

Что нам нужно в этой функции? Вначале нам нужно найти соответствующие поля ввода текстовой информации и считать те значения, которые там записаны. Поиск элементов будем осуществлять с помощью функции getElementById() .

При этом сразу переведем значения из строкового типа в числовые целого типа:

var a = parseInt(document.getElementById("a").value); var b = parseInt(document.getElementById("b").value); 

Теперь в переменных a и b хранятся значения в виде чисел. А, если там вообще ничего не будет в поле ввода? Тогда там будет храниться NaN значение. Нам это не нужно. Поставим проверку, что, если в поле ввода ничего нет, то пусть там будет как будто записан ноль:

if (isNaN(a) == true) a = 0; if (isNaN(b) == true) b = 0; 

Теперь мы можем провести наши вычисления:

Осталось только записать полученный результат. Для этого найдем наш пустой слой с id=»result» и заменим его содержимое на то, что нам нужно, через свойство innerHTML :

document.getElementById("result").innerHTML = a + " + " + b + " = " + c; 

Итого, наш файл будет иметь вид:

  lang="ru">  charset="utf-8" />  name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> Программа сложения двух чисел function addition()  var a = parseInt(document.getElementById("a").value); var b = parseInt(document.getElementById("b").value); if (isNaN(a) == true) a = 0; if (isNaN(b) == true) b = 0; var c = a + b; document.getElementById("result").innerHTML = a + " + " + b + " = " + c; >     id="a" type="text" value="1" /> />  id="b" type="text" value="1" /> />  type="button" value="Сложить 2 два числа" onclick="addition();" /> />   id="result">

Если сохраним файл, запустим его, и нажмем на кнопку, то получим следующее:

Результат выполнения программы

В статье рассказывается как создать приложение сложения двух чисел на HTML + JavaScript.

В статье рассказывается как создать приложение сложения двух чисел на HTML + JavaScript.

Harrix

Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.

Источник

Читайте также:  Добавление записи в таблицу
Оцените статью