From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../learn/javascript/first_steps/math/index.html | 423 +++++++++++++++++++++ 1 file changed, 423 insertions(+) create mode 100644 files/ru/learn/javascript/first_steps/math/index.html (limited to 'files/ru/learn/javascript/first_steps/math') diff --git a/files/ru/learn/javascript/first_steps/math/index.html b/files/ru/learn/javascript/first_steps/math/index.html new file mode 100644 index 0000000000..29ff9258bf --- /dev/null +++ b/files/ru/learn/javascript/first_steps/math/index.html @@ -0,0 +1,423 @@ +--- +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. +
  2. Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать еще пару переменных, содержащих числа, прежде чем двигаться дальше.
    3. +
  3. Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор {{jsxref("Operators/typeof", "typeof")}}, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведенные ниже строки: + 
    typeof myInt;
+typeof myFloat;
    + В обоих случаях вы должны получить "number" — это все упрощает, чем если бы разные числа имели разные типы данных, и нам приходилось иметь дело с ними по-разному.
    4. +
+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОператорИмяФункцияПример
+СложениеОбъединение чисел в одно целое.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. +
  2. Вы также можете попробовать объявить переменные и присвоить им различные числа. Попробуйте вместо чисел использовать ранее объявленные переменные — переменные будут вести себя точно так же, как значения, которые они хранят. Например: + 
    var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;
    +
    3. +
  3. И напоследок, попробуйте ввести более сложные выражения, например: + 
    5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;
    +
    4. +
+ +

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

+ +

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

+ +

Давайте взглянем на последний пример сверху. Предположим, что 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)
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNamePurposeExampleShortcut 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/Первые_шаги")}}

-- cgit v1.2.3-54-g00ecf