Четвертый урок (динамическая генерация страницы, циклы)

1. Введение

В первом уроке мы общались о том, что JavaScript нужен для того, чтобы обеспечивать анимацию страницы или ее динамическую генерацию. Для первого мы еще мало что знаем, но в чем же состоит динамическая генерация страницы? Мы пока что смогли обеспечить ветвление в нашем алгоритме (при помощи конструкции if), но саму страницу генерировать мы так и не научились, только могли выводить мгновенные сообщения пользователю.

Как раз в этом уроке мы научимся заполнять нашу страницу программно, по крайней мере, познакомимся с первым способом. А так же мы рассмотрим простой способ для упрощения кода при повторяющихся действиях. Хотя он покажется на первый взгляд сложным.

2. Динамическое заполнение страницы

До этого момента мы пользовались конструкцией alert(), которая выводила мгновенное сообщение на экран. Но что делать, если мы хотим выводить сообщения прям в окно браузера? Для этого нам потребуется следующая конструкция:

document.write();

Е е синтаксис похож с синтаксисом конструкции alert(), т.е. если записать в скобках число, либо строку они будут выведены, только на этот раз это будет не сообщение, а текст будет выведен в окно браузера. Введенный текст будет записан в конец всего того, что уже было на экране, т.е. дозапишеться в самый конец. Текст, который будет добавлен при помощи JS, мы не увидим в исходном коде страницы. Хотя это делают некоторые браузеры, например, Google Chrome, если вы воспользуетесь Developer Tools, который если не забыли вызывается в меню, вызванном правой кнопкой мыши «Просмотр кода элемента».

Выведем на экран простой текст:

<script>         document.write("Текст, выведенный с помощью команды write"); </script>

Результат выполнения этих команд:

Текст, выведенный с помощью команды write

Отметим следующее:

Для обработки текста можно использовать команды HTML, например, для вывода текста жирным шрифтом задайте:

<script>         document.write("<B>Жирный шрифт</B>"); </script>

И Вы получите:

Жирный шрифт

Аналогично, можно вывести курсивный шрифт и с подчеркиванием, изменить размер и цвет текста.

Для вывода графического изображения picture.gif зададим команду:

<script>         document.write("<IMG SRC='picture.gif' />"); </script>

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

Теперь используя, условный оператор на экране может появиться разные варианты текстов, изображений, элементов HTML.

Я думаю, не составит переписать старые программы так, чтобы был использован вывод не сообщением, а текстом в экране браузера.

3. Циклы

Циклы — это инструкции, выполняющие одну и туже последовательность действий, пока действует определенное условие.

В реальной жизни мы довольно часто сталкиваемся с циклами. Например, ходьба человека — вполне циклическое явление: шаг левой, шаг правой, снова левой-правой и т.д., пока не будет достигнута некая цель (например, школа или магазин). В компьютерных программах наряду с инструкциями ветвлениями (т.е. выбором пути действия) также существуют инструкции циклов (повторения действия). Если бы инструкций цикла не существовало, то тогда пришлось бы много раз вставлять в программу один и тот же код подряд столько раз, сколько нужно выполнить одинаковую последовательность действий. Если бы не было циклов, то программирование было бы достаточно скучным занятием.

Например, представим алгоритм, реализующий мытьё тарелок:

0. Взять тарелку из раковины.

1. Намылить тарелку средством для мытья посуды.

2. Потереть тарелку мочалкой.

3. Смыть мыльную пену с тарелки.

4. Вытереть тарелку.

5. Поставить тарелку на полку.

6. Конец программы.

В данном, на первый взгляд толковом, алгоритме есть одна маленькая тонкость - если тарелок будет больше одной, то вымытой все равно окажется только одна. Это связано с тем, что программа выполняет все действия линейным образом - сверху вниз по порядку. Следовательно, нам необходимо придумать каким способом заставить программу повторить набор конкретных действий, и при этом определить нужное количество повторов. Правильный алгоритм будет выглядеть так:

0. Взять тарелку из раковины.

1. Намылить тарелку средством для мытья посуды.

2. Потереть тарелку мочалкой.

3. Смыть мыльную пену с тарелки.

4. Вытереть тарелку.

5. Поставить тарелку на полку.

6. Если есть еще грязные тарелки вернуться к пункту 0.

7. Конец программы.

Обратим внимание на то, что для того, что бы определить, повторять ли действия сначала используется условие "Если есть еще грязные тарелки". Если это условие истинно - действия повторяются, если ложно, выполняется следующий, 7-ой пункт алгоритма.

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

Давайте представим этот алгоритм в виде блок-схемы.

В блоке №1 и выполняются действие «помывки тарелки», а вот в условном блоке №2 выполняется проверка: есть ли еще грязные тарелки? Так вот если да, то мы возвращаемся назад, если нет, тогда идем дальше.

Таким образом, мы описали одну из конструкций циклов в JavaScript, которая называется do .. while. С английского она переводиться «делать .. пока». Слово «пока» расшифровывается вовсе не как «прощай», а имеет смысл «пока что-то выполняется». Для нашего случая: «пока есть грязные тарелки».