PRO курс

JS: DOM API

1156 сообщений в сообществе 1675 учащихся

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

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

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

JS: Асинхронное программирование

Уроки курса

  • 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

    тесты

    упражнение

Испытания

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

# Задание % завершений
1 Модальное окно 82%
2 Пятнашки 69%
3 Прогресс 89%

Автор

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

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

Впечатления

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

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

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

продолжительность
32 часа
награда
90 баллов
Получить доступ к курсу