создание и продвижение сайта (вбиваю в ТОП-10, как гвозди)Настройка и сопровождение платной рекламы яндекс.директ

Урок 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;}

Практика

Примеры решения задач

Задача

Если переменная a равна 8, то вывести 'Верно', иначе вывести 'Неверно'.

Решение:

n=8;if(n==8){alert('Верно');}else{alert('Неверно');}

Задача

В переменной min лежит число от 0 до 59. Определите в какую четверть часа попадает это число (в 1-ю, 2-ю, 3-ю или 4-ю).

Решение:

min=10;

if(min>=0&&min<=14){alert('В 1-ю четверть');}

if(min>=15&&min<=30){alert('Во 2-ю четверть');}

if(min>=31&&min<=45){alert('В 3-ю четверть');}

if(min>=46&&min<=59){alert('В 4-ю четверть');}

Задача

Переменная l может принимать 2 значения: 'r', 'e'. Если она имеет значение 'r', то в переменную a запишем массив дней недели на русском языке, а если имеет значение 'e' - то на английском. Решите задачу через 2 if, через switch-case и через многомерный массив без ифов и switch.

Решение:

Решение через 2 if:

l='r';

if(l=='r'){

a=['пн','вт','ср','чт','пт','сб','вс'];

}

if(l=='e'){

a=['mn','ts','wd','th','fr','st','sn'];

}

alert(a);

Решение через switch-case:

l='r';

switch(l){

case 'r':

a=['пн','вт','ср','чт','пт','сб','вс'];

break;

case 'e':

a=['mn','ts','wd','th','fr','st','sn'];

break;

}

alert(a);

Решение через многомерный массив:

l='r';

a={

'r':['пн','вт','ср','чт','пт','сб','вс'],

'e':['mn','ts','wd','th','fr','st','sn'],

};

alert(a[l]);

Задачи для решения

Работа с if-else

Если переменная a =0, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при a=1,0,-3.

Если переменная a>0, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при a=1,0,-3.

Если переменная a меньше 0, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при a=1,0,-3.

Если переменная a> или =0, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при a=1,0,-3.

Если переменная a меньше или =0, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при a=1,0,-3.

Если переменная a не =0, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при a=1,0,-3.

Если переменная a='test', то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при a='test','тест',3.

Если переменная a='1' и по значению и по типу, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при a='1',1,3.

Работа с логическими переменными

Если переменная test = true, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при test, равном true, false. Напишите 2 варианта скрипта - с короткой записью и с длинной.

Если переменная test не = true, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при test, = true, false. Напишите 2 варианта скрипта: с короткой записью и с длинной.

Работа с && (и) и||(или)

Если переменная a>0 и меньше 5, то вывести 'Верно', иначе вывести 'Неверно'. Проверьте работу скрипта при a=5,0,-3,2.

Если переменная a=0 или =2, то прибавьте к ней 7, иначе поделите ее на 8. Вывести новое значение переменной на экран. Проверить работу скрипта при a=5,0,-3,2.

Если переменная a= или меньше 1, а переменная b> или =3, то вывести сумму этих переменных, иначе вывести их разность. Проверить работу скрипта при a и b, =1 и 3, 0 и 6, 3 и 5.

Если переменная a>2 и меньше 11, или переменная b> или =6 и меньше 14, то вывести 'Верно', иначе вывести 'Неверно'.

На switch-case

Переменная num может принимать 4 значения: 1,2,3,4. Если она имеет значение '1', то в переменную result запишем 'зима', если имеет значение '2' - 'весна' и так далее. Решите задачу через switch-case.

Задачи

В переменной d лежит какое-то число из интервала от 1 до 31. Определите в какую декаду месяца попадает это число (в 1-ю, 2-ю или 3-ю).

В переменной m лежит какое-то число из интервала от 1 до 12. Определите в какую пору года попадает этот месяц (зима, лето, весна, осень).

Дана строка, состоящая из символов, например, 'abcde'. Проверьте, что 1-м символом этой строки является буква 'a'. Если это так, вывести 'да', иначе вывести 'нет'.

Дана строка с цифрами, например, '12345'. Проверить, что 1-м символом этой строки является цифра 1, 2 или 3. Если это так, вывести 'да', иначе вывести 'нет'.

Дана строка из 3 цифр. Найти сумму этих цифр, т.е. сложить как числа 1-й символ строки, 2-й и 3-й.

Дана строка из 6 цифр. Проверить, что сумма 1-х 3 цифр равняется сумме 2-х 3 цифр. Если это так, вывести 'да', иначе вывести 'нет'.

Содержание

Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.

Ваше письмо×
Free Web Hosting