{"id":5672,"date":"2024-08-29T02:08:18","date_gmt":"2024-08-29T02:08:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-window-dans-le-bom-en-javascript-utilisation\/"},"modified":"2024-08-29T02:08:21","modified_gmt":"2024-08-29T02:08:21","slug":"objet-window-dans-le-bom-en-javascript-utilisation","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-window-dans-le-bom-en-javascript-utilisation\/","title":{"rendered":"11.3 Objet Window dans le BOM en JavaScript : Utilisation"},"content":{"rendered":"\n<p><strong>Les Objet Window JavaScript dans le BOM en JavaScript<\/strong> jouent un r\u00f4le crucial pour la gestion dynamique des interfaces utilisateur dans le navigateur. Comprendre comment manipuler et utiliser l<strong>Objet Window JavaScript dans le BOM<\/strong> peut consid\u00e9rablement am\u00e9liorer l&rsquo;interactivit\u00e9 et les fonctionnalit\u00e9s de vos applications web. D\u00e9couvrons ensemble comment ils fonctionnent et comment les impl\u00e9menter \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Objet Window JavaScript dans le 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\/658889133?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>La fen\u00eatre (ou <em>Window<\/em>) est l&rsquo;interface principale \u00e0 travers laquelle les utilisateurs interagissent avec le navigateur. On peut voir l&rsquo;objet <em>Window<\/em> comme le conteneur global pour les objets du BOM (Browser Object Model). Les propri\u00e9t\u00e9s et m\u00e9thodes de l&rsquo;objet <strong>Window<\/strong> nous permettent de manipuler des aspects du navigateur comme la taille de la fen\u00eatre, les alertes, les timers et bien d&rsquo;autres. Voyons comment naviguer et manipuler cet objet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Naviguer dans l&rsquo;Objet Window<\/h3>\n\n\n\n<p>Commen\u00e7ons par explorer quelques-unes des propri\u00e9t\u00e9s et m\u00e9thodes fondamentales de l&rsquo;objet <em>Window<\/em>. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Obtenir les dimensions de la fen\u00eatre\nconsole.log(`Largeur: ${window.innerWidth}`);\nconsole.log(`Hauteur: ${window.innerHeight}`);\n\n\/\/ Afficher une alerte\nwindow.alert(\"Bienvenue sur notre site web!\");\n\n\/\/ Ouvrir une nouvelle fen\u00eatre\nconst newWindow = window.open(\"https:\/\/example.com\", \"_blank\");\n\n\/\/ Fermer la nouvelle fen\u00eatre apr\u00e8s 5 secondes\nsetTimeout(() => {\n  newWindow.close();\n}, 5000);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Propri\u00e9t\u00e9s de la Fen\u00eatre<\/h3>\n\n\n\n<p>En plus des m\u00e9thodes, l&rsquo;objet <em>Window<\/em> poss\u00e8de des propri\u00e9t\u00e9s tr\u00e8s utiles pour g\u00e9rer l&rsquo;interface utilisateur. Voyons quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Changer le titre de la fen\u00eatre\nwindow.document.title = \"Titre Neuf\";\n\n\/\/ Obtenir l'URL actuelle\nconsole.log(`URL actuelle: ${window.location.href}`);\n\n\/\/ Rediriger vers une autre page\nwindow.location.href = \"https:\/\/www.another-example.com\";\n\n\/\/ Obtenir la hauteur et la largeur de l'\u00e9cran\nconsole.log(`Hauteur de l'\u00e9cran: ${window.screen.height}`);\nconsole.log(`Largeur de l'\u00e9cran: ${window.screen.width}`);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Contr\u00f4ler le Timing avec setTimeout et setInterval<\/h3>\n\n\n\n<p>Deux des m\u00e9thodes les plus puissantes de l&rsquo;objet <em>Window<\/em> sont <code>setTimeout<\/code> et <code>setInterval<\/code>. Elles permettent de contr\u00f4ler l&rsquo;ex\u00e9cution de votre code dans le temps :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ex\u00e9cuter une fonction apr\u00e8s une pause de 3 secondes\nsetTimeout(() => {\n  console.log(\"Ceci est affich\u00e9 apr\u00e8s 3 secondes.\");\n}, 3000);\n\n\/\/ R\u00e9p\u00e9ter une action toutes les 2 secondes\nconst intervalId = setInterval(() => {\n  console.log(\"Cet intervalle est ex\u00e9cut\u00e9 toutes les 2 secondes.\");\n}, 2000);\n\n\/\/ Arr\u00eater l'intervalle apr\u00e8s 10 secondes\nsetTimeout(() => {\n  clearInterval(intervalId);\n}, 10000);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le BOM pour Interagir avec le Contexte de la Fen\u00eatre<\/h3>\n\n\n\n<p>Gr\u00e2ce \u00e0 l&rsquo;objet <em>Window<\/em>, vous pouvez interagir facilement avec le mod\u00e8le d&rsquo;objet du navigateur (BOM), permettant de manipuler les informations contextuelles. Un exemple courant est d&rsquo;utiliser les m\u00e9thodes pour g\u00e9rer les cookies ou les localStorage :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ajouter un cookie\ndocument.cookie = \"nom=John Doe; expires=Fri, 31 Dec 2050 23:59:59 GMT\";\n\n\/\/ Lire un cookie\nconsole.log(`Tous les cookies: ${document.cookie}`);\n\n\/\/ Utiliser localStorage\nwindow.localStorage.setItem(\"user\", \"John Doe\");\nconst user = window.localStorage.getItem(\"user\");\nconsole.log(`Utilisateur stock\u00e9: ${user}`);\n\n\/\/ Supprimer un article de localStorage\nwindow.localStorage.removeItem(\"user\");\n\n\/\/ V\u00e9rifier si l'article est supprim\u00e9\nconsole.log(`Utilisateur apr\u00e8s suppression: ${window.localStorage.getItem(\"user\")}`);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation de l&rsquo;Objet Window<\/h3>\n\n\n\n<p>Pour aller plus loin dans la compr\u00e9hension des capacit\u00e9s de l&rsquo;objet Window, voici quelques exemples avanc\u00e9s qui d\u00e9montrent son potentiel.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9tection de la Fin du Chargement de la Page<\/h4>\n\n\n\n<p>Vous pouvez utiliser l&rsquo;objet Window pour d\u00e9tecter quand une page a compl\u00e8tement fini de se charger et ex\u00e9cuter des actions sp\u00e9cifiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>window.onload = () => {\n  console.log(\"La page est enti\u00e8rement charg\u00e9e.\");\n  \/\/ Actions suppl\u00e9mentaires \u00e0 ex\u00e9cuter apr\u00e8s le chargement\n};\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Manipulation des Dimensions de la Fen\u00eatre<\/h4>\n\n\n\n<p>En HTML5, l&rsquo;objet Window offre des m\u00e9thodes pour manipuler dynamiquement les dimensions de la fen\u00eatre du navigateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Redimensionner la fen\u00eatre \u00e0 800x600\nwindow.resizeTo(800, 600);\n\n\/\/ Afficher les nouvelles dimensions de la fen\u00eatre\nconsole.log(`Nouvelle largeur: ${window.innerWidth}`);\nconsole.log(`Nouvelle hauteur: ${window.innerHeight}`);\n\n\/\/ D\u00e9placer la fen\u00eatre \u00e0 une position donn\u00e9e\nwindow.moveTo(100, 100);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des \u00c9v\u00e9nements de la Fen\u00eatre<\/h4>\n\n\n\n<p>L&rsquo;objet Window vous permet de g\u00e9rer divers \u00e9v\u00e9nements du cycle de vie de la fen\u00eatre, tels que le redimensionnement ou la fermeture :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ajouter un \u00e9couteur pour le redimensionnement de la fen\u00eatre\nwindow.onresize = () => {\n  console.log(\"La fen\u00eatre a \u00e9t\u00e9 redimensionn\u00e9e.\");\n};\n\n\/\/ Ajouter un \u00e9couteur pour la fermeture de la fen\u00eatre\nwindow.onbeforeunload = (event) => {\n  event.returnValue = \"\u00cates-vous s\u00fbr de vouloir quitter ?\";\n  return \"\u00cates-vous s\u00fbr de vouloir quitter ?\";\n};\n<\/code><\/pre>\n\n\n\n<p>Il est important de noter que vous pouvez explorer davantage l&rsquo;objet Window en consultant des ressources comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/Window\" target=\"_blank\" rel=\"dofollow noopener\">MDN Web Docs<\/a>. Apprendre JavaScript de mani\u00e8re progressive en lisant des articles d\u00e9taill\u00e9s sur des sujets tels que <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu\u2019est-ce que JavaScript ? Explications et D\u00e9finition<\/a> ou en ma\u00eetrisant les concepts de base comme <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">Qu\u2019est-ce qu\u2019une variable en JavaScript ?<\/a> est \u00e9galement tr\u00e8s utile. Vous pouvez aussi comprendre comment utiliser le <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-vs-code-pour-javascript\" target=\"_blank\" rel=\"noopener\">fonctionnement de VS Code pour JavaScript<\/a> pour am\u00e9liorer votre flux de travail.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;<strong>Objet Window JavaScript dans le BOM en JavaScript<\/strong> est une technique puissante pour rendre vos applications web plus dynamiques et interactives. En manipulant les propri\u00e9t\u00e9s et m\u00e9thodes des objets du BOM, vous pouvez facilement mettre \u00e0 jour l&rsquo;interface utilisateur, contr\u00f4ler le timing des op\u00e9rations, et g\u00e9rer les \u00e9v\u00e9nements. Continuez \u00e0 explorer le BOM pour ma\u00eetriser davantage l&rsquo;objet Window et d&rsquo;autres fonctionnalit\u00e9s avanc\u00e9es. Pour plus de tutoriels sur le JavaScript, consultez notre article sur <a href=\"https:\/\/your-website.com\/advanced-javascript\" target=\"_blank\" rel=\"noopener\">les fonctionnalit\u00e9s avanc\u00e9es de JavaScript<\/a>. Pour apprendre le JavaScript depuis les bases, lisez notre <a href=\"https:\/\/your-website.com\/learn-javascript\" target=\"_blank\" rel=\"noopener\">guide de d\u00e9marrage d\u00e9taill\u00e9<\/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\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Les Objet Window JavaScript dans le BOM en JavaScript jouent un r\u00f4le crucial pour la gestion dynamique des interfaces utilisateur dans le navigateur. Comprendre comment&#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-5672","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\/5672","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=5672"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5672\/revisions"}],"predecessor-version":[{"id":5673,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5672\/revisions\/5673"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}