{"id":5686,"date":"2024-08-29T02:35:58","date_gmt":"2024-08-29T02:35:58","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/attention-a-votre-balise-html-en-javascript-guide\/"},"modified":"2024-08-29T02:36:02","modified_gmt":"2024-08-29T02:36:02","slug":"attention-a-votre-balise-html-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/attention-a-votre-balise-html-en-javascript-guide\/","title":{"rendered":"12.2 Attention \u00e0 votre Balise HTML en JavaScript : Guide"},"content":{"rendered":"\n<p><strong>Attention \u00e0 votre Balise HTML en JavaScript<\/strong> est un aspect fondamental de la programmation. Assurer la s\u00e9curit\u00e9 et la validit\u00e9 de vos balises HTML peut pr\u00e9venir des failles de s\u00e9curit\u00e9 et des dysfonctionnements de votre application web. Ce tutoriel vous montrera comment g\u00e9rer efficacement les balises HTML dans JavaScript en adoptant de bonnes pratiques et en utilisant des exemples de code concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Gestion des Balises HTML 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\/660856198?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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>En JavaScript, il est crucial de manipuler les balises HTML de mani\u00e8re s\u00e9curis\u00e9e pour \u00e9viter les vuln\u00e9rabilit\u00e9s et les erreurs de syntaxe. Ce guide vous aidera \u00e0 comprendre comment ins\u00e9rer et manipuler les balises HTML tout en veillant \u00e0 leur validit\u00e9. En apprendre davantage sur la <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-dom-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">structure du DOM<\/a> peut \u00e9galement enrichir votre compr\u00e9hension de la manipulation des balises.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Ins\u00e9rer des Balises HTML Utilisant JavaScript<\/h3>\n\n\n\n<p>Le moyen le plus courant de cr\u00e9er et d&rsquo;ins\u00e9rer des balises HTML est d&rsquo;utiliser les m\u00e9thodes <code>createElement<\/code> et <code>appendChild<\/code> de l&rsquo;objet <code>document<\/code>. Voici un exemple de cr\u00e9ation et d&rsquo;insertion d&rsquo;une balise <code>div<\/code> avec un contenu dynamique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un nouvel \u00e9l\u00e9ment div\nvar newDiv = document.createElement('div');\n\n\/\/ Ajouter du contenu \u00e0 l'\u00e9l\u00e9ment\nnewDiv.textContent = 'Hello, world!';\n\n\/\/ Ajouter le nouvel \u00e9l\u00e9ment \u00e0 une balise parent existante\ndocument.body.appendChild(newDiv);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9viter les Probl\u00e8mes de S\u00e9curit\u00e9 lors de l&rsquo;Insertion de HTML<\/h3>\n\n\n\n<p>Lors de l&rsquo;insertion de balises HTML, il est crucial de se pr\u00e9munir contre les attaques de type XSS (Cross-Site Scripting). N&rsquo;utilisez jamais <code>innerHTML<\/code> pour ins\u00e9rer du contenu provenant d&rsquo;une source externe sans le d\u00e9sinfecter correctement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Mauvaise pratique : ins\u00e9rer du HTML directement\ndocument.getElementById('content').innerHTML = \"<div>\" + userInput + \"<\/div>\";  \/\/ DANGEREUX\n\n\/\/ Bonne pratique : utiliser createElement et textContent\nvar newDiv = document.createElement('div');\nnewDiv.textContent = userInput;\ndocument.getElementById('content').appendChild(newDiv);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Balises Existantes<\/h3>\n\n\n\n<p>Il est \u00e9galement courant de manipuler les balises HTML existantes en JavaScript, en ajoutant ou en modifiant des attributs ou du contenu. Voici comment ajouter un attribut et une classe \u00e0 une balise existante :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner l'\u00e9l\u00e9ment\nvar myElement = document.getElementById('myElement');\n\n\/\/ Ajouter un attribut\nmyElement.setAttribute('data-custom-attr', 'customValue');\n\n\/\/ Ajouter une classe CSS\nmyElement.classList.add('new-class');\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Biblioth\u00e8ques JavaScript pour Simplifier la Manipulation DOM<\/h3>\n\n\n\n<p>Il existe plusieurs biblioth\u00e8ques JavaScript comme jQuery qui peuvent simplifier consid\u00e9rablement la manipulation du DOM. Par exemple, avec jQuery, vous pouvez faire la m\u00eame chose en beaucoup moins de lignes de code :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Inclure jQuery dans votre projet\n\/\/ <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n\n\/\/ Utiliser jQuery pour manipuler le DOM\n$(document).ready(function() {\n    $('#myElement').attr('data-custom-attr', 'customValue');\n    $('#myElement').addClass('new-class');\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les bonnes pratiques pour manipuler les balises HTML en JavaScript sont essentielles pour cr\u00e9er des applications web s\u00e9curis\u00e9es et robustes. En adoptant les m\u00e9thodes recommand\u00e9es et en \u00e9vitant les pratiques dangereuses, vous pouvez am\u00e9liorer la s\u00fbret\u00e9 et l&rsquo;efficacit\u00e9 de votre code. Continuez votre apprentissage en \u00e9tudiant des <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\" target=\"_blank\" rel=\"noopener\">ressources suppl\u00e9mentaires sur JavaScript<\/a> pour approfondir vos connaissances techniques et rester \u00e0 jour avec les meilleures pratiques de d\u00e9veloppement web.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\" 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=\"Learn HTML and JavaScript Course\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Attention \u00e0 votre Balise HTML en JavaScript est un aspect fondamental de la programmation. Assurer la s\u00e9curit\u00e9 et la validit\u00e9 de vos balises HTML peut&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2846,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5686","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\/5686","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=5686"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5686\/revisions"}],"predecessor-version":[{"id":5687,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5686\/revisions\/5687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2846"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}