💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал
В этом лабе участники углубятся в мир условного ветвления в JavaScript, изучая различные методы принятия решений и управления потоком программы. Лаб涵盖了诸如单分支if语句、if...else逻辑、多条件语句和switch语句等基本概念，提供了不同条件结构的实践经验。
通过实际的编码练习，学习者将熟练掌握实现条件逻辑、比较不同分支技术，并理解如何为特定的编程场景选择最合适的方法。通过逐步处理涉及年龄验证、成绩评估和案例处理的示例，参与者将在JavaScript的条件编程能力方面打下坚实的基础。
В этом шаге вы узнаете о базовом однострочном операторе if в JavaScript, который позволяет выполнять код в зависимости от определенного условия.
Сначала создадим файл JavaScript, чтобы изучить однострочный оператор if. Откройте WebIDE и создайте новый файл под названием conditional-basics.js в каталоге ~/project.
// Создайте простой пример проверки возраста
let age = 18;
// Однострочный оператор if
if (age >= 18) {
console.log("You are eligible to vote!");
}В этом примере оператор if проверяет, является ли age больше или равно 18. Если условие истинно, блок кода внутри фигурных скобок {} будет выполнен.
Запустим скрипт, чтобы увидеть результат:
node ~/project/conditional-basics.jsПример вывода:
You are eligible to vote!Теперь попробуем другой пример, чтобы показать, как работает оператор if, когда условие ложно:
// Измените предыдущий файл
let temperature = 15;
if (temperature < 10) {
console.log("It's cold outside. Wear a jacket!");
}В этом случае, так как температура равна 15 (что не меньше 10), ничего не будет напечатано при запуске скрипта.
В этом шаге вы узнаете о условной логике if...else в JavaScript, которая позволяет выполнять разные блоки кода в зависимости от того, истинно ли условие или ложно.
Откройте WebIDE и создайте новый файл под названием conditional-else.js в каталоге ~/project. Создадим простой пример, демонстрирующий, как работает if...else:
// Создайте простой пример оценки успеваемости
let score = 75;
if (score >= 60) {
console.log("Congratulations! You passed the exam.");
} else {
console.log("Sorry, you did not pass the exam.");
}В этом примере оператор if...else проверяет, больше или равен ли score 60. Если условие истинно, выводится сообщение о том, что экзамен сдан. В противном случае выводится сообщение о неуспехе.
Запустим скрипт, чтобы увидеть результат:
node ~/project/conditional-else.jsПример вывода:
Congratulations! You passed the exam.Теперь изменим скрипт, чтобы показать часть else, изменив значение score:
// Измените предыдущий файл
let score = 45;
if (score >= 60) {
console.log("Congratulations! You passed the exam.");
} else {
console.log("Sorry, you did not pass the exam.");
}При запуске этого скрипта вы увидите другой результат:
Пример вывода:
Sorry, you did not pass the exam.Создадим еще один пример, чтобы показать, как можно использовать if...else с разными типами условий:
// Добавьте еще один пример в файл
let isRaining = true;
if (isRaining) {
console.log("Take an umbrella with you.");
} else {
console.log("Enjoy the sunny day!");
}Этот пример показывает, как if...else может работать с булевыми условиями.
В этом шаге вы узнаете, как использовать несколько условий с операторами if...else if...else в JavaScript для обработки более сложных сценариев принятия решений.
Откройте WebIDE и создайте новый файл под названием multi-condition.js в каталоге ~/project:
// Создайте пример классификации оценок
let score = 85;
if (score >= 90) {
console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
console.log("Great job! You got a B grade.");
} else if (score >= 70) {
console.log("Good work! You got a C grade.");
} else if (score >= 60) {
console.log("You passed. You got a D grade.");
} else {
console.log("Sorry, you failed the exam.");
}В этом примере оператор if...else if...else последовательно проверяет несколько условий. Первое условие, которое оценивается как истинное, будет иметь свой блок кода выполненным, а остальные условия будут пропущены.
Запустим скрипт, чтобы увидеть результат:
node ~/project/multi-condition.jsПример вывода:
Great job! You got a B grade.Теперь изменим значение score, чтобы увидеть, как работают разные условия:
// Попробуйте разные сценарии оценок
let score = 55;
if (score >= 90) {
console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
console.log("Great job! You got a B grade.");
} else if (score >= 70) {
console.log("Good work! You got a C grade.");
} else if (score >= 60) {
console.log("You passed. You got a D grade.");
} else {
console.log("Sorry, you failed the exam.");
}При запуске этого скрипта вы увидите другой результат:
Пример вывода:
Sorry, you failed the exam.Создадим еще один пример, чтобы показать логику с несколькими условиями для другого сценария:
// Пример условия погоды
let temperature = 25;
if (temperature > 30) {
console.log("It's very hot outside.");
} else if (temperature > 20) {
console.log("The weather is warm and pleasant.");
} else if (temperature > 10) {
console.log("It's a bit cool today.");
} else {
console.log("It's cold outside.");
}Этот пример показывает, как можно использовать if...else if...else для обработки нескольких условий с разными результатами.
В этом шаге вы узнаете о операторе switch в JavaScript, который представляет собой альтернативный способ обработки нескольких условий для одной переменной.
Откройте WebIDE и создайте новый файл под названием switch-statement.js в каталоге ~/project:
// Создайте пример дня недели с использованием оператора switch
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
case 4:
console.log("Thursday");
break;
case 5:
console.log("Friday");
break;
case 6:
console.log("Saturday");
break;
case 7:
console.log("Sunday");
break;
default:
console.log("Invalid day");
}В этом примере оператор switch проверяет значение day. Каждый case представляет собой конкретное значение, и соответствующий блок кода выполняется, когда значение совпадает. Строка break предотвращает переход к следующему case.
Запустим скрипт, чтобы увидеть результат:
node ~/project/switch-statement.jsПример вывода:
WednesdayТеперь создадим еще один пример, чтобы показать default-случай:
// Классификация оценок с использованием оператора switch
let grade = "B";
switch (grade) {
case "A":
console.log("Excellent performance!");
break;
case "B":
console.log("Good job!");
break;
case "C":
console.log("Satisfactory performance.");
break;
case "D":
console.log("Needs improvement.");
break;
default:
console.log("Invalid grade.");
}При запуске этого скрипта вы увидите:
Пример вывода:
Good job!Покажем, как несколько case могут использовать один и тот же блок кода:
// Определение выходных дней с использованием оператора switch
let day = 6;
switch (day) {
case 6:
case 7:
console.log("It's the weekend!");
break;
default:
console.log("It's a weekday.");
}Этот пример показывает, как можно обрабатывать несколько case с одной и той же операцией.
В этом шаге вы узнаете о ключевых различиях между операторами if и switch и поймете, когда использовать каждый подход.
Откройте WebIDE и создайте новый файл под названием conditional-comparison.js в каталоге ~/project:
// Сравнение if и switch для различных сценариев
// Сценарий 1: Простая проверка равенства
let fruit = "apple";
// Использование оператора if
if (fruit === "apple") {
console.log("If Statement: It's an apple.");
} else if (fruit === "banana") {
console.log("If Statement: It's a banana.");
} else {
console.log("If Statement: Unknown fruit.");
}
// Использование оператора switch
switch (fruit) {
case "apple":
console.log("Switch Statement: It's an apple.");
break;
case "banana":
console.log("Switch Statement: It's a banana.");
break;
default:
console.log("Switch Statement: Unknown fruit.");
}
// Сценарий 2: Сложные условия
let score = 85;
// Оператор if лучше подходит для сложных условий
if (score >= 90 && score <= 100) {
console.log("Excellent grade (A)");
} else if (score >= 80 && score < 90) {
console.log("Good grade (B)");
} else if (score >= 70 && score < 80) {
console.log("Satisfactory grade (C)");
} else {
console.log("Needs improvement");
}
// Switch менее подходит для условий, основанных на диапазонах или сложных условийЗапустим скрипт, чтобы увидеть выводы:
node ~/project/conditional-comparison.jsПример вывода:
If Statement: It's an apple.
Switch Statement: It's an apple.
Good grade (B)Важные различия, которые нужно запомнить:
if более гибкие и могут обрабатывать сложные условия.switch лучше подходят для точного совпадения значений.if может сравнивать разные типы и использовать сложные логические операторы.switch ограничивается строгими проверками равенства.Создадим последний пример, чтобы проиллюстрировать эти要点:
// Выбор между if и switch
function recommendConditional(input) {
// Используйте switch для простых, точных совпадений значений
switch (input) {
case "red":
case "blue":
case "green":
console.log("Use switch for simple value checks");
break;
// Используйте if для более сложных условий
default:
if (typeof input === "number" && input > 0 && input < 100) {
console.log("Use if for range and type checking");
} else {
console.log("Complex conditions are better with if statements");
}
}
}
recommendConditional("blue");
recommendConditional(50);В этом практическом занятии участники изучали методы условного ветвления в JavaScript, сосредоточившись на различных типах условных операторов. Практическое занятие началось с изучения однострочных операторов if, демонстрирующих, как выполнять код на основе конкретных условий, таких как проверка возраста и проверка температуры. Учащиеся практиковались в создании простой условной логики, которая позволяет коду выполняться только при истинности заданного условия.
Затем практическое занятие перешло к более продвинутым методам условного ветвления, включая операторы if...else для двухстороннего ветвления, многократно условные операторы if...else if...else для сложных решений и операторы switch для обработки нескольких сценариев. Участники узнали, как сравнивать различные методы условного ветвления, понимая синтаксис и практическое применение каждого метода в программировании на JavaScript.
