{"id":5670,"date":"2024-08-29T02:04:31","date_gmt":"2024-08-29T02:04:31","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/aborder-section-bom-en-javascript-explications\/"},"modified":"2024-08-29T02:04:34","modified_gmt":"2024-08-29T02:04:34","slug":"aborder-section-bom-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/aborder-section-bom-en-javascript-explications\/","title":{"rendered":"11.2 Aborder la Section BOM en JavaScript : Explications"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>La section BOM en JavaScript<\/strong> est essentielle pour manipuler le navigateur via des scripts. En ma\u00eetrisant le Browser Object Model (BOM), vous aurez la capacit\u00e9 de contr\u00f4ler divers aspects comme les fen\u00eatres de dialogues, les URL, et l&rsquo;historique du navigateur. Apprenons ensemble comment utiliser ces fonctionnalit\u00e9s gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Section BOM 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\/658889071?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 BOM en JavaScript repr\u00e9sente une abstraction qui permet d&rsquo;interagir directement avec le navigateur en utilisant des objets comme <code>window<\/code>, <code>document<\/code>, <code>history<\/code>, <code>navigator<\/code>, etc. Explorons quelques fonctionnalit\u00e9s cl\u00e9s pour comprendre leur utilit\u00e9 et comment les int\u00e9grer dans vos projets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Objets Fen\u00eatre avec <code>window<\/code><\/h3>\n\n\n\n<p>Commen\u00e7ons par un exemple simple qui montre comment cr\u00e9er des alertes et des fen\u00eatres de confirmation. Ici, nous verrons \u00e9galement comment ouvrir et fermer des fen\u00eatres :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er une alerte\nwindow.alert(\"Bienvenue sur notre site!\");\n\n\/\/ Confirmation\nvar userConfirmed = window.confirm(\"Voulez-vous continuer?\");\nif (userConfirmed) {\n  window.alert(\"Vous avez choisi de continuer.\");\n} else {\n  window.alert(\"Vous avez choisi d'annuler.\");\n}\n\n\/\/ Ouvrir une nouvelle fen\u00eatre\nvar newWindow = window.open(\"https:\/\/www.example.com\", \"_blank\", \"width=500, height=500\");\n\n\/\/ Fermer la nouvelle fen\u00eatre\nnewWindow.close();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulation de l\u2019URL avec <code>location<\/code><\/h3>\n\n\n\n<p>L&rsquo;objet <code>location<\/code> permet de manipuler l&rsquo;URL de la page actuelle. Il vous aide par exemple \u00e0 rediriger les utilisateurs vers une autre page ou \u00e0 r\u00e9cup\u00e9rer des informations sp\u00e9cifiques sur l\u2019URL.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Rediriger vers une autre page\nwindow.location.href = \"https:\/\/www.example.com\";\n\n\/\/ Obtenir des informations sur l'URL\nconsole.log(window.location.hostname); \/\/ \"www.example.com\"\nconsole.log(window.location.pathname); \/\/ \"\/path\/to\/page\"\nconsole.log(window.location.search); \/\/ \"?query=123\"\n\n\/\/ Recharger la page\nwindow.location.reload();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Historique de Navigation avec <code>history<\/code><\/h3>\n\n\n\n<p>L&rsquo;objet <code>history<\/code> permet de naviguer dans l&rsquo;historique du navigateur. Vous pouvez, par exemple, revenir en arri\u00e8re ou avancer d&rsquo;une page via les boutons de navigation du navigateur.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Revenir \u00e0 la page pr\u00e9c\u00e9dente\nwindow.history.back();\n\n\/\/ Avancer d'une page\nwindow.history.forward();\n\n\/\/ Aller \u00e0 une position sp\u00e9cifique dans l'historique\nwindow.history.go(-2); \/\/ Recule de deux pages\nwindow.history.go(1); \/\/ Avance d'une page\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Recueillir des Informations avec <code>navigator<\/code><\/h3>\n\n\n\n<p>L&rsquo;objet <code>navigator<\/code> fournit des informations sur le navigateur de l&rsquo;utilisateur, telles que le nom du navigateur, la version et d&rsquo;autres d\u00e9tails. Ceci est particuli\u00e8rement utile pour l\u2019analyse du comportement utilisateur ou pour afficher des messages sp\u00e9cifiques selon le navigateur utilis\u00e9:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Informations sur le navigateur\nconsole.log(navigator.appName); \/\/ Nom de l'application du navigateur\nconsole.log(navigator.appVersion); \/\/ Version de l'application du navigateur\nconsole.log(navigator.userAgent); \/\/ Agent utilisateur du navigateur\n\n\/\/ D\u00e9tecter si le navigateur est en ligne\nif (navigator.onLine) {\n  console.log(\"Vous \u00eates en ligne.\");\n} else {\n  console.log(\"Vous \u00eates hors ligne.\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9tection et R\u00e9action \u00e0 des \u00c9v\u00e9nements avec BOM<\/h3>\n\n\n\n<p>Gr\u00e2ce aux \u00e9v\u00e9nements BOM, vous pouvez r\u00e9agir \u00e0 diff\u00e9rents types d\u2019interactions utilisateur telles que le redimensionnement de la fen\u00eatre, le d\u00e9filement, et plus encore.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9tection du redimensionnement de la fen\u00eatre\nwindow.addEventListener(\"resize\", function() {\n  console.log(\"La fen\u00eatre a \u00e9t\u00e9 redimensionn\u00e9e \u00e0\", window.innerWidth, \"x\", window.innerHeight);\n});\n\n\/\/ D\u00e9tection du d\u00e9filement\nwindow.addEventListener(\"scroll\", function() {\n  console.log(\"Vous avez fait d\u00e9filer la page.\");\n});\n\n\/\/ Pr\u00e9venir l'avant de fermeture de l'onglet\nwindow.addEventListener(\"beforeunload\", function(event) {\n  event.preventDefault(); \/\/ Certains navigateurs n\u00e9cessitent encore ce traitement\n  event.returnValue = \"\"; \/\/ Les navigateurs modernes l'utilisent pour confirmer\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Manipulation du BOM<\/h3>\n\n\n\n<p>Passons \u00e0 des exemples plus avanc\u00e9s pour voir comment la section BOM JavaScript peut \u00eatre utilis\u00e9e pour des interactions plus complexes et utiles dans des sc\u00e9narios r\u00e9els. D\u00e9couvrez aussi plus de fonctionnalit\u00e9s BOM sur <a href=\"https:\/\/wikiform.fr\/codespace\/aborder-section-bom-en-javascript-explications\">Aborder la section BOM en JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/objet-window-dans-le-bom-en-javascript-utilisation\">Objet Window dans le BOM en JavaScript<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des Cookies<\/h4>\n\n\n\n<p>Avec le BOM, vous pouvez facilement g\u00e9rer les cookies dans le navigateur, ce qui est crucial pour la gestion des sessions et des pr\u00e9f\u00e9rences utilisateur. Pour en savoir plus sur les fondamentaux, visitez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">qu&rsquo;est-ce que JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un cookie\ndocument.cookie = \"username=John Doe; expires=Fri, 31 Dec 2021 12:00:00 UTC; path=\/\";\n\n\/\/ Lire un cookie\nvar cookies = document.cookie.split(\"; \");\nfor (var i = 0; i < cookies.length; i++) {\n  var cookie = cookies[i].split(\"=\");\n  console.log(cookie[0] + \": \" + cookie[1]);\n}\n\n\/\/ Supprimer un cookie\ndocument.cookie = \"username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=\/;\";\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion Dynamique des Iframes<\/h4>\n\n\n\n<p>Les iframes peuvent \u00eatre contr\u00f4l\u00e9es pour charge dynamiquement du contenu, modifier la taille ou interagir avec le contenu. Pour une introduction pratique \u00e0 JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/commencer-avec-javascript-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Charger dynamiquement le contenu d'une iframe\nvar iframe = document.createElement(\"iframe\");\niframe.src = \"https:\/\/www.example.com\";\niframe.width = \"100%\";\niframe.height = \"500px\";\ndocument.body.appendChild(iframe);\n\n\/\/ Communication entre la page et l'iframe\niframe.onload = function() {\n  var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;\n  iframeDoc.body.style.backgroundColor = \"lightblue\";\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Application R\u00e9elle du BOM en JavaScript<\/h3>\n\n\n\n<p>Consid\u00e9rons une application r\u00e9elle o\u00f9 la section BOM JavaScript est utilis\u00e9e pour enrichir l'exp\u00e9rience utilisateur. Par exemple, dynamiser une interface de navigation en d\u00e9tectant des mouvements de souris et en affichant du contenu contextuel. Vous pouvez aussi d\u00e9couvrir <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-bom-en-javascript-definition\">Qu'est-ce que le BOM en JavaScript<\/a> pour une meilleure compr\u00e9hension.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>var tooltip = document.createElement(\"div\");\ntooltip.style.position = \"absolute\";\ntooltip.style.backgroundColor = \"#333\";\ntooltip.style.color = \"#fff\";\ntooltip.style.padding = \"5px\";\ntooltip.style.borderRadius = \"5px\";\ntooltip.style.display = \"none\";\ndocument.body.appendChild(tooltip);\n\ndocument.addEventListener(\"mousemove\", function(event) {\n  tooltip.style.left = event.pageX + \"px\";\n  tooltip.style.top = event.pageY + \"px\";\n});\n\ndocument.querySelectorAll(\"a\").forEach(function(link) {\n  link.addEventListener(\"mouseenter\", function() {\n    tooltip.textContent = \"Vous allez visiter : \" + link.href;\n    tooltip.style.display = \"block\";\n  });\n  link.addEventListener(\"mouseleave\", function() {\n    tooltip.style.display = \"none\";\n  });\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La <strong>section BOM en JavaScript<\/strong> offre une palette d'outils puissants pour manipuler et enrichir l'exp\u00e9rience utilisateur sur les navigateurs web. En utilisant <code>window<\/code>, <code>location<\/code>, <code>history<\/code>, et <code>navigator<\/code>, vous pouvez cr\u00e9er des applications web interactives et dynamiques. Continuez \u00e0 explorer ces fonctionnalit\u00e9s pour renforcer vos comp\u00e9tences en d\u00e9veloppement web. Pour plus de tutoriels sur JavaScript et BOM, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-section-bom\/200\">les fonctionnalit\u00e9s avanc\u00e9es BOM<\/a>. Pour une introduction compl\u00e8te \u00e0 JavaScript, d\u00e9couvrez notre <a href=\"https:\/\/wikiform.fr\/codespace\/commencer-avec-javascript-tutoriel\">tutoriel d\u00e9taill\u00e9<\/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```","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html La section BOM en JavaScript est essentielle pour manipuler le navigateur via des scripts. En ma\u00eetrisant le Browser Object Model (BOM), vous aurez la&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2837,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5670","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\/5670","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=5670"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5670\/revisions"}],"predecessor-version":[{"id":5671,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5670\/revisions\/5671"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2837"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}