Javascript как вывести два числа

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

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

Справка

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

Источник

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

В этой части курса мы обсуждаем математику в JavaScript — как мы можем использовать operators (en-US) и другие функции, чтобы успешно манипулировать числами для выполнения наших задач.

Необходимые условия:	Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цель:	Ознакомление с основами математики в JavaScript.

Все любят математику

Хорошо, может быть, не все. Некоторые из нас любят математику, некоторые из нас ненавидели математику с тех пор, как мы изучали таблицу умножения в школе, а некоторые из нас находятся где-то между ними. Но никто из нас не может отрицать, что математика является фундаментальной частью жизни, и мы не можем обойтись без неё. Это особенно актуально, когда мы учимся программировать на JavaScript (или на любом другом языке, если на то пошло) — большая часть того, что мы делаем, опирается на обработку числовых данных, вычисление новых значений и т.д. Так что не удивительно, что JavaScript имеет полнофункциональный набор математических функций.

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

Типы чисел

В программировании даже скромная система десятичных чисел, которую мы все так хорошо знаем, сложнее, чем вы думаете. Мы используем разные термины для описания различных типов десятичных чисел. Например:

• Целые — это целые числа, такие как: 10, 400, или -5.
• С плавающей точкой(или: с плавающей запятой) — имеют целую и дробную части, например: 12.5 или 56.7786543.
• Doubles — тип чисел с плавающей точкой, которые имеют большую точность, чем стандартные числа с плавающей точкой (что означает, что они точны для большего числа десятичных знаков).

У нас даже есть разные типы числовых систем:

• Бинарная — низкоуровневый язык компьютеров; нули и единицы (0 и 1);
• Восьмеричная — 8-ми разрядная, использует 0–7 в каждом столбце;
• Десятичная — 10-ти разрядная, использует 0-9 в каждом столбце;
• Шестнадцатеричная — 16-ти разрядная, используют 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали цвет в CSS.

Прежде чем взорвётся ваш мозг, остановитесь прямо здесь и сейчас!

Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней столкнётесь.

Во-вторых, в отличие от некоторых других языков программирования, JavaScript имеет только один тип данных для чисел, как вы догадались это Number . Это означает, независимо от типа чисел, с которыми вы работаете в JavaScript, обрабатывать вы их будете точно так же.

Для меня всё — числа

Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль (developer tools JavaScript console), или используйте простую встроенную консоль.

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

Арифметические операторы

Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:

Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число.

11 % 3 = 2 (поскольку число 3 вмещается три раза, остатком будет число 2)

Оператор	Имя	Функция	Пример
+	Сложение	Объединение чисел в одно целое.	6 + 9
—	Вычитание	Вычитает правое число от левого.	20 — 15
*	Умножение	Умножает два числа вместе.	3 * 7
/	Деление	Делит левое число на правое.	10 / 5
%	Модуль числа
**	показатель степени	Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016.	5 ** 5 (возвращает 3125, или как: 5*5*5*5*5)

Примечание: Иногда числа участвующие в математических операциях называют операндами ( operands (en-US) ).

Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведённые ниже примеры в свою консоль (developer tools JavaScript console), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.

Для начала попробуйте ввести простые примеры, такие как:

Некоторые примеры выше могут дать вам не тот результат, которого вы ожидали; приведённый ниже раздел может дать ответ на вопрос о том, почему.

Приоритет операторов

Давайте взглянем на последний пример сверху. Предположим, что num2 содержит значение 50 и num1 содержит значение 10 (как и было обозначено выше):

Будучи человеком, вы, вероятно, прочитаете это как «50 плюс 10 равно 60», затем «8 плюс 2 равно 10», и, наконец, «60 делить на 10 равно 6».

Но браузер видит это по-другому: «10 делить на 8 равно 1.25», затем «50 плюс 1.25 плюс 2 равно 53.25».

Это происходит из-за приоритета операторов — некоторые операторы будут применены перед другими в процесс вычисления суммы (в программировании её называют выражением). Приоритет операторов в JavaScript ничем не отличается от приоритета арифметических операций, который вы изучали в школе — умножение и деление всегда выполняются первыми, затем сложение и вычитание (сумма всегда вычисляется слева направо).

Если вы хотите переопределить порядок выполнения операторов, вы можете окружить парными скобками часть выражения, которая должна быть выполнена первой. Для получения результата 6 вам следует сделать следующее:

Результат этого выражения равен 6.

Примечание: полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: Expressions and operators.

Операторы инкремента и декремента

Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента ( ++ ) и декремента ( — ). Мы использовали ++ в нашей игре «Угадай число» в статье первое погружение в JavaScript, где мы добавляли 1 к переменной guessCount , в которой хранилось значение количества попыток пользователя после каждого хода.

Замечание: инкремент и декремент часто используются в циклах, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придётся в цикле обойти каждую цену и провести необходимые вычисления для учёта налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка — попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.

Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредственно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновлённое число, а не просто вычисляем значение. Следующий пример приведёт к ошибке:

Таким образом, вы можете применить инкремент только к существующим переменным:

Так, вторая странность! Если вы сделаете это, вы получите значение 4 — браузер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применён, узнав значение переменной ещё раз:

То же самое для — : попробуйте пример ниже

Замечание: вы можете заставить делать это в другом порядке — применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху ещё раз, но в этот раз используйте ++num1 и —num2 .

Операторы присваивания

Операторы присваивания — операторы, которые присваивают значение переменным. Мы уже много раз использовали самый простой из них, = , он просто приравнивает значение переменной слева к значению справа:

Однако есть ещё несколько сложных конструкций, которые позволяют делать ваш код более простым и аккуратным. Наиболее часто используемые перечислены ниже:

Operator	Name	Purpose	Example	Shortcut for
+=	Присваивание сложения	Прибавляет значение справа к переменной слева и возвращает новое значение переменной	x = 3; x += 4;	x = 3; x = x + 4;
-=	Присваивание вычитания	Вычитает значение справа из переменной слева и возвращает новое значение переменной	x = 6; x -= 3;	x = 6; x = x — 3;
*=	Умножает переменную слева на значение справа и возвращает новое значение переменной	x = 2; x *= 3;	x = 2; x = x * 3;
/=	Присваивание деления	Делит переменную слева на значение справа и возвращает новое значение переменной	x = 10; x /= 5;	x = 10; x = x / 5;

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

Заметьте, что значение справа может быть как числом (константой), так и переменной, например:

Примечание: есть ещё другие операторы присваивания, в этой статье перечислены только самые базовые.

Активное обучение: меняем размеры коробки

В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое называется Canvas API. Вам не следует беспокоиться о том, как это работает — просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными x и y , которые изначально равны 50.

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

• Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причём 50 должно быть вычислено с помощью чисел 43 и 7 и арифметического оператора.
• Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причём 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.
• Поменяйте строчку с размером y так, чтобы коробка была высотой 250, при этом 250 вычислено с помощью двух чисел и оператором взятия остатка (модуль).
• Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причём 150 вычислено с помощью трёх чисел и операторов вычитания и деления.
• Поменяйте строчку с размером x так, чтобы коробка была шириной 200px, при этом 200 вычислено с помощью числа 4 и оператора присваивания.
• Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причём 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.

Не расстраивайтесь, если вы не поняли код сверху. Нажмите кнопку Reset для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом ещё (или, например, предложить друзьям несколько заданий).

Операторы сравнения

Иногда нам может понадобиться проверить какое-либо условие, а затем поступить в зависимости от результата — для этого мы используем операторы сравнения.

Оператор	Имя	Назначение	Пример
===	Строгое равенство	Проверяет левое и правое значения на идентичность	5 === 2 + 4
!==	Строгое неравенство	Проверяет левое и правое значения на неидентичность	5 !== 2 + 3
Меньше	Проверяет, меньше ли левое значение правого	10
>	Больше	Проверяет, больше ли левое значение правого	10 > 20
3
>=	Больше или равно	Проверят, больше ли левое значение левого (или равно ему)	5 >= 4

Примечание: вы можете заметить, что некоторые люди используют == и != в их программах для сравнения на равенство и неравенство — это валидные JavaScript-операторы, но они отличаются от === / !== — первая пара проверяет на равенство/неравенство значений, не рассматривая их типы. Вторая пара — строгая версия первой, которая проверяет типы операндов. При использовании строгой версии выявляется больше ошибок, поэтому мы рекомендуем использовать именно её.

Если вы попробуете использовать эти операторы в консоли, вы увидите, что все они возвращают значения true / false — о типе данных boolean мы писали в прошлой статье. С их помощью мы можем принимать решения в нашей программе, например:

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

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

Мы использовали оператор равенства внутри функции updateBtn() . В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определённой строкой — что по сути является тем же самым. Если кнопка при нажатии содержит «Start machine», мы меняем содержимое метки на «Stop machine» и обновляем метку. Если же текст кнопки — «Stop machine», при нажатии мы возвращаем все обратно.

Примечание: Такой элемент управления, который переключается между двумя состояниями, обычно называется тумблером. Он переключается между одним состоянием и другим: свет включён, свет выключен и т. д.

Итого

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

В следующей статье мы изучим текст и то, как мы работаем с ним в JavaScript.

Примечание: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотреть главный раздел JavaScript MDN. Статьи Числа и даты и Выражения и операторы — хороший вариант для начала.

Источник