03

DOM и события

JavaScript: DOM и события

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

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

  1. Изучить:

    • объектную модель документа DOM;
    • способы получения элементов или списков элементов из дерева;
    • работу со свойствами и методами элементов дерева;
    • создание, добавление, удаление элементов дерева;
    • редактирование текстового содержимого объектов;
    • управление стилями элементов и классами;
    • события и объект event;
    • добавление обработчиков событий и работа с объектом event;

  2. Перед выполнением самой лабораторной работы:

    • Установить node.js четной версии.
    • Переключиться на ветку main.
    • Инициализировать пакет с помощью команды npm init -y.
    • Установить ESLint с помощью npm init @eslint/config. Подсказки как отвечать на вопросы при установке:
      1. How would you like to use ESLint - To check syntax, find problems, and enforce code style
      2. What type of modules does your project use? - JavaScript modules (import/export)
      3. Which framework does your project use? - None of these
      4. Does your project use TypeScript? - No
      5. Where does your code run? - Browser
      6. How would you like to define a style for your project? - Use a popular style guide
      7. Which style guide do you want to follow? - Standard
      8. What format do you want your config file to be in? - JSON
      9. Would you like to install them now? - Yes
      10. Which package manager do you want to use? - npm
    • Установить конфигурацию от HTML Academy - npm install --save-dev eslint-config-htmlacademy.
    • В файле .eslintrc.json необходимо заменить строку "extends": "eslint:recommended", на "extends": "htmlacademy/vanilla".
    • Установить расширение ESLint в VS Code или аналогичное для вашего редактора.
    • Добавить в проект файл .gitignore. В него добавить node_modules/.
    • Создать коммит на ветке main со всеми новыми файлами. Убедитесь, что папка node_modules и ее содержимое не попадают в коммит.

  3. Для выполнения работы необходимо:

    • Создать ветку lab3.
    • Создать документ html с H1 заголовком «ФИО - Лабораторная работа №3».
    • Решить предложенные задачи используя JS.
    • Подключить решения к созданной странице.
    • Элементы интерфейса для задач разместить в отдельных секциях с соответствующими подзаголовками.

  4. Провести ручное тестирование в браузере.

  5. Отформатировать документы.

  6. Убедиться, что нет замечаний от ESLint.

  7. Зафиксировать результаты работы с помощью системы контроля версий git и отправить ветку lab3 в репозиторий на github.

  8. Загрузить проект на Render через ручную загрузку (manual deploy).

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

  • Все задачи имеют решение и требуемый в них вывод.
  • Отсутствуют ошибки ESLint в панели Problems в VS Code.
  • Отсутствуют ошибки в консоли браузера при работе с веб-страницей.
  • Отсутствуют анонимные функции при использовании метода .addEventListener().

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

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

Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

Задачи

Like

Реализовать кнопку с иконкой пальца вверх или сердечка (не забывайте про доступность и текст). При нажатии на эту кнопку она помечается как активированная. При повторном нажатии она становится деактивированной.

Like / Dislike

Повторите кнопку из прошлого задания, но добавьте вторую с иконкой пальца вниз или разбитого сердечка. Теперь при нажатии на одну из них она помечается как активированная, при повторном - деактивированной. Но они не могут быть активны одновременно. По-прежнему не забывайте про доступность и текст.

Корзина

Сделайте простую карточку с изображением, описанием и кнопкой “в корзину”. Также добавьте иконку корзины со счетчиком товаров (span). Счетчик должен быть размещен в правом верхнем углу иконки. При нажатии на кнопку “в корзину” счетчик корзины увеличивается на 1.

Сортировка

Добавьте три кнопки для сортировки по возрастанию и убыванию, а также возврат к исходному варианту. В js создайте список (<ul>, <li>) из нескольких чисел в случайном порядке (можно использовать функции из прошлой работы). С помощью js создайте и отрисуйте на странице этот список. При нажатии на одну из кнопок сортировки, не мутируя исходный массив, получите отсортированный по возрастанию или убыванию массив, создайте из него новый набор элементов, удалите старый (<ul>) и добавьте в дерево новый (<ul>, <li>). Возврат к исходному варианту работает по аналогичной схеме только вы берете исходный вариант массива.

Не использовать innerHTML.

Координаты

При любом нажатии указателем (pointer) выводить на экран координаты этого нажатия относительно viewport - X: 102, Y: 73

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

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