W3docs
fr
Se connecter

Environnement navigateur JavaScript, Spécifications

Comprenez l'environnement navigateur JavaScript : l'objet global window, le DOM (document), le BOM (navigator, location, history, screen) et les spécifications associées, avec des exemples exécutables.

JavaScript est un outil très important pour rendre les sites web interactifs. Ce guide vous aidera à comprendre comment JavaScript fonctionne dans un navigateur web, en abordant des sujets essentiels tels que le Document Object Model (DOM), le Browser Object Model (BOM) et la façon dont nous pouvons les manipuler via JavaScript. Nous vous présenterons également des exemples de code simples pour vous aider à démarrer.

Le cœur de JavaScript et l'environnement hôte

Le langage JavaScript lui-même — la partie définie par la spécification ECMAScript — ne connaît que des éléments comme les nombres, les chaînes de caractères, les objets, les tableaux, les fonctions, Math, JSON, etc. Il n'a aucune notion de page web, de bouton ou d'URL.

Ces capacités proviennent de l'environnement hôte : le programme qui exécute votre code. Dans un navigateur web, cet environnement fournit à JavaScript un large ensemble d'objets supplémentaires (le DOM et le BOM) afin que vos scripts puissent lire et modifier la page et communiquer avec le navigateur. Un hôte différent, comme Node.js, fournit un ensemble complètement différent (système de fichiers, serveurs réseau) et ne dispose ni de document ni de window.

Ainsi, un script navigateur est en réalité deux couches qui fonctionnent ensemble :

  • Cœur ECMAScript — les fonctionnalités du langage disponibles partout.
  • Objets hôtes (navigateur) — window, document, navigator, location, et les autres, fournis par le navigateur, et non par le langage.

window : l'objet global

Dans le navigateur, l'objet au sommet de tout est window. Il joue deux rôles à la fois :

  1. Il représente la fenêtre du navigateur (sa taille, les onglets qu'il ouvre, les alertes, les minuteries).
  2. Il est l'objet global — chaque variable globale et chaque fonction globale devient une propriété de window.

C'est pourquoi toutes ces expressions désignent la même chose :

javascript— editable

Les deux grandes familles d'objets rattachées à window sont le DOM (la page) et le BOM (le navigateur). La suite de ce guide présente les deux.

Qu'est-ce que le Document Object Model (DOM) ?

Le Document Object Model (DOM) est comme une carte du contenu d'un site web. Le navigateur analyse le HTML pour construire un arbre d'objets, dont la racine est l'objet document. Chaque balise devient un nœud que vous pouvez lire, modifier, ajouter ou supprimer depuis JavaScript — ce qui signifie que vous pouvez modifier le contenu, la structure et la mise en page du site web à l'exécution.

Pour un tour pratique et approfondi de la sélection et de la modification des nœuds, consultez la manipulation du DOM.

Exemple : Ajouter et modifier des éléments

Voici comment ajouter une nouvelle partie à une page web et modifier son contenu. Comme vous pouvez le voir dans l'exemple ci-dessous, il n'y a aucun paragraphe de texte dans le corps. Mais le code JavaScript ajoute une nouvelle balise p à l'objet document.

<!-- snippet: html-result -->

<!DOCTYPE html>
<html>
<head>
  <title>Simple DOM Example</title>
</head>
<body>
  <script>
    // Make a new part of the page
    const paragraph = document.createElement("p");
    paragraph.textContent = "Hello, JavaScript!";

    // Add the new part to the page
    document.body.appendChild(paragraph);
  </script>
</body>
</html>
Essayez vous-même »

Qu'est-ce que le Browser Object Model (BOM) ?

Le Browser Object Model (BOM) offre à JavaScript la capacité d'interagir avec le navigateur. Il comprend plusieurs objets qui permettent aux scripts d'effectuer des opérations liées au navigateur lui-même, et pas seulement au contenu de la page web. Le BOM inclut également des objets standard comme history pour gérer la navigation dans le navigateur et screen pour accéder aux dimensions de l'écran. Pour bien distinguer dès le départ : le DOM se concentre sur la structure et le contenu de la page web, tandis que le BOM se concentre sur la fenêtre du navigateur elle-même.

Composants du BOM

window

L'objet window représente la fenêtre du navigateur. Il contient des fonctions pour contrôler le navigateur, notamment la lecture de sa taille et de sa position, le défilement, la définition de minuteries (setTimeout, setInterval) et l'affichage de boîtes de dialogue (alert, confirm, prompt). Pour mesurer et faire défiler le viewport spécifiquement, consultez les tailles de fenêtre et le défilement.

Voici comment ouvrir une nouvelle fenêtre de navigateur à l'aide de l'objet window :

<!-- snippet: html-result -->

<!DOCTYPE html>
<html>
<head>
    <title>Open New Window Example</title>
</head>
<body>
    <button onclick="openNewWindow()">Click to Open a New Window</button>
    <script>
        function openNewWindow() {
            // Open a new window and specify its properties
            var myWindow = window.open("", "MsgWindow", "width=400,height=200");
            myWindow.document.body.innerHTML = "<p>Welcome to a new pop-up window! This is created using JavaScript.</p>";
        }
    </script>
</body>
</html>
Essayez vous-même »

Remarque : Les navigateurs modernes bloquent généralement window.open() si ce n'est pas déclenché directement par un geste de l'utilisateur, comme un clic.

L'objet navigator contient des informations sur le navigateur, comme son nom, sa version et ses capacités telles que la prise en charge des cookies. Voici comment utiliser l'objet navigator pour vérifier si les cookies sont activés :

javascript— editable

Location

L'objet location fournit des informations sur l'URL actuelle et peut être utilisé pour rediriger le navigateur vers une adresse différente. Cet exemple affichera divers composants de l'URL (comme le protocole, le nom d'hôte et le chemin) sur la page web.

javascript— editable
javascript— editable

history

L'objet history vous permet de naviguer dans l'historique de session de l'utilisateur — les pages visitées dans l'onglet actuel — sans exposer les URL réelles. C'est lui qui alimente les boutons Précédent et Suivant du navigateur, et c'est la base du routage côté client dans les applications monopage.

javascript— editable

screen

L'objet screen décrit l'ensemble de l'écran de l'utilisateur (moniteur), et non la fenêtre du navigateur. Il est utile pour déterminer l'espace disponible avant d'ouvrir ou de positionner une fenêtre.

javascript— editable

Astuce : screen indique les dimensions de l'écran physique. Pour mesurer la zone que votre page peut réellement utiliser, consultez plutôt le viewport de window.

Les spécifications derrière l'environnement navigateur

Ces objets ne sont pas inventés par chaque navigateur — ils sont définis par des standards publics afin que le code se comporte de la même façon partout :

  • ECMAScript (maintenu par TC39) — le cœur du langage JavaScript : syntaxe, types et fonctions intégrées comme Array, Object, Math, JSON.
  • DOM Living Standard (WHATWG) — document et l'arbre des nœuds d'éléments.
  • HTML Living Standard (WHATWG) — définit window, navigator, location, history et la façon dont les pages HTML exécutent des scripts.
  • CSSOM (W3C) — le modèle d'objet pour lire et modifier les styles depuis JavaScript.

Quand on dit qu'une fonctionnalité est « standard », cela signifie qu'elle apparaît dans l'une de ces spécifications et que les navigateurs l'ont implémentée en conséquence.

D'autres façons d'utiliser le DOM

JavaScript vous permet également de gérer le contenu d'un site web de manière dynamique grâce aux événements et aux attributs de données.

Exemple : Gérer les clics et utiliser les données

Voici comment configurer des événements de clic et utiliser des attributs de données :

<!-- snippet: html-result -->

<!DOCTYPE html>
<html>
<head>
  <title>Click Event Example</title>
  <style>
    #first {
      background-color: red;
      max-width: 100px;
    }
  </style>
</head>
<body>
  <div id="first">Click me!</div>
  <script>
    document.getElementById('first').addEventListener('click', function () {
      alert(`Item clicked.`);
    });
  </script>
</body>
</html>
Essayez vous-même »

Ce code configure un événement de clic pour l'élément div et affiche un message lorsqu'il est cliqué. Certains événements déclenchent également le comportement intégré du navigateur (un lien navigue, un formulaire se soumet) — pour apprendre à contrôler ou annuler ce comportement, consultez les actions par défaut du navigateur.

Conclusion

Comprendre comment JavaScript interagit avec le navigateur vous permet de créer des sites web réactifs et pilotés par l'utilisateur. En maîtrisant le DOM et le BOM ainsi que les meilleures pratiques modernes, vous pouvez créer des applications web fiables et engageantes.

Pratique

Pratique
Quel est le rôle du DOM dans l'environnement navigateur de JavaScript ?
Quel est le rôle du DOM dans l'environnement navigateur de JavaScript ?
Was this page helpful?