Циклы в JavaScript
Очень часто нужно, чтобы определённая часть программы выполнялась много раз. Разумеется, можно просто сделать так: скопировать-вставить и так нужное число раз. Однако, это абсурдно, особенно, если действие надо выполнять, например, 1000 раз. Поэтому существуют так называемые циклы, которую присутствуют в большинстве языков программирования. И о них я Вам и расскажу.
Циклы в JavaScript содержит определённый код, который прокручивается многократно. Существует несколько видов циклов: for, while и do-while.
Начнём с самого первого цикла (и самого популярного) - цикла for. Общий вид этого цикла таков:
for (переменная_итерации = начальное_значение; условие; действие_после_каждой_итерации) {
//код программы
}
Давайте прокомментирую то, что здесь написано. Вначале идёт - переменная итерации. Это обычное имя переменной для итерации. Дальше идёт начальное_значение. Собственно, название говорит само за себя. Дальше идёт условие, при выполнении которого (то есть возвращается true) цикл запускается ещё один раз, и, наконец, действие, которое выполняется после каждой итерации. Как правило, это изменение переменной для итерации.
Давайте с Вами напишем простой скрипт, который будет выводить количество итераций цикла:
for (i = 0; i < 100; i++)
document.write(i + " ");
Здесь мы задали переменную для итерации (называется i), которой присвоили значение 0. Дальше проверяется условие: i < 100. Если оно выполняется, то выполняется одна итерация цикла. После выполнения каждой итерации происходит i++ (то есть увеличение переменной i на 1). Снова проверяется условие, и если оно истинно, то выполняется ещё одна итерация. И так до тех пор, пока условие i < 100 не станет ложным. Очевидно, что оно будет ложно лишь через 100 итераций. Таким образом, данный цикл будет выполняться 100 раз, что мы можем увидеть, если запустим этот скрипт. И ещё кое-что. Так как у нас здесь выполняется всего один оператор (document.write()), то наличие фигурных скобок необязательно. Если у Вас 2 и более операторов крутятся в цикле, то тогда необходимо их поставить.
Теперь поговорим о второй разновидности циклов в JavaScript - while. В принципе, цикл очень похож на for (хотя все циклы похожи). Но здесь общий вид другой:
while (условие) {
//код программы
}
Как видите, здесь нет ни переменной для итерации, ни каких-либо действий после итерации. Отсюда следует вывод: чтобы выйти из цикла необходимо в самом цикле сделать так, чтобы "условие" стало ложным. Если это не сделать, то произойдёт зацикливание, а, следовательно, Ваш скрипт повиснет.
Давайте реализуем такую же задачу, как и раньше, но используя цикл while.
var i = 0;
while (i < 100) {
i++;
document.write(i + " ");
}
Перед началом цикла мы создали переменную i, которой присвоили начальное значение. Затем перед запуском цикла проверяется условие, и если оно истинно, то запускается итерация цикла, в которой мы увеличиваем переменную для итерации (иначе произойдёт зацикливание). И выводим эту переменную.
И, наконец, последний вид циклов в JavaScript - цикл do-while. Синтаксис такой:
do {
//код программы
} while (условие)
Очень похож на цикл while, однако, здесь есть всего одно, но очень принципиальное отличие. Если цикл while сначала проверяет условие, а потом уже выполняет или нет итерацию. То цикл do-while сначала именно выполняет итерацию, и только потом проверяет условие. И если оно ложно, то выходит из цикла. Другими словами, независимо от условия данный цикл гарантированно выполнится хотя бы 1 раз. Думаю, что данный код будет излишним, но всё же.
var i = 0;
do {
i++;
document.write(i + " ");
} while (i < 100)
Пояснять код не буду, уверен, Вы из без меня с ним разберётесь. Поэтому я лучше перейду к двум интересным операторам: break и continue.
Начнём с break. Данный оператор позволяет досрочно выскочить из цикла. Давайте с Вами напишем такой код:
for (i = 0; i < 100; i++) {
if (i == 50) break;
document.write(i + " ");
}
Вы можете запустить этот скрипт и обнаружите, что вывелись только числа до 49, так как при i = 50 цикл прервался, благодаря оператору break.
Теперь рассказываю об операторе continue. Данный оператор позволяет перейти к следующей итерации цикла. Чтобы не расписывать здесь много, лучше сразу покажу пример:
for (i = 0; i < 100; i++) {
if (i == 50) continue;
document.write(i + " ");
}
Если Вы запустите этот скрипт, то увидите, что не хватает числа 50. Это произошло потому, что при i = 50, мы переходим к следующей итерации цикла, перед которой i увеличивается на 1 и становится равным 51-му.
Вот, вроде бы, и всё, что хотелось написать о циклах JavaScript. Надеюсь, Вам всё стало ясно. Можете также придумать себе какую-нибудь задачу и решить её. Это будет великолепной тренировкой.
-
- Михаил Русаков
Комментарии (19):
подскажите, пожалуйста, почему первый код работает, а второй нет. 1. $('#galerieON_'+0).click(function (){ $('#leftAdminGal'+0).slideDown('slow'); $('#galerieOFF_'+0).slideDown('slow'); }); $('#galerieON_'+1).click(function (){ $('#leftAdminGal'+1).slideDown('slow'); $('#galerieOFF_'+1).slideDown('slow'); }); 2. if(number > 0){ for(n=0; n < number; n++){ $('#galerieON_'+n).click(function (){ $('#leftAdminGal'+n).slideDown('slow'); $('#galerieOFF_'+n).slideDown('slow'); }); } } Извините, что все в одну строчку, что-то не получается отредактировать
Ответить
Протестировать не могу, но по виду правильно. Проверьте что будет в первом случае, если сначала создать перменную a=1;, и её присоединять к строкам. Вероятно из-за типов ошибка возникает.
Ответить
<head> </head> <body> <script language="javascript"> import static java.lang.Sustem.out; class Yawn { public static void main (String args[]) { for (int count = 1; count <= 10; count ++){ out.print ("Значение счетчика равно"); out.print (count); out.print (" . "); } out.println ("Достаточно!"); } } </script> <h1>HTML</h1> </body> </html> Михаил,скажите пожалуйста что тут не так ???
Ответить
не хотел в строчку . . . .
Ответить
Это Java, а не JavaScript.
Ответить
Здравствуйте! У меня есть строка разбитая с помощью json_str = JSON.parse (jsonStr); В ней есть несколько полей типа "Data0 - какой нибудь текст", "Data1 - Снова какой то текст", и т.д. Строк может быть несколько, а может и не быть. Как мне правильно сделать цикл, что бы как только не нашел например Data4 ну или любое другое, сразу прекратился. Названия полей идут по порядку от 0 и далее. Data0, Data1, Data2, ... Data1000.
Ответить
JSON.parse() возвращает по сути массив: http://myrusakov.ru/javascript-associative-array.html
Ответить
Я понял это, что это массив. Но не могу понять как сделать цикл вывода всех его строк. Так же появилась еще и проблема с условиями. Что только не делал. Ругается Designed. Привожу кусок кода с разными вариантами. Не один не работает. И сделал без цикла, т.к. ума не хватило, а он очень нужен. var jsonString = xmlhttp.responseText; // alert(jsonString); var json_str = JSON.parse ( jsonString ); var fio0 = 'jsonString.fio0'; if (typeof 'jsonString.fio0' !='undefined') { var str = "По адресу: " + b + ", " + d + " проживает \n" + json_str.fio0 + " - ИНН: " + json_str.inn0 + "\n"; } if (!'jsonString.fio1' == 0) { str1 = json_str.fio1 + " - ИНН: " + json_str.inn1 + "\n"; str = str + str1; } if ('jsonString.fio2' !== "") { str1 = json_str.fio2 + " - ИНН: " + json_str.inn2 + "\n"; str = str + str1; } alert (str);
Ответить
Прочитайте статью про перебор массива, ссылку на которую я дал.
Ответить
Спасибо большое, всё оказалось очень просто. Еще не совсем понял, как можно вывести в каждой строке по два значения? Что бы получилось примерно такая строка. str = arr[0] + " - " + arr[1] + "\n"; Следующая 2-3 и т.д. Это сложно делается?
Ответить
Надо просто цикл делать не i++, а, например, i += 2, то есть каждый шаг сразу индекс + 2.
Ответить
Так тогда же он пропускать будет каждое второе значение. А мне нужны все, но по два в каждом цикле. Или я не прав? Сейчас у меня сделано так: if (jsonString !== '[]') { var json_str = JSON.parse ( jsonString ); var str = "По адресу: " + b + ", " + d + " проживает \n" for (var i in json_str) { var str1 = json_str[i]; var str3 = "\n"; str = str + str1 + str3; } alert (str); } У меня получается каждое значение с новой строки, что не совсем правильно.
Ответить
arr[i] + arr[i+1] - ничего пропускаться не будет.
Ответить
В том то и дело, arr[i+1] не работает. Пишет undefined. Ведь ключ i содержит не число. Там чередуются значения типа "data2" и если сделать i+1 мы не получим "data3". Так у меня ни чего и не получилось. Но понять тему нужно.
Ответить
arr["data"+i] - вот так тогда пишите.
Ответить
Михаил здравствуйте, у меня возник вопрос почему при первом примере for (i = 0; i < 100; i++) document.write(i + " "); конечное значение в браузере 99 ? ведь 99 меньше 100 и соответственно условие соблюдается и должна приплюсоватся ещё 1 последняя единица и уже на 100 завершиться? Или я упускаю что-то ???
Ответить
Михаил, небольшой вопрос к циклам. В старые добрые времена почти во всех языках программирования был оператор безусловного перехода goto с указанием метки. Сейчас нет ни таких операторов, ни меток. Не хочется строить громоздкие многоярусные условные переходы с огромными блоками. Толком ничего не мог придумать, разве что использовать фиктивный цикл do{…}while(0) с заведомо ложным условием. Цикл ставится непосредственно перед оператором, к которому надо перейти. Один проход по такому циклу гарантирован, а внутри цикла при необходимости используются break или continue. Это работает, если имеем одну точку для перехода, а если точек несколько? Есть что-нибудь получше?
Ответить
скажите, можно ли в цикла while использовать двойное условие, например while (condition_one && condition_two) { //тело цикла };
Ответить
Зачем пользователю столько ждать? Вместо for (i = 0; i < 100; i++);можно написать var i = prompt("Сколько раз выводить сообщение?");//пользователь сможет выбрать сколько сообщений выводить. А если после for (i = 0; i < q; i++); написать (i = 0; i < 100; i++); var x = prompt('100 сообщений - '); var q = i - x; alert ('100 -' + x + ' = ' + q); alert (i + " "); alert ('Цикл завершен');
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.