Браузер это особая среда, в которой JavaScript получает возможность взаимодействовать с загруженными страницами сайтов. Для этого браузер предоставляет специальные объекты с большим количеством методов. С их помощью можно выполнять любые преобразования HTML добавляя интерактивность на странице. Не важно какой используется фреймворк или библиотека, все они, в конечном итоге, работают через эти объекты. Знание этой темы – основа фронтенд разработки, на которую нанизывается все остальное.
Чему вы научитесь:
- Оживлять веб-страницы добавляя в них интерактивность
- Взаимодействовать с любыми элементами на странице, выбирать их или изменять
- Обеспечивать универсальную работу JavaScript в любом браузере
- Правильно обрабатывать формы
- Выполнять AJAX запросы на сервер
- Использовать JQuery для обработки DOM
Уроки курса
-
2
JavaScript в браузере
Научиться использовать js в браузере. Узнать об отличиях между серверным и клиентским js. -
3
Глобальный объект Window
Познакомиться с глобальными объектами предоставляемыми браузером. -
5
Навигация по DOM-дереву
Познакомиться со структурой DOM дерева. Научиться перемещаться по ней. -
6
Декларативный поиск по DOM-дереву
Познакомиться с поисковыми методами: getElementById, querySelector и другими. -
9
Манипулирование DOM деревом
Научиться изменять DOM дерево, добавлять и удалять элементы. -
10
Управление узлами DOM
Научиться модифицировать элементы. Понять разницу между атрибутами и свойствами. -
12
Введение в события
Познакомиться с событийной моделью браузера. Изучить базовые события и их особенности работы. -
15
Перехват и всплытие
Разобраться со стадиями событий. Научиться перехватывать события и останавливать их всплытие. -
16
События документа
Познакомиться с событиями возникающими при загрузке и выгрузке документа.
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки.
| # | Задание | % завершений |
|---|---|---|
| 1 | Модальное окно | 83% |
| 2 | Пятнашки | 70% |
| 3 | Прогресс | 89% |
Автор
Сооснователь и CEO образовательного проекта Хекслет. Программирую с 2007 года. За это время прошёл путь от разработчика до технического директора и управляющего отдельным подразделением (филиалом). Управлял командами, в которых больше 50 разработчиков.
- Программирую на языках: Elixir, Clojure, JavaScript, PHP, Ruby.
- Соорганизатор конференции Nastachku.ru.
- Вимер.
- Топлю за DevOps и автоматизированные тесты.
Впечатления
Очень интересное задание (второе подряд)! Результат полученный не может не радовать. Интересно покликать свою работу.
Задачка просто огонь!) Решил меньше, чем за час и почти как учителя. Правда, код учителя лучше в "технологическом плане". Про обновление координат пустой клетки что то не подумал. В моем коде пустая клетка ищется при каждом клике.
Пару часов и готово! Решение учителя великолепное! У меня 16 строк кода у учителя 4! 0 :1 в пользу учителя! :))
Не придумал как по-простому определять, что цель события находится рядом с пустой ячейкой. Пришлось городить огород. В решении учителя определение соседней ячейки просто космос.
Хорошее задание, встряхнул мозги наконец-то! У меня слишком подробная декомпозиция получилась, но я получил удовлетворение. )) https://ru.hexlet.io/code_reviews/48670
