Каждый‚ кто когда-либо изучал JavaScript‚ сталкивался с alert‚ prompt и confirm. Эти три «классика» выглядят одинаково во всех браузерах‚ блокируют работу страницы и при этом до сих пор остаются в учебниках. Почему? Когда их действительно стоит использовать‚ а когда — категорически нет? Разбираемся.
Что такое alert‚ confirm и prompt?
Все три функции принадлежат глобальному объекту window и показывают модальные (то есть блокирующие) диалоговые окна.
- alert(message) — просто выводит текст и ждёт нажатия OK.
- confirm(message) — выводит текст и две кнопки: OK и Cancel. Возвращает true или false.
- prompt(message‚ defaultValue) — показывает поле ввода и возвращает строку‚ которую ввёл пользователь‚ или null‚ если нажал Cancel.
Минимальный пример
<script>
const years = prompt("Сколько вам лет?"‚ 18);
if (years !== null) {
alert(`Вам ${years} лет!`);
}
</script> Зачем вообще нужны эти окна?
Для обучения
Для быстрого тестирования
Нужно проверить значение переменной? alert(x) — самый простой способ.
Для прототипов
Если делаете MVP или внутренний админ-инструмент‚ где внешний вид не критичен‚ эти окна позволяют экономить время.
Почему в продакшене их избегают
Нельзя стилизовать
Ни CSS‚ ни картинки‚ ни эмодзи — только текст и стандартный набор кнопок. Это рушит любой фирменный стиль.
Блокируют поток выполнения
Пока пользователь не нажмёт кнопку‚ весь JavaScript «висит». Тяжёлые вычисления‚ анимации‚ запросы на сервер — всё останавливается.
Невозможно перехватить событие
Нельзя отловить нажатие клавиши Escape‚ отменить закрытие или добавить свою логику до/после клика.
Старые браузеры и IE
В Internet Explorer prompt без второго аргумента показывает значение undefined в поле ввода‚ что сбивает пользователя. Поэтому рекомендуется всегда указывать дефолт:
prompt("Ваше имя"‚ ""); Кастомные диалоги вместо «родных»
Bootstrap‚ SweetAlert‚ модальные библиотеки
Они красивые‚ стилизуемые и не блокируют поток выполнения‚ но работают асинхронно. Пример на SweetAlert2:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
Swal.fire({
title: 'Сколько вам лет?'‚
input: 'number'‚
inputAttributes: { min: 0‚ max: 120 }
}).then(result => {
if (result.isConfirmed) {
console.log(result.value);
}
});
</script>
Обратите внимание: .then означает‚ что код не ждёт‚ пока пользователь нажмёт кнопку. Это и плюс‚ и минус: придёться переписывать логику на Promise/async-await.
Когда всё-таки оставляем alert/confirm/prompt
- Дебаг или тестовые сборки. В продакшене вы их убираете.
- Расширения браузера. В content-script нельзя вставить стороннюю библиотеку‚ а alert работает.
- Учебные курсы и домашние задания. Учитель должен видеть вывод без лишних телодвижений.
- Очень ограниченные среды (например‚ embedded WebView в некоторых IoT-устройствах).
Чек-лист «да или нет»
| Вопрос | Alert/confirm/prompt | Кастомное окно |
|---|---|---|
| Нужно быстро вывести переменную при отладке? | Да | Нет |
| Нужно фирменное оформление? | Нет | Да |
| Важно‚ чтобы код ждал ответа? | Да | Требуется async/await |
| Проект для публикации в интернет? | Нет | Да |
Alert‚ confirm и prompt — это инструмент «на пять минут». Они незаменимы при обучении и отладке‚ но в реальных приложениях их место занимают кастомные диалоги‚ которые стилизуются‚ не блокируют поток и дают полный контроль над UX. Если ваш проект выходит за рамки учебного примера — смело говорите «нет» старым модальным окнам и мигрируйте на современные решения.
А если всё-таки нужен «быстрый и грязный» способ показать сообщение… ну‚ теперь вы знаете‚ что нажатие OK по-прежнему работает в любом браузере без единой строчки CSS.