Lesson 1

Урок 1 – Змінні, Функції та Інші Чари 🧙‍♂️✨

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

Що Таке Змінні? (Спойлер: Не Такі Вже й Страшні)

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

Оголошення Змінних

Щоб оголосити змінну, достатньо представити її JavaScript. Це як сказати: “Привіт, JavaScript, ось дещо важливе, що я хочу запам’ятати.” Зробити це можна за допомогою var, let або const. Але який варіант обрати? Розберімося разом:

var ім'яМага = "Гендальф"; // Старий спосіб. Все ще працює, але це як використовувати друкарську машинку у 2024 році.
let рівеньМагії = 100; // Сучасний і гнучкий варіант.
const посох = "Дерев'яний"; // Це константа. Після оголошення змінити не можна. Як друг, який ніколи не змінює улюблену піцу.

var: Старий спосіб оголошення змінних. Працює, але не такий крутий, як let і const.
let: Новий підхід. Використовуй, якщо хочеш змінити значення пізніше.
const: Сильний і мовчазний. Після оголошення його не можна змінити—ідеально для речей, які не мають змінюватися (як борода Гендальфа).

Функції: Супергерої в Коді 🦸‍♂️

Функції у JavaScript — це твої персональні супергерої, які виконують завдання за тебе. Ти даєш їм роботу, і вони її роблять (без скарг, на відміну від деяких супергероїв).

Як Оголосити Функцію

Ось як оголосити функцію в JavaScript:

function кинутиЗаклинання(назваЗаклинання) {
  console.log("Ти вимовив заклинання: " + назваЗаклинання);
}

кинутиЗаклинання("Експелліармус"); // Виведе: Ти вимовив заклинання: Експелліармус

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

function — це спосіб сказати JavaScript: “Ей, я хочу щось зробити!”
кинутиЗаклинання — це ім’я функції (ти можеш назвати її як завгодно, навіть “зробитиПіцу”, якщо хочеш).
назваЗаклинання — це параметр. Подумай про нього як про магічний інгредієнт, який функція потребує.
console.log — це як JavaScript кричить у порожнечу. Все, що всередині дужок, виводиться у консоль браузера.

Стрілкові Функції (Чому Писати Більше?)

Стрілкові функції — це скорочений спосіб написання функцій. Якщо звичайні функції JavaScript — це текстові повідомлення, то стрілкові функції — це версія з емодзі. Швидше, коротше і зручніше, коли хочеться трішки полінуватись.

Ось та ж функція кинутиЗаклинання, але зі стрілковою функцією:

const кинутиЗаклинання = (назваЗаклинання) => {
  console.log("Ти вимовив заклинання: " + назваЗаклинання);
};

Те саме, але менше тексту. Це як пересідати з велосипеда на спортивний автомобіль.

Час Практикувати Магію! 🎩

Давай перевіримо твої нові знання з невеличким завданням:

Завдання: Створи Магічне Зілля

Оголоси змінну під назвою назваЗілля і задай їй значення "Зілля Невидимості".
Напиши функцію під назвою створиЗілля, яка виводить повідомлення типу "Ти створив Зілля Невидимості!".
Виклич свою функцію і передай їй змінну назваЗілля.

Ось підказка:

let назваЗілля = "Зілля Невидимості";

function створиЗілля(назва) {
  console.log("Ти створив " + назва + "!");
}

створиЗілля(назваЗілля); // Виведе: Ти створив Зілля Невидимості!

Де Можна Писати Код JavaScript?

Тепер, коли ти готовий перевірити свої нові навички в JavaScript, можливо, ти запитаєш: де взагалі пишуть цей код? Один із найпростіших способів протестувати JavaScript — це консоль браузера.

Консоль Браузера: Твій Перший Майданчик для Магії JavaScript

Більшість сучасних браузерів (таких як Chrome, Firefox або Edge) мають вбудовану консоль, де можна писати та тестувати JavaScript-код прямо в реальному часі.

Як відкрити консоль:
- Клацни правою кнопкою миші будь-де на вебсторінці та вибери Інспектувати або Переглянути Код.
- Перейди на вкладку Консоль.
- Тепер ти можеш писати JavaScript безпосередньо в консолі та бачити результати миттєво.

Спробуй це:

console.log("Привіт, JavaScript!");

Відкрий консоль у своєму браузері, введи цей рядок і натисни Enter. Ти побачиш, як у консолі з’явиться “Привіт, JavaScript!"—ось тобі й магія!

Консоль браузера — це чудовий спосіб швидко тестувати код під час навчання.

Що Далі?

У цьому уроці ти дізнався, як оголошувати змінні та створювати функції—основні будівельні блоки JavaScript. У наступному уроці ми зануримося в цикли та умовні оператори—бо, чесно кажучи, ніхто не любить повторювати одне і те саме (окрім Siri, звісно).

Готовий до ще більше магії в JavaScript? Слідкуй за наступною пригодою: Урок 2 – Цикли та Умови: Як Приймати Рішення і Повторюватися Без Збожевоління.

Не соромся експериментувати з кодом і спробувати різні заклинання або зілля. Чим більше практики, тим швидше ти станеш справжнім магом JavaScript!