JavaScript размеры прокрутка и координаты элементов на странице и окна браузера.

Продолжаем изучать JavaScript и сегодня поговорим о размерах, прокрутке и координатах окна и объектов на странице. В JavaScript существуют множество свойств, которые позволяют получить информацию об элементе: ширину, высоту и другие геометрические характеристики. Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript. Для начала поговорим о том, как узнать ширину и высоту окна браузера, получить полную ширину и высоту документа, включая прокрученную часть. А также, прокрутить страницу с помощью JavaScript. Также поговорим о размерах, координатах, прокрутке элементов на странице и методе getBoundingClientRect.
👉 Файлы урока - fls.guru/files/tutorials/js/j...
👉 Плейлист "Как это сделать?" - • Як це зробити? Туторіа...
💪 Курс по верстке: edu.fls.guru
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - В уроке
00:13 - Ширина и высота окна браузера
02:40 - Полная ширина и высота страницы
03:55 - Получение кол-ва прокрученных пикселей
05:08 - Управление скроллом. Метод scrollBy
06:54 - Управление скроллом. Метод scrollTo
09:31 - Управление скроллом. Метод scrollIntoView
13:57 - Метрики элементов на странице
14:55 - Свойства offsetParent, offsetLeft и offsetTop
19:01 - Свойства offsetWidth и offsetHeight
20:02 - Свойства clientTop и clientLeft
21:12 - Свойства clientWidth и clientHeight
22:18 - Свойства scrollWidth и scrollHeight
23:07 - Свойства scrollLeft и scrollTop
23:07 - Управление скроллом элемента
24:55 - Координаты элементов на странице
26:22 - getBoundingClientRect
31:26 - elementFromPoint
32:35 - Домашка
33:31 - Заключение
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

Как вам? 💪 Курс по верстке: edu.fls.guru 🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/ 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@MegaTesei]

Крутяк. Лайк. Супер. С каждым новым уроком становится интереснее и в то же время сложнее становятся комбинации приёмов JS. Столько впереди всего, начинает кружится голова и появляется нервозность.

[@FreelancerLifeStyle]

@@MegaTesei хех, ничего, разберемся)

[@ivaneiring4732]

Не работает ничего. Пробую разные способы. DOM загружается и должна прокрутиться страница вниз, но бездействие. Быстрый скролл не работает вовсе. Дёргается вниз и обратно сразу же. Smooth, наконец, заработал.

[@user-xs5cb1dc6s]

Я в онемении! Фантастика! Так четко и понятно! Громаднейшая подготовительная работа! К этому видео я буду возвращаться как к конспекту снова и снова! Женя, так излагать - это дар! Спасибо-спасибо-спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста

[@elliotown8973]

Вот насколько с душой Женя делает свои уроки, которые доступны в открытом доступе! Сделаны кнопки, обозначены блоки, все понятно и практично! Мне сложно представить сколько времени и сил в это вложено. Это огромный вклад в образование. Требую памятник как минимум в центре Ужгорода!

[@jozef5555]

Это один из важнейших уроков, на мой взгляд

[@FreelancerLifeStyle]

Есть такое

[@no_way_back813]

Перед просмотром всегда жмите лайк, только потом приступайте к просмотру! :) Женя спасибо за труды и качественную подачу материала, лучший!

[@FreelancerLifeStyle]

Спасибо!

[@konstantino7016]

Правильный алгоритм действий 👍действую по такому же

[@user-ri1ry7sx6p]

Коменнтарий ради поднятия видео👍

[@FreelancerLifeStyle]

Спасибо!

[@user-mx7ns6xs8h]

Круто як завжди)) а стабільність ознака майстерності☝️

[@FreelancerLifeStyle]

Дякую!

[@user-qc2ol5ee2y]

Этот урок заслуживает отдельного лайка )))

[@user-ss3sd5eu1s]

Наконец-то комплексно изучу эту тему! Спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье

[@avelo895]

У Вас самые понятные и практические материалы. Большое спасибо за Ваш труд. Очень полезно.

[@pitbrest]

Объемный урок, нужно повторить не раз и не два) Спасибо за твой труд!

[@ye5275]

Невероятный урок, огромное спасибо, очень жду уроки про события

[@romandemin8601]

Очень доступно и четко! Надеюсь на продолжение столь полезных уроков

[@user-dj5ld8jc8x]

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

[@user-ym8mg1wi8t]

Спасибо, Жека за твой труд! 🔥👍💣

[@mzx6531]

Четко, без воды, с результатом, не перестаю удивляться, как такое можно находить в бесплатном доступе, спасибо вам:)

[@FreelancerLifeStyle]

Пожалуйста!

[@lezo]

Як завжди, константно підтримуємо найкращій канал!

[@pavelkodiy1437]

Спасибо за потраченное время и такой крутой контент! С нетерпением ждём разбора событий в js ; )

[@chrisplieva3179]

Жека, большое тебе спасибо! Жду и изучаю каждый твой выпуск.

[@o_antushevich]

Крутой урок, как всегда! Всё последовательно, доступно, со множеством примеров. Спасибо огромное!

[@arcadiibabici7655]

Женя спасибо за труды🤗😊!!!

[@user-ru2hw9vv5h]

Как всегда, огромное спасибо и хорошего настроения!

[@bekmirzoazimov9362]

Одновременно и качественный и обучающий контент, видно что для людей делается. Хотелось бы чтобы автор сделал видео с ответами на самые часто задаваемые вопросы

[@FreelancerLifeStyle]

Спасибо, сделаю!

[@user-ws7ps9bc1l]

@@FreelancerLifeStyle ну от нехай і зробить той хто поради роздає)) У вас і так є чим зайнятись, добрі уроки робите)

[@surpri6e130]

Просто красавчик, других слов сложно найти!

[@anatoliyrastorguev5540]

Лайк. Ждём продолжения курса. Спасибо за работу!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@SpaceQuiz24]

Огромное спасибо за то что вы так сильно посторались и зделали для нас такой такой полезный урок. А мы можем вас поблогадарить только лайкам подпиской и репостом.

[@mszulya4100]

как же ты хорошо объясняешь! Вот бы ты объяснил фетч и промисы 😍😍

[@user-tk7qv9rv2c]

Как всегда спасибо! Информация плотно подана, в общем все круто!

[@war_criminal_]

Очень наглядно и толково, спасибо огромное.

[@Vagabond1704]

Все как всегда очень круто, спасибо!

[@Dmytro-DIY]

Дякую, Жека! Твої координати - на вершині ))) 🔝

[@user-natal04ka]

Вот я и закончила твой бесплатный курс) Спасибище огромное, если бы ты так доходчиво не обьяснял - я бы давно сдалась. Очень хочется урок про интерфейсные события - с нетерпением жду новые видео о JS, а пока позанимаюсь по плейлисту "Как это сделать''.

[@FreelancerLifeStyle]

Курс всегда будет дополняться!

[@justerkong7562]

@@FreelancerLifeStyle А дальше все на Украинском будет?

[@vladikolad6035]

@@justerkong7562 да

[@halidibnmuhammad2160]

@@justerkong7562 придётся потерпеть с js. И выучить украинский 😅😅😅

[@zizzxiii2714]

Супер! Долго ждал продолжение урока по JS! Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@gwkot]

Ждал эту тему!!! Спасибо 🙏

[@FreelancerLifeStyle]

Пожалуйста!

[@pitbrest]

Последние секунды топ) Спасибо за урок, ждем продолжение! Было бы офигенно и по этим урокам шпаргалки)

[@andreiribac6284]

Огромное спасибо! Доступно, четко, разжевано! Низкий поклон за Ваш труд!

[@FreelancerLifeStyle]

Пожалуйста!

[@aliakseikaravaichyk1514]

Женя огромное Вам спасибо, очень четко, понятно, Мегареспект)

[@FreelancerLifeStyle]

Пожалуйста!

[@valentynbilan]

Большое спасибо за твой труд!

[@FreelancerLifeStyle]

Пожалуйста!

[@arcadiibabici7655]

Женя, спасибо!!!

[@Kirywatnik]

женя спасибр за твои уроки!

[@vmolo4ke]

Походу идеальнейший курс закончен, пойду смотреть "Как это сделать". Спасибо огромнейшее за курс)

[@tochcha2971]

Спасибо, Жека!

[@jaloliddinhazratqulov891]

Замечательный урок всегда круто, всегда супер и интересно

[@FreelancerLifeStyle]

Спасибо!

[@sergeyecho127]

Спасибо вам огромное.

[@Rasty_Boss]

Ти випускаєш відео дуже наближенні по темі які я прохожу на курсах, дякую

[@FreelancerLifeStyle]

Будь ласка!

[@MilenaAdelin2207]

Як завжди корисно і зрозуміло. Дякую!!

[@FreelancerLifeStyle]

Будь ласка!

[@sanzharabdurahmanov6988]

Спасибо за видео!

[@FreelancerLifeStyle]

Пожалуйста!

[@deniskotov]

Супер интересно и важно! Благодарю!

[@FreelancerLifeStyle]

Пожалуйста!

[@platonyunkov161]

спасибо за обучалки.бамбический видос.

[@bayramjankuliev1497]

Жека, спасибо за уроки

[@coolday9930]

1) Ширина полосы прокрутки по Y: const width = document.documentElement; const mainWidth = width.clientWidth; const windowWidth = window.innerWidth; console.log(windowWidth - mainWidth); 2) Прокрутка на 100px с задержкой в 1с: function scrollPage() { window.scrollTo({ top: 100, left: 0, behavior: "smooth" }) }; setTimeout(scrollPage, 1000); Но тут нюанс, что не сказано от верха элемента или от всей страницы, поэтому можно использовать и srcollBy() 3) Получение и вывод в консоль координат трёх элементов: const elem1 = document.querySelector('.lesson'); const elem2 = document.querySelector('.lesson__item1'); const elem3 = document.querySelector('.lesson__item2'); const getElem1 = elem1.getBoundingClientRect(); const getElem2 = elem2.getBoundingClientRect(); const getElem3 = elem3.getBoundingClientRect(); console.log(getElem1, getElem2, getElem3);

[@Andrey_Mendel]

Б***ха мучався со 2 задачей! У Жеки на відео крапка з комою стоїть не за фігурними скобками, а за простими! І не як в мене не виходило прокрутити.... Так і думав, щось з сінтексом в мене не те)) Cool Day - дякую!!

[@Andrey_Mendel]

Навіть, якщо і там, і там поставити крапку з комою, то сработає код!!

[@user-ex1yj6ub6i]

setTimeout(window.scrollBy,1000,0,100); вот и все на 2 задачу

[@user-qn7zf9js3y]

Однозначно, к просмотру и пересмотру-очень выручают видеоуроки! Да и человек не может все запомнить! Спасибо за проделанную работу!

[@FreelancerLifeStyle]

Пожалуйста!

[@chudotech]

СПАСИБО!!!

[@user-sh6wq1tp6h]

Дякую за корисний матеріал) тільки твої уроки так легко заходять

[@R.wsteady]

Спасибо, очень полезная информация.

[@FreelancerLifeStyle]

Пожалуйста!

[@kotlancer]

Годнота подъехала. Приступаю к изучению 👍

[@FreelancerLifeStyle]

Супер!

[@evgenika7472]

Спасибо!!! Это то что я давно искал!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-dd3nm6yz6d]

Превосходно, ВЕЛИКОлепно, ПОТРЯСАЮЩЕ!

[@FreelancerLifeStyle]

Спасибо!

[@stelsboii]

Як завжди на висоті❤

[@nazarbohynia2254]

Такой топ контент на канале, просто не могу понять почему так мало просмотров и лайков.

[@movieclips4848]

Как всегда на высоте

[@FreelancerLifeStyle]

Спасибо!

[@konstantino7016]

Ураааа! Новое видео! Ещё не дошёл до этого урока (я вообще на flex) но ради просмотра, лайка и коммента смотрю сейчас, пока кофе пью

[@FreelancerLifeStyle]

Спасибо!

[@niceman5890]

Крутое видео!

[@user-ys3in6qx6f]

Спасибо! 👍✨

[@yevhenspensor]

У меня тотемное животное - Сова xD Новости крутые и интересные, как и подача ! Уважение таким людям как Жека Фрилансер По Жизни !

[@lifemoment7970]

Огромное спасибо что вы делаете такие динамичные видео, решил заниматься программирование на летних каникулах и вообще хорошее лекарство из скуки, возможно перерастает во что нибудь большое, очень хорошая подача информации в отличии от других каналов и приложени, нету воды, почти все время-это чистая инфа. Кстати будете продолжать этот плейлист?Может расскажите нам об друзьях Js?))

[@detro1821]

наконец-то и покушать можно под видосик)

[@FreelancerLifeStyle]

Приятного

[@eragons89]

Дякую за відео Женя

[@MegaTesei]

Очень желаем увидеть видео про асинхронность, вызовы функции и промисы. Спасибо.

[@alonahilbert9959]

Дякую за відео😊

[@user-yi9pq3th4o]

Супер круто!!! Спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-gg4dv2rx2g]

Женя, спасибо за крутое видео!!! Ждём дальнейших уроков по JS!!!! Ты просто мега-талантливый преподаватель!!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@anastasea9101]

Огромное спасибо!!

[@FreelancerLifeStyle]

Пожалуйста)

[@serg11oz]

Отличный контент, Спасибо! Часто, как раз не хватает понимания - взаимодействовия js с элементами браузера.

[@TheParlamentx]

Женя ты лучший👌 лайк и коммент для продвижения

[@FreelancerLifeStyle]

Спасибо!

[@konstantino7016]

Видео радует до последней секунды))) всем смотреть до конца

[@FreelancerLifeStyle]

Хех, спасибо!

[@yaroslavqwerty8609]

Как всегда красава, завтра обновлю свой конспект на твою версию

[@FreelancerLifeStyle]

Спасибо!

[@sloppframes]

Спасибо, ваш курс многих познакoмил с JavaScript. Хорошая подача и интересное дз делает обучение только интереснее. Вы еще не думали когда приблизительно выйдет новое видео по курсу?

[@user-od6fb7rl3k]

Спасибо!

[@fidana_blog]

Спасибо 👍

[@FreelancerLifeStyle]

Пожалуйста!

[@work9167]

Супер!

[@yonameinoname2021]

Спасибо

[@konstantino7016]

Видео в топ⬆️⬆️⬆️

[@FreelancerLifeStyle]

Спасибо!

[@taraskravchuk9139]

Надзвичайно корисний урок!

[@FreelancerLifeStyle]

Дякую!

[@Xyjail]

Если бы у меня в универе были такие преподаватели, я сейчас был бы Илоном Маском))) Дякую)))

[@serdar7703]

Женя, спасибо если можно делай побольше уроков по JS я жду каждыц твой урок с нетерпением

[@FreelancerLifeStyle]

Да, стараюсь)

[@and555_48]

Благодарю вас за ваши уроки! Вы отлично объясняете и структурированно подаете материал. Круто! Лучшие видео уроки в русском сегменте! А ещё есть такой момент. Вы можете свои ролики как часть портфолио на фрилансе выставлять) (шутка) Хотя и в ней есть часть правды. Лишь тот, кто в совершенстве знает свою предметную область, может так качественно объяснять... Евгений Батькович - Благодарю!) Привет из Минска!

[@FreelancerLifeStyle]

Хех) Спасибо!

[@oleksandrzimin2100]

Топ видео, спасибо 👍👍👍лайк поставил😁

[@FreelancerLifeStyle]

Спасибо!

[@user-no2sn5gh8n]

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

[@makssenior5156]

ты лучший

[@bosfaction]

Привет, Женя! Спасибо тебе, большой человек. У тебя уровень кармы походу +100500)) Можешь рассказать, какой будет следующий урок и когда? Спасибо!

[@jauhien6872]

Очень круто! Было бы круто если бы показал как изменять позицию объектов в зависимости, например, от скрола страницы.

[@FreelancerLifeStyle]

Ок

[@stanislavkravtsov5404]

Спасибо большое, объясняешь очень классно! Будут ещё уроки?

[@sergeybubnov463]

Ждем видео по Event ам))

[@volodymyrbuzinov1473]

Оч полезные свойства, было бы круто след видос про Intersection Observer, и соответственно ,что с ним можно придумать интересного)

[@FreelancerLifeStyle]

Это я и анонсировал в этом видосе)

[@volodymyrbuzinov1473]

@@FreelancerLifeStyle сорян досмотрел только до конца занятия))

[@user-ep1th8fg7h]

Наконец-то 🤗

[@FreelancerLifeStyle]

))

[@artur_kia]

Лайк!

[@katerynapiskovets6747]

1 - const elem= window.pageXOffset; console.log(elem); 2 - function scrollPage(){ window.scrollTo({ top:100; left:0; behavior:"smooth" }) }; setTimeout (scrollPage,1000); 3-const elem= document.querySelcetor('.class'); const getElem = elem.getBoundingClientRect(); console.log(getElem);

[@user-jc5yr6wz5i]

Комментарий ради комментария). Только вот на днях сам разберемся в этой теме, знал бы, не торопился😃. Предполагаю что следующий выпуск про "Event" и "EventListener()?

[@FreelancerLifeStyle]

Думаю да