JavaScript заметки

Зачем вообще нужны зависимые свойства? Для чего существуют top/left, если есть x/y? С математической точки зрения, прямоугольник однозначно задаётся начальной точкой (x,y) и вектором направления (width,height). Так что дополнительные зависимые свойства существуют лишь для удобства. Что же касается top/left, то они на самом деле не всегда равны x/y. Технически, значения width/height могут быть отрицательными. Это позволяет задать «направленный» прямоугольник, например, для выделения мышью с отмеченным началом и концом. То есть, отрицательные значения width/height означают, что прямоугольник «растет» влево-вверх из правого угла. #браузер #документ #координаты

IT образование в 2022 стало бесплатным! Все лекции и гайды топовых вузов страны тут https://t.me/vse_ob_it

Element.getBoundingClientRect() Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим). Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only left, top, right, bottom, x, y, width и height свойствами, описывающие это в пикселях. Все свойства, кроме width и height, являются относительными к верхнему левому углу viewport-а. #браузер #документ #координаты

Анимируй - Канал с готовыми анимациями для сайтов. Смотрите короткие демонстрации, выбирайте подходящую анимацию и забирайте готовый код.

Анимируй - Канал с готовыми анимациями для сайтов. Смотрите короткие демонстрации, выбирайте подходящую анимацию и забирайте готовый код.

Запретить прокрутку Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ. Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = "hidden". Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для document.body. Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место. Это выглядит немного странно, но это можно обойти, если сравнить clientWidth до и после остановки, и если clientWidth увеличится (значит полоса прокрутки исчезла), то добавить padding в document.body вместо полосы прокрутки, чтобы оставить ширину содержимого прежней. #браузер #документ #размеры

Ты программист и устал серфить интернет в поисках вакансий? Тяжело найти ту самую работу, которая будет соответствовать и отвечать требованиям твоего уровня? React Job | JS - канал, который поможет решить эти вопросы На канале ты найдешь: • свежие и актуальные вакансии, с достойными зарплатами и условиями труда • стажировки, бесплатные курсы, работа для джунов, мидлов и сеньеров по всему миру • примеры вопросов с собеседований, интересные задачи и обучающий материал для повышения скилла Подписывайся на наш канал, цени свое время!

Element.scrollIntoView() Метод Element.scrollIntoView() интерфейса Element прокручивает контейнер родителя элемента так, чтобы элемент, на котором был вызван scrollIntoView(), стал виден пользователю. #браузер #документ #размеры

Давно задумываетесь об интересной карьере в сфере IT? Хотите узнать, как с помощью data-аналитики повышать эффективность бизнеса? Познакомьтесь с основами обработки и анализа данных на онлайн-интенсиве Skillbox: 👉 https://clc.to/ySJJmQ. 📢 Встречаемся в прямом эфире 13 июня в 21:00 по московскому времени! Регистрируйтесь и получите полезный чек-лист по Data Science. Вы научитесь: 💫 применять язык программирования Python для data-аналитики; 💫 находить аномалии в данных; 💫 использовать библиотеки Pandas и Matplotlib; 💫 решать реальные задачи, с которыми сталкивается Data Scientist. 🏆 Все участники, дошедшие до финала интенсива, получат в подарок электронную книгу Пола Доэрти и Джеймса Уилсона «Человек + машина» издательства МИФ. Подключайтесь к прямым эфирам и используйте возможность получить сертификат на 10 тысяч рублей на любой курс Skillbox.

Window.scrollBy() Прокручивает документ на указанные величины. Параметры: X - смещение в пикселях по горизонтали. Y - смещение в пикселях по вертикали. #браузер #документ #размеры

⚡️Stay Ugly - нашумевшее IT-сообщество теперь в телеграм! Рекомендуем подписаться: @stayuglybro

Window.scrollTo() Метод для прокрутки документа до указанных координат. Параметры: x-coord пиксель по горизонтальной оси документа, будет отображён вверху слева. y-coord пиксель по вертикальной оси документа, будет отображён вверху слева. #браузер #документ #размеры

Fullstack-разработчик — это специалист, способный самостоятельно разработать сайт или веб-приложение. Он может создать удобный и привлекательный интерфейс, разработать структуру и собрать всё воедино. Вы можете освоить эту профессию, даже если никогда раньше не программировали на курсе от Skillbox. Переходите на сайт https://clc.to/4Apc6Q, чтобы узнать больше и записаться. Вы изучите JS, HTML, CSS и станете прокаченным frontend-hero. А язык для backend-разработки можете выбрать сами — классический PHP или топовые Python и JavaScript. Вас ждут онлайн-лекции и очень много практики. К концу курса вы сверстаете лендинг, разработаете социальную сеть, интернет-магазин и настроите интеграцию с Reddit.

Получение текущей прокрутки Обычные элементы хранят текущее состояние прокрутки в elem.scrollLeft/scrollTop. Что же со страницей? В большинстве браузеров мы можем обратиться к documentElement.scrollLeft/Top, за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement. К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств window.pageXOffset/pageYOffset Эти свойства доступны только для чтения. #браузер #документ #размеры

True Figma - канал, где публикуются макеты Figma для практики вёрстки. Макеты для вёрcтки - @true_figma

Ширина/высота документа Теоретически, т.к. корневым элементом документа является documentElement, и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight. Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight! С точки зрения элемента это невозможная ситуация. Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств. #браузер #документ #размеры

Не window.innerWidth/Height Браузеры также поддерживают свойства window.innerWidth/innerHeight. Вроде бы, похоже на то, что нам нужно. Почему же не использовать их? Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого. А window.innerWidth/innerHeight включают в себя полосу прокрутки. Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения. #браузер #документ #размеры

Профессия «Фронтенд-разработчик» на Хекслете, как айсберг – включает в себя гораздо больше, чем кажется на первый взгляд. Не просто синтаксис. На курсе мы даем даем фундаментальные основы и развиваем алгоритмическое мышление. Вы научитесь мыслить, как разработчик, и переводить любую бизнес-задачу на язык кода. Не только упражнения. Несколько сотен практических заданий в онлайн-тренажере – лишь часть обучения. Вы будете участвовать в разработке открытых проектов Хекслета на GitHub, напишите 4 полноценных приложения для бизнеса и попрактикуетесь в решении реальных кейсов от компаний-партнеров. Больше, чем учеба. Цель любого обучения – это трудоустройство. Мы пройдем путь до первой работы в IT вместе с вами. Поможем с резюме и сопроводительным, подготовим к собеседованиям и пригласим на стажировки в хорошие компании. Начните прямо сейчас. Вводные курсы профессии доступны бесплатно сразу после регистрации. Оцените формат и решите, стоит ли продолжать!