JS: DOM API

Включено в курс

Чему вы научитесь

• Оживлять веб-страницы добавляя в них интерактивность
• Взаимодействовать с любыми элементами на странице, выбирать их или изменять
• Обеспечивать универсальную работу JavaScript в любом браузере
• Правильно обрабатывать формы
• Выполнять AJAX-запросы на сервер
• Использовать JQuery для обработки DOM

Описание

В этом курсе вы изучите браузерную среду. Вы познакомитесь с объектами браузера, научитесь делать любые преобразования HTML и добавлять интерактивность на страницу. Знания из этого курса пригодятся, если вы решите, создавать интерактивные приложения, которые взаимодействуют со страницей в браузере.

Чтобы учиться было проще, рекомендуем пройти следующие курсы:

• JS: Функции
• JS: Введение в ООП
• Основы современной верстки

Программа курса

• 1

  Введение

  Знакомимся с темой и целями курса

  теория
• 2

  JavaScript в браузере

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

  теория

  тесты

  упражнение

• 3

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

  Выясняем, зачем и как использовать объект window

  теория

  тесты

  упражнение

• 4

  BOM-объекты

  Знакомимся с объектами, которые позволяют управлять браузером через JavaScript

  теория

  тесты

  упражнение

• 5

  DOM

  Выясняем, чем HTML отличается от DOM

  теория

  тесты

  упражнение

• 6

  Навигация по DOM-дереву

  Знакомимся с структурой DOM-дерева и учимся перемещаться по ней

  теория

  тесты

  упражнение

• 7

  Декларативный поиск по DOM-дереву

  Знакомимся с getElementById, querySelector и другими поисковыми методами

  теория

  тесты

  упражнение

• 8

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

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

  теория

  тесты

• 9

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

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

  теория

  тесты

  упражнение

• 10

  Управление узлами DOM

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

  теория

  тесты

  упражнение

• 11

  Полифиллы

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

  теория

  тесты

• 12

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

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

  теория

  тесты

  упражнение

• 13

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

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

  теория

  тесты

  упражнение

• 14

  Формы

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

  теория

  тесты

  упражнение

• 15

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

  Разбираемся со стадиями событий и обсуждаем, как перехватить всплывающее событие

  теория

  тесты

  упражнение

• 16

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

  Знакомимся с событиями, которые возникают при загрузке и выгрузке документа

  теория

  тесты

• 17

  AJAX

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

  теория

  тесты

  упражнение

• 18

  JQuery

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

  теория

  тесты

  упражнение

• 19

  Самостоятельная работа

  Дополнительные задания, которые позволяют закрепить полученную теорию
• 20

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

Отзывы

Elena Khuzhina 16 июля 2023

Очень классное задание! Спасибо большое! Сначала не знала с чего начать даже, растерялась. Но потом пару дней и перечитала теорию и обсуждения, и все получилось. Сохраняю полезные комментарии в отдельный файл и как мозаика потом в голове складывается что зачем идет.

Виталий Моржов 27 июня 2022

Спасибо команде Хекслета за такие упражнения ! Когда сам реализовываешь подобную функциональность, да еще и все работает, то мотивация взлетает до небес!)

P.s Я несколько часов мучился из-за того, что не понял как должна выглядеть результирующая строка запроса на сервер. Ошибка была именно в части запроса. Я думал, что должно быть так: ....?capital=moscow, а оказалось так: ....?search=moscow

Anton Krupin 30 апреля 2022

Спасибо за такое интересное задание =) Решение конечно не такое красивое и компактное, как у учителя, но тесты прошло с первого раза =)

Yaroslav Mikhaylov 24 марта 2022

очень хороший урок, побольше бы таких, с разбором хитрых кейсов из практики

Oleg Artemiev 04 февраля 2022

Понравилось задание. Решение учителя элегантное. Спасибо команде Hexlet за ваш труд.