Сейчас мы с вами разберем некоторые приемы при работе с циклами, а именно: вложенные друг в друга циклы, рисование пирамидок.

Цикл в цикле

Циклы, работу с которыми вы уже знаете, можно вкладывать друг в друга. К примеру, давайте решим следующую задачу: выведем на экран строку '111222333444555666777888999'. Тут одним циклом не обойтись - нужно запустить два вложенных друг в друга цикла: первый цикл будет перебирать числа (сначала 1, потом 2, потом 3 и так до 9), а второй цикл будет повторять эти числа 3 раза.

Давайте реализуем:

for (var i = 1; i <= 9; i++) {
	for (var j = 1; j <= 3; j++) {
		document.write(i); //выводит '111', потом '222', потом '333' и так далее
	}
}

Обратите внимание: первый цикл имеет счетчик i, второй j, а если будет еще и третий цикл - то у него счетчик будет переменная k. Это стандартные общепринятые названия, следует пользоваться именно ими.

Пирамидки

Строка 'xxxxxxxxxx'

Давайте сделаем строку, заполненную десятью иксами 'x'.

Для этого сделаем переменную str и при каждом проходе цикла будем добавлять в нее одну букву 'x'. Сначала в str будет '', потом 'x', потом 'xx' и так далее пока цикл не закончится.

После цикла мы получим нужную нам строку:

var str = ''; //начальное значение - пустые кавычки
for (var i = 0; i < 10; i++) {
	str = str + 'x';
}

alert(str); //выведет 'xxxxxxxxxx'

По сути эта задача напоминает суммирование элементов массива, только вместо чисел мы суммируем строки, постепенно накапливая результат в переменной str.

Пирамидка с иксами

Давайте теперь выведем на экран следующую пирамидку:

x
xx
xxx
xxxx
xxxxx

Для этого просто модифицируем предыдущую задачу: при каждом проходе цикла будем выводить на экран содержимое str и <br>.

Так как в цикле str постепенно растет, то сначала выведется 'x' и <br>, потом 'xx' и <br> и так далее:

var str = '';
for (var i = 0; i < 10; i++) {
	str = str + 'x';
	document.write(str + '<br>');
}

Строка '123456789'

Давайте сделаем строку '123456789'. Задача аналогична задаче с десятью иксами - только прибавлять будем не иксы, а счетчик цикла:

var str = '';
for (var i = 1; i <= 9; i++) {
	str = str + i;
}

alert(str); //выведет '123456789'

Пирамидка с цифрами

Давайте выведем на экран следующую пирамидку:

111
222
333
444
555
666
777
888
999

Похожую задачу мы уже решали, когда выводили строку '111222333444555666777888999'. По сути нам нужна такая же строка, но с <br> в нужных местах. Запускаем два вложенных друг друга цикла:

for (var i = 1; i <= 9; i++) {
	for (var j = 1; j <= 3; j++) {
		document.write(i);
	}
	document.write('<br>'); //выводим <br>, чтобы было в столбик
}

Пирамидка с цифрами

Выведем теперь следующую пирамидку:

1
22
333
4444
55555
666666
7777777
88888888
999999999

Задача аналогична предыдущей, только внутренний цикл должен крутиться не 3 раза, а в соответствии с числом: если у нас единица - то повторяем цикл 1 раз, если двойка - два раза, если тройка - три раза.

Как этого достичь: нужно в условии внутреннего цикла написать следующее: j <= i. В этом случае если i равен 1, то это все равно, что в условии написать j <= 1, а если i равен 2 - то j <= 2 и так далее:

for (var i = 1; i <= 9; i++) {
	for (var j = 1; j <= i; j++) {
		document.write(i);
	}
	document.write('<br>');
}

Я думаю, вы уже обратили внимание, что в этой пирамидке мы не используем накопление в строку, которое мы разбирали ранее. Можно и с накоплением, но это получится чуть сложнее:

for (var i = 1; i <= 9; i++) {
	var str = ''; //каждый раз зачищаем строку

	for (var j = 1; j <= i; j++) {
		str = str + i;
	}
	document.write(str + '<br>');
}

While без заданного количества итераций

Бывают задачи, в которых количество итераций цикла не известно заранее. К примеру: дано число, нужно делить его на 2 столько раз, пока результат не станет меньше 10. Нужно вывести число, которое при этом получится.

В этом случае мы не знаем количество итераций. Не беда - сделаем условием цикла условие пока число больше 10:

var num = 500;
while (num > 10) {
	num = num / 2;
}
alert(num); //после цикла получим результат

Можно использовать и цикл for - в этом случае он будет без тела (без {} и в конце ставим точку с запятой):

for (var num = 500; num > 10; num = num / 2);
alert(num); //после цикла получим результат

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