Intersection Observer

Intersection Observer — браузерный API, который позволяет асинхронно отслеживать пересечение элемента с его родителем или областью видимости документа (viewport). В момент пересечения можно запустить какое-либо действие, например, подгрузить дополнительные посты в ленте новостей («бесконечный скролл») или сделать «ленивую» загрузку контента.

#Браузерное_окружение

Подробнее

Как браузер рисует страницы

Чтобы нарисовать на экране результат работы нашего кода, браузеру нужно выполнить несколько этапов:

1. Сперва ему нужно скачать исходники.
2. Затем их нужно прочитать и распарсить.
3. После этого браузер приступает к рендерингу — отрисовке.

Каждый из процессов очень сложен, и мы не будем рассматривать их до мельчайших подробностей.

Мы лишь обратим внимание на те детали, которые необходимо знать фронтенд-разработчикам, чтобы лучше понимать, почему разные решения по-разному влияют на производительность и скорость отрисовки.

#О_браузере

Подробнее

Координаты

Чтобы перемещать и позиционировать элементы на экране в браузере имеется система координат. Оси координат начинаются в левом верхнем углу экрана и идут вправо для оси x и вниз для оси y.

Позиционирование с помощью координат может быть относительно окна браузера или относительно отдельного элемента. Всего существует две системы координат: одна начинается от угла HTML-страницы (документа), а вторая от угла окна браузера. С помощью первой можно определять, как элемент расположен относительно всей страницы, а с помощью второй – как элемент расположен относительно окна браузера и того, что там находится. Объекты события мыши и тач-события содержат координаты места на экране и в документе, где событие произошло: pageX/pageY – для документа, clientX/clientY – для экрана.

#О_браузере

Подробнее

Хранение данных в браузере

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

#о_браузере

Подробнее

Element

Элемент — это кусочек HTML в DOM-дереве. Браузер создаёт DOM для взаимодействия между JavaScript и HTML. Каждый HTML-тег при этом превращается в элемент DOM. Ещё такие элементы называют узлами.

Из DOM можно получить элемент и имзенить его. Браузер заметит изменения и отобразит их на странице.

#объектная_модель_документа_DOM

Подробнее

Событийная модель

Чтобы приложение было интерактивным, нам нужно понимать, что пользователь совершил то или иное действие на странице. Браузер распознает действия пользователя и создаёт событие.

События — это сигналы, которые браузер посылает разработчику, а разработчик может на сигнал реагировать.

События бывают разных типов: клик, нажатие клавиши на клавиатуре, прокрутка страницы и так далее.

Происходящие события можно обрабатывать и выполнять код, когда нужное событие происходит. Например, при клике на кнопку показывать всплывающее окно.

#объектная_модель_документа_DOM

Подробнее

.addEventListener()

Добавляет элементу действие, которое будет выполнено после срабатывания события. Например, на клик мышки или нажатие клавиши.

#объект_страницы

Подробнее

.removeEventListener()

Удаляет обработчик события с элемента, установленный с помощью addEventListener().

#объект_страницы

Подробнее

.getElementById()

Метод объекта document, который позволяет найти элемент на веб-странице по его идентификатору (атрибут id). Возвращает Element или null, если ничего не нашлось.

#объект_страницы

Подробнее

.forms

forms — это поле объекта document. Оно хранит коллекцию всех элементов <form>, которые есть на текущей странице.

Коллекция доступна только для чтения.

#объект_страницы

Подробнее

.getAttribute()

Метод getAttribute() позволяет получить значение указанного атрибута у HTML-элемента. Если атрибута нет, то метод вернёт null.

#элемент_на_странице

Подробнее

.cookie

При разработке сайтов часть информации (например, токен авторизации или данные пользователя) нужно хранить и читать как в браузере, так и на сервере. Для этого используют Cookie (произносится «куки»).

Куки передаются в виде HTTP-заголовка, это накладывает на них ограничения. Например, максимальный размер куки в 4096 байт или отсутствие в содержимом пробелов или запятых. Чтобы обезопасить содержимое, можно закодировать его с помощью функции encodeURIComponent().

#объект_страницы

Подробнее

.focus()

Вызов метода focus() на DOM-элементе устанавливает фокус на этот элемент. Когда элемент находится в фокусе, он перехватывает и обрабатывает события клавиатуры.

Фокус нельзя поставить на элемент, если он заблокирован. Например, если у кнопки или поля ввода стоит атрибут disabled.

#элемент_на_странице

Подробнее

.blur()

Вызов метода blur() на DOM-элементе снимает фокус с элемента. Порождает событие blur, которое можно обработать с помощью addEventListener().

#элемент_на_странице

Подробнее

.getPropertyValue()

Метод getPropertyValue() возвращает строку, в которой записано значение указанного CSS-свойства. Если свойство не указано, возвращает пустую строку.

#элемент_на_странице

Подробнее

.forEach()

Метод forEach() используется для обхода элементов коллекции Set. Обход происходит в порядке добавления значений в коллекцию от старых к новым.

Метод работает идентично одноимённому методу массива.

#множества #forEach

Подробнее

.clear()

Вызов метода clear() удаляет все значения из коллекции Set.

#множества #clear

Подробнее

.delete()

Метод delete() удаляет значение из коллекции Set.

#множества #delete

Подробнее

Конструктор

Вызов конструктора создаёт новую коллекцию Set.

#множества #конструктор

Подробнее

.setProperty()

Метод setProperty() позволяет установить стиль при помощи JavaScript. Может быть применён как к DOM-элементу, так и конкретному CSS правилу.

В первом случае специфичность будет как и у атрибута style, т.к. стили будут записаны инлайн. Во втором случае специфичность не изменится.

#элемент_на_странице

Подробнее