{"id":5512,"date":"2024-08-28T12:31:11","date_gmt":"2024-08-28T12:31:11","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique-2\/"},"modified":"2024-08-28T12:31:11","modified_gmt":"2024-08-28T12:31:11","slug":"placer-code-javascript-guide-pratique-2","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique-2\/","title":{"rendered":"1.4 Placer le Code JavaScript : Guide Pratique"},"content":{"rendered":"\n<p><strong>Placer le Code JavaScript<\/strong> est une \u00e9tape essentielle dans la cr\u00e9ation de sites web dynamiques et interactifs. Savoir o\u00f9 et comment placer votre <strong>code JavaScript<\/strong> peut faire une diff\u00e9rence significative dans la performance et le comportement de vos pages web. Apprenons comment positionner correctement le code JavaScript \u00e0 travers des exemples concrets et des meilleures pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Placer le Code 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\/660854715?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>Le JavaScript enrichit les pages web en les rendant plus interactives et dynamiques. Cependant, le placement du code JavaScript peut affecter le chargement et l&rsquo;exp\u00e9rience utilisateur. Nous explorerons les diff\u00e9rentes options pour inclure JavaScript dans vos pages web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Les M\u00e9thodes pour Placer le Code JavaScript<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Placer le JavaScript dans la Section <code>&lt;head&gt;<\/code><\/h3>\n\n\n\n<p>Placer JavaScript dans la section <code>&lt;head&gt;<\/code> permet de charger le script avant que le reste de la page ne soit rendu. Cependant, cela peut retarder l&rsquo;affichage du contenu et affecter les performances. Cette m\u00e9thode est souvent utilis\u00e9e pour les scripts critiques qui doivent \u00eatre charg\u00e9s avant tout autre contenu.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Exemple de JavaScript dans le &lt;head&gt;&lt;\/title&gt;\n    &lt;script&gt;\n        document.addEventListener('DOMContentLoaded', (event) =&gt; {\n            console.log('Le script dans le &lt;head&gt; est ex\u00e9cut\u00e9.');\n        });\n    &lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bonjour, JavaScript dans le &lt;head&gt;!&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. Placer le JavaScript Avant la Fin de la Balise <code>&lt;body&gt;<\/code><\/h3>\n\n\n\n<p>Placer les scripts juste avant la balise fermante <code>&lt;\/body&gt;<\/code> est une pratique courante. Cela garantit que l&rsquo;HTML est charg\u00e9 avant l&rsquo;ex\u00e9cution du JavaScript, ce qui peut am\u00e9liorer les performances. Cette m\u00e9thode est recommand\u00e9e pour des scripts non critiques qui ne d\u00e9pendent pas du reste du contenu pour fonctionner.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Exemple de JavaScript avant &lt;\/body&gt;&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bonjour, JavaScript avant &lt;\/body&gt;!&lt;\/h1&gt;\n    &lt;script&gt;\n        console.log('Le script avant &lt;\/body&gt; est ex\u00e9cut\u00e9.');\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Utiliser l&rsquo;Attribut <code>async<\/code> et <code>defer<\/code> pour les Scripts Externes<\/h3>\n\n\n\n<p>Pour les scripts externes, les attributs <code>async<\/code> et <code>defer<\/code> permettent de contr\u00f4ler quand et comment les scripts sont charg\u00e9s et ex\u00e9cut\u00e9s. Ces attributs sont essentiels pour optimiser le rendu des pages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><code>async<\/code><\/h4>\n\n\n\n<p>L&rsquo;attribut <code>async<\/code> permet au script de se charger de fa\u00e7on asynchrone avec le reste de la page, s&rsquo;ex\u00e9cutant d\u00e8s qu&rsquo;il est pr\u00eat. Cela peut \u00eatre utile pour les scripts qui ne d\u00e9pendent pas d&rsquo;autres \u00e9l\u00e9ments de la page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Exemple de JavaScript avec async&lt;\/title&gt;\n    &lt;script src=\"script.js\" async&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bonjour, JavaScript avec async!&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><code>defer<\/code><\/h4>\n\n\n\n<p>L&rsquo;attribut <code>defer<\/code> garantit que le script est charg\u00e9 de mani\u00e8re asynchrone mais ex\u00e9cut\u00e9 seulement apr\u00e8s la fin du parsing du HTML. C&rsquo;est l&rsquo;option pr\u00e9f\u00e9r\u00e9e pour les scripts qui d\u00e9pendent du contenu de la page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Exemple de JavaScript avec defer&lt;\/title&gt;\n    &lt;script src=\"script.js\" defer&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bonjour, JavaScript avec defer!&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. Charger le JavaScript Dynamique<\/h3>\n\n\n\n<p>JavaScript peut \u00e9galement \u00eatre charg\u00e9 dynamiquement en ajoutant des scripts \u00e0 la vol\u00e9e via DOM. Cette m\u00e9thode est particuli\u00e8rement utile pour les modules ou composants qui ne sont pas n\u00e9cessaires au chargement initial de la page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener('DOMContentLoaded', (event) => {\n    const script = document.createElement('script');\n    script.src = \"dynamicScript.js\";\n    script.onload = () => console.log('Le script dynamique est charg\u00e9.');\n    document.head.appendChild(script);\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion: Placer le Code JavaScript<\/h2>\n\n\n\n<p>L&#8217;emplacement du code JavaScript peut influencer significativement la performance de votre site web. Que vous choisissiez de le placer dans le <code>&lt;head&gt;<\/code>, \u00e0 la fin du <code>&lt;body&gt;<\/code>, ou d&rsquo;utiliser des attributs comme <code>async<\/code> et <code>defer<\/code>, cela d\u00e9pendra des besoins sp\u00e9cifiques de votre projet. En utilisant ces pratiques, vous pouvez optimiser \u00e0 la fois la vitesse de chargement du site et l&rsquo;exp\u00e9rience utilisateur. Pour aller plus loin dans l&rsquo;apprentissage du JavaScript et de son int\u00e9gration dans vos projets web, explorez nos autres <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">tutoriels<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\">ressources<\/a>.<\/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\n\n<!-- Internal Links for SEO -->\n<p>Pour en savoir plus sur le <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce qu&rsquo;une variable en JavaScript<\/a>, consultez notre guide complet. Vous pouvez \u00e9galement d\u00e9couvrir comment <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">d\u00e9clarer des variables en JavaScript<\/a> en utilisant <code>let<\/code>, <code>const<\/code> et <code>var<\/code>. Si vous \u00eates int\u00e9ress\u00e9 par le d\u00e9bogage, visitez notre section sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">utilisation du d\u00e9bogueur en JavaScript<\/a>. Pour une explication d\u00e9taill\u00e9e des boucles, consultez nos articles sur les <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\" target=\"_blank\" rel=\"noopener\">boucles for en JavaScript<\/a> et les <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-while-en-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">boucles while en JavaScript<\/a>. Enfin, pour une compr\u00e9hension approfondie de la port\u00e9e des variables, lisez notre article sur la <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">port\u00e9e des variables en JavaScript<\/a>.<\/p>\n<!-- \/Internal Links for SEO -->\n\n<!-- External Links for SEO -->\n<p>Pour des informations avanc\u00e9es sur le placement de JavaScript, vous pouvez consulter cet article complet de MDN Web Docs sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\" target=\"_blank\" rel=\"noopener\">JavaScript Guide de MDN<\/a>. Pour d&rsquo;autres discussions pertinentes et des astuces de performance, Stack Overflow offre une mine de connaissances, comme sur cette <a href=\"https:\/\/stackoverflow.com\/questions\/9643313\/does-defer-on-script-tags-make-script-load-wait-until-the-dom-is-loaded\" target=\"_blank\" rel=\"noopener\">discussion sur defer<\/a>. W3Schools propose \u00e9galement un article pratique sur <a href=\"https:\/\/www.w3schools.com\/js\/js_intro.asp\" target=\"_blank\" rel=\"noopener\">l&rsquo;introduction au JavaScript<\/a>.<\/p>\n<!-- \/External Links for SEO -->","protected":false},"excerpt":{"rendered":"<p>Placer le Code JavaScript est une \u00e9tape essentielle dans la cr\u00e9ation de sites web dynamiques et interactifs. Savoir o\u00f9 et comment placer votre code JavaScript&#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":[3,8],"tags":[18],"class_list":["post-5512","post","type-post","status-publish","format-standard","hentry","category-3-css","category-2-html","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\/5512","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=5512"}],"version-history":[{"count":0,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5512\/revisions"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}