Стать программистом. Часть 15. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

В прошлом уроке мы с Вами нарушили последовательность тем для уроков, и сделали небольшой ознакомительный шаг в сторону сложносоставных переменных с типом object. В частности, мы рассмотрели Array (Массивы), узнали, что они из себя представляют. Затронули их структуру, узнали, что они бывают простыми, смешанными и многомерными. А также поверхностно коснулись такого понятия, как свойства сложносоставных переменных, и рассмотрели их на примере свойства length (длина) массива.

Для чего мы затронули тему Массивов? Дело в том, что в нашем стремительном знакомстве с JavaScript мы потихоньку приближаемся к темам Условных операторов и Циклов. И если первую тему, мы еще можем разобрать без знаний, приобретенных в прошлом уроке, то тему Циклы без знаний о Массивах понять было бы непросто.

Теперь же, когда мы, пусть даже и поверхностно, но знакомы с Массивами, мы можем смело двигаться дальше. И темой нашего сегодняшнего урока станут Условные операторы.

Урок 15. Условные операторы.

Тема условных операторов может быть достаточно обширной. Мы постараемся затронуть все основные моменты работы с этими операторами, однако снова повторюсь - для меня главное это доступность в изложении материала. Если вдруг Вы увидите, что упускаете логическую нить, что-то Вам покажется неясным или возникнут другие вопросы - сразу пишите в комментариях.

Тему Условных операторов необходимо понять, так как в будущем мы часто будем использовать их в коде.

Итак, Условные операторы или Conditional Statements. Уже из их названия можно сделать вывод что речь пойдет о каком-то условии. И это действительно так. Более того само условие - краеугольный камень для работы этих операторов. Все в них зависит от того выполняется это условие или не выполняется. Давайте сначала попробуем ассоциативно понять, что такое условный оператор, а затем уже посмотрим, как это выглядит в кодовом представлении.

Когда-то здесь на голосе я написал статью Когда папа - программист, где среди прочего накидал блок схему с алгоритмом по уходу за ребенком. Так вот почти вся эта схема состояла из "жизненных условий", а также из действий, которые зависели от того, выполняется это условие или не выполняется. Ну, например, было такое условие "узнать голоден ли ребенок" и если ответ на это условие был положительным, то мы его должны бы накормить, а если отрицательным, то мы должны были решить, что делать дальше.

Давайте представим такую ситуацию с помощью кода в JavaScript.

// Условный оператор
var isChildHungry = true;
var stepForTrue = 'надо накормить!';

if(isChildHungry) {
    alert(stepForTrue);
}

Рассмотри подробнее. Мы создали две переменных: isChildHungry булевского типа со значением true и stepForTrue строкового типа со значением 'надо накормить!'. Переменную isChildHungry можно перевести с английского как "Голоден ли ребёнок?".

Сам условный оператор имеет следующую форму: ключевое слово if, затем круглые скобки (...), внутри которых мы должны написать наше условие, после идут фигурные скобки {...}, внутри которых мы должны расположить код, который выполнится только в том случае, если условие в круглых скобках в своем результате будет выполненным, т.е. правдивым, еще точнее примет значение true. В своем окончательном виде условный оператор выглядит так: if(...) {...}.

Ключевое слово if с английского переводится как если. То есть если перевести на русский, то запись вида if(...) {...} можно представить, как:

если (условие выполняется) {
выполни все что расположено тут
}

В случае нашего примера мы можем перевести код

if(isChildHungry) {
    alert(stepForTrue);
}

таким образом:

если (ребёнок голоден?) {
выведи сообщение 'надо накормить!';
}

Наша переменная isChildHungry имеет значение true то есть истина. Другими словами, в условии между круглыми скобками окажется правда и условие будет считаться выполненным. Когда условие выполнено, код расположенный внутри фигурных скобок исполнится. В нашем случае этот код alert(stepForTrue); он выводит сообщение. Давайте проверим в браузере и обновим окно, в котором открыт наш index.html файл.

Все правильно. Так как условие завершилось результатом true, код выполнился, и мы видим сообщение на экране. Логично предположить, что если бы условие завершилось отрицательно, то есть результатом его стало значение false, то код внутри фигурных скобок не мог бы выполниться.

Давайте проверим. Для этого измени в нашем примере значение переменной isChildHungry и вместо true подставим в нее false.

// Условный оператор
var isChildHungry = false;
var stepForTrue = 'надо накормить!';

if(isChildHungry) {
    alert(stepForTrue);
}

Теперь получается, что условие внутри круглых скобок if(isChildHungry) - отрицательно т.е. не выполняется. В этом случае код внутри фигурных скобок должен будет игнорироваться и никакого сообщения в браузере быть не должно. Проверим:

Сообщения действительно нет.

Бывают случаи, когда мы точно знаем, что делать если условия внутри круглых скобок не будет выполнятся, т.е. результат его будет отрицательным false. Например, мы ставим условие "голоден ли ребёнок?" и знаем, что в случае, когда он не голоден, нам придется искать другую причину его беспокойства. Как это можно передать, используя Условные операторы?

В этом случае мы к оператору if(...){...}, с которым уже познакомились, должны добавить вторую часть, которая выглядит так else {...}. Таким образом полная запись будет иметь вид:

if(...) {...} else {...}

Давайте разберем на практике:

// Условный оператор
var isChildHungry = false;
var stepForTrue = 'надо накормить!';
var stepForFalse = 'искать другую причину!';

if(isChildHungry) {
    alert(stepForTrue);
} else {
    alert(stepForFalse);
}

Разберем. Переменная var isChildHungry = false; у нас по прежнему имеет значение false. То есть условие if(isChildHungry) будет отрицательным и код внутри первых фигурных скобок будет игнорироваться. А вот код внутри фигурных скобок после ключевого слова else (Иначе) будет исполнен. Проверим в браузере:

Как видим, действительно выводится сообщение, которое было рассчитано на случай если условие не исполнится. Для большего понимания мы снова можем перевести код сверху на русский:

если (ребёнок голоден?) {
выведи сообщение 'надо накормить!';
} иначе {
выведи сообщение 'искать другую причину!';
}

В нашем случаем вопрос "ребёнок голоден?" имеет ответ "Нет”, то есть false, поэтому выполняется код в блоке "Иначе".

Но, в нашем мире бывают такие случаи, когда мы знаем, что надо делать при нескольких условиях. Ну, например, мы знаем, что в случае, если ребенок голоден, то надо его накормить, если он устал - надо уложить спать, а если он замерз - надо одеть теплее. Уловные операторы замечательны тем, что и такие жизненные ситуации позволяют представить в коде. Для этого нам так же потребуется расширить уже знакомую нам запись if(...) {...} добавив к ней часть else if(...) {...}. В своем полном виде запись будет выглядеть как:

if(/* условие 1 */) {...} else if(/* условие 2 */) {...}

То есть JavaScript, двигаясь сверху вниз, слева направо, сначала проверит "условие 1", если оно будет положительным, выполнит код в фигурных скобках, идущих сразу после условия. Ели оно не верно, JavaScript проверит "условие 2"и сделает тоже самое что и в первом случае: в случае, когда условие true иполнит код, в случае false проигнорирует его. Рассмотрим на практике:

// Условный оператор
var isChildHungry = false;
var isChildWantSleep = true;
var stepForTrue = 'надо накормить!';
var step2ForTrue = 'уложить спать!';

if(isChildHungry) {
    alert(stepForTrue);
} else if (isChildWantSleep) {
    alert(step2ForTrue);
}

Рассмотрим. Наша переменная isChildHungry (голоден ли ребёнок?) все еще со значением false. Из чего можно сделать вывод что условие if(isChildHungry) не будет положительным и код alert(stepForTrue); выполнен не будет. Далее, переменная isChildWantSleep (хочет ли ребёнок спать?) имеет значение true. Это значит что условие else if (isChildWantSleep) будет положительно, и код в следующих фигурных скобках alert(step2ForTrue);, то есть мы должны увидеть на экране сообщение 'уложить спать!'. Проверим:

Как видим, это действительно так. А что будет, если оба эти условия будут выполнятся? Ну вот так получилось, что ребёнок и голоден, и спать хочет. Давайте проверим. Для этого обе наши переменные должны иметь значение true.

// Условный оператор
var isChildHungry = true;
var isChildWantSleep = true;
var stepForTrue = 'надо накормить!';
var step2ForTrue = 'уложить спать!';

if(isChildHungry) {
    alert(stepForTrue);
} else if (isChildWantSleep) {
    alert(step2ForTrue);
}

Если мы посмотрим в браузер то увидим, то увидим сообщение самого первого условия:

Вывод: Условные операторы двигаются сверху вниз, слева направо и выполняют ровно одно положительное условие, после чего прекращают свою работу.

Условных операторов вида else if(...) {...} может быть неограниченного количество. То есть в случае исполнения, кода следующего вида...

if(/* условие 1 */) {
...
} else if(/* условие 2 */) {
...
} else if(/* условие 3 */) {
...
} else if(/* условие 4 */) {
...
} else if(/* условие 5 */) {
...
}

...JavaScript пройдется по всем условиям и выполнит первое, которое окажется положительным. В данном примере их пять. Может быть 10, 100, 1000 и так далее. Целесообразность такого кода мы пока не будем затрагивать.

Кроме этого, несмотря на то, что мы можем знать несколько возможных условий и что нам требуется делать в случае каждого из них, мы одновременно с этим можем знать, что нам делать в случае, когда ни одно из перечисленных условий выполняться не будет. В этой ситуации нам также поможет запись else {...}. Полная запись условных операторов использующая все возможные условные части будет выглядеть так:

if(/* условие 1 */) {...} else if(/* условие 2 */) {...} else {...}

Расмотрим на практике:

// Условный оператор
var isChildHungry = false;
var isChildWantSleep = false;
var stepForTrue = 'надо накормить!';
var step2ForTrue = 'уложить спать!';
var stepForElse = 'радоваться со своим чадом!';

if(isChildHungry) {
    alert(stepForTrue);
} else if (isChildWantSleep) {
    alert(step2ForTrue);
} else {
    alert(stepForElse);
}

В этом примере мы выступаем как "ответственные родители", ведь согласно переменной isChildHungry в значении false наш ребенок не голоден, а согласно переменной isChildWantSleep которая тоже имеет значение false наш ребенок бодр, полон сил и не хочет спать. То есть оба условия: if(isChildHungry) и else if (isChildWantSleep) будут отрицательными и код для этих условий не будет выполнятся. Именно по этой причине в игру вступит код из блока else, нам с Вами не останется ничего кроме как:

И делать это как можно чаще! :).

А на сегодня все.

Ссылки на предыдущие уроки:

если (Вам интересно) {
Урок 1, Урок 2, Урок 3, Урок 4, Урок 5, Урок 6, Урок 7, Урок 8, Урок 9, Урок 10, Урок 11, Урок 12, Урок 13, Урок 14
}