Confirm: примеры (JAVASCRIPT)

Простые примеры использования

Базовый вызов с сообщением:

let isConfirmed = confirm("Вы согласны с условиями?");
console.log(isConfirmed);

// В диалоговом окне будет текст "Вы согласны с условиями?"
// Если нажать "ОК", в консоль выведется: true
// Если нажать "Отмена", в консоль выведется: false

Использование возвращаемого значения для условного выполнения:

if (confirm("Удалить запись?")) {
    console.log("Запись удалена.");
    // Код для удаления
} else {
    console.log("Удаление отменено.");
}

Вызов без аргумента:

let result = confirm(); // Пустое сообщение
console.log(result);

Альтернативы в JavaScript

alert(message) — отображает модальное окно только с кнопкой "ОК" и не возвращает логическое значение, а лишь информирует пользователя.

prompt(message, default) — отображает диалог с полем для ввода текста. Возвращает введенную строку или null при отмене.

Кастомные модальные окна (через HTML/CSS и JavaScript) — предоставляют полный контроль над внешним видом, поведением и количеством кнопок. Используются в современных интерфейсах для согласованности дизайна и не блокируют основной поток.

Встроенные диалоги alert, confirm, prompt блокирующие и имеют стиль, зависящий от браузера. Их применяют для простых сценариев, прототипирования или отладки. Для production-среды чаще создают кастомные окна.

Типичные ошибки

1. Игнорирование блокирующей природы. Длительные операции до закрытия окна "замораживают" страницу.

confirm("Начнем?");
// Код ниже не выполнится, пока пользователь не закроет диалог
console.log("Это сообщение появится с задержкой");

2. Путаница с возвращаемым значением. Ошибки в логике из-за неверной интерпретации true/false.

// Неочевидная логика при двойном отрицании
if (!confirm("Отменить операцию?")) {
    // Код выполнится при нажатии "Отмена", что может быть нелогично
    console.log("Операция продолжается");
}

3. Чрезмерное использование. Частые диалоги раздражают пользователей. Лучше использовать для действительно важных подтверждений.

История изменений

Функция confirm существует с ранних версий JavaScript и является устаревшим API. Ее спецификация определена в HTML Living Standard. Существенных изменений в синтаксисе или поведении за последние годы не было.

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

Расширенные примеры

1. Цепочка подтверждений для многошаговой операции:

if (confirm("Хотите настроить профиль?")) {
    if (confirm("Изменить аватар?")) {
        // Код загрузки аватара
        console.log("Меняем аватар");
    }
    if (confirm("Изменить имя?")) {
        // Код изменения имени
        console.log("Меняем имя");
    }
}

2. Использование с тернарным оператором для краткой записи:

const action = confirm("Перейти на главную?")
    ? (location.href = "/", "переход")
    : "остался";
console.log(`Пользователь ${action} на странице.`);

3. Эмуляция диалога с тремя вариантами через две проверки:

let firstChoice = confirm("Включить звук?");
if (firstChoice) {
    console.log("Звук включен.");
} else {
    let secondChoice = confirm("Вы точно хотите оставить звук выключенным?");
    console.log(secondChoice ? "Звук выключен." : "Звук все же включен.");
}

4. Предварительная проверка данных перед подтверждением:

function deleteItem(itemName) {
    if (itemName.trim() === "") {
        console.log("Нельзя удалить безымянный элемент");
        return;
    }
    if (confirm(`Вы точно хотите удалить "${itemName}"?`)) {
        console.log(`Элемент "${itemName}" удален.`);
    }
}
deleteItem("Черновик отчета");

5. Обработка, имитирующая асинхронный стиль с помощью Promise (обертка):

function asyncConfirm(question) {
    return new Promise((resolve) => {
        // Внимание: confirm все равно блокирует поток
        const result = confirm(question);
        resolve(result);
    });
}
// Использование
asyncConfirm("Сохранить данные?").then((answer) => {
    console.log("Результат из Promise:", answer);
});

Аналоги в других языках программирования

Python (Tkinter):

from tkinter import messagebox
import tkinter as tk
root = tk.Tk()
root.withdraw() # Скрыть главное окно
result = messagebox.askyesno("Вопрос", "Продолжить?")
print(result) # True или False

В Python диалоги обычно не блокируют консольные приложения, а в GUI-фреймворках являются модальными для своего окна.

PHP (веб-контекст): Прямого аналога нет, так как PHP работает на сервере. Похожее поведение эмулируют через JavaScript в выводе HTML.

echo '<script>if(confirm("Продолжить?")) { window.location = "action.php"; }</script>';

C# (Windows Forms):

DialogResult result = MessageBox.Show("Сохранить изменения?", "Подтверждение", MessageBoxButtons.YesNo);
if (result == DialogResult.Yes) { /* Действие */ }

Здесь диалог является модальным для приложения и возвращает значение перечисления, а не логический тип.