Персональный сайт - Операторы цикла: for

Урок 6 - Операторы цикла: for

арифметическая прогрессия (сумма);
арифметическая прогрессия (числа по порядку);
таблица умножения

Хотя JavaScript не универсален и не всемогущ, не велик и не ужасен, это всё же язык программирования, и он позволяет выполнять сложные математические вычисления. Иногда возникают ситуации, когда требуется многократно выполнить программный код, пока не выполнится определённое условие. Допустим, сдать карты в пасьянсе (очень хитроумная задача). Или сложить подряд числа от 1 до 15 (простейший вариант). Для этих целей существуют операторы, которые позволяют выполнять циклы — повторяющиеся действия.

Оператор for

Его синтаксис напоминает оператор if: условие в круглых скобках, код — в фигурных. Но условие более сложное:

for (начало; область действия; шаг)
{код}

Начало: здесь задаётся начальное условие, при котором оператор включается.

Область действия: границы, в которых выполняется код.

Шаг: способ продвижения цикла от начального к конечному условию.

Арифметическая прогрессия

Предположим, нам надо узнать и записать на странице сумму всех чисел подряд от 1 до 10.

var i, x = 0;
for (i = 1; i <= 10; i++)
{x += i}
document.write(x)

Результат:

Разберём:

Объявляем переменную счётчика i и переменную, собирающую знчения — x. Назначим ей нулевое значение. Все значения должны куда-то складываться, а неназначенная переменная — это Null («посмотришь на его место, и нет его»).

Начальное значение счётчика — 1. Граница — до 10 включительно, то есть меньше или равно 10. Шаг — 1 (каждое следующее целое число).

Привыкайте к специальным обозначениям. Если не помните, что такое ++ или +=, зайдите в прошлый урок и посмотрите табличку.

В коде x += i каждое новое значение счётчика приплюсовывается к переменной x.

Затем выходим из цикла и публикуем на странице итоговое значение.

А теперь чуть поинтереснее.

Вытащим на страницу все промежуточные значения счётчика. Для этого поместим document.write не выходя из цикла (то есть внутри фигурных скобок). А чтобы числа не печатались сплошной нераздельной строкой, добавим в него разделитель:

var i, x = 0;
for (i = 1; i <= 10; i++)
{x += i
document.write(x + "; ")
}

Результат:

1; 3; 6; 10; 15; 21; 28; 36; 45; 55;

А как сделать, чтобы вся строка заканчивалась, скажем, точкойх

Для этого скомбинируем этот оператор с уже известным нам оператором if...else. То есть при последнем значении i (10) у нас должна выпасть точка, при остальных — точка с запятой и пробел:

var i, x = 0;
for (i = 1; i <= 10; i++)
{x += i
if (i == 10) {document.write(x + ".")}
else {document.write(x + "; ")}
}

Результат:

1; 3; 6; 10; 15; 21; 28; 36; 45; 55.

Примечание: Кстати, вот оно, реальное различие методов write и writeln. Вместо пробела здесь можно применить метод writeln. Если мы запишем

........
........
if (i == 10) {document.write(x + ".")}
else {document.writeln(x + ";")}
........

то пробел делать не обязательно, его поставит сам метод.

Поскольку конечное значение счётчика — уже существующее условие, а не назначаемая величина, ставим сдвоенное равенство. И не запутайтесь в фигурных скобках.

Таблица умножения

А сейчас, допустим, нам захотелось вывести таблицу умножения — вот такую:

2х2=4	3х2=6	4х2=8	5х2=10	6х2=12	7х2=14	8х2=16	9х2=18
2х3=6	3х3=9	4х3=12	5х3=15	6х3=18	7х3=21	8х3=24	9х3=27
2х4=8	3х4=12	4х4=16	5х4=20	6х4=24	7х4=28	8х4=32	9х4=36
2х5=10	3х5=15	4х5=20	5х5=25	6х5=30	7х5=35	8х5=40	9х5=45
2х6=12	3х6=18	4х6=24	5х6=30	6х6=36	7х6=42	8х6=48	9х6=54
2х7=14	3х7=21	4х7=28	5х7=35	6х7=42	7х7=49	8х7=56	9х7=63
2х8=16	3х8=24	4х8=32	5х8=40	6х8=48	7х8=56	8х8=64	9х8=72
2х9=18	3х9=27	4х9=36	5х9=45	6х9=54	7х9=63	8х9=72	9х9=81
2х10=20	3х10=30	4х10=40	5х10=50	6х10=60	7х10=70	8х10=80	9х10=90

Да чтобы руками эту таблицу не форматировать и опечаток не наделать.

Давайте найдём алгоритм для составления такой таблицы.

Как мы помним из HTML, таблицы надстраиваются горизонтальными рядами <tr>, которые, в свою очередь, делятся на ячейки<td>.

Рассмотрим содержимое первого горизонтального ряда.

Первый множитель увеличивается на единицу. Второй остаётся без изменений.

А в вертикальных столбцах — наоборот. Первый стоит на месте, а второй приращивается.

Рядов <tr> в нашей таблице девять (от 2 до 10), а колонок в каждом из них по 8 (от 2 до 9).

Попробуем сначала сформировать все <tr> через счётчик i.

var i;
for (i = 2; i <= 10; i++)
{document.write("<tr>");
document.write("</tr>")}

Почему от 2 до 10, а не от 1 до 9?

Догадайтесь с трёх раз...

Ну конечно, мы их потом будем использовать и для значений содержимого таблицы, а оно начинается с 2х2.

Наш первый <tr> должен выглядеть вот так (× — это спецсимвол HTML для отображения «школьного» знака умножения):

То есть внутри него ещё один цикл — из </td>.

Эти циклы можно вкладывать, как и операции с if...else. Вложим?

Для второго цикла определим счётчик j.

var i, j;
document.write("<table border=\"1\" cellspacing=\"0\" cellpadding=\"2\" align=\"center\">")
for (i = 2; i <= 10; i++)
{document.write("<tr>");
for (j = 2; j < 10; j++)
{document.write("<td>" + "</td>")}
document.write("</tr>")
}
document.write("</table>")

Обратили внимание? Если i <= 10, то j < 10 (без равенства), так как горизонтальных ячеек на одну меньше.

Пустая таблица свёрстана, осталось заполнить её содержимым. Первый множитель приращивается в каждом </td>, значит, он соответствует значению j. А второй, возрастающий в каждом </tr>, — значению i:

j + "×" + i + "=" + (i*j)

Подставим это в наш код:

var i, j;
document.write("<table border=\"1\" cellspacing=\"0\" cellpadding=\"2\" align=\"center\">")
for (i = 2; i <= 10; i++)
{document.write("<tr>");
for (j = 2; j < 10; j++)
{document.write("<td>" + j + "×" + i + "=" + (i * j) + "</td>")}
document.write("</tr>")
}
document.write("</table>")

Таблица умножения готова. Таким же способом можно сделать, например, таблицу символов Unicode. Полезная штука. Подобные алгоритмы используются в скриптах меню или календарей.

Итак, мы узнали:

как работает оператор цикла for.

источник http://www.dikarka.ru

ОТПРАВИТЬ ПИСЬМО

Сделать бесплатный сайт с uCoz