{"id":5536,"date":"2024-08-28T21:39:55","date_gmt":"2024-08-28T21:39:55","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-boite-de-dialogue-en-javascript\/"},"modified":"2024-08-28T21:39:58","modified_gmt":"2024-08-28T21:39:58","slug":"qu-est-ce-qu-une-boite-de-dialogue-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-boite-de-dialogue-en-javascript\/","title":{"rendered":"3.1 Qu&rsquo;est-ce qu&rsquo;une Bo\u00eete de Dialogue en JavaScript ?"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les bo\u00eetes de dialogue en JavaScript<\/strong> jouent un r\u00f4le crucial pour l&rsquo;interaction utilisateur et la gestion d&rsquo;\u00e9v\u00e9nements dans les applications web. Comprendre comment utiliser les <strong>bo\u00eetes de dialogue en JavaScript<\/strong> peut am\u00e9liorer l&rsquo;interactivit\u00e9 et l&rsquo;exp\u00e9rience utilisateur de vos applications. Apprenons comment elles fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Bo\u00eetes de Dialogue en JavaScript<\/strong><\/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\/658878526?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>Une bo\u00eete de dialogue en JavaScript est un moyen d&rsquo;interagir avec l&rsquo;utilisateur en affichant des messages ou en recueillant des entr\u00e9es. Les trois principales bo\u00eetes de dialogue en JavaScript sont <code>alert<\/code>, <code>confirm<\/code>, et <code>prompt<\/code>. Elles permettent d&rsquo;afficher des messages, de demander des confirmations et de recueillir des informations aupr\u00e8s des utilisateurs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Afficher un Message avec <code>alert<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>alert<\/code> permet d&rsquo;afficher une bo\u00eete de dialogue contenant un message et un bouton OK. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Afficher un message d'alerte\nalert('Bienvenue sur notre site web!');<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Demander une Confirmation avec <code>confirm<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>confirm<\/code> affiche une bo\u00eete de dialogue avec un message, un bouton OK et un bouton Annuler. Elle retourne <code>true<\/code> si l&rsquo;utilisateur clique sur OK et <code>false<\/code> s&rsquo;il clique sur Annuler. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Demander une confirmation\nlet userConfirmed = confirm('Voulez-vous vraiment continuer?');\n\nif (userConfirmed) {\n    console.log('L\\'utilisateur veut continuer.');\n} else {\n    console.log('L\\'utilisateur a annul\u00e9.');\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Recueillir une Entr\u00e9e avec <code>prompt<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>prompt<\/code> affiche une bo\u00eete de dialogue avec un message, un champ de saisie et des boutons OK et Annuler. Elle retourne la valeur saisie par l&rsquo;utilisateur ou <code>null<\/code> s&rsquo;il clique sur Annuler. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Recueillir une entr\u00e9e utilisateur\nlet userName = prompt('Entrez votre nom:');\n\nif (userName !== null) {\n    console.log('Bonjour, ' + userName + '!');\n} else {\n    console.log('L\\'utilisateur a annul\u00e9.');\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Bo\u00eetes de Dialogue JavaScript pour des Sc\u00e9narios R\u00e9els<\/h3>\n\n\n\n<p>Les bo\u00eetes de dialogue en JavaScript peuvent \u00eatre int\u00e9gr\u00e9es dans des sc\u00e9narios plus complexes pour am\u00e9liorer l&rsquo;interactivit\u00e9 de vos applications. Par exemple, vous pouvez utiliser <code>alert<\/code>, <code>confirm<\/code>, et <code>prompt<\/code> ensemble pour cr\u00e9er une s\u00e9quence d&rsquo;interactions utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Sc\u00e9nario complexe avec alert, confirm, et prompt\nalert('Bienvenue! Nous avons quelques questions pour vous.');\n\nif (confirm('Voulez-vous r\u00e9pondre \u00e0 quelques questions?')) {\n    let age = prompt('Quel \u00e2ge avez-vous?');\n\n    if (age !== null) {\n        alert('Merci d\\'avoir r\u00e9pondu! Vous avez ' + age + ' ans.');\n    } else {\n        alert('Vous avez annul\u00e9 la saisie de votre \u00e2ge.');\n    }\n} else {\n    alert('Peut-\u00eatre une autre fois alors.');\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnaliser les Bo\u00eetes de Dialogue JavaScript<\/h3>\n\n\n\n<p>Les bo\u00eetes de dialogue natives en JavaScript peuvent \u00eatre limit\u00e9es en termes de personnalisation visuelle. Pour cr\u00e9er des bo\u00eetes de dialogue plus stylis\u00e9es, vous pouvez utiliser des biblioth\u00e8ques telles que SweetAlert ou cr\u00e9er vos propres modales en utilisant HTML et CSS. Voici un exemple avec SweetAlert :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utilisation de SweetAlert pour une bo\u00eete de dialogue stylis\u00e9e\nswal({\n  title: \"\u00cates-vous s\u00fbr?\",\n  text: \"Voulez-vous vraiment supprimer cet \u00e9l\u00e9ment?\",\n  icon: \"warning\",\n  buttons: true,\n  dangerMode: true,\n})\n.then((willDelete) => {\n  if (willDelete) {\n    swal(\"L'\u00e9l\u00e9ment a \u00e9t\u00e9 supprim\u00e9!\", {\n      icon: \"success\",\n    });\n  } else {\n    swal(\"L'\u00e9l\u00e9ment est sauf!\");\n  }\n});<\/code><\/pre>\n\n\n\n<p>Pour approfondir votre compr\u00e9hension des bo\u00eetes de dialogue en JavaScript, consultez des ressources externes comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Objets_globaux\/alert\" title=\"Documentation MDN sur alert\" target=\"_blank\" rel=\"noopener\">la documentation MDN<\/a> et exp\u00e9rimentez avec des biblioth\u00e8ques populaires. Vous pouvez \u00e9galement suivre des cours en ligne comme ceux de <a href=\"https:\/\/www.coursera.org\/\" title=\"Coursera - Cours en ligne\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> pour un apprentissage structur\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>bo\u00eetes de dialogue en JavaScript<\/strong> sont des outils puissants pour interagir avec les utilisateurs. En utilisant <code>alert<\/code>, <code>confirm<\/code>, et <code>prompt<\/code>, vous pouvez afficher des messages, obtenir des confirmations et recueillir des informations. Pour aller plus loin, explorez des solutions de personnalisation et exp\u00e9rimentez avec diff\u00e9rentes biblioth\u00e8ques pour enrichir l&rsquo;exp\u00e9rience utilisateur. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Pour apprendre \u00e0 cr\u00e9er une modale personnalis\u00e9e, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-une-modale-avec-javascript-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d\u00e9veloppeur-javascript\/150\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les bo\u00eetes de dialogue en JavaScript jouent un r\u00f4le crucial pour l&rsquo;interaction utilisateur et la gestion d&rsquo;\u00e9v\u00e9nements dans les applications web. Comprendre comment utiliser&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5536","post","type-post","status-publish","format-standard","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\/5536","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=5536"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5536\/revisions"}],"predecessor-version":[{"id":5537,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5536\/revisions\/5537"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}