Лекция
Привет, сегодня поговорим про условные операторы, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое условные операторы, оператор if , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).
ifelseelse if'?''?''?'Иногда, в зависимости от условия, нужно выполнить различные действия. Для этого используется оператор if.
Например:
1 |
var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', ''); |
2 |
3 |
if (year != 2011) alert('А вот и неправильно!'); |
ifОператор if («если») получает условие, в примере выше это year != 2011. Он вычисляет его, и если результат — true, то выполняет команду.
Если нужно выполнить более одной команды — они оформляются блоком кода в фигурных скобках:
1 |
if (year != 2011) { |
2 |
alert('А вот..'); |
3 |
alert('..и неправильно!'); |
4 |
} |
Рекомендуется использовать фигурные скобки всегда, даже когда команда одна. Это улучшает читаемость кода.
Оператор if (...) вычисляет и преобразует выражение в скобках к логическому типу.
В логическом контексте число 0, пустая строка "", null и undefined, а также NaN являются false, остальные значения — true.
Например, такое условие никогда не выполнится:
if (0) { // 0 преобразуется к false |
... |
} |
… А такое — выполнится всегда:
if (1) { // 1 преобразуется к true |
... |
} |
Вычисление условия в проверке if (year != 2011) может быть вынесено в отдельную переменную:
1 |
var cond = (year != 2011); // true/false |
2 |
3 |
if (cond) { |
4 |
... |
5 |
} |
elseНеобязательный блок else («иначе») выполняется, если условие неверно:
1 |
var year = prompt('Введите год ECMA-262 5.1', ''); |
2 |
3 |
if (year == 2011) { |
4 |
alert('Да вы знаток!'); |
5 |
} else { |
6 |
alert('А вот и неправильно!'); // любое значение, кроме 2011 |
7 |
} |
else ifБывает нужно проверить несколько вариантов условия. Для этого используется блок else if .... Например:
1 |
var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', ''); |
2 |
3 |
if (year < 2011) { |
4 |
alert('Это слишком рано..'); |
5 |
} else if (year > 2011) { |
6 |
alert('Это поздновато..'); |
7 |
} else { |
8 |
alert('Да, точно в этом году!'); |
9 |
} |
В примере выше JavaScript сначала проверит первое условие, если оно ложно — перейдет ко второму — и так далее, до последнего else.
Важность: 2
Напишите код, который будет спрашивать: «Каково «официальное» название JavaScript?».
Если посетитель вводит «EcmaScript», то выводить «Верно!», если что-то другое — выводить «Не знаете? «EcmaScript»!».
Блок-схема:
Результат в действии: tutorial/intro/ifelse_task2.html
Решение: tutorial/intro/ifelse_task2.html.
Важность: 3
Напишите код, который будет спрашивать логин (prompt).
Если посетитель вводит «Админ», то спрашивать пароль, если нажал отмена (escape) — выводить «Вход отменен», если вводит что-то другое — «Я вас не знаю».
Пароль проверять так. Об этом говорит сайт https://intellect.icu . Если введен пароль «Черный Властелин», то выводить «Добро пожаловать!», иначе — «Пароль неверен», при отмене — «Вход отменен».
Блок-схема:
Для решения используйте вложенные блоки if. Обращайте внимание на стиль и читаемость кода.
Результат в действии: tutorial/intro/ifelse_task.html
Решение: tutorial/intro/ifelse_task.html.
Обратите внимание на дополнительные вертикальные отступы внутри if. Они полезны для лучшей читаемости кода.
'?'Иногда нужно в зависимости от условия присвоить переменную. Например:
01 |
var access; |
02 |
var age = prompt('Сколько вам лет?', ''); |
03 |
04 |
if (age > 14) { |
05 |
access = true; |
06 |
} else { |
07 |
access = false; |
08 |
} |
09 |
10 |
alert(access); |
Оператор вопросительный знак '?' позволяет делать это короче и проще.
Он состоит из трех частей:
условие ? значение1 : значение2 |
Проверяется условие, затем если оно верно — возвращается значение1 , если неверно — значение2, например:
access = (age > 14) ? true : false; |
Оператор '?' выполняется позже большинства других, в частности — позже сравнений, поэтому скобки можно не ставить:
access = age > 14 ? true : false; |
.. Но когда скобки есть — код лучше читается. Так что рекомендуется их писать.
В данном случае можно было бы обойтись и без оператора '?', т.к. сравнение само по себе уже возвращает true/false:
access = age > 14; |
Вопросительный знак — единственный оператор, у которого есть аж три аргумента, в то время как у обычных операторов их один-два.
Поэтому его называют «тернарный оператор».
'?'Несколько операторов if..else можно заменить последовательностью операторов '?'. Например:
1 |
var a = prompt('a?', 1); |
2 |
3 |
var res = (a == 1) ? 'значение1' : |
4 |
(a == 2) ? 'значение2' : |
5 |
(a > 2) ? 'значение3' : |
6 |
'значение4'; |
7 |
8 |
alert(res); |
Поначалу может быть сложно понять, что происходит. Однако, внимательно приглядевшись, мы замечаем, что это обычный if..else!
Вопросительный знак проверяет сначала a == 1, если верно — возвращает значение1, если нет — идет проверять a == 2. Если это верно — возвращает значение2, иначе проверка a > 2 и значение3.. Наконец, если ничего не верно, то значение4.
Альтернативный вариант с if..else:
01 |
var res; |
02 |
03 |
if (a == 1) { |
04 |
res = 'значение1'; |
05 |
} else if (a == 2) { |
06 |
res = 'значение2'; |
07 |
} else if (a > 2) { |
08 |
res = 'значение3'; |
09 |
} else { |
10 |
res = 'значение4'; |
11 |
} |
'?'Иногда оператор вопросительный знак '?' используют как замену if:
1 |
var company = prompt('Какая компания создала JavaScript?', ''); |
2 |
3 |
(company == 'Netscape') ? |
4 |
alert('Да, верно') : alert('Неправильно'); |
Работает это так: в зависимости от условия, будет выполнена либо первая, либо вторая часть после'?'.
Результат выполнения не присваивается в переменную, так что пропадет (впрочем, alert ничего не возвращает).
Рекомендуется не использовать вопросительный знак таким образом.
Несмотря на то, что с виду такая запись короче if, она является существенно менее читаемой.
Вот, для сравнения, то же самое с if:
1 |
var company = prompt('Какая компания создала JavaScript?', ''); |
2 |
3 |
if (company == 'Netscape') { |
4 |
alert('Да, верно'); |
5 |
} else { |
6 |
alert('Неправильно'); |
7 |
} |
К сожалению, в одной статье не просто дать все знания про условные операторы. Но я - старался. Если ты проявишь интерес к раскрытию подробностей,я обязательно напишу продолжение! Надеюсь, что теперь ты понял что такое условные операторы, оператор if и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)
Комментарии
Оставить комментарий
Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)
Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)