Урок 13. Циклы в JavaScript
Теория
Цикл в цикле
Циклы можно вкладывать друг в друга. Например, следующая задача: вывести на экран строку 111222333444555666777888. Тут 1 циклом не обойтись, нужно запустить 2 вложенных друг в друга цикла: 1-й цикл будет перебирать числа (сначала 1, потом 2, потом 3 и так до 8), а 2-й цикл будет повторять эти числа 3 раза.
Реализовать:
for(i=1;i<=8;i++){
for(j=1;j<=3;j++){
document.write(i)//выводит '111', потом '222' и т.д.
}}
Сократим код:
for(i=1;i<=8;i++){for(j=1;j<=3;j++){document.write(i)}}
Обратите внимание: 1-й цикл имеет счетчик i, 2-й j, а если будет еще и 3-й цикл, то у него счетчик будет k. Это стандартные общепринятые названия, следует пользоваться именно ими.
Пирамидки
Строка xxxxxxxx
Сделать строку, заполненную 8-ю иксами x.
Для этого сделать переменную s и при каждом проходе цикла добавлять в нее 1 букву x. Сначала в s будет '', потом x, потом xx и так далее пока цикл не закончится.
После цикла получится нужная строка:
var s='';for(i=0;i<8;i++){s=s+'x'}document.write(s)//Выведет 'xxxxxxxx'
По сути эта задача напоминает суммирование элементов массива, только вместо чисел суммируются строки, накапливая результат в переменной s.
Пирамидка с x
Вывести пирамиду:
x
xx
xxx
xxxx
xxxxx
Для этого модифицируем предыдущую задачу: при каждом проходе цикла выводится содержимое s и <p>.
Так как в цикле s постепенно растет, то сначала выведется 'x<p>', потом 'xx<p>' и так далее:
var s='';for(i=0;i<8;i++){s=s+'x';document.write(s+'<p>')}
Строка 12345678
Сделать строку 12345678. Задача аналогична задаче с 8 x, только прибавлять будем не x, а счетчик цикла:
var s='';for(i=1;i<=8;i++){s=s+i}document.write(s)//Выведет '12345678'
Пирамидка с цифрами
Вывести на экран пирамиду:
111
222
333
444
555
666
777
888
Похожую задача решена, когда выводили строку 111222333444555666777888. По сути нужна такая же строка, но с <p> в нужных местах. Запускаем 2 вложенных друг друга цикла:
for(i=1;i<=8;i++){for(j=1;j<=3;j++){document.write(i)}document.write('<p>')}//выводит <p>, чтобы было столбиком
Пирамидка с цифрами
Вывести пирамиду:
1
22
333
4444
55555
666666
7777777
88888888
Задача аналогична предыдущей, только внутренний цикл должен крутиться не 3 раза, а в соответствии с числом: если 1, то повторяется цикл 1 раз, если 2, - 2 раза, если 3, - 3 раза.
Как этого достичь: нужно в условии внутреннего цикла написать следующее: j<=i. В этом случае если i=1, то это все-равно, что в условии написать j<=1, а если i=2, то j<=2 и т.д.:
for(i=1;i<=8;i++){for(j=1;j<=i;j++){document.write(i)}document.write('<p>')}
В этой пирамидке не используется накопление в строку. Можно и с накоплением, но это получится чуть сложнее:
for(i=1;i<=8;i++){s='';/*каждый раз зачищается строка*/for(j=1;j<=i;j++){s=s+i}document.write(s+'<p>')}
While без заданного количества итераций
Бывают задачи, в которых количество итераций цикла не известно заранее. К примеру: дано число, нужно делить его на 2 столько раз, пока результат не станет меньше 8. Нужно вывести число, которое при этом получится.
В этом случае неизвестно количество итераций. Условием цикла делается условие "пока число >8":
n=888;while(n>8){n=n/2}document.write(n)//после цикла получится результат
Можно использовать и цикл for. В этом случае он будет без тела (без {} и в конце ставится точка с запятой):
for(n=888;n>8;n=n/2);document.write(n)//после цикла получится результат
Если забыть про точку с запятой в конце цикла, следующая строчка попадет под цикл и повторится много раз: столько, сколько итераций в цикле.
for(n=888;n>8;n=n/2)document.write('<p>'+n)//после цикла получится результат
Практика
Задачи для решения
Пирамидки
С помощью цикла for сформировать строку 12345678 и записать в переменную s.
s='';for(i=1;i<=8;i++){document.write(i);s=s+i}document.write('<p>'+s)
Или так:
s='';for(i=1;i<=8;i++){s=s+i}document.write('<p>'+s)
С помощью цикла for сформировать строку 87654321 и записать в переменную s.
s='';for(i=8;i>=1;i--){s=s+i}document.write('<p>'+s)
С помощью цикла for сформировать строку '-1-2-3-4-5-6-7-8-' и записать в переменную s.
s='-';for(i=1;i<=8;i++){s=s+i+'-'}document.write('<p>'+s)
Нарисовать пирамиду, как показано на рисунке, только у пирамиды должно быть 8 рядов, а не 3:
x
xx
xxx
s='';for(i=0;i<8;i++){s=s+'x';document.write(s+'<p>')}
С помощью 2 вложенных циклов нарисовать пирамиду:
1
22
333
4444
55555
666666
7777777
88888888
for(i=1;i<=8;i++){for(j=1;j<=i;j++){document.write(i)}document.write('<p>')}
Нарисовать пирамиду, как показано на рисунке, воспользовавшись циклом for:
xx
xxxx
xxxxxx
xxxxxxxx
s='';for(i=2;i<=8;i=i+2){s=s+'xx';document.write(s+'<p>')}
