JavaScript: DOM и события

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

Подготовка

DOM

DOM как внутреннее представление браузером HTML-структуры документа в виде иерархии объектов, которыми можно манипулировать с помощью JavaScript.

Корневой, родительские, дочерние, одноуровневые узлы DOM, которые существуют относительно друг друга.

Navigator, Window и Document - важные части веб-браузера и то, как они представлены в JavaScript.

Получение ссылок на узлы DOM, например, с помощью querySelector() и getElementById().

Создание новых узлов, например, с помощью innerHTML() и createElement().

Добавление и удаление узлов в DOM с помощью appendChild() и removeChild().

Добавление атрибутов с помощью setAttribute() и редактирование текстового содержимого объектов.

Манипулирование стилями с помощью Element.style._ и Element.classList._.

События

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

Работа с обработчиками событий: addEventListener() и removeEventListener(), опции обработчика событий. Объекты событий.

Предотвращение поведения по умолчанию с помощью preventDefault().

Делегирование обработки событий благодаря всплытию.

Источники

Выполнение

Установка и настройка ESLint

Установить node.js четной версии.
Переключиться на ветку main.
Инициализировать пакет с помощью команды npm init -y.
Установить ESLint с помощью npm init @eslint/config. Подсказки как отвечать на вопросы при установке:
1. What do you want to lint? - javascript
2. How would you like to use ESLint? - To check syntax and find problems
3. What type of modules does your project use? - JavaScript modules (import/export)
4. Which framework does your project use? - None of these
5. Does your project use TypeScript? - No
6. Where does your code run? - Browser
7. Would you like to install them now? - yes
8. Which package manager do you want to use? - npm
В файл eslint.config.mjs добавить правила приведенные ниже. Пример организации конфигурационного файла смотрите в документации ESLint.
По желанию установить расширение ESLint в VS Code или аналогичное для вашего редактора.
Добавить в проект файл .gitignore. В него добавить node_modules/.
Создать коммит на ветке main со всеми новыми файлами. Убедитесь, что папка node_modules и ее содержимое не попадают в коммит.

Правила для ESLint в конфигурацию eslint.config.mjs

{
   rules: {
      // Possible Problems
      "no-template-curly-in-string": "error",
      "no-use-before-define": ["error", { functions: false }],
      "no-useless-assignment": "error",
      // Suggestions
      "accessor-pairs": "error",
      "arrow-body-style": ["error", "as-needed"],
      camelcase: "error",
      curly: "error",
      eqeqeq: ["error", "always"],
      "no-alert": "error",
      "no-console": "error",
      "no-nested-ternary": "error",
      "no-return-assign": "error",
      "no-shadow": ["error", { hoist: "all" }],
      "no-unneeded-ternary": "error",
      "no-unused-expressions": "error",
      "no-useless-concat": "error",
      "no-useless-return": "error",
      "no-var": "error",
      "prefer-arrow-callback": "error",
      "prefer-const": "error",
      "prefer-template": "error",
      radix: "error",
    },
}

Решение задач

Проверьте что вы находитесь на ветке main и ESLint настроен. После этого создайте ветку lab2. На ней добавьте документ html с H1 заголовком «ФИО - Лабораторная работа №2» в header.

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

Обязательно проведите ручное тестирование в браузере. Перед созданием коммитов проверяйте код с помощью ESLint и форматируйте его.

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

Требования

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

Задачи

Like

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

Like / Dislike

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

Корзина

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

Сортировка

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

Галерея

Добавьте на страницу 10 фотографий и две кнопки: перенести и удалить. Пользователь может перейти в режим выбора продолжительным (1 секунда) нажатием на изображение, оно выбирается и помечается цифрой с порядковым номером 1. Пользователь может еще раз нажать на это же изображение, цифра снимается и режим выбора завершается. В режиме выбора пользователь может выбирать другие фото по обычному нажатию и к изображениям добавляется порядковый номер в выборе. Порядковые номера ставятся там где произошло нажатие. Все выбранные изображения можно удалить или перенести в подраздел скопированные, где они располагаются в том порядке, котором были выбраны. Кнопки перенести и удалить активны только в режиме выбора.

02

DOM и события