Урок 2 – Цикли та Умови: Приймаємо Рішення і Повторюємося (Без Божевілля) 🔄🤔

Ласкаво просимо назад, безстрашний авантюрист JavaScript! Ти вже освоїв(-ла) змінні та функції, тож тепер настав час поринути у світ циклів та умов—двох магічних інструментів, які дозволять тобі приймати рішення та повторювати завдання без зайвих зусиль. Думай про них як про заклинання “якщо” і “знову” у твоєму магічному арсеналі JavaScript!

Умови – Мистецтво Прийняття Рішень 🛤️

Умови дозволяють твоєму коду приймати рішення залежно від ситуації, наприклад, обрати начинку для піци залежно від настрою.

Оператор if

Оператор if — це твій JavaScript-“рішальник”. Він перевіряє умову і, якщо вона є правдивою, виконує вказану дію. Ось як це виглядає в дії:

let погода = "сонячна";

if (погода === "сонячна") {
  console.log("Час вдягати сонцезахисні окуляри! 😎");
} else {
  console.log("Захопи парасольку! ☔️");
}

У цьому прикладі:

• if перевіряє, чи погода дорівнює "сонячна". Якщо так, виводить “Час вдягати сонцезахисні окуляри!”.
• else вступає в дію, якщо погода не сонячна, нагадуючи взяти парасольку.

Оператор else if – Багато Випадків, Багато Можливостей

Іноді в житті не тільки сонячно чи дощить; може бути хмарно чи навіть сніжно. Ось тут і стає в нагоді else if, дозволяючи обробляти декілька випадків.

let погода = "хмарна";

if (погода === "сонячна") {
  console.log("Сьогодні сонячний день! 😎");
} else if (погода === "хмарна") {
  console.log("Схоже, хмари насуваються. 🌥️");
} else {
  console.log("Краще перевірити прогноз! 🤔");
}

Цей приклад перевіряє кілька умов і дає різні відповіді залежно від погоди. else тут для всього несподіваного—наприклад, попередження про торнадо.

Цикли – Повторюємося (Без Втрати Здорового Глузду) 🔁

Цикли рятують від необхідності писати той самий код знову і знову. Це як налаштувати кавоварку на автоматичне доливання. Давай розглянемо два найпопулярніші цикли в JavaScript: for та while.

Цикл for

Цикл for ідеальний для ситуацій, коли ти знаєш, скільки разів потрібно повторити дію. Ось як він виглядає:

for (let i = 0; i < 5; i++) {
  console.log("Привіт, JavaScript!");
}

У цьому прикладі:

• let i = 0 запускає лічильник на нулі.
• i < 5 означає, що цикл триватиме, доки i буде менше 5.
• i++ збільшує i на 1 кожного разу.

Цей цикл виведе “Привіт, JavaScript!” п’ять разів. Значно легше, ніж писати це п’ять разів вручну, правда?

Цикл while

Цикл while чудово підходить, коли ти не знаєш точно, скільки разів треба повторити щось—він продовжується, доки умова є правдивою.

let чашкиКави = 0;

while (чашкиКави < 3) {
  console.log("Наливаю ще одну чашку ☕️");
  чашкиКави++;
}

Тут, доки чашкиКави менше 3, JavaScript продовжує наливати каву. Тож, якщо ти готовий до безсонної ночі, цикл while тебе підтримує.

Оператор break – Час Зробити Перерву

Іноді потрібно зупинити цикл раніше, ніж він закінчиться—можливо, ти вже випив достатньо кави, або знайшов те, що шукав. Ось де break стане в нагоді.

for (let i = 0; i < 10; i++) {
  if (i === 3) {
    console.log("Знайдено! Зупиняємо цикл.");
    break;
  }
  console.log("Шукаю...");
}

Цей цикл буде виводити “Шукаю…” поки i не досягне 3, тоді виведе “Знайдено!” і зупиниться.

Складемо Все Разом! 🛠️

Давай створимо невелику програму, яка використовує умови та цикли для розв’язання задачі. Наприклад: лічильник кави, який зупиняється, коли досягає твоєї щоденної норми.

Завдання: Лічильник Щоденної Норми Кави

1. Встанови змінну максЧашок на свою максимальну норму кави (скажімо, 5).
2. Напиши цикл for, який рахує кожну випиту чашку кави.
3. Використовуй оператор if всередині циклу, щоб перевірити, чи досяг ти норми. Якщо так, виведи “Ти випив достатньо кави!” і перерви цикл.

let максЧашок = 5;

for (let чашки = 1; чашки <= максЧашок; чашки++) {
  console.log("Чашка " + чашки + " кави. ☕️");
  if (чашки === максЧашок) {
    console.log("Ти випив достатньо кави!");
    break;
  }
}

Запустивши цей код, JavaScript буде рахувати кожну чашку і зупиниться, коли досягне максимуму.

Що Далі?

Вітаю! Ти щойно освоїв умови та цикли—два суперсили, які допоможуть тобі приймати розумні рішення і автоматизувати повторювані завдання в коді. У наступному уроці ми зануримося у масиви та об’єкти: сховища, де JavaScript зберігає свої магічні скарби.

Залишайся з нами для Уроку 3 – Масиви та Об’єкти: Твої Сховища Даних!

Тепер іди й циклюй на повну! 🕺💃

See also

• Урок 6 – Делегування Подій: Як Досягти Ефективності
• Урок 5 – Магія Подій: Робимо Сторінки Інтерактивними
• Урок 4 – Маніпуляції з DOM: Перетворіть Веб у Свій Особистий Майданчик для Експериментів
• Урок 3 – Масиви та Об’єкти: Твої Скарбниці Даних
• Розкрий Силу JavaScript – Подорож для Початківців (Без Плаща Супергероя)