курс

JS: DOM API

4578 студентов 3155 сообщений
Последнее обновление: 21 ноября 2022
Курс JS: DOM API
3 900 ₽ в месяц
за все курсы Хекслета
Зарегистрироваться
  • Тренажер с практикой
  • Бессрочный доступ к теории
  • Асинхронный формат обучения

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

18 уроков (видео и/или текст)
18 упражнений в тренажере
65 проверочных тестов
Помощь в «Обсуждениях»
Доступ к остальным курсам платформы

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

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

Описание

Браузер — это особая среда, в которой JavaScript получает возможность взаимодействовать с загруженными страницами сайтов. Для этого браузер предоставляет специальные объекты с большим количеством методов. С их помощью можно выполнять любые преобразования HTML, добавляя интерактивность на странице. Не важно, какой используется фреймворк или библиотека, все они работают через эти объекты. Знание этой темы – основа фронтенд-разработки, на которой строится все остальное.

Уроки курса

Продолжительность 20 часов

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

Испытания

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

#
Задание
% завершений

Отзывы

Аватар пользователя Саша Шляпик
Саша Шляпик 03 сентября 2022

Здравствуйте. Хоть и с большим трудом, но удалось решить задачу используя 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(), который я упомянул выше.


Аватар пользователя Виталий Моржов
Виталий Моржов 27 июня 2022

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

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


Аватар пользователя Anton Krupin
Anton Krupin 30 апреля 2022

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


Аватар пользователя Yaroslav Mikhaylov
Yaroslav Mikhaylov 24 марта 2022

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


Аватар пользователя Oleg Artemiev
Oleg Artemiev 04 февраля 2022

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

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
с нуля
Разработка фронтенд-компонентов для веб-приложений
8 декабря 10 месяцев
Иконка программы Онлайн-буткемп. Фронтенд-разработчик
Профессия
Новый с нуля
Интенсивное обучение профессии в режиме полного дня
15 декабря 4 месяца
Иконка программы Fullstack-разработчик
Профессия
с нуля
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
8 декабря 16 месяцев