Использование условного оператора в JavaScript

Введение

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

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

Создайте HTML-файл для примера с условным оператором

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

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

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conditional Operator Example</title>
  </head>
  <body>
    <h1>JavaScript Conditional Operator Demo</h1>

    <script>
      // JavaScript code will be added here in subsequent steps
    </script>
  </body>
</html>

Этот HTML-файл предоставляет простую структуру с тегом <script>, где вы будете писать код на JavaScript, чтобы продемонстрировать условный оператор. Тег <script> позволяет встраивать JavaScript непосредственно в документ HTML.

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

JavaScript Conditional Operator Demo

Убедитесь, что файл сохранен в каталоге ~/project. В следующих шагах вы добавите код на JavaScript, чтобы изучить функциональность условного оператора.

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

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

<script>
  // Define variables for comparison
  let age = 20;
  let isStudent = true;
  let country = "USA";
</script>

Разберём переменные:

age - это число, представляющее возраст человека
isStudent - это логическое значение, указывающее статус студента
country - это строка, представляющая страну человека

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

Пример вывода значений переменных:

age: 20
isStudent: true
country: "USA"

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

Реализуйте логику условного оператора

В этом шаге вы узнаете, как использовать условный (тернарный) оператор для реализации простой логики на основе переменных, определённых ранее. Условный оператор позволяет записать if-else выражения в одну строку кратко.

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

<script>
  // Previously defined variables
  let age = 20;
  let isStudent = true;
  let country = "USA";

  // Conditional operator examples
  let canVote = age >= 18 ? "Eligible to vote" : "Not eligible to vote";

  let studentStatus = isStudent
    ? "Student discount applies"
    : "No student discount";

  let travelMessage =
    country === "USA" ? "Domestic travel" : "International travel";
</script>

Рассмотрим синтаксис условного оператора:

условие? значение_если_истина : значение_если_ложь
В первом примере проверяется, достиг ли человек 18 лет или старше
Во втором примере проверяется статус студента
В третьем примере проверяется страна для определения типа поездки

Пример вывода результатов работы условного оператора:

canVote: "Eligible to vote"
studentStatus: "Student discount applies"
travelMessage: "Domestic travel"

Условный оператор позволяет компактно принимать решения и назначать значения в зависимости от условий. Это более краткий вариант по сравнению с традиционными if-else выражениями.

Выведите результат с использованием document.write

В этом шаге вы узнаете, как отображать результаты работы условного оператора с использованием document.write(). Этот метод позволяет выводить текст непосредственно в документ HTML.

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

<script>
  // Previously defined variables and conditional operators
  let age = 20;
  let isStudent = true;
  let country = "USA";

  let canVote = age >= 18 ? "Eligible to vote" : "Not eligible to vote";
  let studentStatus = isStudent
    ? "Student discount applies"
    : "No student discount";
  let travelMessage =
    country === "USA" ? "Domestic travel" : "International travel";

  // Display results using document.write()
  document.write("<h2>Conditional Operator Results</h2>");
  document.write("<p>Voting Status: " + canVote + "</p>");
  document.write("<p>Student Discount: " + studentStatus + "</p>");
  document.write("<p>Travel Type: " + travelMessage + "</p>");
</script>

При открытии этого HTML-файла в веб-браузере вы увидите результаты, отображающиеся на странице. Метод document.write() позволяет выводить HTML-контент непосредственно.

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

Conditional Operator Results
Voting Status: Eligible to vote
Student Discount: Student discount applies
Travel Type: Domestic travel

Примечание: Хотя document.write() прост в использовании, в реальных приложениях обычно рекомендуется использовать более современные методы, такие как innerHTML или textContent.

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

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

<script>
  // Basic conditional operator syntax
  // condition? expression_if_true : expression_if_false

  // Example 1: Simple comparison
  let age = 20;
  let canDrive = age >= 16 ? "Can drive" : "Cannot drive";

  // Example 2: Nested conditional operator
  let score = 75;
  let grade =
    score >= 90
      ? "A"
      : score >= 80
        ? "B"
        : score >= 70
          ? "C"
          : score >= 60
            ? "D"
            : "F";

  // Example 3: Conditional operator with function calls
  function isEven(num) {
    return num % 2 === 0;
  }
  let number = 10;
  let evenOddMessage = isEven(number) ? "Even number" : "Odd number";

  // Display results
  document.write("<h2>Conditional Operator Syntax Examples</h2>");
  document.write("<p>Driving Eligibility: " + canDrive + "</p>");
  document.write("<p>Grade: " + grade + "</p>");
  document.write("<p>Number Type: " + evenOddMessage + "</p>");
</script>

Основные моменты о синтаксисе условного оператора:

Базовый формат: условие? значение_если_истина : значение_если_ложь
Может быть вложенным для нескольких условий
Может включать вызовы функций или сложные выражения
Предоставляет компактный альтернативный вариант для if-else выражений

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

Conditional Operator Syntax Examples
Driving Eligibility: Can drive
Grade: C
Number Type: Even number

Резюме

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