10. Оператор цикла for
Мы уже знаем, что с помощью метода setInterval можно бесконечно повторять какой-либо оператор. Однако часто необходимо выполнить оператор только определённое число раз, например, ровно пять раз. Метод setInterval не позволяет это сделать, так как у него нет счётчика. Познакомимся с оператором цикла for, которого называют также циклом со счётчиком.
Цикл — это последовательность операторов, выполнение которой повторяется до тех пор, пока определённое условие не станет ложным. Оператор цикла в любом языке программирования позволяет организовать повторяющиеся вычисления. Избавить себя от рутинной и монотонной работы — это как раз то, для чего человек создаёт машины.
Оператор цикла for имеет вид: for (инициализация; условие; изменение) { оператор; } Здесь:
инициализация задаёт переменную-счётчик и его начальное значение. Имя переменной можно выбрать любое, но часто используют i или j. Эту переменную можно как обычно использовать в теле цикла. Начальное значение обычно выбирают 0 или 1, но может быть и другое, если это удобно по условию задачи.
условие — выражение, проверяющее достижение счётчиком предельного значения. Если условие истинно, то очередной цикл повторится, а если ложно, то выполнение прекращается;
изменение увеличивает счётчик цикла, обычно на 1, но может быть и на другую величину, или наоборот, уменьшать, если это удобно по условию задачи;
оператор — любая группа операторов JavaScript.
Ниже показан цикл, выводящий на страницу числа от 1 до 5 в строку. <script> for(i=1; i<=5; i=i+1) { document.write(i); } </script> Здесь выражение i=1; устанавливает начальное значение переменной-счётчику цикла. Условие i<=5; определяет предел, на котором цикл остановится. В нашем случае переменная цикла пробегает значения от 1 до 5, то есть всего 5 повторений. Выражение i=i+1 увеличивает переменную цикла на единицу. Метод write выводит на страницу значение переменной i.
Справа показана схема алгоритма выполниения цикла.
Задание 1
Используя оператор цикла, выведите на страницу числа:
от 1 до 15;
от -10 до 10;
от -10 до 10, разделённые пробелом;
от -10 до 10 в столбик.
Нетрудно догадаться, что вместо значения переменной на страницу можно выводить любой тег. На схеме изображён алгоритм вывода на страницу нескольких одинаковых картинок.
Задание 2
С помощью оператора цикла выведите на страницу 10 одинаковых картинок.
Задание 3
Выведите нечётные числа из диапазона от 1 до 20 в столбик, а чётные числа из диапазона от 20 до 40 — в строку.
Анализ задания 3 Как известно, нечётные числа начинаются с 1 и отличаются друг от друга на 2. Следовательно, переменная цикла должна нарастать каждый раз на 2. Аналогично и чётные числа, только начинаться они должны с чётного чила. Так как выводиться они должны по-разному, то необходимы два разных цикла.
Вложенный цикл
Часто необходимо внурти одного цикла проводить ещё один цикл вычислений. Это бывает, когда нужно получить таблицу значений. Таблица состоит из строк, каждая из которых разбита на одинаковое количество ячеек. Поэтому необходим цикл, в теле которого создаётся строка, а в этой строке другой цикл создаёт ячейки. В этом случае говорят, что внутренний цикл вложен во внешний.
Рассмотрим пример, выводящий на страницу таблицу сложения: for(i=0; i<=90; i=i+10) { for(j=1; j<=10; j=j+1) document.write(i+j +' '); document.write('<br>') }
Здесь для каждого значения i десять раз выводится значение суммы i+j. Для того, чтобы между числами был большой интервал, используются несколько символов неразрывного пробела . Чтобы новый десяток чисел начинался с новой строки, в конце тела внешнего цикла добавляется разрыв строки <br>.
Cхема алгоритма показана на рисунке.
Задание 4
Выведите на страницу таблицу умножения. Первый сомножитель должен быть в диапазоне от 2 до 9, а второй — от 2 до 10. На странице должны выводиться оба сомножителя, знак умножения между ними, знак равенства и произведение.
Что должно получиться
Проанализируем задание. На схеме изображён алгоритм решения задания. Нетрудно заметить, что она мало отличается от предыдущего алгоритма таблицы сложения. Основное внимание нужно уделить выводу с помощью метода write сомножителей, знаков умножения и равенства.
Задание 5
Заключите полученную таблицу умножения в табличную сетку.
Что должно получиться
Проанализируем задание. Для того, чтобы понять, где и какие теги должны быть расположены, полезно на странице разместить временную таблицу, например, из 3 строк и 3 столбцов. Соответствующие теги нужно записать в скрипте с помощью метода write.