0Pricing
Javascript for Kids · Урок

Цикл внутри цикла

Циклы внутри циклов

«Цикл внутри цикла» — бесплатный урок Javascript for Kids на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Javascript for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Javascript for Kids содержит 4 уроков всего.

Цикл внутри цикла?! 🤯

Что будет, если поместить цикл INSIDE другого цикла? Это похоже на колесо, вращающееся внутри колеса побольше! ⚙️⚙️

Такой цикл называется вложенным циклом, и с его помощью можно создавать удивительные рисунки!

Внешний и внутренний циклы 🪆

Вспомните матрёшек! 🪆 Внешний цикл — большая кукла. Внутренний цикл — маленькая кукла внутри.

За каждый ONE проход внешнего цикла внутренний цикл выполняет ALL свои проходы!

Первый вложенный цикл 🔁

Здесь внешний цикл выполняется 2 раза. Каждый раз внутренний цикл выполняется 3 раза! Внимательно проследите за выполнением.

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log('i=' + i + ' j=' + j)
  }
}

Два счётчика! ✌️

Видите? Теперь у нас TWO счётчика: i для внешнего цикла и j для внутреннего.

Внутренний j принимает значения 1, 2, 3 каждый раз, когда изменяется внешний i!

for (let i = 1; i <= 2; i++) {
  console.log('Outer ' + i + ' starts')
  for (let j = 1; j <= 2; j++) {
    console.log('  inner ' + j)
  }
}

Сколько всего раз? 🔢

Если внешний цикл выполняется 3 раза, а внутренний — 4 раза, всего получится 3 × 4 = 12 выполнений!

Давайте их посчитаем.

let count = 0
for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 4; j++) {
    count = count + 1
  }
}
console.log('Total runs: ' + count)

Дни и приёмы пищи 🍽️

Пример из жизни! Каждый DAY мы едим 3 MEALS. Внешний цикл отвечает за дни, внутренний — за приёмы пищи.

for (let day = 1; day <= 2; day++) {
  console.log('Day ' + day)
  for (let meal = 1; meal <= 3; meal++) {
    console.log('  meal ' + meal)
  }
}

Звёзды в строках ⭐

Внешний цикл создаёт ROWS. Внутренний цикл выводит звёзды в каждой строке. Небольшой намёк на создание рисунков!

for (let row = 1; row <= 3; row++) {
  for (let s = 1; s <= 2; s++) {
    console.log('star')
  }
  console.log('--- end of row ---')
}

Порядок имеет значение 📋

Внутренний цикл ALWAYS полностью завершается, прежде чем внешний цикл перейдёт дальше. Это как прочитать каждое слово в одной строке, прежде чем перейти к следующей! 📖

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 2; j++) {
    console.log(i + ',' + j)
  }
}

Умножаем числа ✖️

Вложенные циклы отлично подходят для математики! Давайте перемножим i и j.

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(i + ' x ' + j + ' = ' + (i * j))
  }
}

Подбираем наряды 👕👖

2 shirt и 2 pants дают 4 наряда! Вложенные циклы показывают все комбинации.

for (let shirt = 1; shirt <= 2; shirt++) {
  for (let pants = 1; pants <= 2; pants++) {
    console.log('Shirt ' + shirt + ' with pants ' + pants)
  }
}

Теперь Ваша очередь вкладывать циклы 🌟

Измените внутренний цикл так, чтобы он выполнялся 4 раза, и запустите его! Посмотрите, как увеличится output. 🪆

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 4; j++) {
    console.log('i=' + i + ' j=' + j)
  }
}

Быстрая проверка ✅

Проверим, как Вы поняли вложенные циклы! 🧠

Повторение: вложенные циклы 🎉

Удивительно! 🤯 Вы научились работать с вложенными циклами.

  • Цикл INSIDE цикла, как матрёшки 🪆
  • Внешний счётчик i, внутренний счётчик j
  • Внутренний цикл полностью завершается до перехода внешнего

Далее: создаём строки и столбцы, как в таблице! 🟦

Часто задаваемые вопросы

Урок «Цикл внутри цикла» бесплатный?

Да — полный текст урока «Цикл внутри цикла» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Javascript for Kids, подпишись на CoddyKit PRO. Курс Javascript for Kids содержит 4 уроков всего.

Чему я научусь в уроке «Цикл внутри цикла»?

Циклы внутри циклов Ты практикуешь Javascript for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Javascript for Kids?

Предыдущий опыт не требуется. Javascript for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Цикл внутри цикла»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Javascript for Kids?

Да. Каждый урок Javascript for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Цикл внутри цикла
  2. Строки и столбцы
  3. Звёздные треугольники
  4. Таблица умножения
← Назад к Javascript for Kids