Урок 5

Урок 5 – Магия событий: Делаем страницы интерактивными 🎩✨

Приветствую на Уроке 5! Сегодня мы займемся созданием настоящей магии с помощью событий JavaScript. Кнопки будут кликаться, поля — реагировать, а пользователи, может быть, даже перестанут говорить: «Эй, а почему ничего не работает?!»

События — это как соль в готовке. Без них ваш сайт будет как макароны без соли: вроде работает, но что-то не то. Добавьте немного событий, и вот он — вкус взаимодействия и радости!

Создаём наш проект 🛠️

Для этого урока создадим новый проект, напишем HTML, добавим немного волшебного JavaScript и поднимем всё это на Caddy.

Создайте новую папку для проекта (или используйте вашу папку DOM_Project):
```
mkdir Lesson5
cd Lesson5
```

Создайте HTML-файл с названием index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Магия событий</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .button { margin: 10px 0; padding: 10px; background: lightblue; border: none; cursor: pointer; }
        .button:hover { background: deepskyblue; }
        #output, #task-list { margin-top: 10px; }
        #task-list li { margin-bottom: 5px; }
    </style>
</head>
<body>
    <h1 id="main-heading">Добро пожаловать в магию событий! 🪄</h1>
    <button id="click-me-btn" class="button">Нажми меня</button>
    <input type="text" id="text-input" placeholder="Введите что-нибудь..." />
    <div id="output"></div>
    <input type="text" id="task-input" placeholder="Введите задачу и нажмите Enter" />
    <ul id="task-list"></ul>

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

Создайте JavaScript-файл с названием script.js:

// Выбор элементов
let button = document.getElementById("click-me-btn");
let textInput = document.getElementById("text-input");
let outputDiv = document.getElementById("output");
let taskInput = document.getElementById("task-input");
let taskList = document.getElementById("task-list");

// Событие клика по кнопке
button.addEventListener("click", function () {
    alert("Кнопка нажата! 🎉");
});

// Событие ввода текста
textInput.addEventListener("input", function () {
    outputDiv.textContent = `Вы ввели: ${textInput.value}`;
});

// Добавление задач в список при нажатии Enter
taskInput.addEventListener("keydown", function (event) {
    if (event.key === "Enter" && taskInput.value.trim() !== "") {
        let taskItem = document.createElement("li");
        taskItem.textContent = taskInput.value;
        taskList.appendChild(taskItem);
        taskInput.value = ""; // Очищаем поле ввода
    }
});

Запускаем локальный сервер с помощью Caddy 🌐

Теперь, когда наши файлы готовы, давайте используем Caddy, чтобы запустить проект локально и проверить его в браузере.

Перейдите в папку вашего проекта (Lesson5):
```
cd Lesson5
```
Запустите сервер Caddy:
```
caddy file-server --listen :8080
```
Откройте браузер и перейдите на http://localhost:8080. Ваш проект запущен!

Исследуем события 🎉

Что происходит в нашем проекте:

Событие клика по кнопке

Когда вы нажимаете кнопку “Нажми меня”, появляется сообщение:

button.addEventListener("click", function () {
    alert("Кнопка нажата! 🎉");
});

Событие ввода текста

Когда вы вводите текст в поле, он динамически отображается ниже:

textInput.addEventListener("input", function () {
    outputDiv.textContent = `Вы ввели: ${textInput.value}`;
});

Добавление задач динамически

Нажав Enter в поле для задач, вы добавляете новый элемент в список:

taskInput.addEventListener("keydown", function (event) {
    if (event.key === "Enter" && taskInput.value.trim() !== "") {
        let taskItem = document.createElement("li");
        taskItem.textContent = taskInput.value;
        taskList.appendChild(taskItem);
        taskInput.value = ""; // Очищаем поле ввода
    }
});

Обновление с Ctrl + F5 🔄

Иногда браузер не хочет показывать изменения сразу. Ctrl + F5 — это как волшебная палочка, которая очищает кэш и перезагружает страницу. Магия, и только!

Что дальше?

Отличная работа! Теперь вы — настоящий мастер событий в JavaScript. В следующем уроке мы изучим делегирование событий, чтобы обрабатывать их более эффективно, особенно для динамически добавленных элементов.

Увидимся в Уроке 6 – Делегирование событий: Эффективная работа с взаимодействиями!

Теперь идите и оживляйте ваши веб-страницы! 🎠