JavaScript заметки
8.56K subscribers
2.75K photos
4 videos
1.27K links
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
.cookie

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

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

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

Подробнее
👍7
.focus()

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

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

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

Подробнее
👍5
.blur()

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

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

Подробнее
👍8
.getPropertyValue()

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

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

Подробнее
👍5
.forEach()

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

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

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

Подробнее
👍6
.clear()

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

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

Подробнее
👍8
.delete()

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

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

Подробнее
👍8
Конструктор

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

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

Подробнее
.setProperty()

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

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

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

Подробнее
👍41🔥1
.scrollBy()

Метод scrollBy() позволяет программно прокрутить элемент на определённое количество пикселей относительно текущего положения.

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

Подробнее
👍3
.scrollIntoView()

Метод scrollIntoView() позволяет программно прокрутить окно до определённого элемента.

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

Подробнее
👍5
.scrollTo()

Метод scrollTo() позволяет программно прокрутить элемент до некоторой точки координат на странице.

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

Подробнее
👍3🔥3
.classList

Свойство classList даёт возможность просматривать и манипулировать классами элемента.

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

Подробнее
👍7
.dataset

Свойство dataset позволяет считывать или устанавливать любые дата-атрибуты на HTML-элементе.

Дата-атрибут — это пользовательский атрибут на элементе, название которого начинается с data-, например data-testid. Дата атрибуты используются, чтобы хранить значения на элементах в HTML.

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

Подробнее
👍5
.style

Свойство style получает и устанавливает инлайновые стили элемента, то есть те, что записываются через HTML-атрибут style.

С помощью него можно управлять стилем элемента. Специфичность этого свойства такая же, как у атрибута style.

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

Подробнее
👍6
.innerHTML

Свойство innerHTML позволяет считать содержимое элемента в виде HTML-строки или установить новый HTML.

Новое значение HTML необходимо передавать в виде строки и оно заменит текущее содержимое элемента. При передаче невалидной HTML-строки будет выброшена ошибка. HTML-строкой является строка, которая содержит валидную HTML-разметку, в innerHTML нельзя передать DOM-элемент.

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

Подробнее
👍3
.outerHTML

Свойство outerHTML позволяет получить HTML-элемент, включая его содержимое, в виде HTML-строки или заменить элемент на новый HTML.

Новое значение HTML передаётся в виде строки и оно полностью заменит весь элемент. В outerHTML нельзя передать DOM-элемент, только строку.

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

Подробнее
👍7
.innerText

Свойство innerText позволяет считывать или задавать текстовое содержимое элемента. При считывании текста с элемента будет возвращена строка с текстовым содержимым всех вложенных дочерних элементов. Не будет считываться только содержимое скрытых с помощью CSS элементов, а так же содержимое тегов <script> и <style>.

Аналогичной функциональностью обладает свойство textContent, но он возвращает содержимое всех дочерних элементов, даже скрытых.

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

Подробнее
👍4
.textContent

Свойство textContent позволяет считывать или задавать текстовое содержимое элемента. Обращение к свойству вернёт строку, которая будет состоять из текстового содержимого всех вложенных элементов, даже если они скрыты с помощью CSS и не видны на экране.

Аналогичной функциональностью, но с некоторыми ограничениями обладает свойство innerText. Оно работает так же, но не включает в себя скрытые элементы.

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

Подробнее
👍5
.hidden

Свойство hidden позволяет узнать значение HTML-атрибута hidden или изменить его. Когда hidden равен true, элемент скрыт на странице и недоступен для скринридеров.

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

Подробнее
👍4