Цикл – определённая последовательность действий, которая повторяется до тех пор, пока не будет выполнено какое-либо условие. Циклы имеют огромное значение в программировании. Если бы их не было, то программистам пришлось бы писать «тонны» кода, который бы с трудом помещался в памяти компьютера. Благодаря циклам, все повторяющиеся действия можно «зацикливать», и они повторяются нужное количество раз. 

В JavaScript существует 4 вида циклов. На данном этапе мы рассмотрим первые 3. 

Цикл счётчик. 

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

for (создание_переменной; её_проверка; её_увеличение) 

    действие; 

Здесь необходимо отметить, что внутри действия можно использовать созданную в скобках переменную. 

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

Далее для примера выведем в окно браузера цифры от 0 до 9: 

<script> 

for (var count = 0; count < 10; count = count + 1) 

  document.write(count); 

</script> 

Обратите внимание на то, что при создании переменной ей было сразу присвоено значение ноль. В JavaScript это допустимо и является обычной практикой в программировании. Присваивать значения переменным при их создании можно не только в данном цикле, но и в любом месте кода. Так же обратите внимание на то место кода, в котором происходит увеличение переменной. Переменная count находится как в правой части от знака равно, так и в левой. Это тоже обычная практика в программировании. Дело в том, что в начале вычисляется выражение, находящееся справа от знака равно, а только после этого результат этого вычисления присваивается переменной. 

Примечание: в переводе с английского count обозначает счёт, счётчик. Именно поэтому для данной переменной подобрано такое имя. 

Теперь для понимания того, как работает цикл счётчик, приведём блок-схему алгоритма работы предыдущей  программы: 

Так же, как и в случае с конструкцией if, если действие состоит из нескольких операций, то их необходимо заключить в фигурные скобки. Пример: 

<script> 

for (var count = 0; count < 10; count = count + 1) {  

  document.write('count = '); 

  document.write(count); 

  document.write('<br>'); 

} 

</script> 

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

Цикл с предварительной проверкой условия. 

Данный цикл повторяется до тех пор, пока условие остаётся верным. Причём это условие проверяется перед каждым новым проходом, в том числе и перед первым. Поэтому действие цикла может не выполниться ни разу. Переменная, находящаяся в условии, так же (не обязательно) может быть использована внутри цикла. 

Конструкция, которая организует цикл с предварительной проверкой условия, выглядит следующим образом: 

while (условие) 

   действие; 

Далее для примера перепишем программу вывода десяти цифр с помощью этого цикла: 

<script> 

var count = 0; 

while (count < 10) {  

  document.write('count = '); 

  document.write(count); 

  document.write('<br>'); 

  count = count +1; 

} 

</script> 

Как видите результат тот же самый. Здесь у вас может возникнуть естественный вопрос: зачем нужен цикл счётчик, если его можно организовать с помощью данного цикла? Ответ прост: он нужен для удобства и сокращения кода, потому что используется он достаточно часто. 

Теперь блок-схема алгоритма работы программы: 

Цикл с проверкой условия после прохода. 

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

Конструкция, которая организует цикл с проверкой условия после каждого прохода, выглядит следующим образом: 

do 

  действие 

while (условие); 

Теперь перепишем программу вывода цифр с помощью этого цикла: 

<script> 

var count = 0; 

do {  

  document.write('count = '); 

  document.write(count); 

  document.write('<br>'); 

  count = count +1 

} while (count < 10); 

</script> 

Далее блок-схема алгоритма этой программы: 

Примечание: обратите внимание на то каким образом оформлен код всех циклов. По правилам JavaScript возможно и другое оформление. Тем не менее, именно в таком виде код наиболее понятен. Так же обратите внимание на все точки с запятой, и фигурные скобки. На то, где и в каких местах они находятся. Будьте внимательны, потому что именно из-за их отсутствия программа может не работать. 

Цикл внутри цикла. 

Цикл можно поместить в любом месте кода, даже в нутрии другого цикла. Для примера выведем в окно браузера результаты умножения двух чисел от 1 до 3 с помощью двух циклов счётчиков: 

<script> 

for (var i = 1; i<10; i = i+1)  

  for (var j = 1; j<10; j = j+1) { 

     document.write(i); 

     document.write('*'); 

     document.write(j); 

     document.write('='); 

     document.write(i*j); 

     document.write('<br>'); 

  } 

</script> 

Задачи. 

1. Составить блок схему алгоритма работы программы из предыдущего примера (цикл внутри цикла). 

2. Вывести в окно браузера таблицу умножения. Составить блок схему алгоритма. Результат работы программы должен быть примерно таким: 

3. Вывести в окно браузера матрицу 4х3 со случайными числами. Составить блок-схему алгоритма. 

4. Выводить в окно браузера случайные числа и их сумму до тех пор, пока сумма не станет больше 4. Составить блок схему алгоритма работы программы. 

5. Вычислить с помощью цикла счётчика факториал числа 5. Промежуточные результаты выводить в окно браузера. Составить блок-схему алгоритма. Примечание: факториал числа 5 это 1*2*3*4*5. 

Примеры решений. 

2.  

<script> 

//Создаём таблицу 

document.write('<table>'); 

//Создаём первую строку 

document.write('<tr>'); 

//Пустая первая ячейка 

document.write('<td>'); 

document.write('</td>'); 

//Вставляем цифры от 1 до 9 

for (var i = 1; i<10; i = i+1) { 

   document.write('<td>'); 

   document.write('<b>'); 

   document.write(i); 

   document.write('</b>'); 

   document.write('</td>'); 

} 

document.write('</tr>'); 

//Заполняем таблицу 

for (var i = 1; i<10; i = i+1) { 

   document.write('<tr>'); 

//Формируем первый столбец 

   document.write('<td>'); 

   document.write('<b>');  

   document.write(i); 

   document.write('</b>');  

   document.write('</td>'); 

//Вставляем непосредственно результаты умножения 

   for (var j = 1; j<10; j = j+1) { 

      document.write('<td>'); 

      document.write(i*j); 

      document.write('</td>'); 

   } 

   document.write('</tr>'); 

} 

//Закрываем тэг table 

document.write('</table>');     

</script> 

3. 

<body> 

<table border = "2"> 

<script> 

for (var i = 1; i<5; i = i+1) { 

   document.write('<tr>'); 

   for (var j = 1; j<4; j = j+1) { 

      document.write('<td>'); 

      document.write(Math.random()); 

      document.write('</td>'); 

   } 

   document.write('</tr>'); 

} 

</script> 

</table> 

</body> 

4. 

<script> 

var r; 

var summ = 0; 

while (summ < 4) { 

  r = Math.random(); 

  summ = summ + r; 

  document.write('r = '); 

  document.write(r); 

  document.write(' summ = '); 

  document.write(summ); 

  document.write('<br>'); 

} 

</script> 

5. 

<script> 

var fact = 1; 

for (var count = 2; count < 6; count = count + 1) { 

  document.write('factorial = '); 

  document.write(fact); 

  document.write(' * '); 

  document.write(count); 

  document.write(' = '); 

  fact = fact*count; 

  document.write(fact); 

  document.write('<br>'); 

} 

</script>