Условные операторы JavaScript: освойте управление потоком

Введение

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

Мы рассмотрим следующие ключевые концепции:

Оператор if для выполнения кода, когда условие истинно.
Конструкция else для предоставления альтернативного пути.
Оператор else if для проверки нескольких условий.
Разница между операторами нестрогого равенства (==) и строгого равенства (===).

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

Напишите оператор if с сравнением

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

Базовый синтаксис выглядит следующим образом:

if (condition) {
  // код, который будет выполнен, если условие истинно
}

Мы создадим скрипт, который отображает приветствие в зависимости от времени суток. Сначала проверим, утро ли.

В проводнике файлов слева от WebIDE найдите и откройте файл script.js.
Добавьте следующий код в script.js. Этот код получает текущий час из системы, и если час меньше 12, он изменяет текст элемента <h1> на нашей HTML-странице.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
}

После добавления кода сохраните файл (можно использовать Ctrl+S или Cmd+S).
Чтобы увидеть результат, нажмите на вкладку Web 8080 в верхней части интерфейса. Если текущее время до полудня, вы увидите сообщение "Good Morning!". В противном случае сообщение останется "Hello!".

Пример оператора if в JavaScript

Добавьте блок else для альтернативного пути

В этом шаге вы добавите конструкцию else к вашему оператору if. Конструкция else позволяет указать блок кода, который будет выполнен, если условие в операторе if является false. Это предоставляет альтернативный путь для логики вашей программы.

Синтаксис выглядит следующим образом:

if (condition) {
  // код, который будет выполнен, если условие истинно
} else {
  // код, который будет выполнен, если условие ложно
}

Давайте модифицируем наш скрипт, чтобы отображать другое приветствие, если сейчас не утро.

Снова откройте файл script.js в редакторе.
Измените существующий код, чтобы включить блок else. Это установит приветствие "Good Afternoon!", если условие currentHour < 12 ложно.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else {
  greetingElement.textContent = "Good Afternoon!";
}

Сохраните файл script.js.
Переключитесь на вкладку Web 8080, чтобы увидеть изменения. Теперь, если время после полудня, сообщение изменится с "Hello!" на "Good Afternoon!".

Используйте else if для нескольких условий

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

Синтаксис выглядит следующим образом:

if (condition1) {
  // код для condition1
} else if (condition2) {
  // код для condition2
} else {
  // код, если ни одно из условий не выполнено
}

Давайте расширим наш скрипт приветствия, чтобы включить сообщение для вечера. Мы определим "день" как время до 18:00, а "вечер" — как любое время после этого.

В файле script.js обновите код, чтобы включить условие else if. Логика теперь будет следующей:
- Если час до 12, то "Утро".
- Иначе, если час до 18, то "День".
- Иначе, это "Вечер".

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else if (currentHour < 18) {
  greetingElement.textContent = "Good Afternoon!";
} else {
  greetingElement.textContent = "Good Evening!";
}

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

Примените оператор равенства == в условии

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

Например, число 10 и строка '10' считаются равными при использовании ==.

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

Добавьте следующий код в конец файла script.js.

let numberValue = 10;
let stringValue = "10";

if (numberValue == stringValue) {
  console.log("The == operator says they are equal!");
}

Сохраните файл. Чтобы увидеть вывод, вам нужно открыть консоль разработчика.
На вкладке Web 8080 щелкните правой кнопкой мыши в любом месте страницы и выберите "Inspect" (Проверить) или "Inspect Element" (Проверить элемент). Это откроет инструменты разработчика.
Нажмите на вкладку "Console" (Консоль) в инструментах разработчика. Вы должны увидеть сообщение: The == operator says they are equal!. Это подтверждает, что JavaScript преобразовал типы перед сравнением.

Протестируйте строгое равенство с оператором ===

На этом заключительном шаге вы узнаете о строгом операторе равенства ===. В отличие от нестрогого оператора равенства (==), строгий оператор равенства сравнивает как значение, так и тип операндов. Он не выполняет преобразование типов.

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

Давайте изменим пример из предыдущего шага, чтобы использовать ===, и понаблюдаем за разницей.

Добавьте следующий новый блок кода в конец файла script.js.

let numberValueStrict = 10;
let stringValueStrict = "10";

if (numberValueStrict === stringValueStrict) {
  console.log("The === operator says they are equal!");
} else {
  console.log(
    "The === operator says they are NOT equal, because their types are different."
  );
}

Сохраните файл и снова посмотрите в консоль разработчика на вкладке Web 8080. Возможно, вам потребуется обновить страницу.
На этот раз вы увидите сообщение: The === operator says they are NOT equal, because their types are different.. Это связано с тем, что numberValueStrict имеет тип number (число), а stringValueStrict — тип string (строка), и оператор === корректно определяет их как различные.

Консоль разработчика, показывающая результат сравнения строгого равенства

Резюме

Поздравляем с завершением этой лабораторной работы! Вы освоили основы условной логики в JavaScript, что является важнейшим навыком для любого разработчика.

В этой лабораторной работе вы:

Использовали оператор if для выполнения кода на основе одного условия.
Добавили блок else для обработки альтернативного случая.
Реализовали else if для управления несколькими последовательными условиями.
Поняли и применили нестрогий оператор равенства (==), который выполняет преобразование типов.
Поняли и применили строгий оператор равенства (===), который проверяет как значение, так и тип, и является рекомендуемым выбором для большинства сравнений.

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