Ce que tu vas apprendre dans ce cours JavaScript

Ce cours est un support gratuit pour arriver à écrire du JavaScript côté navigateur au niveau professionnel. Tu vas travailler les bases — variables, tableaux — puis passer aux conditions, aux boucles, aux fonctions et à la programmation orientée objet avec les classes, pour finir avec le DOM (le mécanisme qui permet de lire et d'écrire des éléments HTML depuis JavaScript) et fetch pour les requêtes réseau. Des schémas et des exercices pratiques t'accompagnent pas à pas.

Cet article explique où JavaScript s'exécute vraiment, puis détaille le contenu du cours et l'ordre dans lequel il est organisé.

Pourquoi apprendre JavaScript — le navigateur l'exécute directement

Un bouton qui bascule au clic. Une saisie validée au fur et à mesure que tu tapes. Des données produit récupérées depuis un serveur et affichées sous forme de liste. Chacun de ces comportements sur une page web vient de JavaScript.

JavaScript est le seul langage qu'un navigateur web peut exécuter directement depuis le code source, donc si tu construis quoi que ce soit qui touche à l'écran, tu vas écrire du JavaScript.

Node.js (un logiciel qui exécute JavaScript en dehors du navigateur) s'est en outre largement répandu : la logique côté serveur et les outils de build s'écrivent aujourd'hui dans ce même langage. En n'apprenant que JavaScript, tu peux donc développer aussi bien côté front-end que côté back-end.

Où s'exécute JavaScript — navigateur, Node.js et la console de ce site

À JavaScript identique, les fonctionnalités disponibles changent selon l'endroit où tu l'exécutes. Le langage lui-même — variables, tableaux, objets, fonctions, classes — reste le même partout.

Ce qui change, c'est ce que l'environnement d'exécution ajoute par-dessus. Le navigateur donne accès à l'écran (le DOM) et à un stockage local des données ; Node.js donne accès à la lecture et à l'écriture de fichiers, et permet de faire tourner un serveur. Une fois cette différence assimilée, tu identifies bien plus vite la cause quand un bout de code ne fonctionne pas.

Tu n'as pas besoin de savoir lire l'exemple ci-dessous pour l'instant : regarde simplement ce qui change entre les 3 environnements.

// Identique partout — le langage lui-même
const cart = [
  { name: "Mug", price: 1200 },
  { name: "Sous-verre", price: 400 },
];
console.log(cart.length);   // 2

// Navigateur uniquement — réécrire l'écran
document.querySelector("#total").textContent = "1600 €";

// Node.js uniquement — lire un fichier
const fs = require("node:fs");
console.log(fs.readFileSync("orders.csv", "utf-8"));

La console de ce site n'a pas d'écran

La console des exercices exécute ton code dans un environnement navigateur dépourvu d'écran. Un élément que tu crées n'apparaît nulle part : tu vérifies donc les résultats en lisant le texte que tu affiches avec console.log. Les boîtes de dialogue comme alert ne sont pas disponibles non plus. Même dans le chapitre sur les API navigateur, tu vérifieras le comportement en affichant sous forme de texte le contenu des éléments que tu crées.

Ce que ce cours couvre — 4 catégories

Ce cours est organisé en 4 catégories. Tu vas commencer par les bases des valeurs et des structures de données, passer aux structures de contrôle et fonctions, puis à la programmation orientée objet avec les classes, et finir par les API navigateur (manipulation du DOM, événements, réseau, stockage) pour travailler avec l'écran et les données.

Si tu les suis dans l'ordre, ce que tu as appris dans un article sert directement de base au suivant. La seule exception est if, qui sert à tester une condition : il apparaît sous sa forme la plus simple dès les articles de base consacrés à la comparaison de valeurs.

Chaque article suit le même déroulé : explication → schéma → exercice → quiz. Les exercices s'exécutent directement dans la console de la page : tu n'as donc aucun éditeur à installer ni environnement à configurer.

Le cours est conçu pour que tu n'en restes pas à la lecture : à chaque fois, tu écris et tu exécutes toi-même du code.

Pourquoi les fondamentaux comptent encore à l'ère de l'IA — lire et corriger les erreurs

Les situations où l'IA écrit du code à ta place se multiplient. Mais lire le code produit, l'exécuter et le corriger quand il s'arrête sur une erreur reste le travail de l'humain.

JavaScript laisse circuler les valeurs sans types déclarés : une valeur différente de celle attendue n'interrompt donc pas l'exécution sur le moment, et l'erreur ne survient que sur une tout autre ligne. Savoir remonter jusqu'à l'endroit où la valeur a dérapé fait directement la différence en vitesse de travail.

Quand l'exécution s'arrête sur une erreur, la première chose à lire est le message d'erreur. La plupart des messages d'erreur JavaScript regroupent sur une seule ligne le type, la situation et la cible. Si tu lis ces trois éléments séparément, tu peux cerner l'endroit à corriger : « la valeur manipulée juste avant la ligne qui a échoué ».

La propriété (une paire nom-valeur que contient un objet) et undefined (une valeur qui indique qu'aucune valeur n'a encore été affectée), que tu vas croiser dans l'exemple suivant, sont détaillées dans les articles 8 et 9.

const user = { name: "Alice", age: 34 };

// user n'a pas de propriété profile
console.log(user.profile.age);
// TypeError: Cannot read properties of undefined (reading 'age')

Ce cours intègre délibérément des situations d'erreur dans ses exercices, pour que tu t'entraînes à lire le message et à corriger le code toi-même. Si tu travailles les 4 catégories dans l'ordre, tu arriveras à écrire toi-même du JavaScript utilisable en entreprise, et à le corriger toi-même quand l'exécution s'arrête sur une erreur.

Prochaine étape : let et const, les deux façons de déclarer une variable — tu vas les écrire toi-même pour les apprendre.