JavaScript заметки

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 вместе с вами. Поможем с резюме и сопроводительным, подготовим к собеседованиям и пригласим на стажировки в хорошие компании. Начните прямо сейчас. Вводные курсы профессии доступны бесплатно сразу после регистрации. Оцените формат и решите, стоит ли продолжать!

Ширина/высота окна Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement #браузер #документ #размеры

Visual Studio теперь в Telegram! Подписывайтесь: @vscode_edu

Свойства scrollLeft/scrollTop можно изменять В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft/scrollTop можно изменять, и браузер выполнит прокрутку элемента. При клике на следующий элемент будет выполняться код elem.scrollTop += 10. Поэтому он будет прокручиваться на 10px вниз. Установка значения scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно. #браузер #документ #размеры

Фронтендеры на месте? Нашли для вас канал, где постят эффекты с готовым кодом на Codepen. Увидел – и сразу заюзал в своём проекте. Подпишись и пили сайты на уровне Apple – @frontend_formula

scrollLeft/scrollTop Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху. Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой. Другими словами, свойство scrollTop – это «сколько уже прокручено вверх». #браузер #документ #размеры

scrollWidth/Height Эти свойства – как clientWidth/clientHeight, но также включают в себя прокрученную (которую не видно) часть элемента. На рисунке выше: - scrollHeight = 723 – полная внутренняя высота, включая прокрученную область. - scrollWidth = 324 – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна clientWidth. Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту. #браузер #документ #размеры

Прокачивай свой технический английский без больших усилий, уделяя 5 минут в день! На этом канале регулярно публикуют самые популярные слова и выражения из мира IT. Подойдет всем IT-специалистам, которые хотят без труда читать документацию на английском и свободно общаться с иностранными заказчиками. Подписывайся на @enforit и качай свой инглиш, пока компилируется проект👌

clientTop/Left Пойдём дальше. Внутри элемента у нас рамки (border). Для них есть свойства-метрики clientTop и clientLeft. В нашем примере: - clientLeft = 25 – ширина левой рамки - clientTop = 25 – ширина верхней рамки Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней. #браузер #документ #размеры

Метрики для не показываемых элементов равны нулю. Координаты и размеры в JavaScript устанавливаются только для видимых элементов. Если элемент (или любой его родитель) имеет display:none или отсутствует в документе, то все его метрики равны нулю (или null, если это offsetParent). Например, свойство offsetParent равно null, а offsetWidth и offsetHeight равны 0, когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) display:none. Мы можем использовать это, чтобы делать проверку на видимость. Заметим, что функция isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые <div>). #браузер #документ #размеры

offsetWidth/Height Теперь переходим к самому элементу. Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки. Для нашего элемента: - offsetWidth = 390 – внешняя ширина блока, её можно получить сложением CSS-ширины (300px), внутренних отступов (2 * 20px) и рамок (2 * 25px). - offsetHeight = 290 – внешняя высота блока. #браузер #документ #размеры

Повысь ЗП в 2 раза, тратя время на 1 статью в день Одна статья в день - это 7 в неделю, 30 в месяц. Каждая статья является полезной выжимкой из всей кучи информации по Frontend-разработке в интернете. За считанные недели ты освоишь все углубленные темы по JavaScript и повысишь свои компетенции, что позволит претендовать на бо́льшую ЗП. Подписывайся на канал @Pod_it, чтобы обойти всех конкурентов 🔥

Вот так выглядят свойства offsetParent, offsetLeft/Top Подробное описание можете посмотреть постом выше: https://t.me/notesjs/367 #браузер #документ #размеры

JavaScript front - это канал, для фронтенд разработчиков от специалиста, разрабатывающего микросервисы в Amazon. Сеньорам Гайды не нужны. А вот в начале карьеры и мидл разработчикам - самое то. Наш упор на 1. Вопросы с собеседований 2. Задачи и их решение 3. Код 4. Полезные ресурсы JavaScript разработчика 🔥 Подписывайсь и учи JS тут - @javascriptv

offsetParent, offsetLeft/Top Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них. В свойстве offsetParent находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге. То есть, ближайший предок, который удовлетворяет следующим условиям: - Является CSS-позиционированным (CSS-свойство position равно absolute, relative, fixed или sticky), - или <td>, <th>, <table>, - или <body>. Свойства offsetLeft/offsetTop содержат координаты x/y относительно верхнего левого угла offsetParent. В примере выше внутренний <div> имеет элемент <main> в качестве offsetParent, а свойства offsetLeft/offsetTop являются сдвигами относительно верхнего левого угла (180). #браузер #документ #размеры