• Страница 1 из 1
  • 1
Модератор форума: webik  
Форум » JavaScript и jQuery » JavaScript » Циклы » Циклы While
Циклы While
ABCДата: Сб, 23.03.2019, 23:34 | Сообщение # 1
Offline
Цикл while повторяет фрагмент кода, пока остаётся истинным определённое условие.


Базовая структура цикла while:

Код
while(условие) {
// здесь повторяющийся код
}


Разберём работу цикла на примере. Задача: отобразить на странице цифры от 1 до 5. Можно конечно эту задачу выполнить так:

Код
document.write('Число 1 <br>');
document.write('Число 2 <br>');
document.write('Число 3 <br>');
document.write('Число 4 <br>');
document.write('Число 5 <br>');


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

Зададим переменную num и поместим в неё число 1. А далее пишем цикл, где условие, что если значение в переменной num меньше или равно 5, то выполняется код в фигурных скобках.

Код
var num = 1;
while (num <= 5) {

}


Пока это базовая конструкция, мы объявили цикл, его условие (num <= 5) и у нас есть значение 1 в переменной num.

1 меньше 5-и? Конечно! Значит код в фигурных скобках должен выполниться. У нас его там нет, но мы его сейчас напишем.
Наша задача была вывести цифры на странице, значит первой строкой в фигурных скобках пишем:

Код
var num = 1;
while (num <= 5) {
document.write('Число ' + num +'<br>');
}


Это выведет на страницу следующее: "Число 1", после чего будет перенос строки за счёт тега br.
Хорошо. Теперь нам нужно проверить следующее число, 2, а для этого оно должно попасть в переменную num, ведь в условии цикла сравнивается именно значение этой переменной (num <= 5). Сейчас у нас в ней цифра 1.
Делаем так,в фигурных скобках на новой строке вводим:

Код
num += 1;


Как мы помним, эта запись дословно означает: возьми имеющееся значение из переменной num и прибавь к нему единицу, а потом сохрани полученный результат в переменной num (то есть num = num + 1), заменив старое значение.

В результате полный код нашего цикла готов:

Код
var num = 1;
while(num <= 5) {
document.write('Число ' + num + '<br>');
num += 1;
}


И теперь мы можем понять, что будет происходить дальше. Сначала проверяется условие "(1 <= 5)?", так как это так, то выполняется код в фигурных скобках, на страницу выводится "Число 1", а значение переменной num меняется на 1+1 = 2.

Далее, интерпретатор JavaScript возвращается в начало программы и проверяет условие: "(2 <= 5)?", получает истина, и код в фигурных скобках опять выполняется, и так происходит до тех пор, пока условие не станет ложным (6 <= 5). В этом случае программа прекращает работу или переходит к выполнению выражения, которое следует после цикла. (В нашем случае после цикла ничего нет, поэтому программа просто прекратит работу).

И кстати, данную запись:

Код
num += 1;


мы имеем полное право записать так:

Код
num++;


Окончательный код программы:

Код
var num = 1;
while(num <= 5) {
document.write('Число ' + num + '<br>');
num ++;
}


Важно, что последняя строка в фигурных скобках не только просто увеличивает значение переменной num на единицу каждый раз, но и даёт в конце концов завершить цикл, чтобы он не стал бесконечным. Ведь если не будет этой строки, цикл не завершится никогда: 1 <= 5 истина, интерпретатор JavaScript опять вернётся в начало цикла, опять будет проверка условия 1 <= 5, опять будет истина и т.д. И каждый раз будет выводиться на страницу "Число 1". Ведь значение в переменной каждый раз так и будет 1.

Теперь вы можете оценить удобство работы с циклом: если вам потребуется вывести на страницу, к примеру, числа от 1 до 100, вам всего лишь нужно немного скорректировать наш код:

Код
var num = 1;
while(num <= 100) {
document.write('Число ' + num + '<br>');
num ++;
}
 
профиль цитата изменить удалить
Форум » JavaScript и jQuery » JavaScript » Циклы » Циклы While
  • Страница 1 из 1
  • 1
Поиск: