JavaScript заметки

Использование атрибута HTML Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>. Например, чтобы назначить обработчик события click на элементе input, можно использовать атрибут onclick. #браузер #документ #события

Обработчики событий Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло. Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя. Есть несколько способов назначить событию обработчик. Мы их рассмотрим, начиная с самого простого. #браузер #документ #события

Figma теперь в телеграм! Figma — самый популярный графический онлайн редактор в мире! Он очень прост и именно с него нужно начинать изучение веб-дизайна. А сейчас в телеграмме появился официальный русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться!

Введение в браузерные события Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM). Вот список самых часто используемых DOM-событий, пока просто для ознакомления: События мыши: click – происходит, когда кликнули на элемент левой кнопкой мыши. contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши. mouseover / mouseout – когда мышь наводится на / покидает элемент. mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе. mousemove – при движении мыши. События на элементах управления: submit – пользователь отправил форму <form>. focus – пользователь фокусируется на элементе. Клавиатурные события: keydown и keyup – когда пользователь нажимает / отпускает клавишу. События документа: DOMContentLoaded – когда HTML загружен и обработан. CSS events: transitionend – когда CSS-анимация завершена. Существует множество других событий. О них в следующих постах. #браузер #документ #события

Применение для fixed позиционирования Чаще всего нам нужны координаты для позиционирования чего-либо. Чтобы показать что-то около нужного элемента, мы можем вызвать getBoundingClientRect, чтобы получить его координаты элемента, а затем использовать CSS-свойство position вместе с left/top (или right/bottom). Например, функция createMessageUnder(elem, html) выше показывает сообщение под элементом elem. #браузер #документ #координаты

ant

Любишь решать задачи по JS? А представь, что все это в формате MMORPG бота, где ты можешь прокачивать своего пресонажа, батлиться с друзьями, проходить собесы в разные IT компании и главное - прокачивать себя как разработчика! В Dev’s Battle ты найдешь: 👉 350+ задачек по JS 👉 300+ активных игроков 👉 7 компаний для собеседований. От Рабов Галерных до Facebook 👉 Прокачку и развитие внутриигрового персонажа 👉 Фан и общение с другими разработчиками Все это бесплатно, с небольшим кринжом и крутым комьюнити! 😎 Залетай в Dev’s Battle, если, конечно, сможешь…

elementFromPoint(x, y) Вызов document.elementFromPoint(x, y) возвращает самый глубоко вложенный элемент в окне, находящийся по координатам (x, y). Например, код выше выделяет с помощью стилей и выводит имя тега элемента, который сейчас в центре окна браузера. #браузер #документ #координаты

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

⚡️Яндекс опубликовал список из 3 телеграм-каналов, по которым в компании обучают новых программистов. Сохраняйте, пригодится: IT подкасты – идеальный канал для тех, у кого нет времени 24/7 учить прогу. Разборы задач и советы от топовых кодеров будут с тобой везде. Книжное хранилище – бесплатная база более 3000 платных книг. Найдётся чтиво на любую тему: от PHP и Python до C++ и алгоритмов. IT Jobs – самый простой способ найти работу в айти. Яндекс, MailRu и даже VK набирают кандидатов исключительно отсюда.

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

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

Все знают, что без элементарных знаний терминологии в айти делать нечего. На днях наши знакомые терминологи создали свой канал, где дают чёткие и понятные определения понятиям со всей IT сферы. Советуем подписаться, ведь таким интересным способом можно черпать знания, не заходя в гугл :)

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

Пора строить карьеру в IT – Front-end разработчик – одна из самых востребованных специальностей на рынке труда. Это тот человек, который занимается построением логики сайтов и сервисов, отвечает за весь Front. В его обязанности входит: - Проектирование архитектуры логики проекта; - Разработка идей и стратегии развития продукта; - Написание кода с использованием различных фреймворков и библиотек; - Участие в конференциях и хакатонах. И это лишь малая доля того, что вы будете делать на новом месте работы. Все необходимое вы изучите на наших курсах. Вас ждут 5 месяцев интенсивной работы с практикующими специалистами. Завершившим курс – шанс попасть на закрытую стажировку на различные проекты в команду к опытным разработчикам. Переходи по ссылке: dev-house.online, чтобы изучить программу курса и забронировать место. Найди на сайте и скажи менеджеру промокод и получишь дополнительную скидку. Спеши – промокод действует только для первых 20 человек.)

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

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

Верстальщикам на заметку: есть канал, где выкладывают дизайн-макеты сайтов, сделанные в Figma.  На них можно тренироваться верстать макеты разной сложности и добавлять в портфолио.  Есть сайты одностраничные, многостраничные и веб-приложения. На двух языках — русском и английском.

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