JavaScript заметки

2022-06-14 15:06:33 Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:
click – происходит, когда кликнули на элемент левой кнопкой мыши.
contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
mouseover / mouseout – когда мышь наводится на / покидает элемент.
mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
mousemove – при движении мыши.

События на элементах управления:
submit – пользователь отправил форму 

.
focus – пользователь фокусируется на элементе.

Клавиатурные события:
keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:
DOMContentLoaded – когда HTML загружен и обработан.

CSS events:
transitionend – когда CSS-анимация завершена.

Существует множество других событий. О них в следующих постах.

#браузер #документ #события

597 views12:06

Открыть/Комментировать

2022-06-13 16:04:50 Применение для fixed позиционирования

Чаще всего нам нужны координаты для позиционирования чего-либо.

Чтобы показать что-то около нужного элемента, мы можем вызвать getBoundingClientRect, чтобы получить его координаты элемента, а затем использовать CSS-свойство position вместе с left/top (или right/bottom).

Например, функция createMessageUnder(elem, html) выше показывает сообщение под элементом elem.

#браузер #документ #координаты Открыть/Комментировать

2022-06-13 14:04:20 Хватит искать макеты Figma. Серьезно. 

В Telegram есть бот, который за 2 мин предложит уникальные макеты figma реальных проектов по вашим критериям. Открыть/Комментировать

2022-06-12 21:02:19 elementFromPoint(x, y)

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

Например, код выше выделяет с помощью стилей и выводит имя тега элемента, который сейчас в центре окна браузера.

#браузер #документ #координаты Открыть/Комментировать

2022-06-12 18:02:19 Верстка сайта из Figma это не сложно!

Автор канала ITDoctor выпустил 18 уроков с пошаговым объяснением как сверстать сайт по макету из Figma.

В этом бесплатном курсе: Подготовка проекта, Работа со шрифтами, Плагин Pixel Perfect, CSS Grid и Flexbox, Верстка сайта и адаптивной версии. Создание интерактивных элементов таких как меню, галерея и модальные окна. А так же домашнее задание в виде макета для Практики!

И много полезных, нюансов, лайфхаков, трюков с редактором кода и языками HTML, CSS, JS на канале ITDoctor.

Учись создавать сайты сегодня, не откладывай на завтра Открыть/Комментировать

2022-06-12 14:49:01 Зачем вообще нужны зависимые свойства? Для чего существуют top/left, если есть x/y?

С математической точки зрения, прямоугольник однозначно задаётся начальной точкой (x,y) и вектором направления (width,height).

Так что дополнительные зависимые свойства существуют лишь для удобства.

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

То есть, отрицательные значения width/height означают, что прямоугольник «растет» влево-вверх из правого угла.

#браузер #документ #координаты Открыть/Комментировать

2022-06-12 12:30:28 Ⓘ Вам открыли доступ в архив с платными материалами для программирования! 

@vse_obIT

Сохрани, чтобы не потерять. Открыть/Комментировать

2022-06-11 21:26:56 Element.getBoundingClientRect()

Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).

Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only left, top, right, bottom, x, y, width и height свойствами, описывающие это в пикселях. Все свойства, кроме width и height, являются относительными к верхнему левому углу viewport-а.

#браузер #документ #координаты Открыть/Комментировать

2022-06-11 18:39:49 Анимируй - Канал с готовыми анимациями для сайтов.

Смотрите короткие демонстрации, выбирайте подходящую анимацию и забирайте готовый код. Открыть/Комментировать

2022-06-10 18:49:46 Открыть/Комментировать