Загрузка...

Цикл for

До сих пор вы выбирали путь один раз через if и switch. На реальной странице часто нужно повторить ту же работу: пять строк, сумма, короткий список. Скопировать команду пять раз — и первой правкой всё ломается. for держит одну копию и ведёт счётчик.

Как движется цикл for?

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

Три части заголовка

📊 Повседневные части for

Часть Обычное чтение Типичное применение
старт (init) начни счётчик здесь… let i = 0
условие продолжай, пока это истинно… i < 5
обновление после каждого круга измени счётчик… i++

Новички обычно считают маленьким целым i. Имя — привычка, не правило: подойдут n или step. Без обновления условие может никогда не стать ложным — цикл зависнет.

Простой счёт с for

javascript 
for (let i = 0; i < 5; i++) {
console.log(i);
}

Считать от старта до остановки

Старт с 0. Пока i меньше 5, печатаем и прибавляем единицу. В консоли 0…4 — пять кругов. 5 не печатается: условие сначала не проходит.

Прочитайте один круг спокойно: условие → тело → обновление → снова условие. Обновление не в теле; оно в заголовке, чтобы каждый круг шёл одинаково.

Записать ясный шаг

javascript 
for (let i = 1; i <= 3; i++) {
console.log("step " + i);
}

Старт с единицы, ясные метки

Здесь счётчик с 1, условие i <= 3; вы видите step 1…step 3. Ноль или единица — выбор дизайна; просто согласуйте условие.

Сумма через for

javascript 
let total = 0;
for (let i = 1; i <= 4; i++) {
total = total + i;
}
console.log(total);

Собирать сумму круг за кругом

total начинается с нуля и каждый круг берёт текущий i. После 1+2+3+4 получается 10. Цикл хорош, когда результат растёт по кругам, а не в одной ветке.

Шаг через два

javascript 
for (let i = 0; i < 8; i += 2) {
console.log(i);
}

Прыгать по два

i += 2 двигает на два каждый круг: 0, 2, 4, 6. Место обновления не только i++ — любое честное изменение, ведущее к концу, подходит.

Склеить короткий текст

javascript 
let line = "";
for (let i = 1; i <= 3; i++) {
line = line + "n" + i + " ";
}
console.log(line);

Клеить куски в цикле

line начинается пустым и каждый круг добавляет кусок. После трёх кругов что-то вроде n1 n2 n3. Тот же приём позже для текста страницы.

Показать результат на странице

Сделайте короткий счёт, соберите сообщение и запишите его на страницу.

Счёт на странице через for

html 
<!DOCTYPE html>
<html>
<head>
<title>For — page count</title>
</head>
<body>
<p id="out">…</p>
<script>
let msg = "";
for (let i = 1; i <= 4; i++) {
msg = msg + i + " ";
}
let box = document.getElementById("out");
box.textContent = "count=" + msg.trim();
</script>
</body>
</html>

Страница показывает count=1 2 3 4. Смените верхнюю границу, обновите, прочитайте новый список. Следующий урок с while тоже повторяет, но проверяет условие иначе — когда план счётчика уже ясен, for остаётся чистым инструментом.

Попробуйте сами

  1. Напишите for с i < 5, который логирует 0…4.
  2. Измените, чтобы с i <= 5 логировались 1…5.
  3. Сложите 1…5 в total и залогируйте результат.
  4. Напечатайте чётные ниже 10 через i += 2.
  5. В цикле соберите строку из трёх меток (a, b, c).
  6. В HTML-демо смените только верхнюю границу, обновите, прочитайте count=.

Частые ошибки

  • Ошибка на единицу: i < 5 вместо i <= 5 (или наоборот), когда число кругов другое
  • Забыть обновление (i++), и условие никогда не кончается
  • Заворачивать в бессмысленный однокруговой цикл то, чему хватает одного if
  • Менять другую переменную, не ту что в условии
  • Считать, что i полезен после цикла, если объявлен через let в заголовке (блочная область)

Кратко

  • for повторяет тело, пока условие истинно
  • В заголовке три части: старт, условие, обновление
  • Удобен для счёта, суммы и короткой строки
  • Обновление может быть i++, i += 2 или другим ясным шагом
  • Если цикл строит сообщение — покажите его и на странице
  • Дальше: цикл while — повтор пока условие держится, без трёхчастного заголовка

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 23 из 23
Javascript Урок