Операторы
цикла
В языке JavaScript имеется четыре цикла: while, do/while, for и for/in. Здесь мы
рассмотрим только первые три. А о последнем операторе будет рассказано разделе
“Массивы“.
Цикл while (оператор цикла с
предусловием)
Базовым циклом
для JavaScript можно считать
цикл while. Он имеет следующий синтаксис:
while (логическое выражение)
{
операторы
}
ИСПОЛНЕНИЕ ОПЕРАТОРА ЦИКЛА ПО ШАГАМ:
1. Проверяется условие;
2. Если логическое выражение истинно, то
выполняются операторы и переходит к шагу 1. Если оно ложно, то выполнение
оператора заканчивается и выполняется следующий оператор в программе.
Пример
вывода на экран таблицы умножения для числа 3:
<script >
document.write("<table
style='width:100%; text-align:center;'>");
document.write("font-size:20px;
border: 2px solid #000; '>");
document.write("<caption
style='color:red; font-weight: bolder;'>");
document.write("Таблица множения на число 3</caption>");
var i = 1, msg
= '';
while ( i < 10 ) {
msg+='<tr><td>' + i + ' x 3
</td><th> ' + (i
* 3) +'</th></tr>';
i++;
}
document.write(msg + "</table>");
</script >
Рис. 3
Цикл do/while (оператор цикла с
постусловием)
Он имеет
следующий синтаксис:
do
{
операторы
}
while (логическое выражение);
ИСПОЛНЕНИЕ ОПЕРАТОРА ЦИКЛА ПО ШАГАМ:
1. Выполняются операторы;
2. Проверяется условие;
2. Если логическое выражение истинно, то
переходит к шагу 1. Если оно ложно, то выполнение оператора заканчивается и
выполняется следующий оператор в программе.
Пример
вывода на экран таблицы умножения для числа 3:
<script >
document.write("<h1 style='text-align:center;
font-style:italic;");
document.write(" color:red'>Таблица умножения числа
3");
document.write("<ol style='text-align:center;
font-size:20px;");
document.write("color:blue;'>");
var
i = 1, msg = '<li value="0">
0 </li>';
do {
msg+='<li>' + (i * 3) +'</li>';
i++;
}
while (i < 10);
document.write(msg);
</script >
Рис. 4
Цикл for (оператор цикла со счетчиком)
Цикл for представляет собой конструкцию цикла, когда известно число
повторений. Большинство циклов имеют некоторую переменную-счетчик. Эта
переменная инициализируется перед началом цикла и проверяется перед каждой
итерацией. Наконец, переменная-счетчик инкрементируется или изменяется
каким-либо другим образом в конце тела цикла, непосредственно перед повторной
проверкой переменной. Инициализация, проверка и обновление - это три ключевых
операции, выполняемых с переменной цикла. Инструкция for имеет синтаксис:
for (инициализация; проверка;
инкремент)
{
операторы
}
Пример вывода на экран таблицы квадратов чисел от 0 до 9 с помощью
стилей CSS:
<html>
<head>
<meta
charset="utf-8">
<title>Таблица квадратов</title>
<style>
h1 {
position:
absolute; border: 2px solid blue;
left:
10px;
top: 10px;
height:
50px;
background-color: #66FF66;
font-size:
40px;
text-align: center;
}
</style>
</head>
<body>
<h1 style="width: 100%; border: none;
background-color: #fff">
CSS-таблица квадратов чисел от 0
до 9
</h1>
<script type="text/javascript">
var
y=80;
for (var i = 0; i
< 10; i++) {
document.write("<h1
style='width: 50px; top: ", y,"px;
'>", i, "</h1>");
document.write("<h1
style='width: 50px; top:", y,"px; left:
62px;'>", i,"</h1>");
document.write("<h1
style='color: red; width: 50px; top:", y,"px;
left: 114px;'>", i*i,"</h1>"
);
y=y+43;
}
</script>
</body>
</html>
Рис. 5