Практика: функции и DOM

Введение

Закрепляем функции, параметры, встроенные методы и работу с DOM (выбор элементов, создание и изменение): создание элементов, обработка данных, переиспользование кода.

Задачи

• Писать функции, создающие DOM-элементы (карточки, списки).
• Переиспользовать функции в обработчиках и при отрисовке.
• Сочетать функции, параметры и встроенные методы при работе с DOM.

Практика

1. Функция createCard(title, text) — создаёт div-карточку и возвращает элемент.
2. Функция renderList(items) — создаёт ul из массива строк.
3. Функция-обработчик для кнопки, вызывающая другую функцию.

Подведём итоги

Функции структурируют код при работе с DOM. На следующем уроке — события.

Типичные ошибки

• Передавать обработчик со скобками (onclick="handler()") — функция выполнится сразу, а не по событию.
• Забывать возвращать элемент из функции createCard — не могут его потом добавить.
• Дублировать код вместо вызова переиспользуемой функции — программа завершится ошибкой или даст неверный результат.
• Путать область видимости: переменная объявлена внутри функции, используется снаружи — undefined.

Домашнее задание

Упражнение №1

Реализуй функцию createButton(text), которая создаёт кнопку с текстом и возвращает DOM-элемент. Добавь 3 кнопки на страницу.

Упражнение №2

Реализуй функцию renderTable(data), где data — массив объектов. Функция должна создавать таблицу с заголовками из ключей и строками данных.

Упражнение №3

Проведи рефакторинг квиза: вынеси отрисовку вопроса и проверку ответа в отдельные функции.