Tout comprendre sur l'objet Window avec JavaScript

L'objet window est l'un des objets les utilisés avec JavaScript. Souvent utilisé pour manipuler le navigateur et tout son environnement, il propose en réalité différents objets pour différents besoins très spécifiques :

• window.location - pour manipuler les URLs
• window.history - pour manipuler l'historique
• window.document - pour manipuler le DOM
• window.navigator - pour manipuler le navigateur
• window.screen - pour manipuler l'écran

1. L'objet window.location

L'objet window.location contient toutes les informations sur l'URL actuelle de la page. Elle permet de recharger la page ou de naviguer vers une autre page.

En voici quelques exemples.

Récupérer l'URL actuelle avec JavaScript

console.log(window.location.href);
// Retourne l'URL complète de la page

Rediriger vers une nouvelle page avec JavaScript

window.location.href = 'https://believemy.com';
// Redirige vers example.com

Recharger la page avec JavaScript

window.location.reload();
// Recharge la page actuelle

2. L'objet window.history

Cet objet permet, lui, de plus ou moins manipuler l'historique du navigateur.

Attention cet objet ne permet pas de lire l'historique de l'utilisateur, évidemment. 👀

Il offre des fonctionnalités qui permettent par exemple :

• de reculer ou d'avancer dans l'historique
• de le manipuler (en ajoutant des URLs)

Voyons quelques exemples.

Reculer et avancer dans l'historique avec JavaScript

window.history.back(); // Retourne à la page précédente
window.history.forward(); // Avance à la page suivante

Manipuler l'historique avec JavaScript

Il est possible d'ajouter une nouvelle URL dans l'historique ou de remplacer celle pour la page actuelle.

Ajouter une URL dans l'historique

window.history.pushState({page: 1}, 'Titre', '/nouvelle-url');

Voici ce que nous faisons :

• {page: 1} - Il s'agit d'un objet stocké par le navigateur dès que nous cliquons sur un lien. Ici, on donne justement un numéro de page.
• Titre - Le titre de notre page à ajouter dans l'historique
• /nouvelle-url - L'URL pour cette nouvelle page

Cette méthode ne redirige pas l'utilisateur. Elle change simplement l'URL dans la barre de navigation, sans tenter de voir si la page demandée existe vraiment. Le contenu de la page est toujours le contenu de la page actuelle.

Généralement, on utilise cette méthode pour changer l'url dynamiquement quand un nouvel élément est affiché. Par exemple, Instagram propose cette fonctionnalité quand nous cliquons sur une publication : l'URL dans la barre de navigation change, mais aucun rechargement n'est fait. 😉

Manipuler l'historique avec JavaScript

window.history.replaceState({page: 3}, 'Titre mis à jour', '/url-mise-a-jour');

Cette méthode fonctionne exactement comme window.history.pushState mais propose une différence importante : elle remplace l'historique de la page en cours. Ceci veut dire qu'avec cette propriété, la page actuelle est remplacée dans l'historique, alors que pour window.history.pushState elle est ajoutée.

Autrement dit, voici ce que crée window.history.pushState dans l'historique :

1. Ancienne page - URL A
2. Nouvelle page - URL B

Comparons enfin avec window.history.replaceState :

1. Ancienne page - URL A remplacée avec "Nouvelle page - URL B".

Impossible de voir dans l'historique la page précédente.

3. L'objet window.document

L'objet window.document permet de faire référence au DOM (Document Objet Model) autrement dit toute notre page HTML.

Il permet donc :

• d'accéder aux éléments HTML
• de créer et insérer un nouvel élément HTML
• de modifier le contenu ou encore le style des éléments

Accéder aux éléments du DOM avec JavaScript

const header = document.getElementById('header'); // Sélectionne un élément par son ID
const paragraphs = document.getElementsByTagName('p'); // Sélectionne tous les paragraphes

Créer et insérer un nouvel élément avec JavaScript

const newDiv = document.createElement('div');
newDiv.textContent = 'Believemy';
document.body.appendChild(newDiv)

 // Ajoute le nouvel élément à la fin de la balise body

Modifier le contenu d'un élement avec JavaScript

const title = document.querySelector('h1');
title.innerText = 'Nouveau titre'; // Change le texte
title.style.color = 'blue'; // Modifie la couleur

4. L'objet window.navigator

L'objet window.navigator donne des informations sur le navigateur de notre utilisateur, son appareil, les permissions qu'il a accordé à notre site internet et à certaines API proposées avec le navigateur.

Lire les informations du navigateur avec JavaScript

console.log(navigator.userAgent); // Identifie le navigateur utilisé
console.log(navigator.language); // Retourne la langue du navigateur

Détecter si la géolocalisation est autorisée

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition((position) => {
    console.log(position.coords.latitude, position.coords.longitude);
  });
}

Ici, nous utilisons la méthode getCurrentPosition pour afficher les coordonnées (latitude puis longitude) dans notre console.

5. L'objet window.screen

Enfin, l'objet window.screen contient les informations sur l'écran utilisé par notre utilisateur, comme sa taille ou bien encore sa résolution.

Récupérer les dimensions de l'écran avec JavaScript

console.log(screen.width); // Largeur de l'écran
console.log(screen.height); // Hauteur de l'écran

Récupérer la résolution de l'écran avec JavaScript

console.log(screen.pixelDepth); // Profondeur des pixels (en bits)
console.log(screen.colorDepth); // Profondeur des couleurs (en bits)

Conclusion

L'objet window de JavaScript propose de très nombreuses possibilités grâce à ses propres objets :

• window.location - qui permet de manipuler l'URL
• window.history - qui permet de gérer l'historique
• window.document - pour manipuler le DOM
• window.navigator - qui permet d'obtenir les informations sur le navigateur utilisé
• window.screen - qui donne une possibilité d'obtenir la résolution

Il est important de bien de former pour comprendre comment utiliser JavaScript dans ses moindres détails : c'est un point de départ important pour ne pas compliquer notre apprentissage avec des technologies plus robustes qui s'apprennent après JavaScript, comme React et NextJS.

Si vous voulez tout savoir sur JavaScript pour devenir meilleur que 99% des autres développeurs, allez voir notre formation dédiée entièrement à JavaScript. 😬