11

DOM и события

JavaScript: DOM, события и их обработка

Цель: изучить DOM, события и их обработку, взаимосвязь и способы манипуляций с объектами дерева.

Порядок выполнения лабораторной работы:

  1. Изучить:
    • объектную модель документа DOM;
    • способы получения элементов или списков элементов из дерева;
    • работу со свойствами и методами элементов дерева;
    • события и объект event;
    • добавление обработчиков событий и работа с объектом event;
  2. Для выполнения работы необходимо:
    • Создать документ html с H1 заголовком «ФИО - Лабораторная работа №11».
    • Решить предложенные задачи используя JS.
    • Подключить решения к созданной странице.
  3. Проверить код с помощью ES Lint и исправить ошибки.
  4. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.
  5. Загрузить проект на сервер через sftp или используя ssh.

Требования к JS:

  • Все задачи имеют решение и требуемый в них вывод.
  • Отсутствуют ошибки от ESLint.
  • Отсутствуют ошибки в консоли браузера при работе с веб-страницей.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница, сгенерированная с помощью команды npm run build, на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

Задачи

Задача №1 Иконка корзины

Реализовать иконку корзинки с количеством товаров. И добавить кнопку “в корзину”, которая увеличивает счетчик на 1.

Задача №2 Модальное окно

Реализовать появление и скрытие модального окна.

Задача №3 Разворачивающаяся карточка

Реализовать карточку, которая поворачивается в сторону курсора и возвращается на место, когда курсор убран.

Задача №4 Предупреждение

Добавить элемент предупреждающий об ошибке, который через 3 секунды пропадает.

Вопросы для защиты

  1. Что такое DOM?
  2. Какие есть способы получения элементов из DOM?
  3. Что такое событие?
  4. Как добавить обработчик события?
  5. Примеры свойств в объекте event.
  6. Примеры методов у элементов DOM.
Задать вопрос наставнику
Предыдущая Следующая