Оператор if в JavaScript — это простейший оператор принятия решений, позволяющий указать альтернативный путь выполнения в программе. Он используется для изменения потока выполнения в программе.
Этот оператор выполняет блок операторов, если условие истинно, и пропускает их, если условие ложно.
Оператор if также называется оператором условного управления или оператором одиночного выбора в JavaScript, поскольку он выбирает или игнорирует одно действие или одну группу действий.
Синтаксис оператора if
Оператор if в JavaScript состоит из логического выражения, за которым следует один или несколько операторов. Общий синтаксис использования оператора if следующий:
if(Test condition)
{
JavaScript statement(s) to be executed if condition is true.
}
В приведенном выше выражении
а) Условие состоит из логического выражения, которое возвращает логическое значение: истина или ложь.
б) Тестовое условие содержит любое реляционное сравнение, состоящее из реляционных операторов, и должно быть заключено в скобки.
c) Если условие проверки истинно, оператор выполняется. Если условие проверки ложно, оператор пропускается или обходит.
г) Если блок оператора if (также называемый телом оператора if) содержит более одного оператора, необходимо заключить эти операторы в пару фигурных скобок ({ }).
Блок-схема оператора If в JavaScript
Посмотрите на рисунок ниже, где вы можете увидеть блок-схему оператора if.
Давайте разберем оператор выбора одного элемента if на примере. Рассмотрим следующий программный код, как показано ниже.
let myPer = 92;
if(myPer >= 80)
document.write("Grade A");
Если логическое выражение (условие) принимает значение «истина», оператор будет выполнен и в браузере отобразится сообщение «Оценка A».
После выполнения оператора внутри блока оператора if выполняется следующий оператор JavaScript в последовательности.
Если логическое выражение оценивается как ложное, оператор не будет выполнен, и будет выполнен следующий оператор в последовательности. Давайте разберем очень простой пример.
if(true)
document.write("Code to be executed"); // print.
if(false)
document.write("Code not to be executed"); // not print.
Аналогично рассмотрим следующий код скрипта.
if (radius >= 0)
{
area = radius * radius * PI;
document.write("Area of circle: " +area);
}
Если логическое выражение оценивается как истинное, операторы в блоке оператора if выполняются. Другими словами, если значение радиуса больше или равно 0, будет вычислена площадь круга, а результат будет отображен в браузере. В противном случае два оператора в блоке будут пропущены, не выполнены и продолжится остальная часть программы.
Давайте создадим программу JavaScript, в которой реализуем следующий пример кода.
Пример 1:
<script>
let radius, pi, area;
radius = 2;
pi = 3.14;
if(radius >= 0)
{
area = radius * radius * pi;
document.write("Area of circle: " +area);
}
</script>
Вывод:
Area of circle: 12.56
В приведенном выше коде, если условие в операторе if оценивается как истинное, операторы внутри блока оператора if будут выполнены. В противном случае операторы внутри блока не будут выполнены, если условие оценивается как ложное.
Вот некоторые допустимые операторы if в JavaScript:
1. let x = 1;
if(x > 0)
document.write(x+ " is a positive number");
2. let x = 1;
if(x) // same as: if(x!= 0)
document.write(x+ " is a nonzero number");
3. let x = 10, y = 10;
if(x == y)
document.write("x and y are equal number");
4. let x = 5, y = 10;
if(x < y) {
document.write("x is less than y");
}
5. let x = true;
if(x) // Here, we have used a boolean value to check whether the condition is true or not.
document.write("You are eligible for voting");
Типы операторов выбора в JavaScript
JavaScript поддерживает множество типов операторов выбора, среди которых:
- Один из способов операторов
if - Двусторонние операторы
if-else - Вложенные операторы
if - Многоходовые операторы
if-else - Переключить операторы
- Условные выражения
В дальнейшем руководстве мы подробно рассмотрим все типы операторов выбора один за другим.
Примеры на основе оператора If в JavaScript
Давайте рассмотрим несколько примеров программ, основанных на одном операторе выбора if в JavaScript.
1. Давайте создадим программу на JavaScript, в которой мы будем запрашивать у пользователя оценки по трем предметам, таким как математика, химия и физика.
Затем мы вычислим процент оценок по трем предметам и отобразим «Оценка A», если процент больше или равен 85. Посмотрите на код скрипта, чтобы лучше понять.
Пример 2:
<script>
let phy, chem, math;
// Prompt the user to enter marks of three subjects.
phy = prompt("Enter your physics marks: ");
let p = parseInt(phy);
chem = prompt("Enter your chemistry marks: ");
let c = parseInt(chem);
math = prompt("Enter your math marks: ");
let m = parseInt(math);
let totalMarks = p+c+m;
let myPer = totalMarks/3;
document.write("Total marks obtained: " +totalMarks, "<br>");
document.write("Your percentage: " +myPer, "<br>");
if(myPer >= 85.0) // if the condition is true, then the statement will be displayed.
document.write("Grade A");
</script>
Вывод:
Total marks obtained: 273
Your percentage: 91
Grade A
При запуске вышеуказанной программы браузер отобразит диалоговое окно, предлагающее пользователю ввести оценки по трем предметам. Когда вы введете оценки в диалоговом окне, он вернет их в виде строки.
Итак, нам нужно преобразовать строку в целое число. Для этого мы использовали метод parseInt(), который преобразует строку в целое число.
2. Давайте создадим программу JavaScript для веб-приложения, которая будет предлагать пользователю ввести число. Если число делится на 2, программа выведет сообщение «число делится на 2».
Пример 3:
<script>
// Prompt the user to a number.
let num = prompt("Enter a number: ");
if(num % 2 == 0)
document.write(num+ " is divisible by 2.");
if(num % 2!= 0)
document.write(num+ " is not divisible by 2.");
</script>
Вывод:
35 is not divisible by 2.
10 is divisible by 2.
3. Давайте напишем код JavaScript, в котором мы будем отображать приветствие «Доброе утро», если время в браузере меньше 12. Если время в браузере больше 12, то в браузере будет отображаться «Хорошего дня!».
Пример 4:
<script>
var date = new Date();
var time = date.getHours();
if(time < 12)
{
document.write("<B>Good morning</B>");
}
document.write("<b>Have a nice day!</b>");
</script>
Вывод:
Have a nice day!
При написании этой программы время в браузере больше 12 часов, поэтому интерпретатор JavaScript оценивает false и не выполняет блок оператора if. Затем управление выполнением переходит к следующему оператору в программе. Посмотрите на блок-схему ниже:
Использование логических операторов в операторе If в JavaScript
Логические операторы JavaScript также могут использоваться в условном выражении, когда нам нужно проверить несколько условий вместе. В JavaScript есть три типа логических операторов, которые перечислены ниже.
- && (И)
- || (ИЛИ)
- ! (НЕТ)
Давайте рассмотрим несколько примеров программ, основанных на логических операторах, используемых в операторе if.
Пример 5: Логический оператор И (&&)
<script>
let x = 20, y = 40, z = 50;
if((y > x) && (y < z)) // true
document.write("y is greater than x but smaller than z", "<br>");
if((x > y) && (y < z)) // false
document.write("z is greater than x, y", "<br>");
if(y % x == 0 && x!= 0) // true
document.write("y is divisible by x");
</script>
Вывод:
y is greater than x but smaller than z
y is divisible by x
В предыдущем примере программы первый и третий операторы if оцениваются как истинные, поскольку оба условных выражения, соединенные оператором &&, являются истинными.
Второе выражение if оценивает false, так как первое условное выражение ложно. В этом примере выражение if вернет true только в том случае, если оба выражения верны. Если любое из выражений ложно или оба выражения ложны, выражение if вернет false.
Пример 6: Логический оператор ИЛИ (||)
<script>
let x = 2, y = 1, z = 4;
let value;
if(value = (x > y) || (y < z))
document.write(value, "<br>");
if(value = (x > y) || (y > z))
document.write(value, "<br>");
if(value = (x < y) || (y < z))
document.write(value, "<br>");
if(value = (x < y) || (y > z))
document.write(value);
</script>
Вывод:
true
true
true
В приведенном выше примере программы, если любое из выражений истинно или оба выражения истинны, оператор if оценивает значение true. Если оба выражения ложны, оператор if оценивает значение false и блок операторов не выполняется.
Пример 8: Логический оператор НЕ (!)
<script>
let x = 2, y = 1;
let value;
if(value = (x == 2) && (y!= 2))
document.write(value);
</script>
Вывод:
true
Мы можем объединить несколько условных выражений с помощью оператора «Логическое НЕ». Результатом будет логический тип.
В этом уроке вы изучили оператор if с одним выбором и различными примерами программ. Надеюсь, вы поняли все основные моменты и концепции оператора if. В следующем уроке мы разберемся с оператором if-else и различными примерами программ. Спасибо за чтение!!!
