ГлавнаяУроки JavaScript → Урок 10. Циклы for и while

JavaScript - Урок 10. Циклы for и while

Циклы позволяют выполнять один и тот же код много раз и используются они очень часто.

Цикл for

Самый популярный вид циклов - цикл for. Синтаксис у него следующий:

for (A; B; I){S}

где
A - первоначальное выражение,
B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается,
I - выражение инкремента,
{} - тело цикла,
S - операторы.

Как всегда, на примере будет понятнее. Предположим, мы хотим написать сценарий, который будет складывать все числа от a до b, (где a и b будут вводиться пользователем) и отображать полученный результат.

Итак, на html-странице мы будем иметь следующий код:
<html> <head> <title>javascript for</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <form name="forma7"> Вас интересует сумма всех чисел от <input type="text" name="a1" size="5" maxlength="5"> до <input type="text" name="a2" size="5" maxlength="5"> <input type="button" value="Вычислить" onclick="summa(forma7);"><br> Сумма равна <input type="text" name="result" size="10" maxlength="10"> </form> </body> </html>
Выглядеть она будет так:

Вас интересует сумма всех чисел от до
Сумма равна
Осталось на странице script.js написать саму функцию summa():
function summa(obj) { var summa=0; var a1=1*obj.a1.value; var a2=1*obj.a2.value; for (var i = a1; i <= a2; i++) { summa+=i; } obj.result.value = summa; }
Из нового здесь только сам цикл, разберемся, как он работает:

параметру цикла i присваивается значение a1, т.е. число, которое указал пользователь в текстовом поле ОТ и тело цикла (в фигурных скобках) выполняется с этим значением, т.е. в переменную summa записывается значение равное a1.

После этого вычисляется выражение i++, т.е. значение i увеличивается на 1.

Затем javascript проверяет условие i <= a2 и, если оно истинно, тело цикла выполняется снова, т.е. значение переменной summa увеличивается на само себя плюс 1.

Таким образом, цикл выполняется до тех пор, пока не сложит все числа от a1 до a2.

Когда условие i <= a2 станет ложным, цикл прекратит свою работу, а полученный результат (значение переменной summa) будет выведен в поле result.

Обратите внимание, что переменную i можно объявить прямо в цикле - var i = a1

В общем, на этом можно было бы и закончить, но все-таки есть еще один нюанс. Для правильной работы нашего цикла значение a2 должно быть больше значения a1. Добавим это условие в нашу функцию:
function summa(obj) { var summa=0; var a1=1*obj.a1.value; var a2=1*obj.a2.value; if (a2 > a1){ for (var i = a1; i <= a2; i++) { summa+=i; } obj.result.value = summa; } else alert("Значение ОТ должно быть меньше значения ДО") }
Вот теперь наш цикл будет работать как надо.

Цикл while

Не менее популярный вид циклов - цикл while. Синтаксис у него следующий:

while (B){S}

где
B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается,
{} - тело цикла,
S - операторы.

Иными словами, операторы S, выполняются до тех пор, пока условие B не станет ложным.

Оба вида циклов, и цикл for, и цикл while используются достаточно часто, поэтому мы разберем еще много примеров их работы в последующих уроках (например, в уроке 13). А этот урок на этом закончим.



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.