{"id":5676,"date":"2024-08-29T02:16:22","date_gmt":"2024-08-29T02:16:22","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-history-dans-le-bom-en-javascript-utilisation\/"},"modified":"2024-08-29T02:16:26","modified_gmt":"2024-08-29T02:16:26","slug":"objet-history-dans-le-bom-en-javascript-utilisation","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-history-dans-le-bom-en-javascript-utilisation\/","title":{"rendered":"11.5 Objet History dans le BOM en JavaScript : Utilisation"},"content":{"rendered":"\n<p><strong>Utiliser l&rsquo;objet History dans le BOM en JavaScript<\/strong> permet de manipuler efficacement l&rsquo;historique de la session du navigateur. Ma\u00eetriser cet objet peut grandement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en facilitant la cr\u00e9ation de transitions fluides entre les \u00e9tats de l&rsquo;application. L&rsquo;objet History en JavaScript offre un contr\u00f4le avanc\u00e9 sur l&rsquo;historique des sessions, ce qui est crucial pour tout d\u00e9veloppeur souhaitant optimiser la navigation web. D\u00e9couvrons comment l&rsquo;utiliser et l&rsquo;impl\u00e9menter \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Objet <strong>History<\/strong> 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\/658889498?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>History<\/code> est une interface qui permet de manipuler l&rsquo;historique de session du navigateur. Elle contient une liste d&rsquo;URL visit\u00e9es, et offre des m\u00e9thodes pour naviguer entre ces URL de mani\u00e8re programm\u00e9e, ajoutant ainsi une dimension de contr\u00f4le \u00e0 votre application web. L&rsquo;utilisation de cet objet permet \u00e9galement de mieux comprendre le <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-bom-en-javascript-definition\" target=\"_blank\" rel=\"noopener\">Browser Object Model (BOM)<\/a>, une composante essentielle pour le d\u00e9veloppement JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler l&rsquo;Historique avec les M\u00e9thodes de l&rsquo;Objet History<\/h3>\n\n\n\n<p>D\u00e9couvrons comment utiliser les principales m\u00e9thodes de l&rsquo;objet <code>History<\/code> : <code>back()<\/code>, <code>forward()<\/code>, et <code>go()<\/code>, qui sont des m\u00e9thodes classiques pour naviguer dans l&rsquo;historique de session.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Naviguer vers la page pr\u00e9c\u00e9dente dans l'historique\nfunction navigateBack() {\n    history.back();\n}\n\n\/\/ Naviguer vers la page suivante dans l'historique\nfunction navigateForward() {\n    history.forward();\n}\n\n\/\/ Naviguer vers une page sp\u00e9cifique dans l'historique\nfunction navigateToEntry(entry) {\n    history.go(entry);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Entr\u00e9es \u00e0 l&rsquo;Historique<\/h3>\n\n\n\n<p>Il est possible d&rsquo;ajouter manuellement des entr\u00e9es dans l&rsquo;historique \u00e0 l&rsquo;aide des m\u00e9thodes <code>pushState()<\/code> et <code>replaceState()<\/code>. Voici comment utiliser ces m\u00e9thodes pour enrichir l\u2019exp\u00e9rience de navigation : <\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Ajouter une nouvelle entr\u00e9e \u00e0 l'historique\nfunction addNewEntry(stateObj, title, url) {\n    history.pushState(stateObj, title, url);\n}\n\n\/\/ Remplacer l'entr\u00e9e actuelle dans l'historique\nfunction replaceCurrentEntry(stateObj, title, url) {\n    history.replaceState(stateObj, title, url);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9agir aux Changements de l&rsquo;Historique<\/h3>\n\n\n\n<p>Pour r\u00e9agir aux changements de l&rsquo;historique, vous pouvez surveiller l&rsquo;\u00e9v\u00e9nement <code>popstate<\/code>. Cet \u00e9v\u00e9nement est d\u00e9clench\u00e9 chaque fois que l&rsquo;utilisateur navigue dans l&rsquo;historique de la session.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ \u00c9couter l'\u00e9v\u00e9nement popstate\nwindow.addEventListener('popstate', function(event) {\n    console.log('La location a chang\u00e9 : ', document.location, ', l'\u00e9tat actuel : ', event.state);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser l&rsquo;Objet History pour l&rsquo;Encapsulation des \u00c9tats de l&rsquo;Application<\/h3>\n\n\n\n<p>En encapsulant les \u00e9tats de votre application avec <code>pushState()<\/code> et <code>replaceState()<\/code>, il est possible de g\u00e9rer des transitions complexes et de maintenir une navigation fluide. Par exemple, pour une application de type SPA (Single Page Application) :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Fonction pour changer de vue\nfunction changeView(view, stateObj = {}) {\n    \/\/ Mettre \u00e0 jour l'URL et l'\u00e9tat\n    history.pushState(stateObj, '', view);\n\n    \/\/ Logique pour afficher la nouvelle vue\n    document.getElementById('main-content').innerHTML = getContentForView(view);\n}\n\n\/\/ Fonction pour obtenir la vue correspondante\nfunction getContentForView(view) {\n    switch(view) {\n        case '\/home':\n            return '<h1>Accueil<\/h1>';\n        case '\/about':\n            return '<h1>\u00c0 Propos<\/h1>';\n        default:\n            return '<h1>Page Non Trouv\u00e9e<\/h1>';\n    }\n}\n\n\/\/ Gestion des \u00e9v\u00e9nements popstate\nwindow.addEventListener('popstate', function(event) {\n    \/\/ Mettre \u00e0 jour la vue en fonction de la nouvelle URL\n    document.getElementById('main-content').innerHTML = getContentForView(document.location.pathname);\n});\n\n\/\/ Initialiser la vue\ndocument.getElementById('main-content').innerHTML = getContentForView(document.location.pathname);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s : Histoire et Navigation RESTful<\/h3>\n\n\n\n<p>Prenons un cas plus avanc\u00e9 o\u00f9 nous utilisons l&rsquo;objet History pour une navigation RESTful dans une SPA. Imaginez un gestionnaire d&rsquo;articles o\u00f9 chaque article dispose de son URI unique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Fonction pour afficher un article en utilisant l'ID\nfunction showArticle(articleId) {\n    \/\/ Mise \u00e0 jour de l'URL et de l'\u00e9tat\n    history.pushState({ articleId: articleId }, '', '\/article\/' + articleId);\n\n    \/\/ Logique pour afficher l'article\n    fetchArticleContent(articleId);\n}\n\n\/\/ Fonction pour r\u00e9cup\u00e9rer le contenu de l'article\nfunction fetchArticleContent(articleId) {\n    \/\/ Exemple de r\u00e9cup\u00e9ration d'article (simul\u00e9)\n    document.getElementById('main-content').innerHTML = '<h1>Article ' + articleId + '<\/h1><p>Contenu de l\\'article...<\/p>';\n}\n\n\/\/ Gestion des \u00e9v\u00e9nements popstate pour les articles\nwindow.addEventListener('popstate', function(event) {\n    \/\/ V\u00e9rifier si l'\u00e9tat contient un articleId\n    if (event.state && event.state.articleId) {\n        fetchArticleContent(event.state.articleId);\n    }\n});\n\n\/\/ Initialiser la vue (cas o\u00f9 URL est acc\u00e9d\u00e9e directement)\nfunction initializeView() {\n    const path = document.location.pathname;\n    const articleId = path.match(\/\\\/article\\\/(\\d+)\/);\n    if (articleId) {\n        fetchArticleContent(articleId[1]);\n    } else {\n        document.getElementById('main-content').innerHTML = '<h1>Accueil<\/h1>';\n    }\n}\n\ninitializeView();\n<\/code><\/pre>\n\n\n\n<p>Pour une compr\u00e9hension plus approfondie de l&rsquo;objet History et de ses applications, des ressources externes comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/History\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> offrent des informations compl\u00e8tes. Vous pouvez \u00e9galement suivre des formations en ligne sur des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> ou <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> pour une immersion totale. Vous pouvez approfondir vos connaissances JavaScript en consultant d&rsquo;autres articles comme <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que JavaScript ? Explications et D\u00e9finition<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">Meilleurs Outils pour JavaScript<\/a>, ou encore <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">Guide Complet des Extensions pour JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;objet <strong>History<\/strong> en JavaScript est un outil puissant pour g\u00e9rer les transitions et la navigation de votre application Web. Il vous permet d&rsquo;enrichir l&rsquo;exp\u00e9rience utilisateur en offrant un contr\u00f4le pr\u00e9cis sur l&rsquo;historique de session. En utilisant des m\u00e9thodes comme <code>pushState()<\/code> et <code>replaceState()<\/code>, combin\u00e9es avec l&rsquo;\u00e9coute de l&rsquo;\u00e9v\u00e9nement <code>popstate<\/code>, vous pouvez cr\u00e9er des interfaces utilisateur interactives et dynamiques. Pour aller plus loin, explorez d&rsquo;autres articles sur JavaScript et les techniques de d\u00e9veloppement avanc\u00e9es sur notre <a href=\"https:\/\/wikiform.fr\/blog\" target=\"_blank\" rel=\"noopener\">blog<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-javascript\/144\" 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","protected":false},"excerpt":{"rendered":"<p>Utiliser l&rsquo;objet History dans le BOM en JavaScript permet de manipuler efficacement l&rsquo;historique de la session du navigateur. Ma\u00eetriser cet objet peut grandement am\u00e9liorer l&rsquo;exp\u00e9rience&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2892,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5676","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\/5676","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=5676"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5676\/revisions"}],"predecessor-version":[{"id":5677,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5676\/revisions\/5677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2892"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}