<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Циклы в JavaScript

Циклы в 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. Надеюсь, Вам всё стало ясно. Можете также придумать себе какую-нибудь задачу и решить её. Это будет великолепной тренировкой.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (19):

igor igor 08.10.2012 12:48:42

подскажите, пожалуйста, почему первый код работает, а второй нет. 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'); }); } } Извините, что все в одну строчку, что-то не получается отредактировать

Ответить

Admin Admin 08.10.2012 20:28:17

Протестировать не могу, но по виду правильно. Проверьте что будет в первом случае, если сначала создать перменную a=1;, и её присоединять к строкам. Вероятно из-за типов ошибка возникает.

Ответить

wwwu1 wwwu1 08.11.2012 19:23:00

<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> Михаил,скажите пожалуйста что тут не так ???

Ответить

wwwu1 wwwu1 08.11.2012 19:27:26

не хотел в строчку . . . .

Ответить

Admin Admin 08.11.2012 21:12:17

Это Java, а не JavaScript.

Ответить

dsmts dsmts 03.06.2013 22:50:03

Здравствуйте! У меня есть строка разбитая с помощью json_str = JSON.parse (jsonStr); В ней есть несколько полей типа "Data0 - какой нибудь текст", "Data1 - Снова какой то текст", и т.д. Строк может быть несколько, а может и не быть. Как мне правильно сделать цикл, что бы как только не нашел например Data4 ну или любое другое, сразу прекратился. Названия полей идут по порядку от 0 и далее. Data0, Data1, Data2, ... Data1000.

Ответить

Admin Admin 04.06.2013 11:12:32

JSON.parse() возвращает по сути массив: http://myrusakov.ru/javascript-associative-array.html

Ответить

dsmts dsmts 04.06.2013 13:14:00

Я понял это, что это массив. Но не могу понять как сделать цикл вывода всех его строк. Так же появилась еще и проблема с условиями. Что только не делал. Ругается 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);

Ответить

Admin Admin 04.06.2013 13:21:41

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

Ответить

dsmts dsmts 04.06.2013 21:27:29

Спасибо большое, всё оказалось очень просто. Еще не совсем понял, как можно вывести в каждой строке по два значения? Что бы получилось примерно такая строка. str = arr[0] + " - " + arr[1] + "\n"; Следующая 2-3 и т.д. Это сложно делается?

Ответить

Admin Admin 04.06.2013 22:03:45

Надо просто цикл делать не i++, а, например, i += 2, то есть каждый шаг сразу индекс + 2.

Ответить

dsmts dsmts 04.06.2013 22:39:01

Так тогда же он пропускать будет каждое второе значение. А мне нужны все, но по два в каждом цикле. Или я не прав? Сейчас у меня сделано так: 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); } У меня получается каждое значение с новой строки, что не совсем правильно.

Ответить

Admin Admin 05.06.2013 04:18:37

arr[i] + arr[i+1] - ничего пропускаться не будет.

Ответить

dsmts dsmts 06.06.2013 20:32:32

В том то и дело, arr[i+1] не работает. Пишет undefined. Ведь ключ i содержит не число. Там чередуются значения типа "data2" и если сделать i+1 мы не получим "data3". Так у меня ни чего и не получилось. Но понять тему нужно.

Ответить

Admin Admin 06.06.2013 23:30:28

arr["data"+i] - вот так тогда пишите.

Ответить

Aspirinos Aspirinos 07.06.2015 17:08:11

Михаил здравствуйте, у меня возник вопрос почему при первом примере for (i = 0; i < 100; i++) document.write(i + " "); конечное значение в браузере 99 ? ведь 99 меньше 100 и соответственно условие соблюдается и должна приплюсоватся ещё 1 последняя единица и уже на 100 завершиться? Или я упускаю что-то ???

Ответить

dedok41 dedok41 26.12.2013 00:34:04

Михаил, небольшой вопрос к циклам. В старые добрые времена почти во всех языках программирования был оператор безусловного перехода goto с указанием метки. Сейчас нет ни таких операторов, ни меток. Не хочется строить громоздкие многоярусные условные переходы с огромными блоками. Толком ничего не мог придумать, разве что использовать фиктивный цикл do{…}while(0) с заведомо ложным условием. Цикл ставится непосредственно перед оператором, к которому надо перейти. Один проход по такому циклу гарантирован, а внутри цикла при необходимости используются break или continue. Это работает, если имеем одну точку для перехода, а если точек несколько? Есть что-нибудь получше?

Ответить

maks0703 maks0703 17.06.2014 13:43:49

скажите, можно ли в цикла while использовать двойное условие, например while (condition_one && condition_two) { //тело цикла };

Ответить

1111g 1111g 01.11.2014 15:46:44

Зачем пользователю столько ждать? Вместо 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 ('Цикл завершен');

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.