Как сделать в javascript

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

var myInt = 5; var myFloat = 6.667; myInt; myFloat;

typeof myInt; typeof myFloat;

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

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

Оператор	Имя	Функция	Пример
+	Сложение	Объединение чисел в одно целое.	6 + 9
—	Вычитание	Вычитает правое число от левого.	20 — 15
*	Умножение	Умножает два числа вместе.	3 * 7
/	Деление	Делит левое число на правое.	10 / 5
%	Модуль числа	Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число.	11 % 3 = 2 (поскольку число 3 вмещается три раза, остатком будет число 2)
**	показатель степени	Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016.	5 ** 5 (возвращает 3125, или как: 55555)

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

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

10 + 7; 9 * 8; 60 % 3;

var num1 = 10; var num2 = 50; 9 * num1; num2 / num1;

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

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

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

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

+ 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 , в которой хранилось значение количества попыток пользователя после каждого хода.

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

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

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

var num1 = 4; num1++;

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

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

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
>=	Больше или равно	Проверят, больше ли левое значение левого (или равно ему)	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() . В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определённой строкой — что по сути является тем же самым. Если кнопка при нажатии содержит «Start machine», мы меняем содержимое метки на «Stop machine» и обновляем метку. Если же текст кнопки — «Stop machine», при нажатии мы возвращаем все обратно.

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

Итого

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

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

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

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как сделать взаимодействие javascript?

Можно сделать проверку на пересечение.
У каждого объекта есть координаты и размер, например: [10, 10] координаты, [50, 60] размер.
Проекция объекта на каждую ось -это множество чисел от начальной координаты плюс размер.
Т.е. [10, 60] для оси Икс, и [10, 70] для оси Игрек.

Точка пересекает объект, если её координата Икс принадлежит множеству чисел от 10 до 60, и координата Игрек принадлежит множеству чисел от 10 до 70.

Теперь, когда анимируем объект, после каждого шага устраиваем проверку на пересечение с другими объектами

Кнопка

Рассмотрим пример, как нужно обрабатывать нажатия кнопки в форме с помощью JavaScript.

Создадим простейшую форму.

   На данный момент кнопка ничего не делает. Получим доступ к кнопке.

 var button = getElementById("addButton");

Далее следует создать код, который будет выполняться при нажатии кнопки.

 function handleButtonClick

Осталось подключить созданную функцию к переменной

 button.onclick = handleButtonClick;

  window.onload = init; function init() < var button = document.getElementById("addButton") button.onclick = handleButtonClick; >function handleButtonClick()

При нажатии на кнопку появляется сообщение.

Идём дальше. Мы хотим получить текст, введённый пользователем в текстовом поле. Когда пользователь вводит текст, то у элемента input type=»text» в свойстве value появляется значение, которое и содержит текст пользователя. Таким образом, нам нужно сначала получить доступ к элементу страницы по идентификатору, а затем его свойство.

  var button2 = document.getElementById("addButton2") button2.onclick = handleButtonClick2; function handleButtonClick2()

Теперь выводится сообщение, в котором содержится имя кота. Не помешает небольшая проверка, что текст был введён.

 function handleButtonClick2() < var textInput = document.getElementById("catNameInput2"); var catName = textInput.value; if(catName == "")< alert("Введите имя кота, пожалуйста"); >else < alert("Добавлено новое имя кота! " + catName); >>

Третий шаг — выводить имена котов на самой странице. Мы уже приготовили список ul, к которому тоже можно получить доступ и добавлять дочерние элементы. Для получения доступа используем знакомый метод getElementById(). Для динамического создания нового элемента используется метод document.createElement(). После создания мы можем настроить элемент, например, прописав текст. Для текста элемента списка будем использовать переменную, которая содержит имя кота. Создав новый элемент, его необходимо добавить к родительскому элементу через appendChild().

 function handleButtonClick3() < var textInput = document.getElementById("catNameInput3"); var catName = textInput.value; if(catName == "")< alert("Введите имя кота, пожалуйста"); >else < var ul = document.getElementById("catlist3"); var li = document.createElement("li"); li.innerHTML = catName; ul.appendChild(li); alert("Добавлено новое имя кота! " + catName); >>

Новые способы

В последнее время стали использовать другой код. Например, используют const вместо var, вместо onclick — addEventListener.

Нажми меня

Также вместо getElementById() можно использовать querySelector(). А в addEventListener использовать другой формат вызова функции.

  .button < background-color: #33ae74; transition: background-color 0.5s ease-out; >.button.is-active

Нажми меня

Атрибут onclick

Также можно использовать готовый атрибут у кнопки onclick.

Примеры полезных JS-скриптов

С помощью блока «вставка HTML кода» (T123, категория Другое) на страницу можно добавить абсолютно любой скрипт. Мы собрали примеры кода, который вы можете использовать, чтобы добавить некоторые функции.

о достижении цели при клике на ссылку / кнопку
о клике на кнопку
об открытии попапа
после отправки на приемщик данных Тильды
перед переходом из корзины на сайт платежной системы
который срабатывает на кнопки/ссылки с определённым классом
в Facebook Pixel

Примите во внимание, что ниже приведены образцы кода, которые вам нужно будет модифицировать самостоятельно, и эти действия требуют понимания того, как работает Javascript. К сожалению, мы не осуществляем поддержку по вопросам, связанным с работой стороннего кода.

Перехват различных событий на странице

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

Перехват клика по ссылке

Перехват клика по ссылке в конкретном блоке
Перехватываем клик по ссылке в блоке #rec123456789

где #rec123456789 — номер блока, в который добавится виджет с погодой;
Номер блока можно посмотреть в Настройках блока

Отправка события в Яндекс.Метрику о достижении цели при клике на ссылку/кнопку

Указанный скрипт отслеживает клик по любой ссылке/кнопке, у которой адрес совпадает с «ссылка». Если такой клик произошел, то будет отправлено событие «цель» в метрику.

где XXXXXX — номер вашего счетчика;
Отправка события в Яндекс.Метрику о достижении цели при клике на внешнюю ссылку/кнопку

Указанный скрипт отслеживает клик по любой внешней ссылке/кнопке, у которой адрес совпадает с «ссылка». Если такой клик произошел, то будет отправлено событие «цель» в метрику.

где XXXXXX — номер вашего счетчика;
Пример отправки событий при клике на кнопки

Есть две кнопки, одна ведет на блок с текстом размещенный на этой же странице, а вторая на другую страницу. У первой кнопки прописан якорь на блок #rec12345678, а у второй ссылка на внешнюю страницу http://help-ru.tilda.cc/

где yaCounterXXXXXX — номер вашего счетчика;
Отправка события в Яндекс. Метрику об открытии попапа

Отлавливаем все клики и если, ссылка на которую кликнули, указывает на «#popup. «, то отправляем в метрику событие — просмотр страницы, ведь попап это тоже страница, да и просмотр страницы легче отследить или построить составную цель (например: открытие страницы, открытие попапа, отправка формы)

Чтобы код ниже заработал, его нужно поместить в HTML-блок, который должен быть в самом верху

Отправка события в Яндекс. Метрику о добавлении товара в Корзину

Указанный скрипт отслеживает клик по кнопке добавления в Корзину. Если такой клик произошел, то будет отправлена цель «AddToCart» в метрику.

где yaCounterXXXXXX — номер счетчика;
AddToCart — произвольное имя цели в Яндекс.Метрике;
Отправка информации в Google Analytics о клике на ссылку / кнопку

Скрипт отслеживает клик по любой ссылке/кнопке, в адресе которой содержится «значение в url». Если такой клик произошел, то будет отправлена информация о клике. Ниже образец кода. Значения, которые нужно заменить выделены прописными.

ЗНАЧЕНИЕ В URL — здесь нужно поставить любое слово, которое есть в ссылке. Например, при клике на кнопку, посетитель попадает на страницу регистрации по адресу: http://mysite.com/registration. В этом случае вместо ЗНАЧЕНИЕ В URL укажите registration.

НАЗВАНИЕ ВИРТУАЛЬНОЙ СТРАНИЦЫ. Информация о клике на кнопке в Google Analitycs появится в виде статистики просмотра виртуальной страницы. Страница виртуальная, поэтому здесь может быть что угодно.

ССЫЛКА — ссылка, которая стоит на кнопке. Например, http://mysite.com/registration

Чтобы отслеживать клик на кнопку, как достижение цели, создайте в Google Analitycs цель: Собственная цель → Целевая страница → Начинается с /click/

Отправка формы на свой ресурс после отправки на приемщик данных Тильды

Проходим все формы и прописываем в них название функции, которую форма сама вызовет после успешной отправки данных

Отправка данных из формы Zero блока на свой ресурс

Выполнение своей функции перед переходом из корзины на сайт платежной системы

Если нам нужно, добавить в cookie информацию о содержимом корзины, или отправить события типа ecommerce в GA или Метрику, то используя вышеуказанный скрипт это можно сделать. Скрипт вызывается прямо перед переходом к платежной системе или вызова виджета оплаты.

Сторонний сервис, который срабатывает на кнопки/ссылки с определённым классом

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

Запуск разных виджетов для мобильных и десктопных клиентов

Иногда нужно вставить громоздкий виджет для десктопа, при этом небольшой виджет для мобильного варианта. Для этого нам на помощь придет переменная window.isMobile

Пример вставки смешанного виджета
Вместо условия window.isMobile можно использовать размеры экрана, например, window.innerWidth < 960

  Bnovo

Как сделать меню в Zero блоке

Данная опция появилась теперь встроена в редактор Zero Block. Чтобы включить фиксирование блока, перейдите в настройки артборда → Position and Overflow и поставьте значение Fixed. Подробнее о настройках фиксации →

Запрет автоматической передачи данных о лидах в Facebook Pixel

Если установить Facebook Pixel, то на странице появится объект fbq, который при отправке формы в Facebook отправляет событие Lead. Если требуется собственная настройка пикселя Facebook, запретить это поведение можно с помощью кода:

Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.

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