Проверка фокуса на элементе
Пример:
В этом примере с помощью
👉 @web_craft | #frontend
document.activeElement
— это свойство в JavaScript, которое позволяет определить текущий сфокусированный элемент в документе. Его использование позволяет узнать, находится ли определенный элемент в фокусе. Это свойство возвращает элемент, который в данный момент имеет фокус, или null
, если ни один элемент не сфокусирован. Важно отметить, что document.activeElement
доступно только для чтения, что означает, что нельзя напрямую изменить его значение.Пример:
let el = document.querySelector('.btn-white');
let isFocus = el === document.activeElement;
console.log(isFocus); // true/false
В этом примере с помощью
document.querySelector
выбирается элемент с классом .btn-white
. Затем, переменная isFocus
устанавливается в true
, если выбранный элемент el
совпадает с текущим сфокусированным элементом document.activeElement
, и в false
в противном случае. Это позволяет легко определить, сфокусирован ли данный элемент в текущий момент.👉 @web_craft | #frontend
Создание сервиса для обмена файлами без головной боли.
Статья описывает, как создать сервис для обмена файлами, используя Fly.io и Tigris1. Автор статьи рассказывает о проблемах, связанных с обменом больших файлов между пользователями в разных частях мира, и предлагает решение этой проблемы с помощью глобального хранилища объектов и вычислительных ресурсов, предоставляемых Fly.io и Tigris1.
👉 @web_craft | #frontend
Статья описывает, как создать сервис для обмена файлами, используя Fly.io и Tigris1. Автор статьи рассказывает о проблемах, связанных с обменом больших файлов между пользователями в разных частях мира, и предлагает решение этой проблемы с помощью глобального хранилища объектов и вычислительных ресурсов, предоставляемых Fly.io и Tigris1.
👉 @web_craft | #frontend
Использование функции Intl.NumberFormat
Для чего используется
Если забыли, то вернитесь к посту от28.05.2024 .
👉 @web_craft | #frontend
Для чего используется
Intl.NumberFormat
в JavaScript? Если забыли, то вернитесь к посту от
👉 @web_craft | #frontend
Отслеживание изменений в DOM
Пример:
В этом примере, при любом изменении атрибутов или дочерних элементов внутри
👉 @web_craft | #frontend
MutationObserver
— это API в JS для наблюдения за изменениями в DOM. Оно позволяет отслеживать добавление или удаление узлов, изменения атрибутов и текста. Пример:
const targetNode = document.getElementById('myDiv');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log(`The ${mutation.attributeName} attribute was modified.`);
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
В этом примере, при любом изменении атрибутов или дочерних элементов внутри
myDiv
(или его потомков, благодаря опции subtree: true
), функция callback
будет вызвана и выведет соответствующее сообщение в консоль.👉 @web_craft | #frontend
Предложение по стандартизации сигналов для TC39
Статья о предложении по стандартизации сигналов для TC39. В ней обсуждается, что такое сигналы и как их можно использовать в веб-разработке. Сигналы - это тип данных, который позволяет однонаправленный поток данных. Они полезны для моделирования состояния и вычислений. В статье также подробно описаны некоторые преимущества использования сигналов, такие как автоматическая мемоизация и избегание ненужных вычислений.
👉 @web_craft | #frontend
Статья о предложении по стандартизации сигналов для TC39. В ней обсуждается, что такое сигналы и как их можно использовать в веб-разработке. Сигналы - это тип данных, который позволяет однонаправленный поток данных. Они полезны для моделирования состояния и вычислений. В статье также подробно описаны некоторые преимущества использования сигналов, такие как автоматическая мемоизация и избегание ненужных вычислений.
👉 @web_craft | #frontend
Работа top-level await
Что позволяет делать
Если забыли, то вернитесь к посту от04.06.2024 .
👉 @web_craft | #frontend
Что позволяет делать
top-level await
в JavaScript?Если забыли, то вернитесь к посту от
👉 @web_craft | #frontend
Обнаружение статуса соединения
Пример использования:
Для реагирования на изменения сетевого состояния можно использовать события
Пример:
👉 @web_craft | #frontend
navigator.online
— свойство интерфейса Navigator для определения статуса подключения, возвращающее логическое значение: true
, если пользователь в сети, и false
, если не в сети. Пример использования:
if (navigator.online) {
console.log('Вы в сети');
} else {
console.log('Вы не в сети');
}
Для реагирования на изменения сетевого состояния можно использовать события
online
и offline
, генерируемые объектом window
:window.addEventListener('online', () => {
console.log('Соединение с сетью восстановлено');
});
window.addEventListener('offline', () => {
console.log('Соединение с сетью потеряно');
});
navigator.online
полезен для отслеживания статуса подключения пользователей в реальном времени, таких как мессенджеры или системы совместной работы.Пример:
navigator.online ? console.log('Пользователь в сети') : console.log('Пользователь не в сети');
👉 @web_craft | #frontend
DOM: что такое объектная модель документа простыми словами
Статья объясняет концепцию DOM, которая представляет структуру веб-страницы в виде дерева объектов. Автор рассматривает, как DOM позволяет скриптам взаимодействовать с HTML-документами, делать их более динамичными и интерактивными. В статье приведены примеры использования методов и свойств DOM для доступа к элементам страницы и их изменения, таких как
👉 @web_craft | #frontend
Статья объясняет концепцию DOM, которая представляет структуру веб-страницы в виде дерева объектов. Автор рассматривает, как DOM позволяет скриптам взаимодействовать с HTML-документами, делать их более динамичными и интерактивными. В статье приведены примеры использования методов и свойств DOM для доступа к элементам страницы и их изменения, таких как
querySelector
, createElement
, getElementById
, innerHTML
, и addEventListener
.👉 @web_craft | #frontend