JS: DOM API

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

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

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

Уроки курса

• 1

  Введение

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

  теория
• 2

  JavaScript в браузере

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

  теория

  тесты

• 3

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

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

  теория

  тесты

• 4

  Что такое DOM?

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

  теория

  тесты

• 5

  DOM Дерево

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

  теория

  тесты

  упражнение

• 6

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

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

  теория

  тесты

• 7

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

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

  теория
• 8

  Тесты

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

  теория

  тесты

• 9

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

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

  теория

  тесты

  упражнение

• 10

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

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

  теория

  тесты

  упражнение

• 11

  Полифиллы

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

  теория
• 12

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

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

  теория

  тесты

  упражнение

• 13

  События на практике

  Научиться создавать интерактивные компоненты

  теория

  упражнение

• 14

  Формы

  Научиться правильно обрабатывать формы

  теория

  тесты

  упражнение

• 15

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

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

  теория

  тесты

  упражнение

• 16

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

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

  теория
• 17

  AJAX

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

  теория

  тесты

  упражнение

• 18

  JQuery

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

  теория

  тесты

  упражнение

Испытания

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

Автор

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

Сооснователь и CEO образовательного проекта Хекслет. Программирую с 2007 года. За это время прошёл путь от разработчика до технического директора и управляющего отдельным подразделением (филиалом). Управлял командами, в которых больше 50 разработчиков.

• Программирую на языках: Elixir, Clojure, JavaScript, PHP, Ruby.
• Соорганизатор конференции Nastachku.ru.
• Вимер.
• Топлю за DevOps и автоматизированные тесты.

Впечатления

Урок: Перехват и всплытие

Олег Николаенко 07 февраля 2020

Задачка просто огонь!) Решил меньше, чем за час и почти как учителя. Правда, код учителя лучше в "технологическом плане". Про обновление координат пустой клетки что то не подумал. В моем коде пустая клетка ищется при каждом клике.

Урок: DOM Дерево

Дмитрий Петров 15 июня 2019

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

Урок: Перехват и всплытие

Антон Почерников 23 ноября 2018

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

Урок: Введение в события

Денис Стрелков 15 мая 2018

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