JavaScript заметки

От введения в JS до продвинутого уровня за 5 месяцев! В школе DevHouse открылся набор на курс “Fontend-разработчик”. Программа рассчитана и для новичков и для тех кто немного шарит в программировании. Обещаем научить кодить правильно, современно и чисто: ✔️ Обучим JavaScript. ✔️ Дадим базу по HTML, CSS. ✔️ Научим работать с фреймворком Vue.js. Мы распределили нагрузку равномерно на весь период обучения - 10 часов в неделю. Даем уроки от простого к сложному: от переменных и алгоритмов, до рефакторинга и паттернов проектирования. Ручная проверка, закрытый чат и личный ментор! Подробнее о программе и скидках узнайте у куратора @alexander_noskov А пока думаешь - качай наш Гайд полезностей для джуна! Стартуем 31 октября!

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

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

JS Booster – канал в котором публикуются заготовки интерфейсов, задачи и полезные статьи для веб-разработчиков. Материалы будут полезны для любого уровня подготовки! Подпишись и улучши свою работу! 👇

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

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

Сайт, Сэр - telegram канал web-разработчика с 7-ми летним стажем. В нем он делится готовым кодом для реализации различных фишек на сайте, полезными сервисами и библиотеками, которые помогут и упростят работу над любым проектом. Количество заявок ограничено ⌛️

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

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

Всё ещё думаешь, что всякие гайды в интернете помогут тебе достичь новых высот в IT? Зря... Стоит просто подписаться на эти каналы и получать дозу новой полезной информации каждый день. How To WebDev — Ты фронтент или бэкенд разработчик? Без разницы — там всё про эти 2 направления. How To C — Без лишних слов — абсолютно всё про C, C# и C++. How To IT — О том как стартовать в IT с нуля. How To SQL — Хватит шариться по интернету в поисках инфы про БД! Она вся тут, просто зайди и увидишь всё, что тебе нужно. Не оставайся в стороне от нового, подписывайся!

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

🤔Что нужно знать, чтобы суметь продать ОБЫЧНУЮ картинку за $17.500? Внимательно изучите гифку над этим текстом. Хотите верьте, хотите нет — но за нее могут отдать целое состояние. Если понимать как устроен рынок NFT, можно быстро находить такие картинки, выкупать за бесценок и продавать в 5-10 раз дороже. Начать можно с изучения проекта TON NFT | CONCEPT. Это канал уникальной NFT-коллекции, созданной на основе реальных предметов искусства. А такие вещи со временем только растут в цене… Подписывайтесь, если вас не смущает заработок на красивых картинках: https://t.me/+av6_iBspJxBkZThi

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

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

Ребята, нашел крутой канал опытного фронта! Сегодня вечером будет стрим, где он будет показывать фишки разработки на Vue. Приглашаю всех неравнодушных посмотреть и задать все интересующие вас вопросы. От того, как начать свой путь в разработке, до того, как правильно строить отдел. Ссылочку на канал прикрепляю → https://t.me/frontend_lite

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

Чтобы ты увидел этот пост, я заплатил админу этого канала деньги 💵 Я тоже получаю деньги за то, что клиенты покупают рекламу в моей сетке телеграм-каналов. И тебе повезло, ты можешь научиться делать так же на моем Telegram Хакатоне уже в эту субботу! В сентябре я вытащил с 10 каналов 300к+ рублей. При этом я только контролировал менеджеров. Не делал ничего руками.  Неплохой пассивный доход, не так ли?  Переходи ко мне в канал, там я подробнее рассказываю про свой Telegram Хакатон, что это такое и как на него попасть! Увидимся там!