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

Необходимые условия: Базовая компьютерная грамотность, базовое понимание 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, обрабатывать вы их будете точно так же.

It's all numbers to me

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

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

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

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

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

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

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

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

Примечание: Иногда числа участвующие в математических операциях называют операндами ( 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.

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

Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента (++) и декремента (--). Мы использовали ++ в нашей игре "Угадай число" в статье first splash into 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.

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

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

  • Поменяйте строчку с размером 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 мы писали в прошлой статье. С их помощью мы можем принимать решения в нашей программе, например:

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

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

<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.';
  }
}

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

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

Заметка: контроль за объектом, при которым мы переводим его между двумя состояниями, называется переключателем (a toggle). Он переводит одно состояние в другое — свет включен, свет выключен и так далее.

Итого

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

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

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

Метки документа и участники

Внесли вклад в эту страницу: BerezkinBerezkin, y2k, Froris, AndrewSamofalov, FIJN
Обновлялась последний раз: BerezkinBerezkin,