Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный
Лекция 25:

Введение в циклы for

< Лекция 24 || Лекция 25 || Лекция 26 >
Аннотация: Повторяющиеся действия. Циклы с предусловием.

Концепция

Во всех языках программирования имеются средства организации ветвления. В 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>
< Лекция 24 || Лекция 25 || Лекция 26 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Эдуард Семынин
Эдуард Семынин

Здравствуйте.

Перестали быть видны лекции и тесты практикума по программированию на JavaScript. Уже второй день из моего аккаунта виден лишь план занятий. В чем может быть проблема?

 

Alex Chekalov
Alex Chekalov
Украина, Poltava
Виктория Вернер
Виктория Вернер
Украина, Днепропетровск, ДИИТ, 2012