#23 Javascript - Lazy scroll | Вёрстка сайта визитки для начинающих | HTML, CSS, JS
Продолжаем погружение в прекрасный мир javascript! В этом видео научимся устанавливать сторонние библиотеки на примере jQuery, узнаем, что такое слушатели событий, познакомимся с циклами и условиями! Ну а к концу видео реализуем плавный скролл к секции по клику из пункта меню!
Поддержать канал:
https://www.tinkoff.ru/rm/shevchuk.vi...
https://www.donationalerts.com/r/webp...
Подписывайтесь и ставьте лайк, приятного просмотра!
Также обязательно подпишись на мой телеграм канал, там будет много общения и ответов на вопросы!
https://t.me/webpacman
------------------------------------------------
Ссылки:
Документация по scrollTo: https://developer.mozilla.org/en-US/d...
Документация по NodeList: https://developer.mozilla.org/en-US/d...
Документация по event: https://developer.mozilla.org/en-US/d...
Документация по методу preventDefault: https://developer.mozilla.org/en-US/d...
GitHub: https://github.com/webpacman/webpacma...
GitHub Pages: https://webpacman.github.io
Код урока: https://github.com/webpacman/webpacma...
Тайминг:
00:00 - Введение
00:27 - Подключаем jQuery. Рассматриваем разные способы подключения
05:18 - Разбираем основы jQuery
06:55 - Тестируем методы пролистывания (скролла) к секции
10:14 - Слушатели событий в javascript
11:20 - Комментарии в javascript
11:54 - Дебаг событий клика. Ключевое слово this
14:29 - Получение атрибутов элемента
15:20 - Изучаем функции animate и scrollTop
18:09 - Динамическое получение размеров меню и отступов
19:14 - Функция parseInt
21:35 - Меняем активность пункта меню по клику
24:10 - Оптимизация выполнения функции. Условия в javascript
26:34 - Выход из функции с помощью return
27:19 - Начало реализации на нативном javascript. Получение списка элементов querySelectorAll
29:31 - Перебор элементов через forEach. Callback функции
31:30 - Добавление слушателя событий addEventListener
32:44 - Переписываем jQuery код на нативный js. Свойство classList
34:43 - Получение атрибутов элемента через getAttributes
38:00 - Получение css свойств в javascript
40:56 - Переписываем анимацию на чистый js
42:01 - Меняем активность пункта меню
42:33 - Ищем и правим ошибку плавного скролла
43:46 - css scroll-behavior smooth
44:19 - Продолжаем поиск ошибки плавного скролла
45:58 - Остановка событий по умолчанию event.preventDefault
47:33 - Заключение
Музыка:
Dead Pacman by N3rgul
Track: Home — Another Kid [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Home — Another Kid | Free Background ...
Free Download / Stream: https://alplus.io/home-another-kid
Track: Midnight — Declan DP [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Midnight — Declan DP | Free Backgroun...
Free Download / Stream: https://alplus.io/midnight-declan-dp
Track: Old Times — Next Route [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Old Times — Next Route | Free Backgro...
Free Download / Stream: https://alplus.io/old-times-next-route
------------------------------------------------
Привет! Меня зовут Виталий Шевчук, я веб-разработчик. Свой путь в разработке сайтов я начал ещё в школе, создавая форумы для игр. К текущему времени я получил много опыта в разработке сайтов и очень хочу им поделиться с вами!
------------------------------------------------
Telegram: https://t.me/webpacman
Сайт: http://vshevchuk.ru/
Теги: #js #javascript #jquery #css #css3 #html #html5
Watch video #23 Javascript - Lazy scroll | Вёрстка сайта визитки для начинающих | HTML, CSS, JS online without registration, duration hours minute second in high quality. This video was added by user Webpacman 14 November 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 36 once and liked it 1 people.