JavaScript для детей. Самоучитель по программированию. Ник Морга. Москва Манн, Иванов и Фербер 2016

6. Условия и циклы
97
Условные конструкции
В JavaScript есть два вида условных конструкций — это ifиif... else. Оператор if выполняет фрагмент кода, если какое-то условие истинно
(true). Например: если вы хорошо себя вели, то получите конфетку. А оператор 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
(condition) {
console log
(
"Делаем что-то"
);
}
Код, который выполняется, если условие дает true, называется телом if
Конструкция if проверяет, истинно ли условие
Рис. 6.1. Общая структура конструкции
if
If
— если
If… else
— если… иначе

98
Часть I. Основы
После загрузки нашей 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 символов, он выводит другое, альтернативное сообщение.

6. Условия и циклы
99
Как видно по рис. 6.2, конструкция if... else похожа на конструкцию if, однако у нее целых два тела, между которыми расположено ключевое слово else. Первое тело будет выполнено, если условие дает true, иначе выполняется код второго тела.
if
(condition) {
console log
(
"Делаем что-то"
);
} else
{
console log
(
"Делаем что-то другое!"
);
}
Код, который выполняется, если условие = true
Условие (true или false)
Код, который выполняется, если условие = 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
(
"Что ж, остается рис с яйцом."
);
}

100
Часть I. Основы
Чтобы создать цепочку if... else, начните с обычного оператора if и после закрывающей фигурной скобки его тела введите ключевые слова else if, а следом — еще одно условие и еще одно тело. После можно добавить еще else if, и так до тех пор, пока у вас не закончатся условия
(которых может быть сколько угодно). Завершающая секция else будет выполнена, если ни одно из условий не дает true. На рис. 6.3 показана классическая цепочка конструкций if... else.
if
(condition1) {
console log
(
"Сделай это, если условие 1 истинно"
);
} else if
(condition2) {
console log
(
"Сделай это, если условие 2 истинно"
);
} else if
(condition3) {
console log
(
"Сделай это, если условие 3 истинно"
);
} else
{
console log
(
"Иначе сделай это"
);
}
Для каждого условия указан код, который выполняется, если условие дает true
Код, который нужно выполнить, когда все условия дают false
Рис. 6.3. Цепочка конструкций
if...else
Можно прочитать этот код так:
• Если первое условие дает true, выполнить код из первого тела.
• Иначе, если второе условие дает true, выполнить второе тело.
• Иначе, если третье условие дает true, выполнить третье тело.
• Иначе выполнить тело else.
Имея цепочку if... else с завершающей секцией else, можно не сомневаться, что одно (и только одно) из тел будет выполнено. Как только выяснится, что одно из условий дает true, будет запущен код из соответствующего тела, а последующие условия проверяться уже не будут. Если запустить код из предыдущего примера, мы увидим в консоли «Заказываю говядину», поскольку beefWithBlackBean — первое из условий в цепочке if... else, которое равно true. Если же ни одно из условий не даст true, будет выполнено тело else.

6. Условия и циклы
101
Также обратите внимание: указывать завершающее else необязательно. Однако если вы этого не сделаете, то в случае, когда ни одно из условий не дает true, ничего из цепочки if... else выполнено не будет.
var lemonChicken
=
false
;
var beefWithBlackBean
=
false
;
var sweetAndSourPork
=
false
;
if
(lemonChicken) {
console log
(
"Отлично! Я буду курицу с лимоном!"
);
} else if
(beefWithBlackBean) {
console log
(
"Заказываю говядину."
);
} else if
(sweetAndSourPork) {
console log
(
"Ладно, закажу свинину."
);
}
В этом примере мы не стали указывать завершающую секцию else.
Поскольку ни одного из ваших любимых блюд нет, в консоли не появится никаких сообщений (и, по всей видимости, вы останетесь без обеда).
ПОПР ОБУ ЙТЕ !
Напишите программу с переменной name. Если в этой переменной находится ваше имя, напечатайте: «Привет мне!» — иначе напечатайте: «Привет, незнакомец!» (Подсказка: используйте === для сравнения переменной name с вашим именем.)
Теперь дополните программу, чтобы она здоровалась с вашим папой, если в name его имя, и с вашей мамой, если в name ее имя. Если же там что-то иное, по-прежнему печатайте «Привет, незнакомец!».
Циклы
Как мы теперь знаем, условные конструкции позволяют запускать фрагмент кода, если условие дает true. Циклы, с другой стороны, позволяют выполнять фрагмент кода многократно — до тех пор, пока некое условие дает true. Примеры: до тех пор, пока в тарелке есть пища, следует продолжать есть; до тех пор, пока на лице грязь, следует продолжать умываться.
Цикл while
Самый простой из циклов — цикл while. Этот цикл снова и снова выполняет код своего тела, до тех пор, пока заданное условие не перестанет давать true. Используя цикл while, мы имеем в виду следующее: «Продолжай делать это, пока условие дает true. Но если оно даст false, остановись».
While
— до тех пор, пока

102
Часть I. Основы
Как видно на рис. 6.4, цикл while начинается с ключевого слова while, после которого в скобках стоит условие, а за ним идет тело, заключенное в фигурные скобки.
while
(condition) {
console log
(
"Делаем что-то"
);
i
++
;
}
Код, который будет выполняться снова и снова, до тех пор, пока условие дает true
(что-то в этом коде должно влиять на условие, чтобы в какой-то момент оно дало false)
Это условие проверяется при каждом повторе цикла
Рис. 6.4. Общая структура цикла
while
Аналогично конструкции if, тело цикла while выполняется, если заданное условие дает true. Но, в отличие от if, после того как тело цикла выполнено, условие будет проверено снова, и, если оно все еще дает true, тело цикла начнет выполняться опять. И так будет продолжаться, пока условие не даст false.
Считаем овец с помощью цикла while
Предположим, у вас проблемы со сном и вы решили посчитать овец.
Но раз уж вы программист, почему бы не написать программу, которая будет считать овец за вас?
var sheepCounted
=
0;

while
(sheepCounted
<
10) {

console log
(
"Посчитано овец: "
+
sheepCounted
+
"!"
);
sheepCounted
++
;
}
console log
(
"Хрррррррррр-псссс"
);
Мы создали переменную sheepCounted и задали ей значение 0. Дойдя до цикла while в строке

, мы проверяем, правда ли, что sheepCountedменьше 10. Поскольку
0 меньше 10, выполняется код в фигурных скобках (тело цикла, которое начинается со строки

) и выражение "Посчитано овец: " + sheepCounted + "!" выводится в консоль как «Посчитано овец: 0!». Далее команда sheepCounted++ увеличивает значение
Sheep counted
— посчитанные овцы

6. Условия и циклы
103
sheepCounted на 1, мы возвращаемся к началу цикла, и все повторяется снова:
Посчитано овец: 0!
Посчитано овец: 1!
Посчитано овец: 2!
Посчитано овец: 3!
Посчитано овец: 4!
Посчитано овец: 5!
Посчитано овец: 6!
Посчитано овец: 7!
Посчитано овец: 8!
Посчитано овец: 9!
Хрррррррррр-псссс
Тело цикла повторяется, пока sheepCounted не примет значение 10, после чего условие становится ложным
(false), ведь 10 не меньше 10.
И тогда программа переходит к строке, идущей после цикла, — в данном случае на консоль выводится "Хрррррррррр-псссс".
Бесконечный цикл
Имея дело с циклами, помните: если условие никогда не даст false, цикл будет повторяться бесконечно (по крайней мере до тех пор, пока вы не закроете страницу в браузере). Например, не будь в теле цикла строчки sheepCounted++;, в sheepCountedвсегда был бы 0 и программа печатала бы:
Посчитано овец: 0!
Посчитано овец: 0!
Посчитано овец: 0!
Посчитано овец: 0!
Поскольку повторения цикла ничем не ограничены, программа будет печатать эту строку снова и снова, без конца. Это называется бес-
конечным циклом.
Цикл for
Оператор for упрощает создание циклов, устроенных следующим образом: сначала создается переменная, а затем тело цикла выполняется снова и снова до тех пор, пока условие дает true, причем в конце каждого повтора значение переменной обновляется. Программируя цикл for, мы создаем переменную, задаем условие, указываем, как
For
— для

104
Часть I. Основы должна меняться переменная после каждого повтора, — и лишь затем переходим к написанию тела цикла. Например, вот как можно считать овец с помощью for:
for
(
var sheepCounted
=
0;
sheepCounted
<
10;
sheepCounted
++
)
{
console log
(
"Посчитано овец: "
+
sheepCounted
+
"!"
);
}
console log
(
"Хрррррррррр-псссс"
);
Согласно рис. 6.5, в составе цикла for есть три выражения, разделенные точками с запятой: это настройка, проверка условия и при ращение.
for
(настройка; условие; приращение) {
console log
(
"Делаем что-то"
);
}
Код, который будет выполняться до тех пор, пока условие дает true
Условие: true или false
Этот код будет выполнен до начала цикла
Код, который будет выполняться после каждого повтора тела цикла
Рис. 6.5. Общая структура цикла
for
Настройка (var sheepCounted = 0) выполняется до запуска цикла.
Как правило, здесь создают переменную для отслеживания количества повторов. В нашем случае это переменная sheepCounted с начальным значением 0.
Условие (sheepCounted < 10) проверяется перед каждым повтором тела цикла. Если условие дает true, тело выполняется, иначе цикл заканчивает работу. В нашем случае цикл остановится, когда значение sheepCounted достигнет 10.
Приращение (sheepCounted++) выполняется после каждого повтора тела цикла. Как правило, здесь изменяют значение переменной цикла. В этом примере мы после каждого повтора увеличиваем sheepCounted на 1.
Циклы for удобны, когда нужно сделать что-то определенное количество раз. Например, эта программа три раза выведет слово «Привет!».
var timesToSayHello
=
3;
for
(
var i
=
0; i
<
timesToSayHello; i
++
) {
console log
(
"Привет!"
);
}
Times to say hello
— сколько раз сказать
«привет»

6. Условия и циклы
105
Вот что появится в консоли:
Привет!
Привет!
Привет!
Вообразите, что вы интерпретатор JavaScript, который выполняет этот код. Сначала вы создадите переменную timesToSayHello, задав ей значение 3. Дойдя до цикла for, вы выполните настройку, то есть создадите переменную i и присвоите ей значение 0. Далее вы проверите условие. Поскольку в переменной i сейчас 0, а в timesToSayHello — 3, условие даст true и вы запустите тело цикла, где печатается строка "Привет!". А затем выполните приращение, то есть увеличитеi на 1.
Теперь снова проверьте условие. Оно по-прежнему даст true, и вы опять перейдете к телу цикла, а затем к приращению. И так будет происходить до тех пор, пока i не примет значение 3. После этого условие даст false (3 не меньше, чем 3) — таким образом, вы завершите цикл.
Цикл for, массивы и строки
Очень часто цикл for используют для перебора всех элементов массива или всех символов строки. Например, вот цикл, который печатает названия всех животных, которые есть в зоопарке:
var animals
=
[
"лев"
,
"фламинго"
,
"белый медведь"
,
"удав"
];
for
(
var i
=
0; i
< animals.
length
; i
++
) {
console log
(
"В этом зоопарке есть "
+ animals[i]
+
"."
);
}
В этом цикле i сначала равняется 0, а затем возрастает до значения animals.length - 1, то есть 3. Числа 0, 1, 2 и 3 — индексы элементов в массиве animals. Это значит, что при каждом повторе цикла i принимает значение очередного индекса, а animals[i] соответствует очередному животному из массива animals. Когда в i число 0, animals[i] даст нам строку "лев". Когда в i число 1, animals[i] даст "фламинго" и т. д.
Запустив эту программу, мы увидим:
В этом зоопарке есть лев.
В этом зоопарке есть фламинго.
В этом зоопарке есть белый медведь.
В этом зоопарке есть удав.

106
Часть I. Основы
Как мы уже знаем из второй главы, к отдельным символам строки можно обращаться тем же способом, что и к элементам массива, — с помощью квадратных скобок. В следующем примере цикл for используется для вывода символов имени: var name
=
"Ник"
;
for
(
var i
=
0; i
< name.
length
; i
++
) {
console log
(
"В моем имени есть буква "
+ name[i]
+
"."
);
}
Вот что выдаст эта программа:
В моем имени есть буква Н.
В моем имени есть буква и.
В моем имени есть буква к.
Другие варианты применения for
Как вы, может быть, догадываетесь, не обязательно сначала задавать переменной цикла значение 0, а затем каждый раз увеличивать ее на 1.
Например, вот как можно напечатать все степени двойки, не превышающие числа 10 000:
for
(
var x
=
2; x
<
10000; x
= x
*
2) {
console log
(x);
}
Здесь мы присваиваем x значение 2 и увеличиваем его командой x = x * 2, то есть, удваиваем значение x при каждом повторе цикла.
В результате x очень быстро возрастает:
2 4
8 16 32 64 128 256 512 1024 2048 4096 8192

6. Условия и циклы
107
Вуаля! Этот несложный цикл печатает все степени двойки меньше
10 000.
ПОПР ОБУ ЙТЕ !
Напишите цикл for, который печатает степени тройки, не превышающие
10 000 (программа должна выводить 3, 9, 27 и т. д.)
Перепишите это задание, вместо for использовав цикл while.
(Подсказка: установите начальное значение перед входом в цикл.)
Что мы узнали
Мы разобрались с условными конструкциями и циклами. Условные конструкции нужны, чтобы выполнять некие действия, если условие дает true. А с помощью циклов можно многократно выполнять фрагмент кода — до тех пор, пока условие дает true. Условными конструкциями можно пользоваться, чтобы запускать код в подходящие для этого моменты, а циклами — чтобы программа выполнялась так долго, как требуется. И это открывает перед нами целый мир новых возможностей в программировании.
В следующей главе мы воспользуемся мощью условных конструкций и циклов при создании нашей первой игры!

108
Часть I. Основы
УПРА ЖНЕНИЯ
Выполните эти упражнения, чтобы попрактиковаться в работе с условными конструкциями и циклами.
#1. Прекрасные животные
Напишите цикл for, который изменяет массив животных, делая их прекрасными! Например, если есть следующий массив:
var animals
=
[
"Кот"
,
"Рыба"
,
"Лемур"
,
"Комодский варан"
];
то ваш цикл должен сделать его таким:
[
"Кот - прекрасное животное"
,
"Рыба - прекрасное животное"
,
"Лемур - прекрасное животное"
,
"Комодский варан - прекрасное животное"
]
Подсказка: вам понадобится переприсвоить значения для каждого индекса, то есть присвоить новые значения уже существующим элементам. Например, сделать первое животное прекрасным можно так:
animals[0]
= animals[0]
+
" - прекрасное животное"
;
#2. Генератор случайных строк
Напишите генератор случайных строк. Для этого вам понадобится строка со всеми буквами алфавита:
var alphabet
=
"абвгдеёжзийклмнопрстуфхцчшщъыьэюя"
;
Чтобы выбирать из этой строки случайную букву, можно использовать примерно такой же код, как для генератора случайных дразнилок из третьей главы:
Math.fl oor(Math.random() * alphabet.length). Так вы получите случайный индекс в строке.
Затем, воспользовавшись квадратными скобками, можно получить символ по этому индексу.
Начните создавать случайную строку с пустой строки
(var randomString = ""). Затем добавьте цикл while и при каждом его повторе добавляйте в строку новый случайный символ — до тех пор, пока длина строки randomString не превысит шесть символов (или любой другой длины на ваш выбор).
Alphabet
— алфавит
Random string
— случайная строка

Добавлять символ в конец строки можно с помощью оператора
+=. После того как цикл закончит работу, выведите получившуюся строку в консоль, чтобы полюбоваться на свое творение!
#3. h4ck3r sp34k
Переведите англоязычный текст на «хакерский язык» (h4ck3r sp34k)! Многим в интернете нравится заменять некоторые буквы похожими на них числами — например, число «4» похоже на букву «A», «3» похоже на «E», «1» — на «I», а «0» — на «О». Хотя цифры напоминают скорее заглавные буквы, мы будем заменять ими буквы строчные. Чтобы перевести обычный текст на «хакерский язык», понадобится строка с исходным текстом и новая пустая строка для результата: var input
=
"javascript is awesome"
;
var output
=
""
;
Теперь воспользуйтесь циклом for, чтобы перебрать все символы исходной строки. Встретив букву «a», добавьте к результирующей строке «4». Встретив «e», добавьте «3», встретив «i», добавьте «1», а встретив «o» — «0». В противном случае просто добавляйте к результату исходный символ. И снова оператор
+= отлично подойдет для добавления символа в конец строки.
После завершения цикла выведите результирующую строку в консоль. Если программа работает верно, вы должны увидеть следующее:
"j4v4scr1pt 1s 4w3s0m3".
h4ck3r sp34k — hacker speak
— хакерский язык
Input
— входное значение
Output
— выходное значение
JavasScript is awesome
—
JavaScript очень классный

110 7
П И Ш Е М И Г Р У « В И С Е Л И Ц А »
В этой главе мы разработаем игру «Виселица» и разберемся, как с помощью диалоговых окон сделать ее интерактивной, запрашивая у игрока данные.
«Виселица» — игра на угадывание слов. Один игрок выбирает слово, а второй пытается его отгадать.
Например, если первый игрок загадал слово КАПУСТА, он изобразит семь «пустых мест», по одному на каждую букву слова:
_ _ _ _ _ _ _
Второй игрок старается отгадать это слово, называя буквы. Каждый раз, когда он угадывает букву, первый игрок заполняет пустоты, вписывая ее везде, где она встречается. Например, если второй игрок назвал букву «А», первый должен вписать все «А» для слова КАПУСТА, вот так:
_ А _ _ _ _ А
Если второй игрок назовет букву, которой нет в слове, у него отнимается очко, а первый игрок рисует руку, ногу или другую часть тела человечка. Если первый игрок закончит рисовать человечка раньше, чем второй угадает все буквы, второй игрок проиграл.
В нашем варианте «Виселицы» JavaScript будет выбирать слово, а игрок-человек — отгадывать буквы. И рисовать человечка наша программа не будет, поскольку мы пока не знаем, как это делается (рисованием на JavaScript мы займемся в главе 13).

111
Взаимодействие с игроком
Для этой игры нам нужно, чтобы игрок (человек) мог каким-то образом вводить в программу свои ответы. Один из способов это сделать — открывать диалоговое окно (в JavaScript оно называется prompt), в котором игрок может что-нибудь напечатать.
Создаем диалоговое окно
Сначала создадим новый HTML-документ. Выбрав в меню File
Save As, сохраните файл page.html из пятой главы под новым именем —
prompt.html. Чтобы создать диалоговое окно, введите следующий код между тегов

перейти в каталог файлов