C'est quoi JavaScript ? Où s'exécute le code

JavaScript est un langage de programmation interprété par les navigateurs web : il donne un comportement aux pages, là où HTML décrit leur contenu et CSS leur apparence. Ce chapitre explique où s'exécute ton code, comment l'inclure dans une page, quels outils installer, et présente Gestock, l'application que tu vas construire tout au long du cours.

HTML, CSS et JavaScript : qui fait quoi

Une page web repose sur trois langages, chacun avec son rôle :

Sans JavaScript, une page ne change qu'en rechargeant une nouvelle page envoyée par le serveur. Avec JavaScript, elle réagit tout de suite : un message d'erreur apparaît sous le champ mal rempli, une liste se met à jour, une notification s'affiche.

JavaScript n'a rien à voir avec Java. Le nom est un choix marketing de 1995, quand Netscape a créé le langage pour son navigateur. Java est un autre langage, compilé, que tu croiseras peut-être en entreprise ; la syntaxe se ressemble un peu (accolades, if, for), le fonctionnement pas du tout.

ECMAScript : la norme du langage

Le langage est normalisé sous le nom d'ECMAScript par l'organisme Ecma International, dans la norme ECMA-262. Un comité, le TC39, où siègent les éditeurs de navigateurs, publie une nouvelle édition chaque année : ECMAScript 2026 est la 17e édition, publiée en juin 2026. Quand tu lis « ES6 » ou « ES2015 » dans un tutoriel, il s'agit de l'édition de 2015, celle qui a apporté let, const, les fonctions fléchées, les classes et les modules. Tout ce que ce cours appelle « JavaScript moderne » vient de là et des éditions suivantes.

Où s'exécute JavaScript : navigateur et Node.js

Pour exécuter du JavaScript, il faut un moteur qui lit le code et l'exécute, et un environnement qui lui donne accès au monde extérieur. Le langage est le même partout ; ce qui change, ce sont les objets que l'environnement met à ta disposition.

Ce cours porte sur le navigateur. Tu utiliseras aussi Node.js, mais seulement comme outil : pour lancer le serveur de développement Vite et les tests Vitest.

Ce que JavaScript ne peut pas faire dans le navigateur

Le navigateur exécute le code de n'importe quel site : il l'enferme donc dans un bac à sable (sandbox). Ton script ne peut pas lire les fichiers du disque de l'utilisateur (sauf celui qu'il choisit lui-même dans un champ <input type="file">), ni lancer un programme, ni lire les données d'un autre site ouvert dans un autre onglet. Par défaut, il ne peut même pas lire la réponse d'une API située sur un autre domaine, sauf si ce serveur l'autorise par CORS (CORS et sécurité des API).

Deux conséquences te concernent directement :

• Le code envoyé au navigateur est public. N'importe qui peut l'ouvrir avec les outils de développement. Une clé d'API, un mot de passe ou une règle secrète écrits dans ton JavaScript sont lisibles par tous.
• Le contrôle côté client ne protège rien. Vérifier un formulaire en JavaScript rend service à l'utilisateur honnête, qui voit son erreur tout de suite. Un utilisateur malveillant peut désactiver ton script ou envoyer la requête à la main : le serveur doit toujours refaire les contrôles.

Ta première ligne : la console des outils de développement

Tous les navigateurs intègrent des outils de développement (DevTools). Ouvre-les avec F12, ou Ctrl + Maj + I sous Windows et Linux, Cmd + Option + I sous macOS (dans Safari, active d'abord le menu Développement dans les réglages avancés). Va dans l'onglet Console et tape :

console.log('Bonjour Réparinfo');
2 + 3 * 4
'Gestock'.toUpperCase()

Bonjour Réparinfo
14
'GESTOCK'

console.log(...) affiche une valeur : c'est ton premier outil pour voir ce que fait ton code. La console affiche aussi directement la valeur d'une expression tapée seule. Elle te servira à tester une ligne avant de l'écrire dans un fichier, et surtout à lire les messages d'erreur (chapitre 12).

Inclure JavaScript dans une page : la balise script

Pour qu'une page exécute ton code, tu l'écris dans un fichier .js et tu le relies à la page avec la balise <script> :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Gestock</title>
  <script src="js/main.js" defer></script>
</head>
<body>
  <h1>Gestock</h1>
  <p id="resume"></p>
</body>
</html>

// js/main.js
const resume = document.querySelector('#resume');
resume.textContent = 'Le stock est chargé.';

Le script cherche l'élément #resume de la page et change son texte. Il doit donc s'exécuter après que le navigateur a lu le HTML : c'est le rôle de l'attribut defer.

Tu peux aussi écrire du JavaScript directement entre <script> et </script>, ou dans des attributs comme onclick="…". Évite les deux : le code mélangé au HTML est difficile à maintenir, et les attributs on… sont bloqués par les politiques de sécurité de contenu (CSP) que mettent en place les sites sérieux. Tu verras la bonne méthode, addEventListener, au chapitre 8.

Préparer ton environnement de travail

Il te faut un navigateur à jour, un éditeur de code et un petit serveur web local.

• L'éditeur. Visual Studio Code est le plus utilisé ; ses fonctions d'autocomplétion et de détection d'erreurs marchent sans extension pour JavaScript.
• Node.js en version LTS. Télécharge-le sur nodejs.org (bouton LTS) : depuis le 28 octobre 2026, c'est la version 26 ; la 24, encore maintenue jusqu'en avril 2028, convient aussi. Vérifie l'installation avec node --version dans un terminal. Node.js installe aussi npm, le gestionnaire de paquets.
• Un serveur local. Ouvrir ton index.html par un double-clic (adresse en file://) fonctionne pour un script simple, mais les modules et fetch y sont bloqués par le navigateur. Sers ton projet par HTTP.

Le plus simple est de créer le projet avec Vite, l'outil de développement que tu retrouveras dans le cours React :

npm create vite@latest gestock -- --template vanilla
cd gestock
npm install
npm run dev

Le gabarit vanilla crée un projet en JavaScript sans framework, avec un index.html et un dossier de sources. npm run dev lance un serveur local (par défaut http://localhost:5173) qui recharge la page à chaque enregistrement.

Le gabarit range le code dans src/ et contient une petite démonstration (un compteur, des logos) : supprime ces fichiers d'exemple. Ce cours range le code dans un dossier js/ : renomme src/ en js/ et corrige la balise <script> de index.html, ou garde src/ et adapte les chemins. Le dossier public/ du gabarit reçoit les fichiers copiés tels quels sur le site, comme le stock de départ de Gestock (chapitre 10). Sans npm, une seule commande suffit pour servir un dossier, si Python est installé : python3 -m http.server 8000, puis ouvre http://localhost:8000.

Le projet fil rouge : Gestock

Réparinfo répare des ordinateurs portables. Les techniciens consomment des pièces (SSD, mémoire, chargeurs, dalles d'écran, pâte thermique) et le gérant commande quand il y pense. Gestock doit :

• afficher la liste des pièces avec leur quantité et leur prix ;
• signaler les pièces dont la quantité est inférieure ou égale au seuil d'alerte ;
• filtrer la liste pendant la frappe et n'afficher, si on le demande, que les pièces en alerte ;
• ajouter une unité ou en retirer une d'un clic ;
• ajouter une pièce par un formulaire qui refuse les saisies incorrectes ;
• garder les données entre deux visites et les charger depuis un serveur.

Chaque pièce sera décrite par une référence (trois lettres, un tiret et deux ou trois chiffres : SSD-512), un nom, une catégorie, une quantité, un seuil et un prix unitaire. Voici le stock de départ, que tu retrouveras dans tous les exemples :

Exercices

<head>
  <script src="js/main.js"></script>
</head>
<body>
  <p id="resume"></p>
</body>

// js/main.js
document.querySelector('#resume').textContent = '5 références';