Предположим, нам надо узнать и записать на странице сумму всех чисел подряд от 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 для отображения «школьного» знака умножения):
| <tr> <td>2 × 2=4</td> <td>3 × 2=6</td> <td>4 × 2=8</td> <td>5 × 2=10</td> <td>6 × 2=12</td> <td>7 × 2=14</td> <td>8 × 2=16</td> <td>9 × 2=18</td> </tr> |
То есть внутри него ещё один цикл — из </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. Полезная штука. Подобные алгоритмы используются в скриптах меню или календарей.
