JavaScript

Apport de JavaScript : que peut faire JavaScript dans le navigateur ?

0 chapitres 0 QCM Accès gratuit

À propos de ce cours

Découvrez ce que JavaScript apporte au développement web : son rôle à côté de HTML et CSS, la façon dont le navigateur exécute un script, et tout ce qu'il permet de faire aujourd'hui. On y voit comment modifier la page avec le DOM, réagir aux actions de l'utilisateur, contrôler les formulaires, communiquer avec un serveur grâce à fetch, mémoriser des données, animer, utiliser les fonctionnalités de l'appareil et créer des applications web. La leçon présente aussi les limites de sécurité de JavaScript, avec un exemple complet à tester et des activités pratiques.

Objectifs
- Comprendre le rôle de JavaScript à côté de HTML et de CSS.
- Savoir comment le navigateur exécute un script.
- Connaître ce que JavaScript permet de faire aujourd'hui dans le navigateur… et en dehors.
- Connaître les limites de JavaScript pour des raisons de sécurité.
Le rôle de JavaScript dans une page web
- Une page web moderne repose sur trois technologies complémentaires :
  - HTML: la structure et le contenu (titres, paragraphes, images, formulaires…) — le squelette.
  - CSS: la présentation (couleurs, polices, mise en page, animations simples) — l'apparence.
  - JavaScript: le comportement (réagir, calculer, modifier la page, communiquer avec un serveur) — les muscles.
- Sans JavaScript, une page est statique: elle affiche toujours la même chose. Avec JavaScript, elle devient dynamique et interactive.
- JavaScript est le seul langage de programmation compris nativement par tous les navigateurs. Il est utilisé par près de 99 % des sites web (source : W3Techs, 2026).
Comment le navigateur exécute JavaScript
1. L'utilisateur clique sur un lien ou saisit une adresse.
2. Le navigateur télécharge la page HTML et construit en mémoire l'arbre des éléments de la page : le DOM (Document Object Model).
3. Il applique les styles CSS et affiche la page.
4. Quand il rencontre du code JavaScript (balise <script> ou fichier .js), son moteur JavaScript exécute les instructions : V8 (Chrome, Edge, Opera), SpiderMonkey (Firefox) ou JavaScriptCore (Safari).
5. Ensuite, le script attend les événements (clic, frappe au clavier, réponse du serveur…) et y réagit, sans recharger la page.
Ce que JavaScript permet de faire dans le navigateur

a) Modifier le contenu et l'apparence de la page

Grâce au DOM, JavaScript peut lire, ajouter, modifier ou supprimer n'importe quel élément : changer un texte, afficher ou masquer un menu, ajouter une ligne à un tableau, changer une image, appliquer une classe CSS…

b) Réagir aux actions de l'utilisateur

JavaScript écoute les événements: clic, double-clic, survol, touche du clavier, défilement, toucher sur écran tactile, redimensionnement de la fenêtre…

c) Contrôler les formulaires

Vérifier la saisie avant l'envoi (champ vide, format d'un e-mail, mot de passe trop court…), afficher un message d'erreur clair, calculer un total automatiquement.

d) Communiquer avec un serveur sans recharger la page

Avec l'API fetch (anciennement AJAX avec XMLHttpRequest), JavaScript envoie et reçoit des données en arrière-plan : suggestions de recherche, chargement de nouveaux articles au défilement, chat en direct, météo…

e) Mémoriser des données dans le navigateur

Cookies, localStorage, sessionStorage et IndexedDB permettent de garder des informations : préférences (thème sombre), panier d'achat, brouillon d'un formulaire…

f) Animer et dessiner

Animations, carrousels, effets au survol, graphiques et jeux 2D avec l'API Canvas, 3D avec WebGL et WebGPU.

g) Utiliser les fonctionnalités de l'appareil (API du navigateur)

Géolocalisation, caméra et micro, notifications, presse-papiers, reconnaissance vocale, mode plein écran, vibration… Ces fonctions demandent toujours l'autorisation de l'utilisateur.

h) Créer de véritables applications

Applications monopage (SPA): Gmail, Google Maps ou Trello fonctionnent dans une seule page qui se met à jour en continu (frameworks Angular, React, Vue).
Applications web progressives (PWA): grâce aux service workers, un site peut s'installer comme une application et fonctionner hors ligne.

Hier (années 1990 – 2000)	Aujourd'hui
`document.write()` pour ajouter du texte	Manipulation du DOM : `textContent`, `createElement()`, `append()`
Messages dans la barre d'état du navigateur	Messages affichés dans la page (alertes Bootstrap, notifications)
Applets Java et LiveConnect	Disparus ; remplacés par les API du navigateur et WebAssembly
Scripts CGI et rechargement complet de la page	`fetch`, `async/await` et API REST
Cookies pour tout mémoriser	`localStorage`, `sessionStorage`, IndexedDB
Effets d'images au survol	Classes CSS, transitions, Canvas, WebGL

Au-delà du navigateur

Serveur: Node.js, Deno et Bun permettent d'écrire des API et des sites complets en JavaScript.
Mobile: React Native, Ionic ou Capacitor permettent de créer des applications Android et iOS.
Bureau: avec Electron ou Tauri ; par exemple, Visual Studio Code est écrit en TypeScript/JavaScript.
Intelligence artificielle: des bibliothèques comme TensorFlow.js ou Transformers.js exécutent des modèles d'IA directement dans le navigateur.

Ce que JavaScript ne peut pas faire (limites et sécurité)
- Le JavaScript d'une page s'exécute dans un bac à sable (sandbox) pour protéger l'utilisateur :
  - il ne peut pas lire ni modifier librement les fichiers de l'ordinateur: l'utilisateur doit choisir lui-même un fichier ;
  - il ne peut pas lire le contenu d'un autre onglet ou d'un autre site (règle de la même origine, CORS) ;
  - il doit demander une autorisation pour accéder à la caméra, au micro ou à la position.
- Le code JavaScript est visible par tout le monde (Ctrl + U ou les DevTools) : on n'y met jamais de mot de passe ni de clé secrète.
- L'utilisateur peut désactiver ou modifier JavaScript : une vérification faite en JavaScript doit toujours être refaite côté serveur.
À retenir : la validation d'un formulaire en JavaScript sert au confort de l'utilisateur (réponse immédiate), pas à la sécurité. La sécurité se fait sur le serveur.

Exemple : une page qui réagit

Créez un fichier apport.html, collez le code suivant et ouvrez-le dans votre navigateur (ou avec l'extension Live Server de VS Code).

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Apport de JavaScript</title>
  <style>
    .sombre { background: #222; color: #eee; }
    .erreur { color: red; }
  </style>
</head>
<body>
  <h1 id="titre">Bonjour !</h1>

  <!-- 1. Modifier le contenu -->
  <input id="nom" placeholder="Votre prénom">
  <button id="btnSaluer">Saluer</button>
  <p id="message"></p>

  <!-- 2. Modifier l'apparence et mémoriser le choix -->
  <button id="btnTheme">Thème sombre / clair</button>

  <!-- 3. Interroger un serveur sans recharger la page -->
  <button id="btnCitation">Afficher un utilisateur depuis une API</button>
  <p id="api"></p>

  <script>
    // 1. Réagir à un clic et contrôler la saisie
    document.querySelector("#btnSaluer").addEventListener("click", () => {
      const nom = document.querySelector("#nom").value.trim();
      const message = document.querySelector("#message");
      if (nom === "") {
        message.textContent = "Veuillez saisir votre prénom.";
        message.className = "erreur";
      } else {
        message.textContent = `Bienvenue ${nom} !`;
        message.className = "";
      }
    });

    // 2. Changer l'apparence et mémoriser le thème dans le navigateur
    if (localStorage.getItem("theme") === "sombre") {
      document.body.classList.add("sombre");
    }
    document.querySelector("#btnTheme").addEventListener("click", () => {
      document.body.classList.toggle("sombre");
      const theme = document.body.classList.contains("sombre") ? "sombre" : "clair";
      localStorage.setItem("theme", theme);
    });

    // 3. Récupérer des données sur un serveur avec fetch
    document.querySelector("#btnCitation").addEventListener("click", async () => {
      const reponse = await fetch("https://jsonplaceholder.typicode.com/users/1");
      const utilisateur = await reponse.json();
      document.querySelector("#api").textContent =
        `${utilisateur.name} habite à ${utilisateur.address.city}`;
    });
  </script>
</body>
</html>

Dans ce petit exemple, JavaScript réagit aux clics, contrôle une saisie, modifie le texte et le style de la page, mémorise le thème choisi (rechargez la page pour vérifier) et interroge un serveur sans recharger la page.

Activités

Activité 1 : un site sans JavaScript

Ouvrez un site que vous utilisez souvent (YouTube, un site d'actualité, Google Maps…).
Ouvrez les DevTools (F12), faites Ctrl + Maj + P, tapez « Disable JavaScript » puis rechargez la page.
Notez ce qui ne fonctionne plus. Réactivez ensuite JavaScript (« Enable JavaScript »).

Activité 2 : HTML, CSS ou JavaScript ?

Pour chaque action, indiquez la technologie responsable :

Afficher un titre de niveau 1.
Mettre le titre en bleu.
Afficher un message d'erreur quand l'e-mail saisi est invalide.
Charger de nouveaux articles quand on arrive en bas de la page.
Créer un champ de saisie de type date.
Retenir que l'utilisateur préfère le thème sombre.

Activité 3 : améliorer l'exemple

Ajoutez un bouton « Effacer » qui vide le champ de saisie et le message.
Mémorisez le prénom dans le localStorage pour l'afficher automatiquement à la prochaine visite.
Déposez votre travail dans un dépôt GitHub nommé js-apport.

Activité 4 : vrai ou faux ?

JavaScript peut lire tous les fichiers de l'ordinateur de l'utilisateur.
JavaScript peut mettre à jour une partie de la page sans la recharger.
Une vérification de formulaire en JavaScript suffit à sécuriser un site.
JavaScript est aussi utilisé pour créer des applications mobiles et de bureau.

Corrigés. Activité 2 : 1. HTML — 2. CSS — 3. JavaScript — 4. JavaScript — 5. HTML — 6. JavaScript. Activité 4 : 1. Faux — 2. Vrai — 3. Faux (il faut aussi vérifier côté serveur) — 4. Vrai.

À retenir

HTML structure, CSS présente, JavaScript fait agir la page.
Grâce au DOM et aux événements, JavaScript modifie la page et réagit à l'utilisateur sans la recharger.
Il communique avec les serveurs (fetch), mémorise des données et utilise les fonctionnalités de l'appareil.
Il s'exécute dans un bac à sable sécurisé : la sécurité réelle d'une application se fait toujours côté serveur.

Sources : MDN Web Docs (developer.mozilla.org), W3Techs (w3techs.com).

Historique du langage JavaScript

Les limites du langage HTML