JS: DOM API

DOM является основой фронтенд разработки. Работа с любыми фреймворками и библиотеками начинается с понимания этой темы. Основные темы, которые будут рассмотрены в данном курсе:

• Манипуляции DOM деревом
• BOM
• Полифиллы
• Инструменты разработчика в браузерах
• AJAX
• Jquery

Подготовительный курс

Уроки курса

• 1

  Введение

  Познакомиться с курсом и его целями

  теория
• 2

  JavaScript в браузере

  Научиться использовать js в браузере. Узнать об отличиях между серверным и клиентским js.

  теория

  тесты

• 3

  Глобальный объект Window

  Познакомиться с глобальными объектами предоставляемыми браузером. Разобрать некоторые компоненты BOM, например, навигацию, работу с историей, ссылками.

  теория

  тесты

• 4

  Что такое DOM?

  Узнать о том чем html отличается от dom.

  теория

  тесты

• 5

  DOM Дерево

  Познакомиться со структурой DOM дерева. Научиться перемещаться по ней.

  теория

  тесты

  упражнение

• 6

  Поиск по дереву

  Познакомиться с поисковыми методами: `getElementById`, `querySelector` и другими.

  теория

  тесты

• 7

  Консоль разработчика

  Научиться пользоваться консолью разработчика в браузере.

  теория
• 8

  Тесты

  Познакомиться с системным тестированием

  теория

  тесты

• 9

  Манипулирование DOM деревом

  Научиться изменять DOM дерево, добавлять и удалять элементы.

  теория

  тесты

  упражнение

• 10

  Управление элементами DOM

  Научиться модифировать элементы. Понять разницу между атрибутами и свойствами.

  теория

  тесты

  упражнение

• 11

  Полифиллы

  Узнать каким образом нивелировать различия между браузерами при работе с DOM

  теория
• 12

  Введение в события

  Познакомиться с событийной моделью браузера. Научиться использовать события и создавать интерактивные приложения.

  теория

  тесты

  упражнение

• 13

  Перехват и всплытие

  Разобраться со стадиями событий. Научиться перехватывать события и останавливать их всплытие.

  теория

  тесты

  упражнение

• 14

  События документа

  Познакомиться с событиями возникающими при загрузке и выгрузке документа.

  теория
• 15

  AJAX

  Научиться выполнять AJAX запросы используя современное API браузера - fetch

  теория

  тесты

  упражнение

• 16

  JQuery

  Научиться пользоваться библиотекой JQuery. Узнать почему ее требуют в каждой вакансии, но компании продолжают отказываться от ее использования.

  теория

  упражнение

• 17

  Состояние приложения

  Научиться видеть состояние приложения и выделять его. Познакомиться с тем как разделять фронтенд на модули.

  теория

  тесты

  упражнение

• 18

  MVC

  Познакомиться с архитектурой Model-View-Controller

  теория

  тесты

  упражнение

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки.

Автор

Кирилл Мокевнин

Сооснователь и технический директор образовательного проекта Hexlet. Программирует с 2007 года. За это время прошел путь от разработчика до технического директора и управляющего отдельным подразделением (филиалом). Управлял командами, в которых больше 50 разработчиков. Программирует на языках: elixir, clojure, javascript, php, ruby. Со-организатор конференции nastachku.ru. Вимер. Топит за DevOps и автоматизированные тесты.

Впечатления

Денис Стрелков

Введение в события

Хорошее задание, встряхнул мозги наконец-то! У меня слишком подробная декомпозиция получилась, но я получил удовлетворение. )) https://ru.hexlet.io/code_reviews/48670

Антон Почерников

Перехват и всплытие

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

Дмитрий Петров

DOM Дерево

Пару часов и готово! Решение учителя великолепное! У меня 16 строк кода у учителя 4! 0 :1 в пользу учителя! :))