Выполнение арифметических операций в JavaScript

Введение

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

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

Настройка HTML-файла для арифметических операций в JavaScript

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

Сначала откройте WebIDE и перейдите в каталог ~/project. Создайте новый файл с именем arithmetic.html, щелкнув правой кнопкой мыши в проводнике файлов и выбрав пункт "Новый файл".

Вставьте следующий HTML-код в файл arithmetic.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Arithmetic Operations</title>
  </head>
  <body>
    <h1>JavaScript Arithmetic Operations</h1>

    <script>
      // Здесь в этом разделе мы добавим наш JavaScript-код
      console.log("HTML file is ready for arithmetic operations!");
    </script>
  </body>
</html>

Разберём основные компоненты этого HTML-файла:

<!DOCTYPE html> объявляет, что это документ HTML5
Секция <head> содержит метаданные о документе
В <body> содержится видимый контент
Теги <script> — это место, где мы будем писать наш JavaScript-код

Для проверки того, что файл создан правильно, вы можете открыть файл в консоли разработчика браузера. Первоначальная запись console.log() поможет подтвердить, что файл настроен правильно.

Реализация основных арифметических операторов (+, -, *, /)

В этом шаге вы узнаете, как выполнять основные арифметические операции в JavaScript с использованием основных математических операторов: сложение (+), вычитание (-), умножение (*) и деление (/).

Откройте файл arithmetic.html, созданный на предыдущем шаге, и измените секцию <script> так, чтобы она содержала следующий код:

<script>
  // Оператор сложения (+)
  let sum = 10 + 5;
  console.log("Сложение: 10 + 5 =", sum);

  // Оператор вычитания (-)
  let difference = 20 - 7;
  console.log("Вычитание: 20 - 7 =", difference);

  // Оператор умножения (*)
  let product = 6 * 4;
  console.log("Умножение: 6 * 4 =", product);

  // Оператор деления (/)
  let quotient = 25 / 5;
  console.log("Деление: 25 / 5 =", quotient);
</script>

Когда вы откроете этот HTML-файл в веб-браузере и проверните консоль разработчика браузера, вы увидите следующий пример вывода:

Сложение: 10 + 5 = 15
Вычитание: 20 - 7 = 13
Умножение: 6 * 4 = 24
Деление: 25 / 5 = 5

Основные моменты для понимания:

Оператор + складывает два числа
Оператор - вычитает правый операнд из левого
Оператор * умножает два числа
Оператор / делит левый операнд на правый операнд

Вы также можете выполнять операции с переменными и комбинировать разные типы чисел, включая целые и дробные числа.

Изучить операторы модуля и инкремента/декремента

В этом шаге вы узнаете о двух важных арифметических операторах в JavaScript: операторе модуля (%) и операторах инкремента/декремента (++ и --).

Откройте файл arithmetic.html и обновите секцию <script> следующим кодом:

<script>
  // Оператор модуля (%)
  // Возвращает остаток от деления
  let remainder = 17 % 5;
  console.log("Модуль: 17 % 5 =", remainder);

  // Оператор инкремента (++)
  let x = 10;
  x++; // Увеличивает x на 1
  console.log("Инкремент: x++ =", x);

  // Оператор декремента (--)
  let y = 20;
  y--; // Уменьшает y на 1
  console.log("Декремент: y-- =", y);

  // Больше примеров с оператором модуля
  console.log("Проверка на четность/нечетность: 15 % 2 =", 15 % 2);
  console.log("Проверка на четность/нечетность: 16 % 2 =", 16 % 2);
</script>

Когда вы откроете этот HTML-файл в веб-браузере и проверните консоль разработчика, вы увидите следующий пример вывода:

Модуль: 17 % 5 = 2
Инкремент: x++ = 11
Декремент: y-- = 19
Проверка на четность/нечетность: 15 % 2 = 1
Проверка на четность/нечетность: 16 % 2 = 0

Основные моменты для понимания:

Оператор модуля % возвращает остаток от деления
Вы можете использовать оператор модуля для проверки четности или нечетности числа
Оператор инкремента ++ увеличивает переменную на 1
Оператор декремента -- уменьшает переменную на 1

Оператор модуля особенно полезен для:

Проверки четности/нечетности чисел
Перебора диапазона чисел
Создания шаблонов или распределений

Разобраться с префиксным и постфиксным инкрементом/декрементом

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

Откройте файл arithmetic.html и обновите секцию <script> следующим кодом:

<script>
  // Постфиксный инкремент (x++)
  let a = 5;
  let b = a++;
  console.log("Постфиксный инкремент:");
  console.log("a =", a); // a увеличивается после присвоения значения
  console.log("b =", b); // b получает исходное значение a

  // Префиксный инкремент (++x)
  let x = 5;
  let y = ++x;
  console.log("\nПрефиксный инкремент:");
  console.log("x =", x); // x увеличивается перед присвоением значения
  console.log("y =", y); // y получает увеличенное значение x

  // Аналогичная концепция применяется к операторам декремента
  let p = 10;
  let q = p--;
  console.log("\nПостфиксный декремент:");
  console.log("p =", p); // p уменьшается после присвоения значения
  console.log("q =", q); // q получает исходное значение p

  let m = 10;
  let n = --m;
  console.log("\nПрефиксный декремент:");
  console.log("m =", m); // m уменьшается перед присвоением значения
  console.log("n =", n); // n получает уменьшенное значение m
</script>

Постфиксный инкремент:
a = 6
b = 5

Префиксный инкремент:
x = 6
y = 6

Постфиксный декремент:
p = 9
q = 10

Префиксный декремент:
m = 9
n = 9

Основные моменты для понимания:

Постфиксный x++: Возвращает исходное значение, затем увеличивает
Префиксный ++x: Увеличивает сначала, затем возвращает новое значение
То же правило применяется к операторам декремента x-- и --x
Эта разница имеет значение, когда оператор используется в выражении или присваивании

Практиковать комбинирование арифметических операций

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

Откройте файл arithmetic.html и обновите секцию <script> следующим кодом:

<script>
  // Комбинирование нескольких арифметических операций
  let result1 = 10 + 5 * 2;
  console.log("Результат 1 (10 + 5 * 2):", result1);

  // Использование скобок для изменения порядка операций
  let result2 = (10 + 5) * 2;
  console.log("Результат 2 ((10 + 5) * 2):", result2);

  // Сложное вычисление с несколькими операторами
  let x = 15;
  let y = 7;
  let complexCalc = (x % 4) + y * 2 - x++ / 3;
  console.log("Сложное вычисление:", complexCalc);

  // Комбинирование инкремента/декремента с другими операциями
  let a = 5;
  let b = 3;
  let mixedCalc = ++a + b-- * 2;
  console.log("Смешанное вычисление (++a + b-- * 2):", mixedCalc);
  console.log("a после вычисления:", a);
  console.log("b после вычисления:", b);

  // Практический пример: вычисление среднего значения
  let score1 = 85;
  let score2 = 92;
  let score3 = 78;
  let averageScore = (score1 + score2 + score3) / 3;
  console.log("Средний балл:", averageScore);
</script>

Результат 1 (10 + 5 * 2): 20
Результат 2 ((10 + 5) * 2): 30
Сложное вычисление: 9
Смешанное вычисление (++a + b-- * 2): 11
a после вычисления: 6
b после вычисления: 2
Средний балл: 85

Основные моменты для понимания:

JavaScript следит за стандартным математическим порядком операций (PEMDAS)
Скобки можно использовать для изменения стандартного порядка операций
Вы можете комбинировать разные типы арифметических операторов в одном выражении
Операторы инкремента и декремента можно использовать в более крупных вычислениях
Всегда будьте осторожны с порядком и расположением операторов

Резюме

В этом практическом занятии участники узнали, как создать базовый HTML-файл для арифметических операций в JavaScript и изучить фундаментальные математические вычисления. Практическое занятие помогла участникам создать HTML-документ с встроенной секцией JavaScript, что позволило им практиковать важные арифметические методы с использованием операторов сложения (+), вычитания (-), умножения (*) и деления (/).

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