«до тех пор, пока что-то истинно (true), продолжай делать это». Пример:
пока вы испытываете жажду, продолжайте пить воду.
Условные конструкции и циклы — понятия, лежащие в основе любой
мало-мальски серьезной программы. Их называют управляющими кон-
струкциями, поскольку они позволяют решать, какие части кода и когда
выполнять, а также насколько часто это нужно делать, исходя из задан-
ных вами условий.
Для начала давайте разберемся, как встраивать JavaScript в HTML-
файл. Это позволит писать программы более сложные, чем те, с кото-
рыми мы имели дело до сих пор.
Внедрение JavaScript-кода в HTML
Вот HTML-файл, который мы создали в пятой главе, с некоторыми
дополнениями — они показаны в цвете, тогда как прежний текст
набран серым (чтобы упростить этот пример, я убрал из него ссылку
на http://comicsia.ru/collections/xkcd/).
95
Привет, мир!
Моя первая веб-страничка.
Script —
Message —
сообщение
Как видите, мы добавили новый элемент под названием script. Этот
элемент особенный: содержимое большинства элементов HTML отобража-
ется на страничке, однако то, что находится внутри тегов script, считается
JavaScript-кодом и передается для выполнения интерпретатору JavaScript.
Теперь рассмотрим код внутри элемента script:
var message = "Привет, мир!";
console.log(message);
Выполнение JavaScript, встроенного в HTML, заметно
отличается от запуска кода в консоли. Введенный в консоли
код выполнится при первом же нажатии ENTER, после чего вы
увидите результат сработавшей команды. Однако код, встро-
енный в веб-страницу, выполняется сразу и целиком, от верх-
них строк к нижним, причем в консоль ничего автоматически
не выводится — если мы не попросим браузер об этом отдельно.
Для вывода в консоль можно воспользоваться командой
console.log — это поможет следить за ходом выполнения про-
граммы. Метод console.log принимает любое значение и печа-
тает (логирует) это значение в консоли. Например, загрузив в браузер наш
последний пример, вы увидите в консоли вот что (разумеется, если она открыта):
Привет, мир!
Вызов console.log(message) в строке привел к появлению в кон-
соли строки "Привет, мир!".
Теперь, когда вы знаете, как с удобством писать длинные JavaScript-
программы, можно перейти к изучению условных конструкций.
96 Часть I. Основы
Условные конструкции
В JavaScript есть два вида условных конструкций — это ifиif...
else. Оператор if выполняет фрагмент кода, если какое-то условие
If — если
истинно (true). Например: если вы хорошо себя вели, то получите кон-
If… else —
фетку. А оператор if... elseвыполняет один фрагмент кода, если усло-
если… иначе
вие дает true, и другой фрагмент в противном случае. Например: если
вы хорошо себя вели, получите конфетку, иначе вас не отпустят гулять.
Конструкция if
Cамая простая из управляющих конструкций JavaScript — это if. Она
используется, чтобы запускать код, если некое условие истинно (true).
Вернитесь к нашему HTML-файлу и замените содержимое элемента
script следующими строками:
var name = "Николай";
console.log("Привет, " + name);
if (name.length> 6) {
console.log("Ну и длиннющее же у вас имя!");
}
Сначала в строке мы создали переменную name и присвоили
ей значение — строку "Николай". Затем, в строке , мы с помощью
console.log напечатали строку "Привет, Николай".
В строке мы использовали конструкцию if, чтобы проверить:
длина name больше, чем шесть символов? Если это так, в строке мы
посредством console.log выводим: "Ну и длиннющее же у вас имя!".
Как показано на рис. 6.1, конструкция if состоит из двух частей:
условия и тела. Условие должно давать булево значение. А тело — одна
или несколько строк JavaScript-кода, которые будут выполнены, если
условие истинно (true).
Конструкция if проверяет, истинно ли условие
if (condition) {
console.log("Делаем что-то");
}
Код, который выполняется, если условие дает true,
называется телом if
Рис. 6.1. Общая структура конструкции if
6. Условия и циклы 97
После загрузки нашей HTML-странички со встроенным JavaScript-
кодом в консоли должно появиться:
Привет, Николай
Ну и длиннющее же у вас имя!
В имени Николай 7 букв, поэтому name.length вернет значение 7,
и условие name.length > 6 даст true. В результате будет выполнено
тело оператора if, и в консоли появится несколько фамильярное сооб-
щение. Чтобы избежать выполнения if, поменяйте имя Николай на Ник
(оставив остальной код без изменений):
var name = "Ник";
Теперь сохраните файл и перегрузите страничку. На этот раз условие
name.length > 6 даст false, поскольку name.length равно 3. В итоге
тело оператора if выполнено не будет, а в консоли появится лишь:
Привет, Ник
Тело оператора if выполняется, только когда условие дает true.
Если же условие дает false, интерпретатор игнорирует конструкцию if
и переходит к следующей за ней строке.
Конструкция if... else
Как я уже говорил, оператор if запускает код своего тела, только если
условие дает true. Но если вы хотите, чтобы по условию false тоже
что-то происходило, вам нужна конструкция if... else.
Давайте дополним предыдущий пример:
var name = "Николай";
console.log("Привет, " + name);
if (name.length > 6) {
console.log("Ну и длиннющее же у вас имя!");
} else {
console.log("Имя у вас не из длинных.");
}
Этот код делает практически то же, что и раньше, однако, если
имя (name) не длиннее 6 символов, он выводит другое, альтернативное
сообщение.
98 Часть I. Основы
Как видно по рис. 6.2, конструкция if... else похожа
на конструкцию if, однако у нее целых два тела, между кото-
рыми расположено ключевое слово else. Первое тело будет
выполнено, если условие дает true, иначе выполняется код
второго тела.
Условие (true или false)
Код, который выполняется,
если условие = true
if (condition) {
console.log("Делаем что-то");
} else {
console.log("Делаем что-то другое!");
}
Код, который выполняется,
если условие = false
Рис. 6.2. Общая структура конструкции if... else
Цепочка из конструкций if... else
Зачастую нужно проверить несколько условий и сделать что-то, если
одно из них дает true. Пример: вы пришли в китайский ресторан и выби-
раете, что бы такое съесть. Больше всего вы любите курицу с лимоном
(lemon chicken), и, если она есть в меню, вы ее закажете. Если же ее нет, вы
закажете говядину в соусе из черных бобов (beef with black bean). Однако
если и это блюдо отсутствует, вы остановитесь на свинине в кисло-
сладком соусе (sweet and sour pork). Наконец, в маловероятном случае,
когда нет ни одного из этих блюд, вы закажете рис с яйцом, поскольку
знаете, что его подают во всех китайских ресторанах.
var lemonChicken = false;
var beefWithBlackBean = true;
var sweetAndSourPork = true;
if (lemonChicken) {
console.log("Отлично! Я буду курицу с лимоном!");
} else if (beefWithBlackBean) {
console.log("Заказываю говядину.");
} else if (sweetAndSourPork) {
console.log("Ладно, закажу свинину.");
} else {
console.log("Что ж, остается рис с яйцом.");
}
6. Условия и циклы 99
Чтобы создать цепочку if... else, начните с обычного оператора if
и после закрывающей фигурной скобки его тела введите ключевые слова
else if, а следом — еще одно условие и еще одно тело. После можно
добавить еще else if, и так до тех пор, пока у вас не закончатся условия
(которых может быть сколько угодно). Завершающая секция else будет
выполнена, если ни одно из условий не дает true. На рис. 6.3 показана
классическая цепочка конструкций if... else.
Для каждого условия указан код,
который выполняется, если условие
дает true
if (condition1) {
console.log("Сделай это, если условие 1 истинно");
} else if (condition2) {
console.log("Сделай это, если условие 2 истинно");
} else if (condition3) {
console.log("Сделай это, если условие 3 истинно");
} else {
console.log("Иначе сделай это");
}
Код, который нужно выполнить,
когда все условия дают false
Рис. 6.3. Цепочка конструкций if... else
Можно прочитать этот код так:
• Если первое условие дает true, выполнить код из первого тела.
• Иначе, если второе условие дает true, выполнить второе тело.
• Иначе, если третье условие дает true, выполнить третье тело.
• Иначе выполнить тело else.
Имея цепочку if... else с завершающей секцией else,
можно не сомневаться, что одно (и только одно) из тел будет
выполнено. Как только выяснится, что одно из условий дает
true, будет запущен код из соответствующего тела, а после-
дующие условия проверяться уже не будут. Если запустить код
из предыдущего примера, мы увидим в консоли «Заказываю
говядину», поскольку beefWithBlackBean — первое из усло-