Изучите операторы сравнения в JavaScript

Введение

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

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

Настройте HTML-файл для операторов сравнения

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

Откройте WebIDE и перейдите в каталог ~/project. Создайте новый файл с именем comparison-operators.html с таким содержанием:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Comparison Operators</title>
  </head>
  <body>
    <h1>Exploring Comparison Operators</h1>
    <p>
      Откройте консоль браузера, чтобы увидеть результаты наших операторов
      сравнения.
    </p>

    <script>
      // Здесь мы добавим примеры наших операторов сравнения
      console.log("HTML file setup complete!");
    </script>
  </body>
</html>

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

Объявление <!DOCTYPE html> гарантирует, что браузер использует стандартный режим.
Мы включили простой тег <script>, где будем писать наш JavaScript-код.
Строка console.log() поможет нам проверить, работает ли файл правильно.

Для просмотра файла обычно нужно открыть его в веб-браузере и проверить консоль разработчика браузера. В нашей среде LabEx мы проверим создание и содержание файла.

Покажите операторы 'больше' и 'меньше'

В этом шаге вы узнаете о операторах сравнения "больше" (>) и "меньше" (<) в JavaScript. Откройте файл comparison-operators.html из предыдущего шага и измените раздел <script>, чтобы изучить эти операторы.

Обновите скрипт следующим кодом:

<script>
  // Оператор "больше" (>)
  console.log("Примеры оператора 'больше':");
  console.log(10 > 5); // true
  console.log(5 > 10); // false
  console.log(5 > 5); // false

  // Оператор "меньше" (<)
  console.log("\nПримеры оператора 'меньше':");
  console.log(5 < 10); // true
  console.log(10 < 5); // false
  console.log(5 < 5); // false

  // Сравнение разных типов
  console.log("\nСравнение разных типов:");
  console.log(5 < "10"); // true (неявное приведение типов)
  console.log(10 > "5"); // true (неявное приведение типов)
</script>

Эти примеры демонстрируют ключевые характеристики операторов "больше" и "меньше":

Когда левое значение больше, > возвращает true
Когда левое значение меньше, > возвращает false
Когда значения равны, оба > и < возвращают false
JavaScript выполняет неявное приведение типов при сравнении разных типов

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

Практикуйте операторы равенства и неравенства

В этом шаге вы изучите операторы равенства (==) и неравенства (!=) в JavaScript. Откройте файл comparison-operators.html и обновите раздел <script> следующим кодом:

<script>
  // Оператор равенства (==)
  console.log("Примеры оператора равенства:");
  console.log(5 == 5); // true
  console.log(5 == "5"); // true (неявное приведение типов)
  console.log(5 == 10); // false

  // Оператор неравенства (!=)
  console.log("\nПримеры оператора неравенства:");
  console.log(5 != 10); // true
  console.log(5 != "5"); // false (неявное приведение типов)
  console.log(5 != 5); // false

  // Сравнение разных типов
  console.log("\nСравнение разных типов:");
  console.log(0 == false); // true (неявное приведение типов)
  console.log(1 == true); // true (неявное приведение типов)
  console.log("" == false); // true (неявное приведение типов)
</script>

Основные моменты о операторах равенства и неравенства:

Оператор == выполняет неявное приведение типов перед сравнением
== возвращает true, если значения совпадают после преобразования типов
Оператор != проверяет, не равны ли значения, также с неявным приведением типов
Неявное приведение типов может привести к неожиданным результатам

Разберитесь с операторами строгого равенства и строгого неравенства

В этом шаге вы узнаете о операторах строгого равенства (===) и строгого неравенства (!==) в JavaScript. Откройте файл comparison-operators.html и обновите раздел <script> следующим кодом:

<script>
  // Оператор строгого равенства (===)
  console.log("Примеры оператора строгого равенства:");
  console.log(5 === 5); // true
  console.log(5 === "5"); // false (без неявного приведения типов)
  console.log(0 === false); // false
  console.log(1 === true); // false

  // Оператор строгого неравенства (!==)
  console.log("\nПримеры оператора строгого неравенства:");
  console.log(5 !== 10); // true
  console.log(5 !== "5"); // true (без неявного приведения типов)
  console.log(0 !== false); // true
  console.log(1 !== true); // true

  // Сравнение с неявным приведением типов и строгая сравнение
  let num = 5;
  let strNum = "5";
  console.log("\nСравнение с == и ===:");
  console.log(num == strNum); // true (неявное приведение типов)
  console.log(num === strNum); // false (строгая сравнение)
</script>

Основные различия между нестрогой и строгой сравнением:

=== проверяет и значение, и тип без неявного приведения типов
!== - это оператор строгого неравенства
Строгые операторы предотвращают неожиданное преобразование типов
Всегда предпочитайте === и !== для более предсказуемых сравнений

Проверьте результаты работы операторов сравнения

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

<script>
  // Сравнение разных типов и сложных сценариев
  console.log("Сложные сценарии сравнения:");

  // Сравнение null и undefined
  console.log(null == undefined); // true (неявное приведение типов)
  console.log(null === undefined); // false (строгая сравнение)

  // Сравнение с NaN
  console.log(NaN == NaN); // false (особый случай)
  console.log(NaN === NaN); // false

  // Сравнение объектов
  let obj1 = { value: 5 };
  let obj2 = { value: 5 };
  let obj3 = obj1;
  console.log("\nСравнение объектов:");
  console.log(obj1 == obj2); // false (разные ссылки)
  console.log(obj1 === obj2); // false (разные ссылки)
  console.log(obj1 === obj3); // true (одинаковая ссылка)

  // Цепные сравнения
  let x = 5;
  console.log("\nЦепные сравнения:");
  console.log(1 < x && x < 10); // true
  console.log(1 < x < 10); // Предупреждение: Это не работает как ожидается!
</script>

Основные выводы из этих экспериментов:

null и undefined ведут себя по-разному при нестрогом и строгом равенстве
NaN никогда не равно самому себе
Сравнение объектов зависит от ссылки, а не от содержимого
Цепные сравнения могут быть запутанными и не работать как ожидается

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

Резюме

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

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