JavaScript заметки

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

Linux для чайника На простых примерах и разъяснениях - о том, как: Поднять HTTP сервер Отлаживать свои Bash-скрипты Логировать выполнение команд Напрочь "заметать следы", когда уже выехали ..

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

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

Алло, мы ищем таланты! В команду разработчиков fintech-проектов требуются уверенные пользователи ПК со знанием Word, Excel, PowerPoint и умениями разложить пасьянс-косынку с завязанными глазами. От нас кофе, чай и печенюшки, удалёнка с удобным графиком в любимом кресле на вашей персональной клаве, если конечно у вас не лапки! Для проверки, что не лапки, есть несложные тестовые задания. А если без юмора, то: Ищем backend-разработчиков с опытом работы от 1 года; уверенным владением Laravel; опытом разработки на PHP, MySQL, знаниями ООП; уверенной работой c Git. Приветствуем: знания верстки, HTML, CSS, JS и популярные библиотеки; знание Docker, владение консолью. Ищем frontend-разработчиков: HTML, CSS, Javascript, ES6 React Redux git, Redux toolkit, Next.js. Удаленная работа. График свободный, предпочтительно внутри дня по мск. Оплата от 70 000 junior, от 100 000 mid, от 150 000 senior. Возможность работы по договору для самозанятых или официальное трудоустройство согласно ТК РФ. Связь по тлг: @scorpinfire

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

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

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

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

Мир компьютерных наук и технологий - простыми словами в телеграм-канале Computer Science. Эти знания будут полезны каждому IT-специалисту!

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

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

Не очень комфортно заниматься сексом, когда твой телефон прослушивает Google 🤷 Или писать личную СМСку, когда каждое слово видит клавиатурный шпион. Приватности больше нет. Крупные поисковики в открытую залазят к нам в трусы ради прибыли, и только 5-10% пользователей знают, как этому противопостоять. Для тех, кому не наплевать на свою безопасность в сети, есть канал «Отдел К». Как понять, что ваш смартфон хотели взломать? Какие 3 настройки отключить, чтобы избавиться от прослушки? Как по любому сообщению узнать точное гео собеседника? Осторожно, после подписки вам захочется удалить все соцсети: @cyber_cab

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). #браузер #документ #размеры

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

​​Полезная подборка по фронтенду. @job_frontend — отобранные вручную вакансии по фронтенду. @on_the_frontend — ежедневная подборка актуальных статей по фронтенду. @frontend_tests — сборник задач (с их разбором) для прокачки теоретических знаний и подготовки к собеседованиям. @build_html — сотни бесплатных макетов для верстки на русском языке. ⚠️ Сохрани чтобы не потерять!

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

Размеры и полоса прокрутки: общий вид У элемента есть рамка border, внутренний отступ padding и прокрутка. Полный набор характеристик. Обратите внимание, тут нет внешних отступов margin, потому что они не являются частью элемента, для них нет особых JavaScript-свойств. #браузер #документ #размеры

Размеры и прокрутка элементов Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики». Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript. #браузер #документ #размеры