Exercice 1.9 · 10 min · 0 tentative
L'environnement navigateur
🎯 Objectif
Découvrir les objets globaux disponibles dans le navigateur : window, document et navigator.
📖 Contexte
Quand JavaScript s'exécute dans un navigateur, plusieurs objets sont automatiquement disponibles :
window — La fenêtre du navigateur
window est l'objet global. Tout ce qui n'est pas dans une variable est accessible via window :
// Ces deux lignes sont équivalentes :
console.log("Hello")
window.console.log("Hello")
// Propriétés utiles de window
window.innerWidth // Largeur de la fenêtre (ex: 1920)
window.innerHeight // Hauteur de la fenêtre (ex: 1080)
window.location — L'URL
location.href // URL complète : "https://nuxy.ch/exercices/1"
location.hostname // Domaine : "nuxy.ch"
location.pathname // Chemin : "/exercices/1"
location.protocol // Protocole : "https:"
navigator — Informations sur le navigateur
navigator.userAgent // Description du navigateur
navigator.language // Langue : "fr-FR"
navigator.onLine // true si connecté à Internet
navigator.platform // Système : "Win32", "MacIntel"
document — Le contenu de la page
document.title // Titre de l'onglet
document.URL // URL de la page
document.body // L'élément <body>
document.head // L'élément <head>
Note : On peut souvent omettre window. car c'est l'objet global.
location.href est équivalent à window.location.href
Schéma de l'environnement
window (objet global)
├── console → log, warn, error, table...
├── location → href, hostname, pathname...
├── navigator → userAgent, language, onLine...
├── document → title, body, querySelector...
├── alert() → Affiche une popup
├── prompt() → Demande une saisie
└── confirm() → Demande oui/non
alert, prompt, confirm
Ces méthodes ouvrent des boîtes de dialogue (elles ne fonctionnent pas dans cet éditeur) :
// Affiche un message
alert("Bienvenue !")
// Demande une saisie à l'utilisateur
const nom = prompt("Quel est ton nom ?")
// Demande une confirmation (OK/Annuler)
const ok = confirm("Es-tu sûr ?") // true ou false
📝 Consigne
Remplace chaque ___ par la bonne propriété. Le premier est déjà fait en exemple :
- La hauteur de la fenêtre →
window.innerHeight - L'URL actuelle →
window.location.href - Les infos du navigateur →
navigator.userAgent - Le titre de la page →
document.title
Note : Les valeurs affichées sont celles de cette page (Nuxy). C'est normal ! Dans un vrai site, tu verrais les infos de ce site.
Exemple de résultat (les valeurs changent selon ton navigateur) :
Largeur: 1920
Hauteur: 1080
URL: https://...
Navigateur: Mozilla/5.0 ...
Titre de la page: ...
Objectifs
- Afficher la hauteur
- Afficher l'URL
- Afficher le navigateur
- Afficher le titre
Lis bien les instructions et lance-toi !