{"id":5674,"date":"2024-08-29T02:12:29","date_gmt":"2024-08-29T02:12:29","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-navigator-dans-le-bom-en-javascript-guide\/"},"modified":"2025-01-09T16:23:40","modified_gmt":"2025-01-09T16:23:40","slug":"objet-navigator-dans-le-bom-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-navigator-dans-le-bom-en-javascript-guide\/","title":{"rendered":"11.4 Objet Navigator dans le BOM en JavaScript : Guide"},"content":{"rendered":"\n\n\n<p><strong>Les objets Navigator dans le BOM en JavaScript<\/strong> jouent un r\u00f4le essentiel pour interagir avec les informations du navigateur utilisateur. Conna\u00eetre ces objets et comment les exploiter peut enrichir ce que votre application ou votre site web peut faire. Immergeons-nous dans les subtilit\u00e9s de l&rsquo;objet `navigator` avec des exemples de code pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;<strong>Objet Navigator 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\/658889322?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 `navigator` en JavaScript fournit des informations sp\u00e9cifiques sur le navigateur de l&rsquo;utilisateur et offre des moyens d&rsquo;interagir avec diverses fonctionnalit\u00e9s du navigateur. De la d\u00e9tection du type de navigateur \u00e0 la gestion des permissions et des cookies, `navigator` est un atout puissant pour les d\u00e9veloppeurs web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux Informations de Base avec Navigator<\/h3>\n\n\n\n<p>Commen\u00e7ons par acc\u00e9der aux informations de base du navigateur telles que le nom, la version et la plateforme. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log('Nom du navigateur:', navigator.appName);\nconsole.log('Version du navigateur:', navigator.appVersion);\nconsole.log('Plateforme:', navigator.platform);\nconsole.log('Langue:', navigator.language);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Capacit\u00e9s du Navigateur<\/h3>\n\n\n\n<p>L&rsquo;objet `navigator` permet \u00e9galement de v\u00e9rifier les capacit\u00e9s du navigateur. Par exemple, vous pouvez v\u00e9rifier si les cookies sont activ\u00e9s, si Java est support\u00e9, ou si le navigateur supporte les notifications. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log('Cookies activ\u00e9s:', navigator.cookieEnabled);\nconsole.log('Java activ\u00e9:', navigator.javaEnabled());\nconsole.log('Supporte les notifications:', 'Notification' in window);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9olocalisation avec Navigator<\/h3>\n\n\n\n<p>Une des fonctionnalit\u00e9s puissantes de l&rsquo;objet `navigator` est la g\u00e9olocalisation. Vous pouvez obtenir les coordonn\u00e9es g\u00e9ographiques de l&rsquo;utilisateur (en cas de consentement) en utilisant l&rsquo;objet `geolocation`. Voici comment utiliser cette fonctionnalit\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>if (navigator.geolocation) {\n    navigator.geolocation.getCurrentPosition(\n        (position) =&gt; {\n            console.log('Latitude:', position.coords.latitude);\n            console.log('Longitude:', position.coords.longitude);\n        },\n        (error) =&gt; {\n            console.error('Erreur lors de la g\u00e9olocalisation:', error);\n        }\n    );\n} else {\n    console.log('G\u00e9olocalisation non support\u00e9e par ce navigateur.');\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Clipboard API avec Navigator<\/h3>\n\n\n\n<p>L&rsquo;objet `navigator` permet \u00e9galement de travailler avec le Clipboard API, ce qui facilite la copie et le collage de texte. Par exemple, vous pouvez copier un texte directement en utilisant cette m\u00e9thode :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>navigator.clipboard.writeText('Texte \u00e0 copier').then(() =&gt; {\n    console.log('Texte copi\u00e9 dans le presse-papiers.');\n}).catch(err =&gt; {\n    console.error('Erreur de copie:', err);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9tection de Connexion avec Navigator<\/h3>\n\n\n\n<p>Il est possible de d\u00e9tecter l&rsquo;\u00e9tat de la connexion r\u00e9seau de l&rsquo;utilisateur en utilisant `navigator.onLine`. Vous pouvez \u00e9galement \u00e9couter les \u00e9v\u00e9nements de connexion et de d\u00e9connexion :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>window.addEventListener('online', () =&gt; console.log('Vous \u00eates en ligne.'));\nwindow.addEventListener('offline', () =&gt; console.log('Vous \u00eates hors ligne.'));\n\nconsole.log('\u00c9tat de la connexion:', navigator.onLine ? 'En ligne' : 'Hors ligne');\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser Navigator pour les Permissions API<\/h3>\n\n\n\n<p>En tant que d\u00e9veloppeurs web modernes, nous pouvons demander l&rsquo;autorisation pour divers API via les Permissions API expos\u00e9es par l&rsquo;objet `navigator`. Voici comment interagir avec ces permissions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>navigator.permissions.query({ name: 'geolocation' }).then((result) =&gt; {\n    if (result.state === 'granted') {\n        console.log('Permission de g\u00e9olocalisation accord\u00e9e.');\n    } else if (result.state === 'prompt') {\n        console.log('Permission de g\u00e9olocalisation en attente.');\n    } else {\n        console.log('Permission de g\u00e9olocalisation refus\u00e9e.');\n    }\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Informations de l&rsquo;Agent Utilisateur<\/h3>\n\n\n\n<p>Le `userAgent` fournit une cha\u00eene descriptive du navigateur et du syst\u00e8me d&rsquo;exploitation. Vous pouvez utiliser cette cha\u00eene pour adapter sp\u00e9cifiquement votre application web :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log('User Agent:', navigator.userAgent);\n\nif (\/mobile\/i.test(navigator.userAgent)) {\n    console.log('Utilisateur utilise un appareil mobile.');\n} else {\n    console.log('Utilisateur utilise un appareil de bureau.');\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Synchronisation de Donn\u00e9es via Navigator.sendBeacon()<\/h3>\n\n\n\n<p>La m\u00e9thode `sendBeacon()` est une fonctionnalit\u00e9 utile pour envoyer des donn\u00e9es au serveur de mani\u00e8re asynchrone lorsque la page se ferme ou se d\u00e9charge. Cela est particuli\u00e8rement utile pour le suivi ou la journalisation des donn\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>window.addEventListener('unload', function() {\n    navigator.sendBeacon('\/log', JSON.stringify({ event: 'pageunload', timestamp: Date.now() }));\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Permissions de Notification avec la M\u00e9thode requestPermission()<\/h3>\n\n\n\n<p>La m\u00e9thode `requestPermission()` de l&rsquo;API des notifications permet de demander \u00e0 l&rsquo;utilisateur de permettre ou refuser les notifications pour votre site. C&rsquo;est essentiel pour am\u00e9liorer l&rsquo;interaction utilisateur, surtout si vous pr\u00e9voyez d&rsquo;impl\u00e9menter des notifications push :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>if (\"Notification\" in window) {\n  Notification.requestPermission().then((permission) =&gt; {\n    if (permission === \"granted\") {\n      console.log(\"Permission de notification accord\u00e9e.\");\n    } else if (permission === \"denied\") {\n      console.log(\"Permission de notification refus\u00e9e.\");\n    }\n  }).catch(err =&gt; {\n    console.error(\"Erreur lors de la demande de permission:\", err);\n  });\n} else {\n  console.log(\"Les notifications ne sont pas support\u00e9es par ce navigateur.\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Identifiants de P\u00e9riph\u00e9rique avec Navigator<\/h3>\n\n\n\n<p>L&rsquo;objet `navigator` permet \u00e9galement l&rsquo;acc\u00e8s \u00e0 des informations sur les p\u00e9riph\u00e9riques, telles que l&rsquo;orientation et les mouvements \u00e0 l&rsquo;aide des capteurs disponibles sur l&rsquo;appareil. Voici un exemple d&rsquo;utilisation des \u00e9v\u00e9nements de l&rsquo;acc\u00e9l\u00e9rom\u00e8tre :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>window.addEventListener('devicemotion', (event) =&gt; {\n  console.log('Acc\u00e9l\u00e9ration:', event.acceleration);\n  console.log('Rotation:', event.rotationRate);\n}, true);\n<\/code><\/pre>\n\n\n\n<p>En poursuivant votre exploration de l&rsquo;objet `navigator` et de ses fonctionnalit\u00e9s, vous pouvez consulter des ressources suppl\u00e9mentaires pour approfondir votre compr\u00e9hension. Par exemple, le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> propose des articles d\u00e9taill\u00e9s et des r\u00e9f\u00e9rences d&rsquo;API exhaustives concernant l&rsquo;objet `navigator` en JavaScript. Vous pouvez \u00e9galement suivre des cours en ligne sur des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> pour un apprentissage structur\u00e9. Si vous cherchez \u00e0 approfondir vos comp\u00e9tences en JavaScript, explorez notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">d\u00e9finition et les explications de JavaScript<\/a>.<\/p>\n\n\n\n<p>Pour les d\u00e9butants en JavaScript, apprendre comment et o\u00f9 <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">placer du code JavaScript<\/a> est crucial pour d\u00e9velopper des applications web efficaces. Aussi, savoir comment <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\" target=\"_blank\" rel=\"noopener\">afficher une information en JavaScript<\/a> peut grandement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en rendant votre site web plus interactif.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;objet <strong>Navigator JavaScript<\/strong> en JavaScript ouvre une multitude de possibilit\u00e9s pour interagir de mani\u00e8re plus authentique et adaptative avec les utilisateurs de vos applications web. De la gestion des permissions \u00e0 la g\u00e9olocalisation, les fonctionnalit\u00e9s de `navigator` peuvent enrichir l&rsquo;exp\u00e9rience utilisateur et renforcer les capacit\u00e9s techniques de vos projets web. Continuez \u00e0 explorer et \u00e0 exp\u00e9rimenter pour ma\u00eetriser pleinement les avantages fournis par cet objet puissant. Pour davantage de ressources et de tutoriels, consultez les articles sur <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\" target=\"_blank\" rel=\"noopener\">MDN Web Docs sur Navigator<\/a>. Pour une formation approfondie, visitez notre page sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">Learnify<\/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\n","protected":false},"excerpt":{"rendered":"<p>Les objets Navigator dans le BOM en JavaScript jouent un r\u00f4le essentiel pour interagir avec les informations du navigateur utilisateur. Conna\u00eetre ces objets et comment&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2895,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5674","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\/5674","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=5674"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5674\/revisions"}],"predecessor-version":[{"id":6114,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5674\/revisions\/6114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2895"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}