Урок 4. Конструкции if-else, switch-case в JavaScript
Теория
Конструкция if-else
Для того, чтобы программировать что-нибудь полезное, 1 переменных далеко не достаточно. Нам нужен механизм, который позволит выполнять определенный код в зависимости от каких-либо условий.
Т.е. нам нужно иметь возможность спросить у JavaScript 'Если'.
Например так: если эта переменная меньше 0, то вывести 'отрицательно', иначе (т.е. если она >0) вывести 'положительно'.
В JavaScript для таких вопросов предназначена конструкция if, которая позволяет выполнять определенный код при выполнении какого-либо условия:
if(логическое выражение){Этот код выполнится, если логическое выражение Верно (true)}else{Этот код выполнится, если логическое выражение Неверно (false)}
Обратите внимание на то, что блок else необязателен.
Логическое выражение представляет собой тот самый вопрос, который мы хотим задать JavaScript. Например, спросить переменная a>0.
Пример:
a=3;/*Если переменная a>0, то вывести 'Верно', иначе (если меньше или =0) вывести 'Неверно'*/
if(a>0){alert('Верно')}else{alert('Неверно')}//Выведет 'Верно'
a=-3;/*Если переменная a> или =0, то вывести 'Верно', иначе (если меньше 0) вывести 'Неверно'*/
if(a>=0){alert('Верно')}else{alert('Неверно')}//Выведет 'Неверно'
Сокращенный синтаксис
В случае, если в фигурных скобках if или else будет только 1 выражение, можно эти фигурные скобки не писать:
//Полный вариант:
if(a==0){alert('Верно')}else{alert('Неверно')}
//Уберем скобки после if:
if(a==0)alert('Верно');else{alert('Неверно')}
//Уберем скобки после else:
if(a==0){alert('Верно')}else alert('Неверно');
/*Уберем скобки и после if, и после else (обратите внимание на точку с запятой, она осталась):*/
if(a==0)alert('Верно');else alert('Неверно')
Равенство по значению и типу
Для того, чтобы сравнить на равенство, следует использовать оператор двойное равно ==, а не одиночное =, как можно было подумать.
Почему так? Потому что одиночное равно зарезервировано за присваиванием. Пример:
a=0;
/*Если переменная a=0, то вывести 'Верно', иначе (если не =0) вывести 'Неверно'*/
if(a==0)alert('Верно');else alert('Неверно');//Выведет 'Верно'
А следующий пример работать будет не так, как мы думаем:
var a=0;
/*Мы думаем оно работает так: если переменная a=0, то вывести 'Верно', иначе (если не =0) вывести 'Неверно'. На самом деле оно работает так: переменной a присвоить 1, если удалось присвоить, то вывести 'Верно', иначе (если не удалось присвоить) вывести 'Неверно'.*/
if(a=1)alert('Верно');else alert('Неверно')//Всегда будет выводить 'Верно'
Кроме оператора == существует еще и оператор ===. Их различие в том, что === сравнивает не только по значению, но и по типу, а == сравнивает только по значению.
Пример:
a='0';//Переменная a представляет собой строку, а не число 0
if(a==0)alert('Верно');else alert('Неверно');
/*Выведет 'Верно', т.к. проверяется только значение, но не тип. Поэтому '0' равен 0.*/
a='0';//Переменная a представляет собой строку, а не число 0
if(a===0)alert('Верно');else alert('Неверно');
/*Выведет 'Неверно', т.к. строка '0' не = числу 0 при сравнении по типу.*/
Не равно
Для того, чтобы спросить 'не =', существует операторы != и !==. 1-й игнорирует различие в типах, а 2-й - нет.
a=0;
/*Если переменная a не =0, то вывести 'Верно', иначе (если =0) вывести 'Неверно'*/
if(a!=0)alert('Верно');else alert('Неверно');//Выведет 'Неверно', т.к. a=0
a=1;
/*Если переменная a не =0, то вывести 'Верно', иначе (если =0) вывести 'Неверно'*/
if(a!=0)alert('Верно'); else alert('Неверно');//Выведет 'Верно', т.к. a=1
var a='0';
/*Если переменная a не =0, то вывести 'Верно', иначе (если =0) вывести 'Неверно'*/
if(a!=0)alert('Верно');else alert('Неверно');
/*Выведет 'Неверно', т.к. a='0', а различие в типах игнорируется.*/
var a='0';
/*Если переменная a не =0, то вывести 'Верно', иначе (если =0) вывести 'Неверно'*/
if(a!==0)alert('Верно');else alert('Неверно');
/*Выведет 'Верно', т.к. a='0', а это не =0 при сравнении по типу.*/
Все операции сравнения
Возможные операции сравнения, которые можно использовать внутри if:
a==b a=b
a===b a=b и они одинаковы по типу
a!=b a не =b
a!==b a не =b или a=b, но не разные по типу
a<b a<b
a>b a > b
a<=b a < или =b
a>=b a> или =b
Несколько условий сразу
Иногда может быть нужно составить какое-то сложное условие, например, пользователь вводит месяц своего рождения и нужно проверить, что введенное число > или =1 и <, либо =12 (так как в году 12 месяцев).
Для этого существуют операторы && (логическое И) и || (логическое ИЛИ).
a=3;
b=-3;
//Если a>0 и b одновременно <0, то…
if(a>0&&b<0)alert('Верно');else alert('Неверно');//Выведет 'Верно'
a=3;
//Если a больше или =1 и < или =12 то…
if(a>=1&&a<=12)alert('Верно');else alert('Неверно');//Выведет 'Верно'
a=-3;
b=-3;
/*Если a>0 ИЛИ b<0 - хотя бы 1 из них, то… выведет 'Верно', т.к. хотя a и не больше 0, но 1 из условий - b<0 - выполнится!*/
if(a>0||b<0)alert('Верно');else alert('Неверно');
Работа с логическими переменными
Многие функции JavaScript в результате своей работы возвращают либо true (истина), либо false (ложь). Эти значения довольно удобны при своей работе, но бывает довольно сложно их понять.
Представим себе, что переменная a равна true. В таком случае конструкцию if можно записать так:
var a=true;
//Если a равно true, то…
if(a==true)alert('Верно');else alert('Неверно');
/*Выведет 'Верно', т.к. a равно true.*/
Так как такие сравнения довольно распространены в JavaScript, то существует специальный прием, облегчающий работу (но не понимание, к сожалению).
Прием такой: конструкцию a == true можно заменить на более простую: вместо if(a == true) написать if(a) и она будет работать аналогично.
Следует пользоваться 2-й конструкцией, т.к. она проще.
/*Заменим a == true на более простую: вместо if(a==true) напишем if(a):*/
var a=true;
//Если a равно true, то…
if(a)alert('Верно');else alert('Неверно');//Выведет 'Верно', т.к. a равно true
var a=true;
//Если a не true (т.е. false!), то…
if(!a)alert('Верно');else alert('Неверно');//Выведет 'Неверно', т.к. a равно true
Также обратите внимание на следующие примеры:
//Данное выражение всегда будет выводить 'Верно'
if(true)alert('Верно');else alert('Неверно');
//Данное выражение всегда будет выводить 'Неверно'
if(false)alert('Верно');else alert('Неверно');
//Данное выражение всегда будет выводить 'Неверно'
if(!true)alert('Верно');else alert('Неверно');
//Данное выражение всегда будет выводить 'Верно'
if(!false)alert('Верно');else alert('Неверно');
Вложенные if
Предположим, нам необходимо спросить у JavaScript такую вещь: если переменная a не определена, то вывести 'Введите a', если определена, то проверить, больше 0 a или нет. Если больше 0, то вывести 'Больше 0!', если меньше, вывести 'Меньше 0'.
1 конструкцией if здесь не обойтись, нужно использовать 2 таким образом, чтобы 1 была внутри другой:
if(a===undefined){//если переменная a не определена
alert('Ввести a!');
}else{//если переменная a не пуста
if(a>0){//спрашиваем, больше ли 0 переменная a
alert('Больше 0');
}else{
alert('Меньше 0');
}}
Конструкция else if
Недостатком конструкции предыдущего примера является большое количество фигурных скобок.
Чтобы избавиться от них, можно пользоваться специальной конструкцией else if, которая представляет собой одновременно и else, и начало вложенного if:
//Решение предыдущей задачи через конструкцию else if:
if(a===undefined){
alert('Ввести a');
}else if(a>0){
alert('Больше 0');
}else{
alert('Меньше 0');
}
Можно использовать несколько else if, но злоупотреблять этим не стоит (лучше будет воспользоваться конструкцией switch-case, о которой ниже).
Несколько if
Пусть у нас есть такая задача: сайт поддерживает 3 языка - русский, английский, немецкий. Переменная l может принимать 3 значения - 'r', 'e' и 'd'. В зависимости от значения переменной l следует вывести фразу на 1 из языков.
Решение: можно было бы воспользоваться вложенными ифами или else if. Выглядело бы это примерно так:
//Решение задачи через else if - не самое удачное:
if(l=='r'){//фраза на русском
alert('Русский текст');
}else if(l=='e'){//фраза на английском
alert('Английский текст');
}else if(l=='d'){//фраза на немецком
alert('Немецкий текст');
}
Такое решение не слишком красивое, блок else здесь не нужен! Проще всего будет написать не 1 длинный if с несколькими else, а несколько if вообще без else:
//Решение задачи через несколько if, оно намного лучше:
if(l=='r'){//фраза на русском
alert('Русский текст');
}
if(l=='e'){//фраза на английском
alert('Английский текст');
}
if(l=='d'){//фраза на немецком
alert('Немецкий текст');
}
/*В данном коде сработает только 1 из ифов, т.к. переменная l может иметь только 1 из значений*/
Однако это решение тоже не слишком удобно. Представьте, что у Вас будет не 3 языка, а 10, - Вам придется написать 10 конструкций if.
Для таких случаев существует конструкция switch-case.
Конструкция switch-case
Данная конструкция представляет собой альтернативу if-else, ее рекомендуется использовать в случае множественного выбора (например, 10 различных языков, как в нашей задаче).
Изучите ее синтаксис:
switch(переменная){
case 'значение1':
здесь код, который выполнится в случае, если переменная имеет значение1;
break;
case 'значение2':
здесь код, который выполнится в случае, если переменная имеет значение2;
break;
case 'значение3':
здесь код, который выполнится в случае, если переменная имеет значение3;
break;
default:
этот код выполнится в случае, если переменная не совпала ни с 1 значением;
break;
}
Решим нашу задачу с 3 языками с помощью данной конструкции:
switch(l){
case 'r':
alert('Русский текст');
break;
case 'e':
alert('Английский текст');
break;
case 'd':
alert('Немецкий текст');
break;
default:
alert('Данный язык не поддерживается');
break;
}