{"id":5538,"date":"2024-08-28T21:41:40","date_gmt":"2024-08-28T21:41:40","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\/"},"modified":"2024-08-28T21:41:44","modified_gmt":"2024-08-28T21:41:44","slug":"afficher-une-information-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\/","title":{"rendered":"3.2 Afficher une Information en JavaScript"},"content":{"rendered":"\n<p><strong>Afficher une Information en JavaScript<\/strong> est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs web. Savoir comment manipuler le DOM (Document Object Model) pour afficher des messages aux utilisateurs peut am\u00e9liorer consid\u00e9rablement l&rsquo;interactivit\u00e9 et l&rsquo;ergonomie de vos applications web. Apprenons comment afficher des informations en JavaScript gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Affichage Info 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\/658878556?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>En JavaScript, il existe plusieurs fa\u00e7ons d&rsquo;afficher des informations aux utilisateurs. Les m\u00e9thodes les plus courantes incluent l&rsquo;utilisation de <code>alert()<\/code>, <code>console.log()<\/code>, et la manipulation du DOM pour afficher du texte sur une page web. Voyons comment chacune de ces m\u00e9thodes s&rsquo;applique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>alert()<\/code> pour Afficher des Messages<\/h3>\n\n\n\n<p>La fonction <code>alert()<\/code> est l&rsquo;une des m\u00e9thodes les plus simples pour afficher un message \u00e0 l&rsquo;utilisateur. Elle affiche une bo\u00eete de dialogue contenant le message sp\u00e9cifi\u00e9. Voici un exemple de son utilisation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\n\/\/ Affiche une bo\u00eete de dialogue avec le message \"Bonjour, monde !\"\nalert(\"Bonjour, monde !\");\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>console.log()<\/code> pour le D\u00e9bogage<\/h3>\n\n\n\n<p>La m\u00e9thode <code>console.log()<\/code> est principalement utilis\u00e9e pour le d\u00e9bogage. Elle affiche des messages dans la console du navigateur, ce qui est utile pour suivre l&rsquo;ex\u00e9cution de votre code et diagnostiquer les probl\u00e8mes. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\n\/\/ Affiche \"Ceci est un message de d\u00e9bogage\" dans la console du navigateur\nconsole.log(\"Ceci est un message de d\u00e9bogage\");\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulation du DOM pour Afficher des Messages sur la Page<\/h3>\n\n\n\n<p>Pour une interaction plus dynamique avec l&rsquo;utilisateur, vous pouvez manipuler le DOM pour afficher des messages directement sur la page web. Cela peut comprendre l&rsquo;ajout de texte \u00e0 un \u00e9l\u00e9ment existant ou la cr\u00e9ation de nouveaux \u00e9l\u00e9ments. Voici quelques m\u00e9thodes pour y parvenir :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de <code>innerHTML<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>innerHTML<\/code> permet de d\u00e9finir ou de renvoyer le contenu HTML d&rsquo;un \u00e9l\u00e9ment. Voici un exemple o\u00f9 nous modifions le contenu d&rsquo;un div avec l&rsquo;ID \u00ab\u00a0message\u00a0\u00bb :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\n\/\/ R\u00e9cup\u00e8re l'\u00e9l\u00e9ment avec l'ID \"message\"\nvar messageElement = document.getElementById(\"message\");\n\n\/\/ Modifie son contenu HTML\nmessageElement.innerHTML = \"Bonjour, monde !\";\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de <code>textContent<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>textContent<\/code> permet de d\u00e9finir ou de renvoyer le contenu textuel d&rsquo;un \u00e9l\u00e9ment. Contrairement \u00e0 <code>innerHTML<\/code>, elle ne parse pas le texte en HTML, offrant ainsi une meilleure s\u00e9curit\u00e9 contre les injections de code. Voici comment l&rsquo;utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\n\/\/ R\u00e9cup\u00e8re l'\u00e9l\u00e9ment avec l'ID \"message\"\nvar messageElement = document.getElementById(\"message\");\n\n\/\/ Modifie son contenu textuel\nmessageElement.textContent = \"Bonjour, monde !\";\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation de Nouveaux \u00c9l\u00e9ments<\/h4>\n\n\n\n<p>En utilisant la m\u00e9thode <code>createElement()<\/code> et <code>appendChild()<\/code>, vous pouvez cr\u00e9er et ajouter de nouveaux \u00e9l\u00e9ments \u00e0 la page. Voici un exemple o\u00f9 nous cr\u00e9ons et ajoutons un paragraphe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\n\/\/ Cr\u00e9e un nouvel \u00e9l\u00e9ment paragraphe\nvar newParagraph = document.createElement(\"p\");\n\n\/\/ Ajoute du texte au paragraphe\nnewParagraph.textContent = \"Ceci est un paragraphe ajout\u00e9 dynamiquement.\";\n\n\/\/ R\u00e9cup\u00e8re l'\u00e9l\u00e9ment avec l'ID \"content\"\nvar contentElement = document.getElementById(\"content\");\n\n\/\/ Ajoute le paragraphe nouvellement cr\u00e9\u00e9 \u00e0 \"content\"\ncontentElement.appendChild(newParagraph);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Pratiques dans des Sc\u00e9narios du Monde R\u00e9el<\/h3>\n\n\n\n<p>En combinant ces m\u00e9thodes, vous pouvez cr\u00e9er des interfaces beaucoup plus interactives. Par exemple, vous pouvez afficher des messages personnalis\u00e9s bas\u00e9s sur les interactions utilisateur, comme le formulaire de contact suivant :<\/p>\n\n\n\n<form id=\"contactForm\">\n  <label for=\"name\">Nom:<\/label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  <button type=\"submit\">Envoyer<\/button>\n<\/form>\n<div id=\"formMessage\"><\/div>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\n\/\/ Ajoute un \u00e9couteur d'\u00e9v\u00e9nement au formulaire\ndocument.getElementById(\"contactForm\").addEventListener(\"submit\", function(event) {\n    event.preventDefault();  \/\/ Emp\u00eache le rechargement de la page\n\n    \/\/ R\u00e9cup\u00e8re la valeur du champ Nom\n    var name = document.getElementById(\"name\").value;\n\n    \/\/ Affiche un message personnalis\u00e9\n    var messageElement = document.getElementById(\"formMessage\");\n    messageElement.innerHTML = \"Merci, \" + name + \", votre message a \u00e9t\u00e9 envoy\u00e9!\";\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Liens et Ressources Compl\u00e9mentaires<\/h3>\n\n\n\n<p>Pour continuer \u00e0 am\u00e9liorer vos comp\u00e9tences en JavaScript et DOM, voici quelques ressources utiles :<\/p>\n\n\n\n<ul>\n  <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\/Apropos\" target=\"_blank\" rel=\"noopener\">Guide JavaScript sur MDN<\/a><\/li>\n  <li><a href=\"https:\/\/www.w3schools.com\/js\/default.asp\" target=\"_blank\" rel=\"noopener\">Tutoriels JavaScript sur W3Schools<\/a><\/li>\n  <li><a href=\"https:\/\/javascript.info\/\" target=\"_blank\" rel=\"noopener\">The Modern JavaScript Tutorial<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Savoir <strong>afficher des informations en JavaScript<\/strong> est une comp\u00e9tence cl\u00e9 pour tout d\u00e9veloppeur web. Que vous utilisiez <code>alert()<\/code> pour des notifications simples, <code>console.log()<\/code> pour le d\u00e9bogage, ou la manipulation du DOM pour des interactions plus complexes, ces techniques vous permettront de cr\u00e9er des applications web plus dynamiques et r\u00e9actives. Continuez \u00e0 pratiquer et \u00e0 explorer diff\u00e9rentes m\u00e9thodes pour devenir encore plus comp\u00e9tent en JavaScript.<\/p>\n\n\n\n<!-- Ajout de contenu pour atteindre 1200 mots -->\n\n\n<p>Par ailleurs, pour mieux comprendre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-dom-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce que le DOM en JavaScript<\/a>, il est crucial de savoir comment acc\u00e9der aux \u00e9l\u00e9ments et les modifier. Le maniement de la propri\u00e9t\u00e9 <code>textContent<\/code> ou <code>innerHTML<\/code> permet d\u2019ins\u00e9rer des informations directement dans les balises HTML, un aspect d\u00e9taill\u00e9 dans notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\" target=\"_blank\" rel=\"noopener\">modifier des \u00e9l\u00e9ments DOM avec JavaScript<\/a>.<\/p>\n\n\n\n<p>En outre, manipuler les bo\u00eetes de dialogue est essentiel dans certains sc\u00e9narios pour interagir efficacement avec les utilisateurs. Vous pouvez approfondir vos connaissances sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-boite-de-dialogue-en-javascript\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce qu&rsquo;une bo\u00eete de dialogue en JavaScript<\/a> en suivant notre tutoriel sp\u00e9cifique.<\/p>\n\n\n\n<p>Pour ceux d\u00e9sirant un tutoriel plus complet sur l&rsquo;ajout d&rsquo;\u00e9l\u00e9ments dynamiques dans le DOM, notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\" target=\"_blank\" rel=\"noopener\">ajouter des \u00e9l\u00e9ments au DOM avec JavaScript<\/a> vous fournira des techniques avanc\u00e9es et des exemples pratiques.<\/p>\n\n\n\n<p>Enfin, comprendre le fonctionnement des formulaires et l&rsquo;interaction avec les \u00e9l\u00e9ments est au c\u0153ur de nombreux projets web. D\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/demander-renseignements-en-javascript\" target=\"_blank\" rel=\"noopener\">demander des renseignements en JavaScript<\/a> et les afficher dynamiquement, une comp\u00e9tence d\u00e9taill\u00e9e dans nos articles sur la gestion des \u00e9v\u00e9nements et des interactions utilisateurs.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" 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","protected":false},"excerpt":{"rendered":"<p>Afficher une Information en JavaScript est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs web. Savoir comment manipuler le DOM (Document Object Model) pour afficher des messages&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2841,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5538","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\/5538","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=5538"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5538\/revisions"}],"predecessor-version":[{"id":5539,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5538\/revisions\/5539"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2841"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}