Utilisation de la boîte de dialogue de confirmation JavaScript [Window.confirm()] Didacticiel

Dans cet article, nous aborderons environ Utilisation de la boîte de dialogue de confirmation JavaScript. Ce didacticiel vise à fournir aux étudiants en informatique/informatique et aux nouveaux programmeurs une référence pour comprendre l’utilisation du Fenêtre.confirmer() fonction de Javascript. Ici, des exemples d’extraits et un exemple de fichier zip de code source qui illustrent notre objet pour cet article sont fournis et téléchargeables gratuitement.

Qu’est-ce que la boîte de dialogue Confirmer [Window.confirm()]?

La Confirmer la boîte de dialogue [Window.confirm()] est l’une des méthodes d’instance intégrées de Javascript. Il permet au développeur d’implémenter un dialogue décisionnel côté client qui demande à l’utilisateur final s’il doit continuer ou interrompre le traitement de l’action ou de l’exécution.

Comment fonctionne la boîte de dialogue de confirmation [Window.confirm()] travailler?

Le navigateur est invité à afficher une boîte de dialogue avec un message facultatif lorsque la fonction de confirmation est utilisée et à attendre que l’utilisateur confirme ou annule la boîte de dialogue. Par exemple, dans une application, il existe une fonction de suppression de données qui peut être déclenchée en cliquant sur un bouton et le bouton a une fonction de confirmation à l’aide de Fenêtre.confirmer(). En utilisant la méthode de confirmation, le développeur peut empêcher la perte de données due à une suppression accidentelle en demandant d’abord à l’utilisateur de poursuivre ou non la suppression.

Syntaxe

        confirm("Confirm Dialog's Message Here");

Paramètres

Message

Ce paramètre contient le message à afficher ou à afficher dans la boîte de dialogue.

Valeur de retour

La Fenêtre.confirmer() méthode/fonction d’instance renvoie un booléen (vrai faux) évaluer. La « D’accord » le bouton reviendra vrai et le « Annuler » le bouton revient faux.

Exemple

Voici quelques extraits qui montrent comment utiliser la méthode de confirmation d’instance de JavaScript dans votre application Web

Interface

L’extrait suivant est un HTML extrait pour l’interface de la page. Il contient 2 boutons différents qui déclenchent tous deux un Fenêtre.confirmer() fonction. Le résultat de l’exécution de la méthode de confirmation pour le D’accord et Annuler les boutons de la boîte de dialogue seront affichés dans la Balise HTML

.  Enregistrez le fichier sous index.html.
<!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
 
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
 
        html, body{
            height: 100%;
            width: 100%;
        }
        body{
            display: flex;
            height: 100%;
            width: 100%;
            flex-direction: column;
        }
        body>nav, body>footer{
            flex-shrink: 1;
        }
        body>main{
            flex-shrink: 1;
            flex-grow: 1;
            overflow: auto;
            display: flex;
            flex-direction: column;
            width: 100%;
            align-items: center;
            justify-content: center;
        }
        pre{
            min-height:20vh
        }
<body style="background:#eff3fc">
    <nav class="navbar navbar-expand-lg navbar-dark" style="background:#495C83">
            <a class="navbar-brand" href="./">JavaScript Confirm Dialog</a>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
    </nav>
 
    <main class="container-fluid">
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <h2 class="text-center">Using JavaScript Confirm Dialog (Window.confirm())</h2>
 
            <div class="card mt-3 rounded-0">
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                        <div class="row justify-content-center">
                            <div class="col-lg-4 col-lg-5 col-sm-6">
                                <button class="btn btn-primary rounded-pill w-100" type="button" id="trigger1">Trigger Confirm 1</button>
                            <div class="col-lg-4 col-lg-5 col-sm-6">
                                <button class="btn btn-warning rounded-pill w-100" type="button" id="trigger2">Trigger Confirm 2</button>
            <div class="card mt-3 rounded-0">
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                        <div class="clear-fix py-1"></div>
                        <pre class="bg-dark text-white px-2 py-3"></pre>
    </main>

  


<footer class="container-fluid py-3" style="background:#495C83; color:#fff">
    <div class="container-fluid my-2">
        <div class="text-center">
            <b>JavaScript Confirm Dialog &copy; 2022</b>
</footer>


Javascript
Voici l'extrait du fichier JavaScript qui contient les scripts pour l'exécution de la boîte de dialogue de confirmation [window.confirm()] lorsque les 2 boutons de la page sont cliqués.  Enregistrez le fichier sous script.js.

/**
* Trigger 1 Button
* Click Event Listener
* Sample Confirm Dialog Script #1
*/
 
document.getElementById('trigger1').addEventListener('click', function(e){
    e.preventDefault()
 
    // Confirm Dialog w/ message
    var _confirm = confirm(`This is a sample Confirm Dialog Message.`)
 
    if(_confirm === true){
        /**
        * User has clicked the OK Button in the Dialog.
        * - Wtite Something Here
        */
        document.querySelector('pre').innerHTML = JSON.stringify({trigger: "Sample Confirm Dialog #1", user_action:"User has clicked the Ok Button"}, null, 3)
    }else{
        document.querySelector('pre').innerHTML = JSON.stringify({trigger: "Sample Confirm Dialog #1", user_action:"User has clicked the Cancel Button"}, null, 3)
    }
})
 
/**
* Trigger 2 Button
* Click Event Listener
* Sample Confirm Dialog Script #2
*/
 
document.getElementById('trigger2').addEventListener('click', function(e){
    e.preventDefault()
 
    // Confirm Dialog w/ message
    var _confirm = confirm(`Are you sure to continue the process.`)
 
    if(_confirm === true){
        /**
        * - Write Something Here
        */
        TestFunc();
    }else{
        document.querySelector('pre').innerHTML = JSON.stringify({trigger: "Sample Confirm Dialog #2", user_action:"User has clicked the Cancel Button"}, null, 3)
    }
})
 
window.TestFunc = function(){
    document.querySelector('pre').innerHTML = `Processing...`
    var i = 1
    var testInterval = setInterval(()=>{
        document.querySelector('pre').innerHTML += `<br>Sample Progress ${i}...`
        if(i == 5){
            document.querySelector('pre').innerHTML += `<br>Done.`
            clearInterval(testInterval);
        }
        i++;
    },1000)
 
}

La "Confirmation du déclencheur 2" L'écouteur d'événement ci-dessus déclenche l'exécution d'un processus de fonction si l'utilisateur choisit le bouton "OK" qui démontre la fonction de confirmation de l'action avant l'exécution.
Instantanés
En conséquence, les extraits que j'ai fournis ci-dessus produisent les images suivantes.
Interface des pages

Bouton 1 Confirmer la boîte de dialogue

Résultat du bouton "OK"

Résultat du bouton "Annuler"

Voilà!  C'est la fin de ce tutoriel.  J'ai fourni un fichier zip de code source d'application Web fonctionnel de l'extrait que j'ai créé et fourni ci-dessus.  Vous pouvez le télécharger en cliquant sur le Bouton de téléchargement situé sous cet article.
J'espère Cela Boîte de dialogue de confirmation JavaScript [Window.confirm()] Didacticiel vous aide avec ce que vous cherchez et vous trouverez cela utile pour vos projets actuels et futurs.
Explorez plus sur ce site Web pour plus Tutoriels et Codes sources gratuits.
Bon codage 🙂