- Тренажер с практикой
-
Бессрочный доступ к теории
-
Асинхронный формат обучения
Включено в курс
Чему вы научитесь
- Оживлять веб-страницы добавляя в них интерактивность
- Взаимодействовать с любыми элементами на странице, выбирать их или изменять
- Обеспечивать универсальную работу JavaScript в любом браузере
- Правильно обрабатывать формы
- Выполнять AJAX-запросы на сервер
- Использовать JQuery для обработки DOM
Описание
Браузер — это особая среда, в которой JavaScript получает возможность взаимодействовать с загруженными страницами сайтов. Для этого браузер предоставляет специальные объекты с большим количеством методов. С их помощью можно выполнять любые преобразования HTML, добавляя интерактивность на странице. Не важно, какой используется фреймворк или библиотека, все они работают через эти объекты. Знание этой темы – основа фронтенд-разработки, на которой строится все остальное.
Программа курса
-
2
JavaScript в браузере
Научиться использовать js в браузере и знать об отличиях между серверным и клиентским js -
4
BOM объекты
Познакомиться с объектами, позволяющими управлять браузером через JavaScript -
6
Навигация по DOM-дереву
Познакомиться со структурой DOM-дерева и научиться перемещаться по ней -
7
Декларативный поиск по DOM-дереву
Познакомиться с поисковыми методами: getElementById, querySelector и другими -
9
Манипулирование DOM-деревом
Научиться изменять DOM-дерево, добавлять и удалять элементы. -
10
Управление узлами DOM
Научиться модифицировать элементы, понять разницу между атрибутами и свойствами -
12
Введение в события
Познакомиться с событийной моделью браузера, изучить базовые события и их особенности работы -
15
Перехват и всплытие
Разобраться со стадиями событий и узнать, как перехватить всплывающее событие -
16
События документа
Познакомиться с событиями возникающими при загрузке и выгрузке документа. -
17
AJAX
Научиться выполнять AJAX запросы, используя современный API браузера - fetch -
18
JQuery
Научиться пользоваться библиотекой JQuery. Узнать почему ее требуют в каждой вакансии, но компании продолжают отказываться от ее использования. -
19
Самостоятельная работа
Дополнительные задания, которые позволяют закрепить полученную теорию -
20
Дополнительные материалы
Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса
Формат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже
Отзывы
Здравствуйте. Хоть и с большим трудом, но удалось решить задачу используя jquery, пришлось много гуглить. Учительское решение, конечно, шикарное, особенно реализация условий (next, prev). С событиями зачем-то я пошел другим путем, навешивая их на сами слайдеры, а не на кнопки (хотя сначала думал об этом). https://ru.hexlet.io/code_reviews/700037
В остальном, вроде, решение похоже, условия только у меня корявенько реализованы. Осталось пару вопросов:
1) После проверки задания тесты проходят, но валятся подобные сообщения, не понимаю что они значат:
console.warn To match all elements we had to reset the lastIndex of the RegExp because the global flag is enabled. We encourage to remove the global flag from the RegExp.
2) Используя метод .each(), я пытался вместо function() использовать стрелочную функцию, но тогда ничего не работает. Почему так происходит?
// Хотел так, но не сработало
carousels.each(() => {
const carousel = $(this);
...
// Пришлось сделать как в документации и заработало
carousels.each(function() {
const carousel = $(this);
...
И, кстати, подсказка для тех, кто никак не может заставить работать слайдеры по-отдельности. Если вы так же, как и я, привязываете событие к самой карусели, то в jquery есть метод .each(), который я упомянул выше.
Спасибо команде Хекслета за такие упражнения ! Когда сам реализовываешь подобную функциональность, да еще и все работает, то мотивация взлетает до небес!)
P.s
Я несколько часов мучился из-за того, что не понял как должна выглядеть результирующая строка запроса на сервер. Ошибка была именно в части запроса. Я думал, что должно быть так: ....?capital=moscow, а оказалось так: ....?search=moscow
Спасибо за такое интересное задание =) Решение конечно не такое красивое и компактное, как у учителя, но тесты прошло с первого раза =)
очень хороший урок, побольше бы таких, с разбором хитрых кейсов из практики
Понравилось задание. Решение учителя элегантное. Спасибо команде Hexlet за ваш труд.
