После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
Введение в циклы for
Концепция
Во всех языках программирования имеются средства организации ветвления. В JavaScript для этого используется оператор IF, который мы только что рассмотрели.
Во всех языках программирования имеются также средства организации повторяющихся операций или циклов. В JavaScript бывают циклы двух видов: While и For.
Обычно циклы For используются, когда известно количество повторений, а циклы While — когда точно не известно, сколько раз нужно повторить цикл. В данном примере будет рассмотрен цикл For.
Сценарий
<HTML> <HEAD> </HEAD> <BODY> <H3>Посчитаем от одного до пяти:</H3> <SCRIPT type="text/javascript"> for (i=1; i<=5; i=i+1) { document.write(i + "<BR>"); } </SCRIPT> </BODY> </HTML>
...вот и все.
Результат работы сценария
На странице столбиком выводятся числа от 1 до 5.
1 2 3 4 5
Разбор сценария
Во-первых, какой короткий сценарий! Вот чистый сценарий без текста, который добавлен только для внешнего оформления:
<SCRIPT type="text/javascript"> for (i=1; i<=5; i=i+1) { document.write(i + "<BR>"); } </script>
Посмотрим на синтаксис оператора for, for (i=1; i<=5; i=i+1). В нем три части. Все они разделены точкой с запятой. Рассмотрим их по порядку.
i=1 задает начальное значение переменной, управляющей циклом. В данном случае это 1, но можно было бы задать 10 или 100. Это просто начальная точка отсчета цикла.
i<=5 — условие, определяющее, сколько в цикле будет повторений. В нашем случае цикл будет повторяться до тех пор, пока i не станет больше пяти. Видите? Мы начали с одного и досчитаем до пяти.
i=i+1 определяет значение шага цикла. В нашем случае программа будет прибавлять 1 к i в конце цикла. Программа может прибавлять и 2, и 20, и 567. Нам просто надо увеличивать i на 1.
Наконец оператор document.write, выводит число на страницу. Обратите внимание на <BR> в операторе document.write — это заставляет каждое число выводиться в новой строке. С таким же успехом можно было вывести их в одну строку, разделив запятыми и просто изменяя часть текста, которая появляется после каждого числа.
Этот код JavaScript повторится пять раз и выведет на странице цифры от 1 до 5. Мы могли бы заставить его досчитать до миллиона, но это потребовало бы слишком много пространства Web-страницы.
Задание
Напишите документ HTML с текстом "Сюрприз!", заключенным в теги <H2> и расположенным на самом верху страницы.. Начните с белого фона. Потом с помощью JavaScript досчитайте до 50000.
В этот момент цвет фона меняется на желтый и появляется текст: "Скоро будет еще один цветной сюрприз..."
Снова досчитайте до 50 тысяч, и тогда фон должен опять поменяться. Успеха.
Подсказка: никаких команд в {фигурные скобки} ставить не надо.
Возможное решение
Можно было просто дважды скопировать сценарий из урока, поменяв 5 на 50 тысяч. Это легкая часть работы. Более трудная состоит в реализации события. Мы удалили document.write после цикла и поставили вместо этого document.bgColor=.
<html> <head> </head> <body bgcolor="white"> <h2>Сюрприз!</h2> <SCRIPT type="text/javascript"> for (i=1; i<=50000; i=i+1) { } document.bgColor="yellow" </script> И еще один сюрприз... <script language="JavaScript"> for (i=1; i<=50000; i=i+1) { } document.bgColor="pink" </script> </body> </html>