{"id":5542,"date":"2024-08-28T21:48:21","date_gmt":"2024-08-28T21:48:21","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/demander-renseignements-en-javascript\/"},"modified":"2024-12-12T21:03:27","modified_gmt":"2024-12-12T21:03:27","slug":"demander-renseignements-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/demander-renseignements-en-javascript\/","title":{"rendered":"3.4 Demander Renseignements en JavaScript"},"content":{"rendered":"\n\n\n<p><strong>Demander des Renseignements en JavaScript<\/strong> est une comp\u00e9tence essentielle pour am\u00e9liorer l&rsquo;interaction avec les utilisateurs de vos applications web. Comprendre comment collecter des informations via des formulaires et des interactions dynamiques peut consid\u00e9rablement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et l&rsquo;efficacit\u00e9 de vos applications. Apprenons comment cela fonctionne et comment l&rsquo;impl\u00e9menter avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Demander des Renseignements 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\/658878655?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>Demander des renseignements aux utilisateurs permet de collecter des informations n\u00e9cessaires pour traiter des requ\u00eates, personnaliser des interfaces, et bien plus. En JavaScript, cela se fait g\u00e9n\u00e9ralement par le biais de formulaires HTML combin\u00e9s \u00e0 des \u00e9v\u00e9nements et fonctions JavaScript. Avant de plonger dans le code, voyons quelques concepts de base.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Formulaire Simple en HTML<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er un formulaire simple en HTML. Ce formulaire aura des champs de texte pour demander le nom de l&rsquo;utilisateur et son email :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!-- HTML --&gt;\n&lt;form id=\"contactForm\"&gt;\n  &lt;label for=\"name\"&gt;Nom:&lt;\/label&gt;\n  &lt;input type=\"text\" id=\"name\" name=\"name\"&gt;&lt;br&gt;\n  &lt;label for=\"email\"&gt;Email:&lt;\/label&gt;\n  &lt;input type=\"email\" id=\"email\" name=\"email\"&gt;&lt;br&gt;\n  &lt;input type=\"submit\" value=\"Envoyer\"&gt;\n&lt;\/form&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Interagir avec le Formulaire en JavaScript<\/h3>\n\n\n\n<p>Ensuite, utilisons JavaScript pour interagir avec ce formulaire. Nous voulons \u00e9couter l&rsquo;\u00e9v\u00e9nement de soumission du formulaire, emp\u00eacher son comportement par d\u00e9faut, et r\u00e9cup\u00e9rer les valeurs des champs pour traitement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ JavaScript\ndocument.addEventListener('DOMContentLoaded', function() {\n    var form = document.getElementById('contactForm');\n\n    form.addEventListener('submit', function(event) {\n        event.preventDefault(); \/\/ Emp\u00eache l'envoi du formulaire\n\n        \/\/ R\u00e9cup\u00e8re les valeurs des champs du formulaire\n        var name = document.getElementById('name').value;\n        var email = document.getElementById('email').value;\n\n        console.log('Nom:', name);\n        console.log('Email:', email);\n\n        \/\/ Vous pouvez ensuite traiter ou envoyer ces donn\u00e9es comme n\u00e9cessaire\n    });\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Validation de Formulaire en Temps R\u00e9el<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur, nous pouvons ajouter de la validation en temps r\u00e9el aux champs du formulaire. Par exemple, nous pouvons v\u00e9rifier que les champs ne sont pas vides et que l&#8217;email est dans un format valide :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ JavaScript\ndocument.addEventListener('DOMContentLoaded', function() {\n    var form = document.getElementById('contactForm');\n    var nameInput = document.getElementById('name');\n    var emailInput = document.getElementById('email');\n\n    form.addEventListener('submit', function(event) {\n        event.preventDefault();\n\n        var name = nameInput.value.trim();\n        var email = emailInput.value.trim();\n\n        if (!name || !validateEmail(email)) {\n            alert('Veuillez entrer un nom valide et un email valide.');\n            return;\n        }\n\n        console.log('Nom:', name);\n        console.log('Email:', email);\n\n        \/\/ Traitez ou envoyez les donn\u00e9es comme n\u00e9cessaire\n    });\n\n    function validateEmail(email) {\n        var re = \/^&#91;^\\s@]+@&#91;^\\s@]+\\.&#91;^\\s@]+$\/;\n        return re.test(email);\n    }\n\n    \/\/ \u00c9couteurs de validation en temps r\u00e9el\n    nameInput.addEventListener('input', function() {\n        if (!nameInput.value.trim()) {\n            nameInput.classList.add('error');\n        } else {\n            nameInput.classList.remove('error');\n        }\n    });\n\n    emailInput.addEventListener('input', function() {\n        if (!validateEmail(emailInput.value.trim())) {\n            emailInput.classList.add('error');\n        } else {\n            emailInput.classList.remove('error');\n        }\n    });\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Envoyer des Donn\u00e9es de Formulaire via AJAX<\/h3>\n\n\n\n<p>Pour un envoi de formulaire sans recharger la page, nous pouvons utiliser AJAX. Voici comment envoyer les donn\u00e9es du formulaire \u00e0 un serveur de mani\u00e8re asynchrone :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ JavaScript\ndocument.addEventListener('DOMContentLoaded', function() {\n    var form = document.getElementById('contactForm');\n\n    form.addEventListener('submit', function(event) {\n        event.preventDefault();\n\n        var formData = new FormData(form);\n\n        fetch('https:\/\/example.com\/submit', {\n            method: 'POST',\n            body: formData\n        }).then(response =&gt; response.json())\n          .then(data =&gt; {\n              console.log('Succ\u00e8s:', data);\n              alert('Formulaire soumis avec succ\u00e8s!');\n          }).catch(error =&gt; {\n              console.error('Erreur:', error);\n              alert('Une erreur est survenue. Veuillez r\u00e9essayer.');\n          });\n    });\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Messages d&rsquo;Erreur et de Succ\u00e8s<\/h3>\n\n\n\n<p>Pour une meilleure exp\u00e9rience utilisateur, ajoutons des messages d&rsquo;erreur et de succ\u00e8s visuels lorsque l&rsquo;utilisateur soumet le formulaire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!-- HTML --&gt;\n&lt;form id=\"contactForm\"&gt;\n  &lt;label for=\"name\"&gt;Nom:&lt;\/label&gt;\n  &lt;input type=\"text\" id=\"name\" name=\"name\"&gt;&lt;br&gt;\n  &lt;label for=\"email\"&gt;Email:&lt;\/label&gt;\n  &lt;input type=\"email\" id=\"email\" name=\"email\"&gt;&lt;br&gt;\n  &lt;input type=\"submit\" value=\"Envoyer\"&gt;\n  &lt;p id=\"formMessage\" style=\"display:none\"&gt;&lt;\/p&gt;\n&lt;\/form&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ JavaScript\ndocument.addEventListener('DOMContentLoaded', function() {\n    var form = document.getElementById('contactForm');\n    var messageElement = document.getElementById('formMessage');\n\n    form.addEventListener('submit', function(event) {\n        event.preventDefault();\n\n        var formData = new FormData(form);\n\n        fetch('https:\/\/example.com\/submit', {\n            method: 'POST',\n            body: formData\n        }).then(response =&gt; response.json())\n          .then(data =&gt; {\n              messageElement.style.display = 'block';\n              messageElement.style.color = 'green';\n              messageElement.textContent = 'Formulaire soumis avec succ\u00e8s!';\n          }).catch(error =&gt; {\n              messageElement.style.display = 'block';\n              messageElement.style.color = 'red';\n              messageElement.textContent = 'Une erreur est survenue. Veuillez r\u00e9essayer.';\n          });\n    });\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p><strong>Demander des Renseignements en JavaScript<\/strong> est fondamental pour cr\u00e9er des applications interactives et conviviales. Avec des formulaires HTML, une validation en temps r\u00e9el, et l&rsquo;utilisation d&rsquo;AJAX pour les soumissions asynchrones, vous pouvez am\u00e9liorer consid\u00e9rablement l&rsquo;exp\u00e9rience utilisateur. Continuez \u00e0 explorer JavaScript pour ma\u00eetriser d&rsquo;autres techniques et meilleures pratiques. 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 des interfaces utilisateur dynamiques, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/guide-complet-des-interfaces-utilisateur-dynamiques-en-javascript\">guide complet des interfaces utilisateur dynamiques en JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" 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\n\n<h2 class=\"wp-block-heading\">Renseignements JavaScript pour Interactions Utilisateur<\/h2>\n\n\n\n<p>En approfondissant les techniques de Demander des Renseignements en JavaScript, vous pouvez mettre en \u0153uvre des fonctionnalit\u00e9s telles que l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\">ajout d&rsquo;\u00e9l\u00e9ments au DOM<\/a>, la <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-style-des-elements-en-javascript-tutoriel\">modification du style des \u00e9l\u00e9ments<\/a> et bien plus encore. Ces techniques permettent de cr\u00e9er des interfaces utilisateur plus dynamiques et engageantes, augmentant ainsi l&rsquo;exp\u00e9rience utilisateur globale. En comprenant comment les utilisateurs interagissent avec vos formulaires, vous pouvez optimiser ces interactions pour une meilleure collecte de donn\u00e9es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Renseignements JavaScript et S\u00e9curit\u00e9 des Donn\u00e9es<\/h3>\n\n\n\n<p>Lorsque vous demandez des renseignements en JavaScript, il est crucial de prendre en compte la s\u00e9curit\u00e9 des donn\u00e9es. Assurez-vous de valider correctement toutes les entr\u00e9es c\u00f4t\u00e9 client et c\u00f4t\u00e9 serveur. Utilisez des m\u00e9thodes comme la validation d&#8217;email et des techniques de <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\">gestion des exceptions<\/a> pour pr\u00e9venir les attaques potentielles et maintenir l&rsquo;int\u00e9grit\u00e9 des donn\u00e9es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Optimisation des Formulaires en JavaScript<\/h3>\n\n\n\n<p>En optimisant vos formulaires avec JavaScript, vous pouvez am\u00e9liorer non seulement l&rsquo;apparence mais aussi la fonctionnalit\u00e9. Par exemple, ajouter des validations de formulaire en temps r\u00e9el et des feedbacks utilisateur en utilisant des <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-if-else-en-javascript-guide\">conditions if-else<\/a> peut rendre le processus de remplissage beaucoup plus fluide pour vos utilisateurs. L&rsquo;utilisation de <a href=\"https:\/\/wikiform.fr\/codespace\/objet-document-dans-le-bom-en-javascript-utilisation\">l&rsquo;objet document<\/a> en JavaScript vous permet de manipuler facilement ces \u00e9l\u00e9ments pour cr\u00e9er une exp\u00e9rience utilisateur plus intuitive et r\u00e9active.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Formation et Apprentissage Continu<\/h3>\n\n\n\n<p>Apprendre \u00e0 demander des renseignements en JavaScript est une comp\u00e9tence qui demande de la pratique et de l&rsquo;apprentissage continu. Des plateformes comme <a href=\"https:\/\/\n","protected":false},"excerpt":{"rendered":"<p>Demander des Renseignements en JavaScript est une comp\u00e9tence essentielle pour am\u00e9liorer l&rsquo;interaction avec les utilisateurs de vos applications web. Comprendre comment collecter des informations via&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5542","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\/5542","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=5542"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5542\/revisions"}],"predecessor-version":[{"id":6091,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5542\/revisions\/6091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2873"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}