{"id":5678,"date":"2024-08-29T02:20:44","date_gmt":"2024-08-29T02:20:44","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-location-dans-le-bom-en-javascript-guide\/"},"modified":"2024-08-29T02:20:47","modified_gmt":"2024-08-29T02:20:47","slug":"objet-location-dans-le-bom-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-location-dans-le-bom-en-javascript-guide\/","title":{"rendered":"11.6 Objet Location dans le BOM en JavaScript : Guide"},"content":{"rendered":"\n<p><strong>Les objets Location dans le BOM<\/strong> (Browser Object Model) jouent un r\u00f4le crucial pour interagir avec les URL des navigateurs en JavaScript. Comprendre comment manipuler l&rsquo;objet <strong>Location<\/strong> peut consid\u00e9rablement am\u00e9liorer la gestion de la navigation et la manipulation des URL dans vos applications web. Apprenons comment il fonctionne et comment l\u2019utiliser gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Objet <strong>Location<\/strong> dans le BOM<\/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\/658889586?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>L&rsquo;objet <code>Location<\/code> en JavaScript est utilis\u00e9 pour acc\u00e9der aux informations concernant l&rsquo;URL du document actuel et pour naviguer vers diff\u00e9rentes URL. Nous explorerons ici les principales propri\u00e9t\u00e9s et m\u00e9thodes de <code>window.location<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Propri\u00e9t\u00e9s de l&rsquo;Objet <code>Location<\/code><\/h3>\n\n\n\n<p>L&rsquo;objet <code>window.location<\/code> comporte plusieurs propri\u00e9t\u00e9s permettant d&rsquo;acc\u00e9der \u00e0 des composants sp\u00e9cifiques de l&rsquo;URL :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>console.log(window.location.href); \/\/ L'URL compl\u00e8te\nconsole.log(window.location.protocol); \/\/ Le protocole (http:, https:)\nconsole.log(window.location.host); \/\/ Le nom de domaine (www.example.com)\nconsole.log(window.location.pathname); \/\/ Le chemin (path) (\/comme\/this\/)\nconsole.log(window.location.search); \/\/ Les param\u00e8tres de requ\u00eate (?name=value)\nconsole.log(window.location.hash); \/\/ Le hash (#section)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rediriger avec <code>Location<\/code><\/h3>\n\n\n\n<p>Vous pouvez rediriger l&rsquo;utilisateur vers une autre URL en utilisant la propri\u00e9t\u00e9 <code>href<\/code> ou la m\u00e9thode <code>assign<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Redirection vers une nouvelle URL\nwindow.location.href = 'https:\/\/www.example.com';\n\n\/\/ Redirection avec la m\u00e9thode assign()\nwindow.location.assign('https:\/\/www.example.com');\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rafra\u00eechir la Page<\/h3>\n\n\n\n<p>Vous pouvez recharger la page actuelle en utilisant la m\u00e9thode <code>reload<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Recharger la page actuelle\nwindow.location.reload();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier des Parties de l&rsquo;URL<\/h3>\n\n\n\n<p>Il est possible de modifier des parties de l&rsquo;URL en utilisant des propri\u00e9t\u00e9s sp\u00e9cifiques de l&rsquo;objet <code>Location<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Changer le hash de l'URL\nwindow.location.hash = '#newSection';\n\n\/\/ Ajouter des param\u00e8tres de requ\u00eate\nwindow.location.search = '?name=value';\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Remplacer l&rsquo;URL Actuelle<\/h3>\n\n\n\n<p>Pour remplacer l&rsquo;URL actuelle sans ajouter une entr\u00e9e dans l&rsquo;historique du navigateur, utilisez la m\u00e9thode <code>replace<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Remplacer l'URL actuelle\nwindow.location.replace('https:\/\/www.new-url.com');\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Utiliser <code>Location<\/code> dans une Application Web R\u00e9elle<\/h2>\n\n\n\n<p>Pour mieux comprendre l&rsquo;application pratique de l&rsquo;objet <code>Location<\/code>, consid\u00e9rons un exemple o\u00f9 nous utilisons diff\u00e9rentes propri\u00e9t\u00e9s et m\u00e9thodes pour manipuler l&rsquo;URL et am\u00e9liorer la navigation dans une application web.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Exemple d'application web utilisant l'objet Location\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Afficher l'URL compl\u00e8te de la page\n    document.getElementById('url-display').textContent = window.location.href;\n\n    \/\/ Bouton pour changer le hash\n    document.getElementById('change-hash').addEventListener('click', function() {\n        window.location.hash = '#changedHash';\n    });\n\n    \/\/ Bouton pour ajouter des param\u00e8tres de requ\u00eate\n    document.getElementById('add-query').addEventListener('click', function() {\n        window.location.search = '?newParam=newValue';\n    });\n\n    \/\/ Bouton pour recharger la page\n    document.getElementById('reload-page').addEventListener('click', function() {\n        window.location.reload();\n    });\n\n    \/\/ Bouton pour rediriger\n    document.getElementById('redirect-page').addEventListener('click', function() {\n        window.location.href = 'https:\/\/www.different-url.com';\n    });\n\n    \/\/ Bouton pour remplacer l'URL actuelle\n    document.getElementById('replace-url').addEventListener('click', function() {\n        window.location.replace('https:\/\/www.new-url.com');\n    });\n});\n<\/code><\/pre>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n    <title>Location Object Example<\/title>\n<\/head>\n<body>\n    <h1>Exemple d&rsquo;Utilisation de l&rsquo;Objet Location<\/h1>\n    <p id=\"url-display\"><\/p>\n    <button id=\"change-hash\">Changer le Hash<\/button>\n    <button id=\"add-query\">Ajouter des Param\u00e8tres de Requ\u00eate<\/button>\n    <button id=\"reload-page\">Recharger la Page<\/button>\n    <button id=\"redirect-page\">Rediriger<\/button>\n    <button id=\"replace-url\">Remplacer l&rsquo;URL<\/button>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>objets Location du BOM<\/strong> repr\u00e9sentent un composant essentiel pour la manipulation des URL dans les applications JavaScript. Gr\u00e2ce aux diverses propri\u00e9t\u00e9s et m\u00e9thodes de l&rsquo;objet <code>Location<\/code>, vous pouvez contr\u00f4ler la navigation, modifier des parties de l&rsquo;URL et recharger des pages pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Continuez \u00e0 explorer les fonctionnalit\u00e9s de l&rsquo;objet <code>Location<\/code> pour ma\u00eetriser davantage la gestion des URLs dans vos projets JavaScript.<\/p>\n\n\n\n<p>Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Pour apprendre comment int\u00e9grer des fonctionnalit\u00e9s avanc\u00e9es dans vos applications web, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/int\u00e9grer-fonctionnalit\u00e9s-avanc\u00e9es-avec-javascript-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-javascript\/150\" 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\n<h2 class=\"wp-block-heading\">Propri\u00e9t\u00e9s Avanc\u00e9es de l&rsquo;Objet Location JavaScript<\/h2>\n\n\n\n<p>Pour continuer notre exploration de l&rsquo;objet Location JavaScript, il est crucial de comprendre les propri\u00e9t\u00e9s avanc\u00e9es qui offrent des options suppl\u00e9mentaires pour manipuler et interagir avec les URLs. Parmi ces propri\u00e9t\u00e9s, l&rsquo;une des plus importantes est <code>origin<\/code>, qui renvoie la partie de l&rsquo;URL quelque soit son type (http, https, file, etc.), sans inclure le chemin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9composer l&rsquo;URL avec l&rsquo;Objet Location<\/h3>\n\n\n\n<p>Gr\u00e2ce aux diff\u00e9rentes propri\u00e9t\u00e9s de l&rsquo;objet Location, il est possible de d\u00e9composer n&rsquo;importe quelle URL de mani\u00e8re structur\u00e9e. Cela permet de mieux comprendre l&rsquo;architecture des URLs et de manipuler chaque partie de mani\u00e8re ind\u00e9pendante.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Exemple de d\u00e9composition d'URL\nfunction decomposeURL() {\n    console.log(\"Origin: \" + window.location.origin);\n    console.log(\"Pathname: \" + window.location.pathname);\n    console.log(\"Search: \" + window.location.search);\n    console.log(\"Hash: \" + window.location.hash);\n}\n\ndecomposeURL();\n<\/code><\/pre>\n\n\n\n<p>Comme nous l&rsquo;avons vu dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-bom-en-javascript-definition\">article pr\u00e9c\u00e9dent sur le BOM<\/a>, savoir d\u00e9composer les URLs est essentiel pour de nombreuses applications, que ce soit pour s\u00e9curiser des pages, personnaliser des sessions utilisateur, ou analyser les navigations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Manipulations Complexes avec l&rsquo;Objet Location JavaScript<\/h2>\n\n\n\n<p>Outre les propri\u00e9t\u00e9s de base, l&rsquo;objet Location offre \u00e9galement des m\u00e9thodes pour effectuer des manipulations complexes. Par exemple, la m\u00e9thode <code>replaceState<\/code> permet de modifier l&rsquo;URL affich\u00e9e par le navigateur sans recharger la page ni ajouter une entr\u00e9e \u00e0 l&rsquo;historique du navigateur.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Exemple de rempla\u00e7ement d'\u00e9tat sans rechargement\nwindow.history.replaceState(null, null, \"\/nouvelle-url\");\n<\/code><\/pre>\n\n\n\n<p>Ce type de manipulation est souvent utilis\u00e9 dans des applications SPA (Single Page Applications) pour mettre \u00e0 jour l&rsquo;URL \u00e0 mesure que l&rsquo;utilisateur navigue dans l&rsquo;application, sans effectuer de requ\u00eates serveur suppl\u00e9mentaires. Pour en savoir plus sur le sujet, see our detailed guide on <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-dom-en-javascript-explications\">manipuler le DOM en JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Autres Applications Pratiques<\/h2>\n\n\n\n<p>Dans la pratique, l&rsquo;objet Location du BOM peut \u00eatre utilis\u00e9 pour :<\/p>\n<ul>\n  <li><strong>Analyser et rediriger les visites :<\/strong> Utiliser des r\u00e8gles pour rediriger les utilisateurs en fonction de leur URL actuelle.<\/li>\n  <li><strong>Changer dynamiquement les URLs :<\/strong> Utiliser des scripts pour mettre \u00e0 jour les param\u00e8tres de requ\u00eate en fonction des actions utilisateur.<\/li>\n  <li><strong>Cr\u00e9er des points d&rsquo;acc\u00e8s directs :<\/strong> G\u00e9n\u00e9rer des URLs directement utilisables pour des sections sp\u00e9cifiques d&rsquo;un projet.<\/li>\n<\/ul>\n\n<p>Pour plus de d\u00e9tails sur ces applications, vous pouvez consulter notre dossier complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-interessantes-pour-le-dom-en-javascript\">les fonctions du DOM en JavaScript<\/a>.<\/p>\n\n\n\n\n<h2 class=\"wp-block-heading\">Bonnes Pratiques et S\u00e9","protected":false},"excerpt":{"rendered":"<p>Les objets Location dans le BOM (Browser Object Model) jouent un r\u00f4le crucial pour interagir avec les URL des navigateurs en JavaScript. Comprendre comment manipuler&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2893,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5678","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\/5678","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=5678"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5678\/revisions"}],"predecessor-version":[{"id":5679,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5678\/revisions\/5679"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2893"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}