Диалоги браузера: alert, prompt, confirm

Иногда скрипту нужно что-то сказать человеку прямо сейчас. Для этого есть функция alert: она выводит окно с сообщением и кнопкой «ОК» — и не отпускает, пока пользователь его не закроет.

// Одна строка — и браузер уже разговаривает с вами:
alert("Привет, мир!");

Передать можно не только строку — любое значение. Перед показом alert сам превратит его в текст.

alert(2 + 2);
alert("Дважды два: " + 2 * 2);

Функция prompt не просто сообщает — она спрашивает. Вызов выглядит так: prompt(вопрос, значениеПоУмолчанию). Второй аргумент необязателен: если он есть, текст сразу появится в поле ввода. Пользователь видит окно с полем и двумя кнопками — «ОК» и «Отмена».

Главная ловушка: даже если в поле ввели цифры, вернётся строка. JavaScript не угадывает, что вы имели в виду число, — преобразовывать тип придётся самим.

// Пользователь ввёл 100 — prompt вернул строку "100"
const answer = "100";
console.log(typeof answer);
console.log(answer + 1);
console.log(Number(answer) + 1);

prompt отвечает строкой. Всегда. Даже про числа.

Третья функция задаёт вопрос, на который есть ровно два ответа. confirm(вопрос) показывает окно с кнопками «ОК» и «Отмена» и возвращает true либо false — готовое булево значение, которое удобно сразу подставить в условие.

// «ОК» в окне confirm вернул бы true, «Отмена» или Esc — false
const isSure = true;
console.log(isSure ? "Файл удалён" : "Отмена — файл цел");

Классическое применение — переспросить перед необратимым действием: удалением, отправкой формы, выходом без сохранения. Одна строка кода вместо целой формы с кнопками.

У всех трёх окон есть общее свойство — модальность. Пока окно открыто, страница замирает: нельзя нажать кнопку, выделить текст, прокрутить содержимое. Замирает и сам скрипт — он стоит на строке с вызовом и ждёт ответа.

console.log("До окна");
alert("Скрипт стоит и ждёт вашего клика");
console.log("После окна");

Это одновременно сила и слабость. Сила — сообщение гарантированно увидят, и скрипт получит ответ до того, как пойдёт дальше. Слабость — пользователя останавливают силой, поэтому злоупотреблять такими окнами не стоит.

Внешний вид этих окон определяет браузер и операционная система, а не разработчик. Нельзя поменять шрифт, цвет, положение на экране или надписи на кнопках — окно будет выглядеть так, как решили в Chrome, Firefox или Safari.

Поэтому в настоящих интерфейсах диалоги обычно рисуют сами — аккуратные окна из HTML и CSS. Но у встроенной троицы есть неоспоримый плюс: одна строка кода — и диалог готов. Для обучения, прототипов и отладки это идеальный инструмент.