Проверка целых чисел в JavaScript
Как работает:
- Десятичные числа (например, 3.14, -5.2).
-
-
- Строки, которые не могут быть преобразованы в целые числа (например, "hello", "123abc").
Пример использования:
👉 @web_craft | #frontend
Number.prototype.isInteger
это метод, который проверяет, является ли переданное значение целым числом. Он определяется на прототипе объекта Number
и доступен для всех чисел.Как работает:
Number.prototype.isInteger
возвращает true
для целых чисел (положительных, отрицательных и нуля) и false
для любого другого типа данных, включая:- Десятичные числа (например, 3.14, -5.2).
-
NaN
(Not a Number).-
Infinity
.- Строки, которые не могут быть преобразованы в целые числа (например, "hello", "123abc").
Пример использования:
console.log(Number.isInteger(42)); // true
console.log(Number.isInteger(3.14)); // false
console.log(Number.isInteger(Math.PI)); // false (PI is a non-integer constant)
console.log(Number.isInteger(Infinity)); // false
console.log(Number.isInteger("10")); // false ("10" is a string)
console.log(Number.isInteger(10.0)); // true (exactly represents an integer)
👉 @web_craft | #frontend
Как добавить программируемый поиск от Google на свой сайт?
В этой статье объясняется как на свой сайт добавить программируемый поиск от Google.Начинается туториал с создания поисковой системы посредством панели управления. После этого идет настройка данной системы. И в завершении, получение её кода и встраиванием его на свой сайт.
👉 @web_craft | #frontend
В этой статье объясняется как на свой сайт добавить программируемый поиск от Google.Начинается туториал с создания поисковой системы посредством панели управления. После этого идет настройка данной системы. И в завершении, получение её кода и встраиванием его на свой сайт.
👉 @web_craft | #frontend
Правила использования директивы use module
Где нужно добавить директиву
👉 @web_craft | #frontend
Где нужно добавить директиву
use module
?👉 @web_craft | #frontend
Доступ к элементам массива в JavaScript
Синтаксис:
Параметры:
Пример:
👉 @web_craft | #frontend
Array.prototype.at()
- это метод в JavaScript, который позволяет получить элемент массива по указанному индексу. Он принимает один аргумент - индекс элемента, который вы хотите получить. Отличие от обычного доступа к элементам массива заключается в том, что метод at()
позволяет использовать отрицательные индексы и работает с диапазоном индексов, выходящим за границы массива. Синтаксис:
array.at(index);
Параметры:
index
: Целое число, указывающее индекс элемента, к которому нужно получить доступ.Пример:
const numbers = [10, 20, 30, 40, 50];
// Получить первый элемент
console.log(numbers.at(0)); // 10
// Получить последний элемент
console.log(numbers.at(-1)); // 50
// Получить элемент, третий с конца
console.log(numbers.at(-3)); // 30
👉 @web_craft | #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Визуализация JavaScript: выполнение промисов
Иллюстрированный гайд с анимацией и 8-минутным видео, раскрывающий внутренние механизмы и возможности промисов в JavaScript.
👉 @web_craft | #frontend
Иллюстрированный гайд с анимацией и 8-минутным видео, раскрывающий внутренние механизмы и возможности промисов в JavaScript.
👉 @web_craft | #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Cally
Cally — набор небольших, многофункциональных компонентов календаря с открытым исходным кодом для выбора отдельных дат или диапазонов дат. Независимый от платформы, поддерживающий темы, локализуемый и доступный.
👉 @web_craft | #frontend
Cally — набор небольших, многофункциональных компонентов календаря с открытым исходным кодом для выбора отдельных дат или диапазонов дат. Независимый от платформы, поддерживающий темы, локализуемый и доступный.
👉 @web_craft | #frontend
Метод для группировки данных
Какой метод можно использовать для группировки объектов, если ключи не строки?
Забыли? Изучали функционал в посте от16.04.2024 .
👉 @web_craft | #frontend
Какой метод можно использовать для группировки объектов, если ключи не строки?
Забыли? Изучали функционал в посте от
👉 @web_craft | #frontend
Интерактивное редактирование содержимого веб-страницы
Пример:
В этом примере, нажатие кнопки позволяет пользователю переключать режим редактирования.
👉 @web_craft | #frontend
Document.designMode
— это функция в JavaScript, позволяющая делать веб-страницу редактируемой. По умолчанию, это свойство установлено в "off", и его активация в "on" позволяет пользователю редактировать содержимое страницы.Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Редактируемая страница</title>
</head>
<body>
<h1>Добро пожаловать на нашу редактируемую страницу!</h1>
<p>Нажмите кнопку, чтобы начать редактирование.</p>
<button onclick="toggleDesignMode()">Редактировать</button>
<script>
function toggleDesignMode() {
document.designMode = document.designMode === "off" ? "on" : "off";
console.log("Режим редактирования: " + document.designMode);
}
</script>
</body>
</html>
В этом примере, нажатие кнопки позволяет пользователю переключать режим редактирования.
👉 @web_craft | #frontend
Названия ветвей и комментарии к коммитам в Git: лучшие практики
В этой статье разбираются лучшие практики для работы с ветвями и коммитами.
👉 @web_craft | #frontend
В этой статье разбираются лучшие практики для работы с ветвями и коммитами.
👉 @web_craft | #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Предварительный просмотр изображения перед загрузкой
Реализовано на HTML, CSS и JS.
👉 @web_craft | #frontend
Реализовано на HTML, CSS и JS.
👉 @web_craft | #frontend
Работа метода Number.prototype.isInteger
Какой тип данных вернет метод
Если забыли, то вернитесь к посту от23.04.2024 .
👉 @web_craft | #frontend
Какой тип данных вернет метод
Number.prototype.isInteger
для десятичных чисел?Если забыли, то вернитесь к посту от
👉 @web_craft | #frontend
Форматирование относительного времени в JavaScript
Как работает:
Экземпляр
Пример:
В этом примере
👉 @web_craft | #frontend
Intl.RelativeTimeFormat
— объект в JavaScript для локализованного форматирования времени. Это часть библиотеки Intl, облегчающей интернационализацию программ. Intl.RelativeTimeFormat
позволяет форматировать численные значения в контексте временного интервала (например, "через 5 дней" или "3 часа назад").Как работает:
Экземпляр
Intl.RelativeTimeFormat
создаётся с использованием конструктора, который может принимать два аргумента: локаль и опции. Локаль управляет языком отображения, а опции могут включать стиль, числовой формат и другие параметры.Пример:
const rtf = new Intl.RelativeTimeFormat('ru', { style: 'long' });
console.log(rtf.format(-1, 'day')); // "1 день назад"
console.log(rtf.format(2, 'day')); // "через 2 дня"
console.log(rtf.format(3, 'second')); // "через 3 секунды"
В этом примере
Intl.RelativeTimeFormat
используется для форматирования количества дней и секунд в русской локализации.👉 @web_craft | #frontend
Многопользовательские приложения с однопользовательскими базами данных SQLite в глобальных контейнерах Tigris
Статья описывает использование однопользовательских баз данных SQLite в многопользовательских приложениях, размещённых на Fly.io. Основная идея заключается в хранении баз данных SQLite в глобально распределённых контейнерах Tigris и их эксплуатации на виртуальных машинах Fly.io. Автор делится методикой построения приложения на JavaScript, которое взаимодействует с SQLite, а также подробно разбирает настройку окружения, включая конфигурацию хранилища и клиента S3 для работы с Tigris.
👉 @web_craft | #frontend
Статья описывает использование однопользовательских баз данных SQLite в многопользовательских приложениях, размещённых на Fly.io. Основная идея заключается в хранении баз данных SQLite в глобально распределённых контейнерах Tigris и их эксплуатации на виртуальных машинах Fly.io. Автор делится методикой построения приложения на JavaScript, которое взаимодействует с SQLite, а также подробно разбирает настройку окружения, включая конфигурацию хранилища и клиента S3 для работы с Tigris.
👉 @web_craft | #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Icon Hover Effect Using
Иконки с эффектом выделения при наведении на HTML и CSS.
👉 @web_craft | #frontend
Иконки с эффектом выделения при наведении на HTML и CSS.
👉 @web_craft | #frontend
Метод для получения элемента массива
Какой метод JavaScript используется для получения элемента массива по указанному индексу?
Если сомневаетесь, то в посте от30.04.2024 мы разбирали этот функционал.
👉 @web_craft | #frontend
Какой метод JavaScript используется для получения элемента массива по указанному индексу?
Если сомневаетесь, то в посте от
👉 @web_craft | #frontend
Асинхронная отправка данных
HTTP-запросов на сервер.
Как работает:
Синтаксис:
В этом примере, при событии
👉 @web_craft | #frontend
navigator.sendBeacon()
- это метод JavaScript API, предназначенный для асинхронной отправки небольших HTTP-запросов на сервер.
Как работает:
navigator.sendBeacon()
отправляет данные в фоне, используя HTTP POST запрос, не ожидая ответа от сервера. Это позволяет скриптам продолжать работу или завершать выполнение без ожидания завершения запроса.Синтаксис:
navigator.sendBeacon(url, data);
- url: URL-адрес сервера, на который отправляется запрос.
- data: Данные, отправляемые в запросе. Может быть строкой, Blob, FormData или ReadableStream.
Пример использования:
window.addEventListener("unload", function(event) {
var data = {username: "user", sessionId: "xyz123"};
var url = "https://example.com/analytics";
navigator.sendBeacon(url, JSON.stringify(data));
});
В этом примере, при событии
unload
(закрытие вкладки или окна браузера), данные о сессии пользователя отправляются на сервер аналитики. 👉 @web_craft | #frontend
Создание приложения Remix локально с Docker
Статья рассказывает о том, как настроить приложение Remix с использованием Docker для локальной разработки. В статье приводится пошаговое руководство по созданию и настройке Docker-среды, чтобы упростить разработку и тестирование приложений Remix в изолированной и консистентной среде.
👉 @web_craft | #frontend
Статья рассказывает о том, как настроить приложение Remix с использованием Docker для локальной разработки. В статье приводится пошаговое руководство по созданию и настройке Docker-среды, чтобы упростить разработку и тестирование приложений Remix в изолированной и консистентной среде.
👉 @web_craft | #frontend