Базовая математика в 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), или используйте простую встроенную консоль.

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

```js
var myInt = 5;
var myFloat = 6.667;
myInt;
myFloat;
```

2. Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать ещё пару переменных, содержащих числа, прежде чем двигаться дальше.
3. Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор `typeof`, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведённые ниже строки:

```js
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) |

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

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

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

```js
10 + 7;
9 \* 8;
60 % 3;
```

2. Вы также можете попробовать объявить переменные и присвоить им различные числа. Попробуйте вместо чисел использовать ранее объявленные переменные — переменные будут вести себя точно так же, как значения, которые они хранят. Например:

```js
var num1 = 10;
var num2 = 50;
9 \* num1;
num2 / num1;
```

3. И напоследок, попробуйте ввести более сложные выражения, например:

```js
5 + 10 \* 3;
(num2 % 9) \* num1;
num2 + num1 / 8 + 2;
```


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

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

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


```js
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 вам следует сделать следующее:


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


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

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

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

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


```js
guessCount++;
```


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

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


```js
3++;
```


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


```js
var num1 = 4;
num1++;
```


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


```js
num1;
```


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


```js
var num2 = 6;
num2--;
num2;
```


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

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

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


```js
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;` |

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

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


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


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

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

В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью 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 < 6` |
| `>` | Больше | Проверяет, больше ли левое значение правого | `10 > 20` |
| <= | Меньше или равно | Проверят, меньше ли левое значение правому (или равно ему) | `3 <= 2` |
| >= | Больше или равно | Проверят, больше ли левое значение левого (или равно ему) | `5 >= 4` |

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

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

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

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


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



```js
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.";
  }
}
```


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

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

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

Итого
-----

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

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

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

* Назад
* Обзор: Первые шаги
* Далее