JavaScript заметки

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

⚡️Вы давно просили сделать обучающий канал, где каждый желающий сможет выучить все самые популярные языки программирования за неделю: 1. Обучение Python с нуля 2. Обучение JavaScript с нуля 3. Обучение С++ с нуля 4. Обучение С# с нуля 5. Обучение SQL с нуля 👨🏻‍🎓Учи все сразу, или выбери более подходящий язык программирования в лучшем образовательном IT-канале: https://t.me/+yPFeLAAjTqg5MjJi

⚡️Единственный образовательный IT-канал, где каждый желающий сможет выучить все самые популярные языки программирования за неделю: 1. Обучение Python с нуля 2. Обучение JavaScript с нуля 3. Обучение С++ с нуля 4. Обучение С# с нуля 5. Обучение SQL с нуля 👨🏻‍🎓Учи все сразу, или выбери более подходящий язык программирования в лучшем образовательном IT-канале: https://t.me/+yPFeLAAjTqg5MjJi

Метрики Вот общая картина с геометрическими свойствами. Значениями свойств являются числа, подразумевается, что они в пикселях. К ней мы часто будем возвращаться в следующих постах и описывать отдельные составляющие. А пока просто изучите, что за что примерно отвечает. #браузер #документ #размеры

Всем привет, ребята! Наверное, у вас, как и у меня, часто бывает такое, что приходится очень долго искать реально годный видос по JavaScript, чтобы посмотреть его во время завтрака и заодно прокачаться немного. Не знаю как у вас, но у меня эта проблема возникает практически каждый день. В поисках решения я нашёл канал @sign_in_it. Там каждый день выходят реально полезные и интересные ролики по Frontend-разработке и не только. Загляните, посмотрите пару постов, возможно и вам зайдет. #полезное

Внимание, полоса прокрутки В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «content width» выше). Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет 300px, но если предположить, что ширина полосы прокрутки равна 16px (её точное значение зависит от устройства и браузера), тогда остаётся только 300 - 16 = 284px, и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Без неё некоторые вычисления будут проще. #браузер #документ #размеры