Урок 4

Урок 4 – Маніпуляції з DOM: Перетворіть Веб у Свій Особистий Майданчик для Експериментів 🎢✨

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

Підготовка Поля: Встановлення VS Code і Caddy

Щоб розпочати працювати як справжній розробник, нам потрібно облаштувати робочий простір. Встановимо VS Code як нашу штаб-квартиру для написання коду і Caddy як локальний сервер, щоб ми могли бачити всі наші оновлення в реальному часі (так-так, ви тепер міні-адмін).

Встановлення VS Code: Перегляньте мій пост про встановлення VS Code.
Встановлення Caddy: Дотримуйтесь інструкцій у пості про встановлення Caddy.

Тепер, коли у нас все налаштовано, давайте створимо папку для нашого проєкту та додамо магічні файли, які ми перетворимо на інтерактивну веб-сторінку.

Створення Проєкту і Налаштування Файлів

Створіть папку проєкту (наприклад, DOM_Project) у зручному для вас місці. Так, ще один крок до титулу “Розробника”!
```
mkdir DOM_Project
cd DOM_Project
```

Створіть HTML-файл. У папці проєкту створіть файл під назвою index.html — це буде наш «HTML-храм», де буде відбуватися вся магія:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Майданчик для Експериментів з DOM</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #message-container { margin-top: 20px; }
    </style>
</head>
<body>
    <h1 id="main-heading">Привіт, DOM!</h1>
    <button id="add-message-btn">Додати Повідомлення</button>
    <div id="message-container"></div>
    <input type="text" id="task-input" placeholder="Введіть завдання" />
    <button id="add-task-btn">Додати Завдання</button>
    <ul id="task-list"></ul>

    <script src="script.js"></script>
</body>
</html>

Створіть JavaScript-файл. У цій же папці створіть файл script.js, де ми будемо писати наш JavaScript-чарівний код.

Тепер наш проєкт налаштовано, і настав час оживити його!

Запуск Локального Сервера з Caddy

Переконайтеся, що ви знаходитеся в папці DOM_Project, і запустіть Caddy, щоб запустити проєкт:
```
caddy file-server --listen :8080
```

Тепер ваш проєкт доступний за адресою http://localhost:8080. Відчуваєте тепло? Це ваш локальний сервер, який чекає на магію вашого JavaScript!

Оновлення Сторінки: Коли F5 Не Допомагає

Інколи F5 просто не вистачає, коли ви працюєте над проєктом, і браузер вперто показує стару версію. Спробуйте Ctrl + F5 — ця особлива комбінація очищує кеш і перезавантажує сторінку, показуючи вам останню версію всього.

Пишемо JavaScript для Маніпуляцій з DOM

Тепер, коли у нас є HTML, почнемо перетворювати його на щось динамічне. Настав час для JavaScript!

Крок 1: Вибір і Виведення Елемента у Консоль

Щоб почати керувати елементами, потрібно їх знайти. Почнемо з заголовка.

У script.js додайте наступний код, щоб вибрати заголовок і вивести його в консоль:

let heading = document.getElementById("main-heading");
console.log(heading); // Виводимо заголовок у консоль як привітання браузеру!

Відкрийте сторінку у вашому браузері та консоль розробника (F12 або Ctrl + Shift + J) — ви побачите заголовок у консолі. Вітаю, ви знайшли свій перший елемент DOM!

Крок 2: Зміна Контенту Елемента

Тепер змінимо текст заголовка, щоб надати йому трішки характеру.

Додайте наступний код:

heading.textContent = "Ласкаво просимо на Майданчик для Експериментів з DOM!";

Оновіть сторінку — тепер заголовок повинен сказати щось нове. Це як ніби заголовок каже вам: «Так, я під вашим контролем!»

Крок 3: Додавання Нових Елементів на Сторінку

Давайте додамо на сторінку новий абзац із маленьким повідомленням від JavaScript.

У script.js додайте код для створення та додавання нового елемента:

let newParagraph = document.createElement("p");
newParagraph.textContent = "Це новий абзац, доданий за допомогою JavaScript!";
document.body.appendChild(newParagraph);

Оновіть сторінку, і ви побачите новий абзац. Це як якщо б ви залишили маленьке повідомлення на своєму сайті, тільки для себе!

Крок 4: Додавання Стилю до Елементів

Справжній чарівник знає, як додати стилю своїм творінням. Зробимо заголовок трохи більш «виразним».

У script.js додайте наступний код:

heading.style.color = "blue";
heading.style.fontSize = "3em";
heading.style.fontFamily = "Comic Sans MS";

Оновіть сторінку — і тепер заголовок виглядає готовим до ярмарку коміксів!

Крок 5: Додавання Інтерактивності за Допомогою Подій

Який чарівник без інтерактивних ефектів? Додамо кнопку, яка створює повідомлення при натисканні.

Переконайтеся, що у index.html є кнопка з id="add-message-btn".

У script.js додайте цей код:

let addButton = document.getElementById("add-message-btn");
addButton.addEventListener("click", function() {
    let message = document.createElement("p");
    message.textContent = "Вітаю, ти став Майстром JavaScript!";
    document.getElementById("message-container").appendChild(message);
});

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

Що Далі?

Чудова робота! Тепер ви офіційно майстер маніпуляцій з DOM. У наступному уроці додамо ще більше магії, працюючи з подіями, щоб сторінки стали справді інтерактивними.

До зустрічі в Уроці 5 – Магія Подій: Робимо Веб-сторінки Інтерактивними!

Тепер ідіть і перетворюйте веб у свій особистий майданчик для експериментів! 🎠