Изучите логические операторы в JavaScript

Введение

В этом лабе участники будут изучать фундаментальные логические операторы в JavaScript с помощью практического упражнения по веб-разработке. Лаб-руководство помогает ученикам создать HTML-файл и реализовать практические демонстрации логических операторов AND (&&), OR (||) и NOT (!), обеспечивая полное понимание того, как эти операторы работают в JavaScript-программировании.

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

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

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

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

Вот начальная HTML-структура, которую вы будете использовать:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
  </head>
  <body>
    <h1>Exploring Logical Operators in JavaScript</h1>

    <div id="output"></div>

    <script>
      // We'll add our JavaScript logical operator examples here
    </script>
  </body>
</html>

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

Объявление <!DOCTYPE html> указывает, что это документ HTML5
Мы добавили заголовок и заголовок первого уровня, чтобы описать страницу
<div id="output"> будет использоваться для отображения результатов наших логических операторов
Теги <script> — это место, где мы будем писать код JavaScript

Пример вывода при открытии этого файла в браузере:

Exploring Logical Operators in JavaScript

Реализуйте логическую операцию AND (&&)

В этом шаге вы узнаете о логическом операторе AND (&&) в JavaScript. Оператор AND возвращает true только тогда, когда оба операнда истинны, в противном случае возвращает false.

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

// AND (&&) Logical Operator Demonstration
function demonstrateAndOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean AND
  let isAdult = true;
  let hasLicense = true;
  let canDrive = isAdult && hasLicense;
  output.innerHTML += `Can drive? ${canDrive}<br>`;

  // Example 2: Comparison AND
  let age = 25;
  let hasValidLicense = age >= 18 && age <= 65;
  output.innerHTML += `Valid driving age? ${hasValidLicense}<br>`;

  // Example 3: Multiple conditions
  let isMember = true;
  let hasDiscount = true;
  let canGetSpecialOffer = isMember && hasDiscount;
  output.innerHTML += `Special offer available? ${canGetSpecialOffer}<br>`;
}

// Call the function when the page loads
demonstrateAndOperator();

Разберём оператор AND (&&):

Он возвращает true только если обе условия истинны
В первом примере canDrive истинно только если и isAdult, и hasLicense истинны
Второй пример использует операторы сравнения с AND
Третий пример показывает, как AND может комбинировать несколько булевых условий

Пример вывода в браузере:

Can drive? true
Valid driving age? true
Special offer available? true

Реализуйте логическую операцию OR (||)

В этом шаге вы узнаете о логическом операторе OR (||) в JavaScript. Оператор OR возвращает true, если хотя бы один из операндов истинен, в противном случае возвращает false.

Откройте файл logical-operators.html и добавьте новую функцию для демонстрации оператора OR внутри тега <script>:

// OR (||) Logical Operator Demonstration
function demonstrateOrOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean OR
  let isWeekend = false;
  let isHoliday = true;
  let canRelax = isWeekend || isHoliday;
  output.innerHTML += `Can relax? ${canRelax}<br>`;

  // Example 2: Comparison OR
  let age = 16;
  let hasParentalConsent = true;
  let canAttendEvent = age >= 18 || hasParentalConsent;
  output.innerHTML += `Can attend event? ${canAttendEvent}<br>`;

  // Example 3: Multiple conditions
  let hasCoupon = false;
  let isNewCustomer = true;
  let canGetDiscount = hasCoupon || isNewCustomer;
  output.innerHTML += `Eligible for discount? ${canGetDiscount}<br>`;
}

// Call the function when the page loads
demonstrateOrOperator();

Разберём оператор OR (||):

Он возвращает true, если хотя бы одно условие истинно
В первом примере canRelax истинно, потому что isHoliday истинно
Второй пример показывает, как OR может использоваться с операторами сравнения и булевыми условиями
Третий пример демонстрирует комбинирование нескольких условий

Пример вывода в браузере:

Can relax? true
Can attend event? true
Eligible for discount? true

Реализуйте логическую операцию NOT (!)

В этом шаге вы узнаете о логическом операторе NOT (!) в JavaScript. Оператор NOT инвертирует булево значение выражения, превращая true в false и false в true.

Откройте файл logical-operators.html и добавьте новую функцию для демонстрации оператора NOT внутри тега <script>:

// NOT (!) Logical Operator Demonstration
function demonstrateNotOperator() {
  let output = document.getElementById("output");

  // Example 1: Basic NOT operation
  let isRaining = false;
  let isSunny = !isRaining;
  output.innerHTML += `Is it sunny? ${isSunny}<br>`;

  // Example 2: NOT with comparison
  let age = 16;
  let isAdult = !(age < 18);
  output.innerHTML += `Is an adult? ${isAdult}<br>`;

  // Example 3: Negating a complex condition
  let hasTicket = true;
  let isCrowded = true;
  let canEnter = !(hasTicket && isCrowded);
  output.innerHTML += `Can enter? ${canEnter}<br>`;
}

// Call the function when the page loads
demonstrateNotOperator();

Разберём оператор NOT (!):

Он изменяет на противоположное булево значение выражения
В первом примере isSunny становится true, потому что isRaining равно false
Второй пример показывает применение NOT с оператором сравнения
Третий пример демонстрирует применение NOT к более сложному условию

Пример вывода в браузере:

Is it sunny? true
Is an adult? false
Can enter? false

Отобразите результаты логических операций на веб-странице

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

Обновите файл logical-operators.html следующим полным кодом:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .result {
        margin: 10px 0;
        padding: 10px;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript Logical Operators Exploration</h1>

    <div id="andResults" class="result">
      <h2>AND (&&) Operator Results</h2>
    </div>

    <div id="orResults" class="result">
      <h2>OR (||) Operator Results</h2>
    </div>

    <div id="notResults" class="result">
      <h2>NOT (!) Operator Results</h2>
    </div>

    <script>
      // Function to display results
      function displayResult(elementId, message) {
        const element = document.getElementById(elementId);
        const resultLine = document.createElement("p");
        resultLine.textContent = message;
        element.appendChild(resultLine);
      }

      // AND (&&) Operator Demonstration
      function demonstrateAndOperator() {
        let isAdult = true;
        let hasLicense = true;
        let canDrive = isAdult && hasLicense;
        displayResult("andResults", `Can drive? ${canDrive}`);

        let age = 25;
        let hasValidLicense = age >= 18 && age <= 65;
        displayResult("andResults", `Valid driving age? ${hasValidLicense}`);
      }

      // OR (||) Operator Demonstration
      function demonstrateOrOperator() {
        let isWeekend = false;
        let isHoliday = true;
        let canRelax = isWeekend || isHoliday;
        displayResult("orResults", `Can relax? ${canRelax}`);

        let age = 16;
        let hasParentalConsent = true;
        let canAttendEvent = age >= 18 || hasParentalConsent;
        displayResult("orResults", `Can attend event? ${canAttendEvent}`);
      }

      // NOT (!) Operator Demonstration
      function demonstrateNotOperator() {
        let isRaining = false;
        let isSunny = !isRaining;
        displayResult("notResults", `Is it sunny? ${isSunny}`);

        let age = 16;
        let isAdult = !(age < 18);
        displayResult("notResults", `Is an adult? ${isAdult}`);
      }

      // Run all demonstrations when page loads
      function runAllDemonstrations() {
        demonstrateAndOperator();
        demonstrateOrOperator();
        demonstrateNotOperator();
      }

      // Call the main function when the page loads
      window.onload = runAllDemonstrations;
    </script>
  </body>
</html>

Основные улучшения в этой версии:

Добавлены стилизованные разделы результатов для каждого логического оператора
Созданная функция displayResult() для отображения результатов
Реализована функция runAllDemonstrations() для выполнения всех демонстраций операторов
Добавлены базовые стили CSS для улучшения читаемости
Использован window.onload, чтобы гарантировать, что все скрипты будут выполнены после загрузки страницы

Пример вывода в браузере покажет результаты операторов AND, OR и NOT в отдельных, стилизованных разделах.

Резюме

В этом практическом занятии участники изучали логические операторы JavaScript на примере веб-разработки. Практика началась с создания HTML-файла с специальным div для вывода результатов, что позволило создать структурированную среду для демонстрации логических операций. Участники узнали о логических операторах AND (&&), OR (||) и NOT (!), реализовав на практике примеры, которые показывают, как эти логические операторы оценивают булевы выражения и контролируют ход выполнения программы.

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