{"id":5540,"date":"2024-08-28T21:44:44","date_gmt":"2024-08-28T21:44:44","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/demander-confirmation-en-javascript-tutoriel\/"},"modified":"2024-12-12T20:48:01","modified_gmt":"2024-12-12T20:48:01","slug":"demander-confirmation-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/demander-confirmation-en-javascript-tutoriel\/","title":{"rendered":"3.3 Demander Confirmation en JavaScript : Tutoriel"},"content":{"rendered":"\n<p><strong>Demander Confirmation JavaScript<\/strong> est une interaction cruciale pour de nombreuses applications web. Cette fonctionnalit\u00e9 permet de solliciter la validation des utilisateurs avant de poursuivre une action d\u00e9termin\u00e9e, garantissant ainsi une meilleure exp\u00e9rience utilisateur et minimisant les erreurs. Apprenons ensemble comment impl\u00e9menter et personnaliser une demande de confirmation en JavaScript avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Demande de Confirmation en JavaScript<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658878593?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La fonction <code>confirm()<\/code> de JavaScript affiche une bo\u00eete de dialogue contenant un message et deux boutons : \u00ab\u00a0OK\u00a0\u00bb et \u00ab\u00a0Annuler\u00a0\u00bb. Cette m\u00e9thode est souvent utilis\u00e9e pour obtenir la validation de l&rsquo;utilisateur avant d&rsquo;ex\u00e9cuter une action critique, telle que la suppression d&rsquo;un \u00e9l\u00e9ment. Examinons en d\u00e9tail comment utiliser et personnaliser cette fonction dans vos projets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de la Fonction <code>confirm()<\/code> en JavaScript<\/h3>\n\n\n\n<p>La fonction <code>confirm()<\/code> est simple \u00e0 utiliser. Elle retourne un <code>boolean<\/code> : <code>true<\/code> si l&rsquo;utilisateur clique sur \u00ab\u00a0OK\u00a0\u00bb et <code>false<\/code> s&rsquo;il clique sur \u00ab\u00a0Annuler\u00a0\u00bb. Voici plusieurs utilisations pratiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>if (confirm(\"Voulez-vous vraiment supprimer cet \u00e9l\u00e9ment ?\")) {\n    \/\/ L'utilisateur a cliqu\u00e9 sur \"OK\"\n    deleteItem();\n} else {\n    \/\/ L'utilisateur a cliqu\u00e9 sur \"Annuler\"\n    console.log(\"Suppression annul\u00e9e.\");\n}\n\nfunction deleteItem() {\n    console.log(\"\u00c9l\u00e9ment supprim\u00e9.\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnaliser les Demandes de Confirmation avec CSS et JavaScript<\/h3>\n\n\n\n<p>Bien que la fonction <code>confirm()<\/code> soit efficace, elle manque de personnalisation. Pour cr\u00e9er une bo\u00eete de confirmation plus stylis\u00e9e et int\u00e9gr\u00e9e dans votre design, vous pouvez utiliser des \u00e9l\u00e9ments HTML et du CSS personnalis\u00e9s, de plus avec JavaScript, vous pouvez g\u00e9rer les \u00e9v\u00e9nements utilisateurs de mani\u00e8re flexible. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Demande de Confirmation<\/title>\n    <style>\n        .confirm-dialog {\n            display: none;\n            position: fixed;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: white;\n            padding: 20px;\n            border: 2px solid #ccc;\n            border-radius: 10px;\n            text-align: center;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        }\n        .confirm-dialog button {\n            margin: 10px;\n            padding: 10px 20px;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n        .confirm-dialog .btn-ok {\n            background-color: #28a745;\n            color: white;\n        }\n        .confirm-dialog .btn-cancel {\n            background-color: #dc3545;\n            color: white;\n        }\n    <\/style>\n<\/head>\n<body>\n    <button id=\"deleteButton\">Supprimer<\/button>\n    <div id=\"confirmDialog\" class=\"confirm-dialog\">\n        <p>\u00cates-vous s\u00fbr de vouloir supprimer cet \u00e9l\u00e9ment ?<\/p>\n        <button class=\"btn-ok\" onclick=\"confirmAction()\">OK<\/button>\n        <button class=\"btn-cancel\" onclick=\"cancelAction()\">Annuler<\/button>\n    <\/div>\n    <script>\n        document.getElementById('deleteButton').addEventListener('click', function() {\n            document.getElementById('confirmDialog').style.display = 'block';\n        });\n        function confirmAction() {\n            document.getElementById('confirmDialog').style.display = 'none';\n            console.log('\u00c9l\u00e9ment supprim\u00e9.');\n        }\n        function cancelAction() {\n            document.getElementById('confirmDialog').style.display = 'none';\n            console.log('Suppression annul\u00e9e.');\n        }\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Promesses pour G\u00e9rer les Confirmations<\/h3>\n\n\n\n<p>Pour une gestion plus propre et asynchrone des confirmations, vous pouvez utiliser les Promesses en JavaScript. Cela est particuli\u00e8rement utile lorsque les actions subs\u00e9quentes d\u00e9pendent fortement de la d\u00e9cision de l&rsquo;utilisateur.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Confirmation avec Promesses<\/title>\n    <style>\n        .confirm-dialog {\n            display: none;\n            position: fixed;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: white;\n            padding: 20px;\n            border: 2px solid #ccc;\n            border-radius: 10px;\n            text-align: center;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        }\n        .confirm-dialog button {\n            margin: 10px;\n            padding: 10px 20px;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer.\n\t}\n        .confirm-dialog .btn-ok {\n            background-color: #28a745;\n            color: white;\n        }\n        .confirm-dialog .btn-cancel {\n            background-color: #dc3545;\n            color: white;\n        }\n    <\/style>\n<\/head>\n<body>\n    <button id=\"deleteButton\">Supprimer<\/button>\n    <div id=\"confirmDialog\" class=\"confirm-dialog\">\n        <p>\u00cates-vous s\u00fbr de vouloir supprimer cet \u00e9l\u00e9ment ?<\/p>\n        <button class=\"btn-ok\" onclick=\"resolvePromise(true)\">OK<\/button>\n        <button class=\"btn-cancel\" onclick=\"resolvePromise(false)\">Annuler<\/button>\n    <\/div>\n    <script>\n        let resolvePromise;\n        document.getElementById('deleteButton').addEventListener('click', function() {\n            showConfirmDialog().then(function(confirmed) {\n                if (confirmed) {\n                    console.log('\u00c9l\u00e9ment supprim\u00e9.');\n                } else {\n                    console.log('Suppression annul\u00e9e.');\n                }\n            });\n        });\n        function showConfirmDialog() {\n            return new Promise(function(resolve) {\n                resolvePromise = resolve;\n                document.getElementById('confirmDialog').style.display = 'block';\n            });\n        }\n        function resolvePromise(confirmed) {\n            document.getElementById('confirmDialog').style.display = 'none';\n            resolvePromise(confirmed);\n        }\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Confirmation en JavaScript<\/h3>\n\n\n\n<p>Pour approfondir votre compr\u00e9hension et renforcer vos applications, voici quelques exemples avanc\u00e9s. Ces exemples d\u00e9montrent comment int\u00e9grer des confirmations dans des processus plus complexes et divers.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Confirmation pour des Actions Multiples<\/h4>\n\n\n\n<p>Dans certains cas, vous voudrez peut-\u00eatre confirmer plusieurs actions en une seule demande. Par exemple, supprimer plusieurs \u00e9l\u00e9ments \u00e0 la fois :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Confirmation Multiples Actions<\/title>\n    <style>\n        .confirm-dialog {\n            display: none;\n            position: fixed;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: white;\n            padding: 20px;\n            border: 2px solid #ccc;\n            border-radius: 10px;\n            text-align: center;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        }\n        .confirm-dialog button {\n            margin: 10px.\n            padding: 10px 20px;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer.\n\t}\n        .confirm-dialog .btn-ok {\n            background-color: #28a745;\n            color: white;\n        }\n        .confirm-dialog .btn-cancel {\n            background-color: #dc3545,\n            color: white;\n        }\n    <\/style>\n<\/head>\n<body>\n    <button id=\"deleteMultipleButton\">Supprimer Tout<\/button>\n    <div id=\"confirmDialog\" class=\"confirm-dialog\">\n        <p>\u00cates-vous s\u00fbr de vouloir supprimer tous ces \u00e9l\u00e9ments ?<\/p>\n        <button class=\"btn-ok\" onclick=\"resolvePromise(true)\">OK<\/button>\n        <button class=\"btn-cancel\" onclick=\"resolvePromise(false)\">Annuler<\/button>\n    <\/div>\n    <script>\n        let resolvePromise;\n        document.getElementById('deleteMultipleButton').addEventListener('click', function() {\n            showConfirmDialog().then(function(confirmed) {\n                if (confirmed) {\n                    deleteAllItems();\n                } else {\n                    console.log('Suppression annul\u00e9e.');\n                }\n            });\n        });\n        function showConfirmDialog() {\n            return new Promise(function(resolve) {\n                resolvePromise = resolve;\n                document.getElementById('confirmDialog').style.display = 'block';\n            });\n        }\n        function resolvePromise(confirmed) {\n            document.getElementById('confirmDialog').style.display = 'none';\n           resolvePromise(confirmed);\n        }\n        function deleteAllItems() {\n            console.log('Tous les \u00e9l\u00e9ments ont \u00e9t\u00e9 supprim\u00e9s.');\n        }\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Int\u00e9gration de Confirmation dans les Formulaires<\/h4>\n\n\n\n<p>Int\u00e9grer une confirmation dans un formulaire est souvent n\u00e9cessaire pour valider les actions d&rsquo;envoi. Voici comment le faire en utilisant des \u00e9l\u00e9ments HTML et JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Confirmation de Formulaire<\/title>\n    <style>\n        .confirm-dialog {\n            display: none;\n\t    position: fixed;\n\t    top: 50%;\n\t    left: 50%;\n\t    transform: translate(-50%, -50%);\n\t    background-color: white; \n\t    padding: 20px;\n            border: 2px solid #ccc;\n            border-radius: 10px;\n            text-align: center;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n\t}\n        .confirm-dialog button {\n            margin: 10px;\n\t    padding: 10px 20px;\n\t    border: none;\n            border-radius: 5px;\n            cursor: pointer;\n\t}\n        .confirm-dialog .btn-ok {\n            background-color: #28a745;\n            color: white;\n        }\n        .confirm-dialog .btn-cancel {\n            background-color: #dc3545;\n            color: white;\n        }\n    <\/style>\n<\/head>\n","protected":false},"excerpt":{"rendered":"<p>Demander Confirmation JavaScript est une interaction cruciale pour de nombreuses applications web. Cette fonctionnalit\u00e9 permet de solliciter la validation des utilisateurs avant de poursuivre une&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2872,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5540"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5540\/revisions"}],"predecessor-version":[{"id":6089,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5540\/revisions\/6089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2872"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}