{"id":5668,"date":"2024-08-29T02:00:28","date_gmt":"2024-08-29T02:00:28","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-bom-en-javascript-definition\/"},"modified":"2024-08-29T02:00:31","modified_gmt":"2024-08-29T02:00:31","slug":"qu-est-ce-que-le-bom-en-javascript-definition","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-bom-en-javascript-definition\/","title":{"rendered":"11.1 Qu&rsquo;est-ce que le BOM en JavaScript ? D\u00e9finition"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Qu&rsquo;est-ce que le BOM en JavaScript ?<\/strong> Le BOM, ou <strong>Browser Object Model<\/strong>, est une interface fournie par les navigateurs web permettant d&rsquo;interagir avec le navigateur lui-m\u00eame au-del\u00e0 du contenu de la page HTML. Avec le BOM JavaScript, vous pouvez manipuler les fen\u00eatres du navigateur, acc\u00e9der aux informations de performance, et bien plus encore. Explorons en d\u00e9tail ce qu&rsquo;est le BOM, comment il fonctionne et comment l&rsquo;utiliser pour am\u00e9liorer vos applications web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Browser Object Model<\/strong> (BOM) 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\/658888878?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 JavaScript est un ensemble de propri\u00e9t\u00e9s et de m\u00e9thodes permettant de manipuler l&rsquo;environnement du navigateur. Contrairement au DOM (Document Object Model), qui traite uniquement du contenu de la page, le BOM inclut des objets comme <code>window<\/code>, <code>navigator<\/code>, <code>location<\/code>, et <code>history<\/code>, qui repr\u00e9sentent des aspects globaux du navigateur JavaScript en cours d&rsquo;ex\u00e9cution.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Objets Principaux du BOM en JavaScript<\/h3>\n\n\n\n<p>Les objets principaux qui composent le BOM incluent :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>window<\/code><\/strong> : L&rsquo;objet global repr\u00e9sentant la fen\u00eatre du navigateur. Toutes les autres propri\u00e9t\u00e9s et objets du BOM sont accessibles \u00e0 partir de <code>window<\/code>.<\/li>\n<li><strong><code>navigator<\/code><\/strong> : Contient des informations sur le navigateur lui-m\u00eame (nom, version, etc.).<\/li>\n<li><strong><code>location<\/code><\/strong> : Fournit les informations sur le URL de la page actuelle et permet de rediriger le navigateur vers une nouvelle URL.<\/li>\n<li><strong><code>history<\/code><\/strong> : Permet d&rsquo;acc\u00e9der \u00e0 l&rsquo;historique de navigation et de manipuler celui-ci (aller en arri\u00e8re, en avant, etc.).<\/li>\n<li><strong><code>screen<\/code><\/strong> : Contient des informations sur la r\u00e9solution de l&rsquo;\u00e9cran du client.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler l&rsquo;Objet <code>Window<\/code> en JavaScript<\/h3>\n\n\n\n<p>L&rsquo;objet <code>window<\/code> est le principal objet du BOM. Voici quelques exemples de manipulations possibles avec cet objet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ouvrir une nouvelle fen\u00eatre de navigateur\nvar newWindow = window.open('https:\/\/www.example.com', '_blank');\n\n\/\/ Fermer la fen\u00eatre actuelle\nwindow.close();\n\n\/\/ Afficher une alerte modale\nwindow.alert('Bonjour, monde!');\n\n\/\/ D\u00e9finir un temporisateur\nwindow.setTimeout(function(){\n    console.log('2 secondes \u00e9coul\u00e9es');\n}, 2000);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser l&rsquo;Objet <code>Location<\/code> en JavaScript<\/h3>\n\n\n\n<p>L&rsquo;objet <code>location<\/code> est utilis\u00e9 pour obtenir des informations sur l&rsquo;URL actuelle de la page, ainsi que pour rediriger le navigateur vers une nouvelle adresse. Voici quelques exemples d&rsquo;utilisation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Obtenir l'URL actuelle\nconsole.log(window.location.href);\n\n\/\/ Rediriger vers une nouvelle URL\nwindow.location.href = 'https:\/\/www.new-url.com';\n\n\/\/ Obtenir le domaine de l'URL\nconsole.log(window.location.hostname);\n\n\/\/ Obtenir le chemin de l'URL\nconsole.log(window.location.pathname);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux Informations de l&rsquo;Objet <code>Navigator<\/code> en JavaScript<\/h3>\n\n\n\n<p>L&rsquo;objet <code>navigator<\/code> fournit des informations sur le navigateur utilis\u00e9 par l&rsquo;utilisateur. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Nom du navigateur\nconsole.log(navigator.appName);\n\n\/\/ Version du navigateur\nconsole.log(navigator.appVersion);\n\n\/\/ Langue du navigateur\nconsole.log(navigator.language);\n\n\/\/ Cookies activ\u00e9s ?\nconsole.log(navigator.cookieEnabled);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler l&rsquo;Historique avec <code>History<\/code> en JavaScript<\/h3>\n\n\n\n<p>L&rsquo;objet <code>history<\/code> permet de naviguer dans l&rsquo;historique du navigateur. Quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Aller \u00e0 la page pr\u00e9c\u00e9dente dans l'historique\nwindow.history.back();\n\n\/\/ Aller \u00e0 la page suivante dans l'historique\nwindow.history.forward();\n\n\/\/ Aller \u00e0 une page sp\u00e9cifique dans l'historique (-1 \u00e9quivaut \u00e0 back())\nwindow.history.go(-1);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Travailler avec l&rsquo;Objet <code>Screen<\/code> en JavaScript<\/h3>\n\n\n\n<p>L&rsquo;objet <code>screen<\/code> fournit des informations sur les dimensions de l&rsquo;\u00e9cran de l&rsquo;utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Largeur totale de l'\u00e9cran\nconsole.log(screen.width);\n\n\/\/ Hauteur totale de l'\u00e9cran\nconsole.log(screen.height);\n\n\/\/ Largeur de la zone d'affichage disponible (sans la barre des t\u00e2ches par exemple)\nconsole.log(screen.availWidth);\n\n\/\/ Hauteur de la zone d'affichage disponible\nconsole.log(screen.availHeight);\n<\/code><\/pre>\n\n\n\n<p>Si le BOM est souvent utilis\u00e9 pour des manipulations basiques du navigateur, il peut \u00e9galement permettre des interactions plus complexes et dynamiques avec le contexte de navigation de l&rsquo;utilisateur. Par exemple, vous pouvez manipuler le <code>DOM<\/code> de mani\u00e8re \u00e0 am\u00e9liorer les performances de votre application web, ou utiliser le BOM pour acc\u00e9der aux APIs sp\u00e9ciales du navigateur, telles que les <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/Window\/localStorage\" target=\"_blank\" rel=\"noopener\">Local Storage<\/a> pour un stockage persistant des donn\u00e9es c\u00f4t\u00e9 client.<\/p>\n\n\n\n<p>Pour une compr\u00e9hension approfondie du BOM et de ses applications, il est conseill\u00e9 d&rsquo;\u00e9tudier les nuances des diff\u00e9rents objets mentionn\u00e9s dans le <a href=\"https:\/\/wikiform.fr\/codespace\/objet-window-dans-le-bom-en-javascript-utilisation\" target=\"_self\" rel=\"noopener\">BOM JavaScript<\/a>. Comprendre la diff\u00e9rence entre le BOM et d&rsquo;autres mod\u00e8les comme le <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-dom-en-javascript-explications\" target=\"_self\" rel=\"noopener\">DOM<\/a> est \u00e9galement crucial pour toute application avanc\u00e9e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur le BOM JavaScript<\/h2>\n\n\n\n<p>Le <strong>Browser Object Model<\/strong> en JavaScript est une fonctionnalit\u00e9 indispensable pour tout d\u00e9veloppeur web souhaitant manipuler l&rsquo;environnement du navigateur utilisateur. En comprenant comment utiliser les objets <code>window<\/code>, <code>location<\/code>, <code>navigator<\/code>, <code>history<\/code>, et <code>screen<\/code>, vous pouvez cr\u00e9er des applications web plus dynamiques et interactives. Pour approfondir vos connaissances, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">cours complet sur les fondamentaux de JavaScript<\/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\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Qu&rsquo;est-ce que le BOM en JavaScript ? Le BOM, ou Browser Object Model, est une interface fournie par les navigateurs web permettant d&rsquo;interagir avec&#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":[9],"tags":[18],"class_list":["post-5668","post","type-post","status-publish","format-standard","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\/5668","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=5668"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5668\/revisions"}],"predecessor-version":[{"id":5669,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5668\/revisions\/5669"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}