Методы окон alert, confirm и prompt в JavaScript
- 7 июля 2025
JavaScript предоставляет три простых метода для взаимодействия с пользователем: alert(), confirm() и prompt(). Эти функции встроены в глобальный объект window и доступны в любом браузере. Они позволяют быстро отобразить сообщение, запросить подтверждение действия или получить текстовый ввод.
С 29 января 2018 года эти методы находятся в статусе «Widely Available» по Baseline, то есть их можно использовать без ограничений на совместимость.
Как это работает
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Все три метода показывают модальные диалоги — то есть окна, которые блокируют выполнение кода до тех пор, пока пользователь не закроет окно. Это делает их полезными в простых сценариях, но также означает, что они могут нарушать пользовательский опыт, особенно в интерфейсах с высокой интерактивностью.
Примеры
1. Уведомление с alert()
window.alert('Это сообщение для пользователя');
Браузер покажет модальное окно с текстом и кнопкой «ОК». Код дальше не выполнится, пока пользователь не нажмёт кнопку.
2. Подтверждение с confirm()
if (window.confirm('Вы хотите продолжить?')) {
// Пользователь нажал ОК
} else {
// Пользователь нажал Отмена
}
Функция возвращает true, если пользователь подтвердил, и false, если отменил.
3. Ввод данных с prompt()
const name = window.prompt('Введите ваше имя');
Появится окно с текстовым полем и кнопками «ОК» и «Отмена». Возвращается введённый текст или null, если пользователь ничего не ввёл и закрыл окно.
Когда использовать
Эти методы удобны в демонстрациях, отладке или очень простых интерфейсах. Например, они часто используются в обучающих примерах, чтобы быстро показать, как работает взаимодействие с пользователем.
Но в реальных проектах с продуманным UI их почти всегда заменяют кастомными модальными окнами. Это даёт больше контроля над внешним видом, поведением и доступностью. Всплывающее окно, показанное через alert, не стилизуется, не фокусируется и не всегда удобно для людей, использующих скринридеры или клавиатуру.
Заключение
alert(), confirm() и prompt() — это быстрые и простые инструменты для отображения модальных сообщений в браузере. Они полезны для быстрых проверок, экспериментов или начального обучения, но в продакшене их стоит заменять на более управляемые и удобные модальные компоненты.
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Использование CSS функций pow, sqrt, hypot, log и exp
С 7 декабря 2023 года (Baseline: Newly Available) в CSS появились нативные математические функции, которые позволяют выполнять вычисления прямо в стилях — без JavaScript, препроцессоров и переменных. Это важный шаг к более гибкому и выразительному управлению размерами, отступами и другими параметрами оформления.
Теперь вы можете применять привычные математические операции, такие как:
pow(x, y)— возведение числаxв степеньy;sqrt(x)— извлечение квадратного корня;log(x)— натуральный логарифм;exp(x)— экспонента (e в степени x).
Все эти функции используются внутри calc(), так как именно calc() позволяет комбинировать числа и единицы измерения. Это значит, что вы можете не просто считать, а подставлять вычисленные значения в реальные CSS-свойства.
Пример:
.element {
width: calc(pow(2, 3) * 10px); /* Результат: 8 * 10px = 80px */
}
Такой подход даёт больше свободы в оформлении без использования JavaScript. Например, вы можете рассчитывать ширины, высоты, пропорции или даже динамически адаптировать отступы в зависимости от других значений — прямо в CSS.
- 8 июля 2025
Как работает ping в HTML
Атрибут ping используется в теге <a> для отправки фонового POST-запроса на указанный URL, когда пользователь переходит по ссылке. Это позволяет отслеживать переходы без изменения поведения самой ссылки.
Функция находится в статусе ограниченной доступности в Baseline, что означает: она поддерживается не во всех браузерах, и может быть отключена настройками безопасности.
- 7 июля 2025
Как использовать классы в JavaScript
Классы — это удобный синтаксис, который появился в JavaScript в стандарте ES2015 (ES6) и с 8 сентября 2018 года считается широко поддерживаемым (Baseline: Widely Available). Они позволяют создавать объекты по шаблону — с общими свойствами и методами — и писать более структурированный, понятный код.
За кулисами классы используют ту же прототипную модель, что и раньше. Но теперь вы можете описывать «объектные» структуры так, как это делается в других языках, вроде Java, Python или C# — с конструкторами, методами и наследованием.
- 5 июля 2025
Использование атрибута inert для отключения взаимодействия
С 11 апреля 2023 года (Baseline: Newly Available) в HTML официально поддерживается атрибут inert. Он делает элемент и всех его потомков полностью неинтерактивными: они не могут получать фокус, не реагируют на нажатия клавиш, клики мыши и вообще исключаются из всех пользовательских взаимодействий. Но при этом остаются в DOM и продолжают рендериться.
Это особенно полезно, если нужно временно отключить часть интерфейса — например, при открытии модального окна, активации блокировки, загрузке, или при переключении между вкладками.
- 4 июля 2025
CSS-свойство cursor для управления отображением курсора
Свойство cursor управляет тем, как выглядит указатель мыши, когда пользователь наводит его на элемент. Оно помогает визуально показать, что элемент интерактивный, требует внимания или, наоборот, недоступен. Это особенно важно для улучшения удобства и предсказуемости интерфейса.
Хотя cursor — базовое CSS-свойство, оно находится в статусе ограниченной доступности в Baseline, что значит: часть значений может не поддерживаться в старых браузерах или иметь особенности в поведении.
- 2 июля 2025
Цвет текста в CSS: свойство и изменение
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
Цвет CSS — это свойство, которое устанавливает основной цвет для текста, границ и линий украшения. Оно влияет на визуальную сторону элементов и помогает сделать интерфейс более приятным и читаемым. Можно задавать цвет через названия, HEX, RGB или HSL, выбирая подходящий способ в зависимости от задачи.
Пример установки цвета текста:
<p style="color: #ff5733;">Этот текст будет оранжево-красным</p>
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
- 25 июня 2025