Урок 4

Урок 4 – Манипуляция DOM: Управляем Элементами Страницы 🎢✨

Добро пожаловать на Урок 4! Сегодня будем учиться манипулировать элементами 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="ru">
<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.

Теперь у нас есть проект с HTML-скелетом и местом для кода. Время оживить его!

Запуск Локального Сервера с 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 – События: Делаем Веб-страницы Интерактивными!

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