В этой главе мы изучили механику работы инструкций if…else и их кузена — инструкции switch. В будущих главах вы увидите, что мы будем часто взаимодействовать с этими инструкциями, как если бы они были нашими старыми друзьями. А к концу книги вы сдружитесь еще больше.
Если у вас есть какие-либо вопросы, касающиеся пройденного материала, не беспокойтесь. Обращайтесь с ними на форуме по адресу: https://forum.kirupa.com. Там вы получите быструю помощь от меня или других добрейших разработчиков.
Глава 5. Циклы for, while и do…while
Иногда при написании программы требуется использовать повторяющиеся действия или выполнять код несколько раз. Например, нам нужно вызвать функцию saySomething десять раз подряд.
Один из способов это сделать — просто перекопировать ее 10 раз и вызвать:
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
Такой способ сработает, и мы добьемся того, чего хотели… но так делать не стоит. Все же дублирование кода — плохая идея. Если бы нам давали пятак каждый раз, когда вы это прочтете, мы стали бы на четыре или пять монет богаче. #killing_it
Итак, даже если мы решим продублировать код несколько раз вручную, такой подход не сработает на практике. Количество повторений, которые потребуется сделать, будет варьировать в зависимости от таких внешних факторов, как число элементов в коллекции данных, результат, полученный от веб-сервиса, число букв в слове и многих других вещей, которые постоянно будут меняться. Такое количество повторов не будет всегда одинаковым, к примеру 10. Часто нам может потребоваться выполнение ОГРОМНОГО количества повторов. И нам уж точно не захочется перекопировать фрагменты кода сотни или тысячи раз, чтобы получить нужное число повторений. Это было бы ужасно.
Альтернатива alert
В предыдущих главах мы использовали функцию alert для отображения текста на экране. В этой главе мы познакомимся с другим, не столь навязчивым способом отображения. И это будет функция document.write:
document.write("Show this on screen!");
С помощью этой функции можно вывести заданный текст на страницу браузера без использования диалогового окна, которое к тому же нужно постоянно закрывать. Вы поймете, почему мы предпочитаем более упрощенные структуры, когда изучите циклы и то, как выводить на экран большое количество информации.
Нужно универсальное решение для повтора кода с сохранением контроля над тем, сколько раз этот повтор будет произведен. В JavaScript такое решение представлено в виде цикла, который может производиться в трех вариантах:
• циклы for;
• циклы while;
• циклы do…while.
Каждый из вариантов позволяет определить код, который требуется повторить (то есть цикл), а также способ остановить это повторение при соблюдении заданного условия. В следующих разделах мы все это изучим.
Поехали!
Цикл for
Один из наиболее популярных способов создания цикла — это использование инструкции for. Цикл for позволяет повторять выполнение кода до тех пор, пока заданное нами выражение не вернет false. Разберем наглядный пример.
Если преобразовать прошлый пример с saySomething с помощью for, он будет выглядеть так:
for (let i = 0; i < 10; i++) {
saySomething();
}
function saySomething() {
document.writeln("hello!");
}
Если вы хотите сразу испробовать свои силы, попробуйте вписать следующий код в тег script внутри HTML-документа:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loops!</title>
<style>
</style>
</head>
<body>
<script>
for (let i = 0; i < 10; i++) {
saySomething();
}
function saySomething() {
document.writeln("hello!");
}
</script>
</body>
</html>
Когда документ будет готов, сохраните его и выполните предпросмотр в браузере. На рис. 5.1 показано то, что вы увидите после загрузки страницы.
Рис. 5.1. Слово hello! повторяется слева направо
Слово hello! повторится десять раз по всей странице. Это стало возможным благодаря циклу for. Поэтому в виде благодарности за полученный нами опыт изучим все аспекты работы цикла. А вот и наша звезда:
for (let i = 0; i < 10; i++) {
saySomething();
}
Это цикл for, и он существенно отличается от тех инструкций, с которыми мы познакомились к этому моменту. Для понимания отличий представим цикл for в обобщенном виде, как показано на рис. 5.2.