--- title: Базовая математика в JavaScript — числа и операторы slug: Learn/JavaScript/Первые_шаги/Math tags: - JavaScript - Гайд - Математика - Начинающий - Операторы - Руководство - Скриптинг - Статья - кодинг translation_of: Learn/JavaScript/First_steps/Math ---
{{LearnSidebar}}
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}

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

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

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

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

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

Типы чисел

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

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

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

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

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

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

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

  1. Прежде всего, давайте объявим пару переменных и инициализируем их целым числом и числом с плавающей точкой, соответственно, затем введите имена переменных обратно, чтобы проверить, что все в порядке: 
    var myInt = 5;
var myFloat = 6.667;
myInt;
myFloat;
  2. Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать еще пару переменных, содержащих числа, прежде чем двигаться дальше.
  3. Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор {{jsxref("Operators/typeof", "typeof")}}, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведенные ниже строки: 
    typeof myInt;
typeof myFloat;
    В обоих случаях вы должны получить "number" — это все упрощает, чем если бы разные числа имели разные типы данных, и нам приходилось иметь дело с ними по-разному.

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

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

Оператор Имя Функция Пример
+ Сложение Объединение чисел в одно целое. 6 + 9
- Вычитание Вычитает правое число от левого. 20 - 15
* Умножение Умножает два числа вместе. 3 * 7
/ Деление Делит левое число на правое. 10 / 5
% Модуль числа

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

11 % 3 = 2 (поскольку число 3 вмещается три раза, остатком будет число 2)
** показатель степени Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016. 5 ** 5 (возвращает 3125, или как: 5*5*5*5*5)

Примечание: Иногда числа участвующие в математических операциях называют операндами ( {{Glossary("Operand", "operands")}} ).

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

  1. Для начала попробуйте ввести простые примеры, такие как: 
    10 + 7
9 * 8
60 % 3
  2. Вы также можете попробовать объявить переменные и присвоить им различные числа. Попробуйте вместо чисел использовать ранее объявленные переменные — переменные будут вести себя точно так же, как значения, которые они хранят. Например: 
    var num1 = 10;
var num2 = 50;
9 * num1;
num2 / num1;
  3. И напоследок, попробуйте ввести более сложные выражения, например: 
    5 + 10 * 3;
num2 % 9 * num1;
num2 + num1 / 8 + 2;

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

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

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

num2 + num1 / 8 + 2;

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

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

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

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

(num2 + num1) / (8 + 2);

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

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

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

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

guessCount++;

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

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

3++;

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

var num1 = 4;
num1++;

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

num1;

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

var num2 = 6;
num2--;
num2;

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

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

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

var x = 3; // x содержит значение 3
var y = 4; // y содержит значение 4
x = y; // x теперь содержит значение y (x == 4)

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

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;

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

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

var x = 3; // x содержит значение 3
var y = 4; // y содержит значение 4
x *= y; // x содержит значение 12

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

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

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

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

Открыть в новом окне

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

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

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

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

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

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

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

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

<button>Запустить машину</button>
<p>Машина остановлена</p>

var btn = document.querySelector('button');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.textContent === 'Start machine') {
    btn.textContent = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.textContent = 'Start machine';
    txt.textContent = 'The machine id stopped.';
  }
}

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

Открыть в новом окне

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

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

Итого

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

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

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

{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}