Циклы: while, for

JavaScript простым языком

Цикл – это такая штука, которая позволяет выполнять какие-либо операции много раз.

Например, с помощью функции alert нам нужно вывести на экран числа от 1 до 3. Как бы ты сейчас это сделал? Если ты не знаешь о том, как работают циклы, ты напишешь примерно так:

alert(1);
alert(2);
alert(3);

Возможно, в каких-то ситуациях можно допустить такой код – но это нежелательно и считается плохим тоном. И, наконец, представь, что задача изменилась и нужно вывести числа от 1 до 1000 – ты же не хочешь писать 1000 строк, верно? Для этого и придумали циклы.

Цикл while

Цикл имеет следующий синтаксис:

while (условие) {
  // команды которые нужно выполнить
}

Все команды внутри цикла while выполняются до тех пор, пока условие истинно (true).

И сразу же переделаем нашу задачу под цикл (живой пример):

let i = 1;   
while (i <= 3) {
   alert(i);
   i++;
}

Что же здесь происходит?! Пойдем по строкам:

let i = 1; – определяем переменную i со значением 1;

while (i <= 3) { – запускаем цикл while и устанавливаем условие, при выполнении которого цикл будет продолжать работу. Так как нам нужно вывести значения от 1 до 3 и это означает, что цикл должен выполняться до тех пор, пока значение переменной iне станет равным значению 3. Т.е., значение должны быть меньше, либо равны 3. А для того, чтобы значение i изменялось, после каждого выполнения цикла, мы должны увеличивать значение переменной i на единицу (это происходит на строке 4);

alert(i); - выводим текущее значение переменной i;

i++; – увеличение значения переменной i на единицу. Оператор ++ называется инкрементом. Его смысл заключается в том, чтобы увеличивать значение на единицу. Делаем мы это для того, чтобы следующий проход цикла проверил новое условие.

Цикл do…while

Если цикл while сначала проверяет условие и только при его истинности выполняет команды, то цикл do...while – сначала выполняет все команды и только потом начинает проверять условие.

Вот его синтаксис:

let i = 1;  
do {
  alert(i);
  i++;
} while (i <= 3);

Разница очень маленькая и надеюсь ты ее уловил (живой пример).

Цикл for

Еще один важный цикл, который используется куда чаще – это цикл for.

Синтаксис:

for (let i = 1; i <= 3; i++) {
   alert(i);
}    

Этот цикл тоже не является сложным. После оператора for, в скобках указываются последовательно: начало, условие, и шаг (живой пример).

Первое значение, let i = 1; означает, что мы определили переменную i со значением 1. Это начальное значение переменной, с которым выполнится первый оборот цикла.

Вторым значением, в скобках, является условие, при выполнении которого выполнится тело цикла, а именно функция alert(i);

Третьим значением является указание шага, т.е, насколько нужно увеличить значение i за один оборот цикла. Т.к, увеличить нам нужно на единицу, то снова пользуемся инкрементом ++.

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

Подробнее об операторах инкремента/декремента расскажу в следующем уроке.

Домашнее задание

1. Напиши код, который выводит на экран с помощью цикла while значения от 50 до 100.

2. Напиши код, который выводит на экран с помощью цикла do...while значения от 20 до 30;

3. Напиши код, который выводит на экран с помощью цикла forзначения от 200 до 250;