path: root/files/ru/learn/javascript/first_steps/math/index.html

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

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

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

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые условия:</th>
   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Ознакомление с основами математики в JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="Все_любят_математику">Все любят математику</h2>

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

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

<h3 id="Типы_чисел">Типы чисел</h3>

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

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

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

<ul>
 <li><strong>Бинарная</strong> — низкоуровневый язык компьютеров; нули и единицы (0 и 1);</li>
 <li><strong>Восьмеричная</strong> — 8-ми разрядная, использует 0–7 в каждом столбце;</li>
 <li><strong>Десятичная</strong> — 10-ти разрядная, использует 0-9 в каждом столбце;</li>
 <li><strong>Шестнадцатеричная</strong> — 16-ти разрядная, используют 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">цвет в CSS</a>.</li>
</ul>

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

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

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

<h3 id="Для_меня_всё_—_числа">Для меня всё — числа</h3>

<p>Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль (<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>), или используйте простую встроенную консоль.</p>

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

<h2 id="Арифметические_операторы">Арифметические операторы</h2>

<p dir="ltr" id="tw-target-text">Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Оператор</th>
   <th scope="col">Имя</th>
   <th scope="col">Функция</th>
   <th scope="col">Пример</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>+</code></td>
   <td>Сложение</td>
   <td>Объединение чисел в одно целое.</td>
   <td><code>6 + 9</code></td>
  </tr>
  <tr>
   <td><code>-</code></td>
   <td>Вычитание</td>
   <td>Вычитает правое число от левого.</td>
   <td><code>20 - 15</code></td>
  </tr>
  <tr>
   <td><code>*</code></td>
   <td>Умножение</td>
   <td>Умножает два числа вместе.</td>
   <td><code>3 * 7</code></td>
  </tr>
  <tr>
   <td><code>/</code></td>
   <td>Деление</td>
   <td>Делит левое число на правое.</td>
   <td><code>10 / 5</code></td>
  </tr>
  <tr>
   <td><code>%</code></td>
   <td>Модуль числа</td>
   <td>
    <p>Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число.</p>
   </td>
   <td>
    <p><code>11 % 3 = 2</code> (поскольку число 3 вмещается три раза, остатком будет число 2)</p>
   </td>
  </tr>
  <tr>
   <td><code>**</code></td>
   <td>показатель степени</td>
   <td>Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016.</td>
   <td><code>5 ** 5</code> (возвращает 3125, или как: 5*5*5*5*5)</td>
  </tr>
 </tbody>
</table>

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

<p dir="ltr" id="tw-target-text">Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведённые ниже примеры в свою консоль (<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.</p>

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

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

<h3 id="Приоритет_операторов">Приоритет операторов</h3>

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

<pre class="brush: js">num2 + num1 / 8 + 2;</pre>

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

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

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

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

<pre class="brush: js">(num2 + num1) / (8 + 2);</pre>

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

<div class="note">
<p><strong>Заметка</strong>: полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p>
</div>

<h2 id="Операторы_инкремента_и_декремента">Операторы инкремента и декремента</h2>

<p>Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента (<code>++</code>) и декремента (<code>--</code>). Мы использовали <code>++</code> в нашей игре "Угадай число" в статье <a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">первое погружение в JavaScript</a>, где мы добавляли 1 к переменной <code>guessCount</code>, в которой хранилось значение количества попыток пользователя после каждого хода.</p>

<pre class="brush: js">guessCount++;</pre>

<div class="note">
<p><strong>Замечание</strong>: инкремент и декремент часто используются в <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">циклах</a>, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придётся в цикле обойти каждую цену и провести необходимые вычисления для учёта налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка - попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.</p>
</div>

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

<pre class="brush: js">3++;</pre>

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

<pre class="brush: js">var num1 = 4;
num1++;</pre>

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

<pre class="brush: js">num1;</pre>

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

<pre class="brush: js">var num2 = 6;
num2--;
num2;</pre>

<div class="note">
<p><strong>Замечание</strong>: вы можете заставить делать это в другом порядке - применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху ещё раз, но в этот раз используйте <code>++num1</code> и <code>--num2</code>. </p>
</div>

<h2 id="Операторы_присваивания">Операторы присваивания</h2>

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

<pre class="brush: js">var x = 3; // x содержит значение 3
var y = 4; // y содержит значение 4
x = y; // x теперь содержит значение y (x == 4)</pre>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Operator</th>
   <th scope="col">Name</th>
   <th scope="col">Purpose</th>
   <th scope="col">Example</th>
   <th scope="col">Shortcut for</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>+=</code></td>
   <td>Присваивание сложения</td>
   <td>Прибавляет значение справа к переменной слева и возвращает новое значение переменной</td>
   <td><code>x = 3;<br>
    x += 4;</code></td>
   <td><code>x = 3;<br>
    x = x + 4;</code></td>
  </tr>
  <tr>
   <td><code>-=</code></td>
   <td>Присваивание вычитания</td>
   <td>Вычитает значение справа из переменной слева и возвращает новое значение переменной</td>
   <td><code>x = 6;<br>
    x -= 3;</code></td>
   <td><code>x = 6;<br>
    x = x - 3;</code></td>
  </tr>
  <tr>
   <td><code>*=</code></td>
   <td>
    <p>Присваивание умножения</p>
   </td>
   <td>Умножает переменную слева на значение справа и возвращает новое значение переменной</td>
   <td><code>x = 2;<br>
    x *= 3;</code></td>
   <td><code>x = 2;<br>
    x = x * 3;</code></td>
  </tr>
  <tr>
   <td><code>/=</code></td>
   <td>Присваивание деления</td>
   <td>Делит переменную слева на значение справа и возвращает новое значение переменной</td>
   <td><code>x = 10;<br>
    x /= 5;</code></td>
   <td><code>x = 10;<br>
    x = x / 5;</code></td>
  </tr>
 </tbody>
</table>

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

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

<pre class="brush: js">var x = 3; // x содержит значение 3
var y = 4; // y содержит значение 4
x *= y; // x содержит значение 12</pre>

<div class="note">
<p><strong>Заметка: есть ещё <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">другие операторы присваивания</a></strong>,<strong> в этой статье перечислены только самые базовые.</strong></p>
</div>

<h2 id="Активное_обучение_меняем_размеры_коробки">Активное обучение: меняем размеры коробки</h2>

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

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

<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Открыть в новом окне</a></strong></p>

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

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

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

<h2 id="Операторы_сравнения">Операторы сравнения</h2>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Оператор</th>
   <th scope="col">Имя</th>
   <th scope="col">Назначение</th>
   <th scope="col">Пример</th>
  </tr>
  <tr>
   <td><code>===</code></td>
   <td>Строгое равенство</td>
   <td>Проверяет левое и правое значения на идентичность</td>
   <td><code>5 === 2 + 4</code></td>
  </tr>
  <tr>
   <td><code>!==</code></td>
   <td>Строгое неравенство</td>
   <td>Проверяет левое и правое значения на <strong>не</strong>идентичность</td>
   <td><code>5 !== 2 + 3</code></td>
  </tr>
  <tr>
   <td><code>&lt;</code></td>
   <td>Меньше</td>
   <td>Проверяет, меньше ли левое значение правого</td>
   <td><code>10 &lt; 6</code></td>
  </tr>
  <tr>
   <td><code>&gt;</code></td>
   <td>Больше</td>
   <td>Проверяет, больше ли левое значение правого</td>
   <td><code>10 &gt; 20</code></td>
  </tr>
  <tr>
   <td>&lt;=</td>
   <td>Меньше или равно</td>
   <td>Проверят, меньше ли левое значение правому (или равно ему)</td>
   <td><code>3 &lt;= 2</code></td>
  </tr>
  <tr>
   <td>&gt;=</td>
   <td>Больше или равно</td>
   <td>Проверят, больше ли левое значение левого (или равно ему)</td>
   <td><code>5 &gt;= 4</code></td>
  </tr>
 </thead>
</table>

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

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

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

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

<pre class="brush: html">&lt;button&gt;Запустить машину&lt;/button&gt;
&lt;p&gt;Машина остановлена&lt;/p&gt;
</pre>

<pre class="brush: 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.';
  }
}</pre>

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

<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Открыть в новом окне</a></strong></p>

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

<div class="note">
<p><strong>Заметка</strong>: Такой элемент управления, который переключается между двумя состояниями, обычно называется <strong>тумблером</strong>. Он переключается между одним состоянием и другим: свет включён, свет выключен и т. д.</p>
</div>

<h2 id="Итого">Итого</h2>

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

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

<div class="note">
<p><strong>Примечание</strong>: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотреть главный раздел JavaScript MDN. Статьи <a href="/ru/docs/Web/JavaScript/Guide/Numbers_and_dates">Числа и даты</a> и <a href="/ru/docs/Web/JavaScript/Reference/Operators">Выражения и операторы</a> - хороший вариант для начала.</p>
</div>

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