JS метод Object.confirm()

Загальний опис

Метод confirm() об'єкта Window відіграє важливу роль в інтеракції з користувачем, надаючи можливість відображення діалогового вікна з підтвердженням. Цей метод виводить модальне вікно з заданим повідомленням та двома кнопками: "OK" та "Скасувати". Використовується для отримання згоди або підтвердження від користувача перед виконанням певних дій, як-от видалення файлів, вихід з системи, зміни важливих налаштувань тощо. Метод повертає булеве значення: true, якщо користувач натиснув "OK", і false, якщо вибрано "Скасувати".

Використання confirm()

1. Базове використання: Найпростіший спосіб використання confirm() полягає в виведенні діалогового вікна з повідомленням. Результат вибору користувача може бути збережений у змінній.

    let userResponse = confirm("Ви впевнені, що хочете вийти?");
    if (userResponse) {
        console.log("Користувач підтвердив вихід.");
    } else {
        console.log("Користувач скасував вихід.");
    }
   

   У цьому прикладі користувачеві показується діалог з питанням про вихід, а програма реагує залежно від його вибору.

2. Контроль потоку програми: Метод confirm() можна використовувати для управління потоком програми на основі рішення користувача. Це особливо корисно у сценаріях, де потрібна взаємодія з користувачем перед виконанням критичних дій.

    if (confirm("Ви впевнені, що хочете видалити цей файл?")) {
        // Логіка видалення файлу
        console.log("Файл видалено.");
    } else {
        console.log("Видалення файлу скасовано.");
    }
   

   Тут діалог confirm() використовується для отримання підтвердження перед видаленням файлу.

3. Інтеграція з HTML-елементами: Метод confirm() може бути інтегрований з HTML-елементами, наприклад, з кнопками або посиланнями, для створення інтерактивних інтерфейсів.

    <button onclick="confirmDeletion()">Видалити акаунт</button>
   

    function confirmDeletion() {
        if (confirm("Ви впевнені, що хочете видалити свій акаунт?")) {
            // Логіка видалення акаунту
            console.log("Акаунт видалено.");
        } else {
            console.log("Видалення акаунту скасовано.");
        }
    }
   

   У цьому випадку, при натисканні на кнопку, відображається діалогове вікно, що підтверджує намір користувача видалити свій акаунт.

4. Попередження перед залишенням сторінки: confirm() також може використовуватися для попередження користувачів перед залишенням сторінки або веб-форми з незбереженими змінами.

    window.onbeforeunload = function() {
        return confirm("Ви маєте незбережені зміни. Ви впевнені, що хочете залишити сторінку?");
    };
   

   Цей код виводить діалогове вікно підтвердження, коли користувач намагається залишити сторінку.

Застереження при використанні confirm()

Важливо враховувати, що confirm() створює модальне вікно, яке блокує інші взаємодії зі сторінкою, поки вікно не буде закрите. Це може впливати на користувацький досвід, особливо при неправильному або надмірному використанні. Також важливо пам'ятати, що відображення діалогових вікон може відрізнятися в різних браузерах, і користувачі можуть мати можливість вимкнути ці спливаючі вікна. Тому слід обережно використовувати confirm() у сценаріях, де необхідно забезпечити плавний та приємний досвід користувача.

Синтаксис

confirm(message)

Параметри

*message

Рядок тексту, який буде відображений у діалоговому вікні підтвердження.

Return

boolean

Повертає булеве значення: true, якщо користувач натиснув "ОК", та false, якщо вибрано "Скасувати". У разі, якщо браузер ігнорує діалогові вікна на сторінці, то повертане значення завжди буде false. Це дозволяє розробникам визначати, як відповів користувач на запитання, представлене у діалоговому вікні, та відповідно керувати подальшою логікою програми.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Функція для видалення елементу
function deleteElement(elementId) {
    if (window.confirm("Ви впевнені, що хочете видалити цей елемент?")) {
        let element = document.getElementById(elementId);
        if (element) {
            element.remove();
            console.log("Елемент видалено.");
        } else {
            console.log("Елемент не знайдено.");
        }
    } else {
        console.log("Видалення скасовано користувачем.");
    }
}

// Функція для видалення елементу
function deleteElement(elementId) {
    if (window.confirm("Ви впевнені, що хочете видалити цей елемент?")) {
        let element = document.getElementById(elementId);
        if (element) {
            element.remove();
            console.log("Елемент видалено.");
        } else {
            console.log("Елемент не знайдено.");
        }
    } else {
        console.log("Видалення скасовано користувачем.");
    }
}