JavaScript · DébutantDébutant≈ 2h30 · 8 chapitres

Les bases de JavaScript

Variables, types, fonctions, tableaux, objets, manipulation du DOM, événements et asynchrone. Le langage qui fait vivre les pages web, des fondations jusqu'au fetch.

À la fin du cours, tu sais

Comprendre où et comment JavaScript s'exécute (moteur, navigateur, console)
Manipuler les variables, les types et les opérateurs sans tomber dans les pièges
Écrire des fonctions claires (déclaration, expression, fléchées, portée)
Structurer des données avec les tableaux et les objets
Sélectionner et modifier des éléments de la page avec le DOM
Réagir aux actions de l'utilisateur·ice avec les événements
Découvrir le code asynchrone et récupérer des données avec fetch

Prérequis

Connaître les bases de HTML et CSS (voir le cours « Introduction à HTML et CSS »)
Un navigateur récent et un éditeur de code (VS Code) suffisent, rien à installer

Chapitre 11 / 11

Chapitre 1

JavaScript, le langage du web

Avant d'écrire une ligne, comprendre ce qu'est JavaScript, où il tourne, et comment l'essayer en dix secondes dans ton navigateur.

Tu connais déjà HTML pour structurer une page et CSS pour l'habiller. Mais une page faite uniquement de HTML et CSS reste figée : elle ne répond pas quand on clique, ne calcule rien, ne va chercher aucune donnée. C'est exactement le rôle de JavaScript (souvent abrégé JS) : c'est le langage qui rend une page vivante. Un menu qui s'ouvre, un formulaire qui vérifie ta saisie, un panier qui se met à jour, une carte interactive : derrière tout ça, il y a du JavaScript.

JavaScript est né en 1995 pour animer les pages dans le navigateur, et il n'en a jamais bougé : c'est aujourd'hui le seul langage que tous les navigateurs (Chrome, Firefox, Safari, Edge) savent exécuter nativement. Chaque navigateur embarque un moteur JavaScript, un programme qui lit ton code et l'exécute. Chrome utilise le moteur V8, Firefox SpiderMonkey. Tu n'as donc rien à installer pour commencer : ton navigateur est déjà un environnement d'exécution complet.

La console, ton terrain de jeu

Le moyen le plus rapide d'essayer du JavaScript, c'est la console des outils de développement. Dans n'importe quel navigateur, appuie sur F12 (ou clic droit → « Inspecter »), puis va dans l'onglet « Console ». Tu peux y taper du code et voir le résultat immédiatement. La fonction star pour afficher quelque chose s'appelle console.log() : elle écrit dans la console la valeur que tu lui passes.

À taper directement dans la console du navigateur

console.log("Bonjour, JavaScript !");
console.log(2 + 3);          // 5
console.log("web".length);   // 3 (le nombre de lettres)

Tu retiendras console.log() pour toute ta vie de développeur·euse : c'est l'outil numéro un pour vérifier ce que contient une variable, comprendre pourquoi un bout de code ne fait pas ce qu'on croit, et déboguer sans stress. On l'utilisera dans tout le cours.

Brancher JavaScript à une page HTML

Dans un vrai projet, ton code ne vit pas dans la console mais dans un fichier .js, que tu relies à ta page HTML avec une balise <script>. On la place juste avant la fermeture du </body>, pour que le HTML soit chargé quand le script s'exécute.

index.html

<!DOCTYPE html>
<html lang="fr">
  <body>
    <h1>Ma première page dynamique</h1>

    <!-- Le script est chargé à la fin du body -->
    <script src="script.js"></script>
  </body>
</html>

JavaScript ne vit pas que dans le navigateur

Depuis 2009, un environnement appelé Node.js permet aussi d'exécuter JavaScript en dehors du navigateur, côté serveur. C'est ce qui a fait de JS un langage universel, du frontend au backend. On le croise dans le cours Node.js et Express. Pour l'instant, retiens juste que le langage que tu apprends ici te servira des deux côtés.

Vrai ou faux ?

Pour exécuter du JavaScript dans un navigateur, il faut d'abord installer un logiciel spécial.

Chapitre 2

Variables, types et opérateurs

Une variable stocke une valeur pour la réutiliser. En JavaScript, le type n'est pas déclaré : il est porté par la valeur, ce qui a des conséquences à connaître.

Une variable, c'est une boîte nommée dans laquelle on range une valeur pour la réutiliser plus tard. En JavaScript moderne, on déclare une variable avec deux mots-clés : const quand la valeur ne changera pas (le cas le plus fréquent), et let quand elle est amenée à évoluer. Il existe un troisième mot-clé, var, hérité de l'ancien JavaScript : évite-le, il a des comportements piégeux qu'on verra au dernier chapitre.

const prenom = "Alice";   // ne changera pas -> const
let age = 30;              // pourra évoluer -> let
age = 31;                 // OK, age est un 'let'

// const prenom = "Bob";  // ERREUR : on ne réaffecte pas un const

La règle d'or, adoptée par toute l'industrie : utilise const par défaut, et ne passe à let que si tu as vraiment besoin de réaffecter la variable. Ça rend ton code plus prévisible : quand tu lis const, tu sais que cette valeur ne bougera plus.

Les types de valeurs

Contrairement à un langage comme Java, tu ne déclares jamais le type d'une variable en JavaScript : c'est la valeur qui porte son type, et une variable peut même changer de type en cours de route (on dit que JS est typé dynamiquement). Les types de base à connaître sont peu nombreux : string (du texte), number (un nombre, entier ou décimal, sans distinction), boolean (true ou false), undefined (une variable déclarée mais sans valeur), et null (une absence de valeur, volontaire).

const texte = "Bonjour";   // string
const nombre = 42;         // number
const decimal = 19.99;     // number aussi (pas de type séparé)
const actif = true;        // boolean
let vide;                  // undefined (déclarée, pas initialisée)
const rien = null;         // null (absence volontaire)

// typeof révèle le type d'une valeur
console.log(typeof texte);   // "string"
console.log(typeof nombre);  // "number"

Les gabarits de chaîne (template literals)

Pour insérer une variable dans du texte, on utilise les gabarits de chaîne : des chaînes entourées d'accents graves (les backticks) dans lesquelles on glisse une expression avec la syntaxe dollar-accolades. C'est bien plus lisible que de concaténer avec des +.

const prenom = "Alice";
const age = 30;

// Ancienne façon, avec des +
const message1 = "Bonjour " + prenom + ", tu as " + age + " ans.";

// Façon moderne, avec un gabarit de chaîne (backticks)
const message2 = `Bonjour ${prenom}, tu as ${age} ans.`;

console.log(message2);   // "Bonjour Alice, tu as 30 ans."

Opérateurs et comparaisons

Arithmétique : +, -, *, /, % (reste de division)
Comparaison : === (strictement égal), !==, <, >, <=, >=
Logique : && (et), || (ou), ! (non)
Concaténation : le + colle aussi deux chaînes de texte

Toujours === , jamais ==

JavaScript propose deux opérateurs d'égalité : == et ===. Le premier (==) convertit les types avant de comparer, ce qui donne des surprises absurdes : 0 == "" vaut true, 1 == true vaut true. Le second (===) compare la valeur et le type, sans conversion : c'est le comportement prévisible. Prends l'habitude d'utiliser toujours === et !==, dès le premier jour.

Vrai ou faux ?

En JavaScript, "5" === 5 vaut true.

Chapitre 3

Conditions et boucles

Décider et répéter : les deux capacités qui transforment une suite d'instructions en véritable logique de programme.

Un programme utile doit pouvoir décider (« si l'utilisateur est connecté, affiche son profil ») et répéter (« pour chaque article du panier, calcule le total »). JavaScript offre pour cela une syntaxe familière si tu as déjà vu un autre langage : des conditions avec if, et des boucles avec for. Une condition est toujours une expression qui vaut true ou false.

Les conditions : if / else if / else

const note = 14;

if (note >= 16) {
  console.log("Très bien");
} else if (note >= 10) {
  console.log("Reçu");
} else {
  console.log("À retravailler");
}

// L'opérateur ternaire : un if/else court, qui renvoie une valeur
const mention = note >= 10 ? "Reçu" : "Recalé";

Le bloc if exécute son code si la condition est vraie, else if teste une autre condition, et else couvre tous les autres cas. L'opérateur ternaire (condition ? siVrai : siFaux) est un raccourci pratique quand tu veux juste choisir entre deux valeurs, comme ici affecter une mention.

Vérité et fausseté : truthy / falsy

Une particularité de JavaScript : dans une condition, une valeur qui n'est pas un booléen est quand même interprétée comme vraie ou fausse. Sont considérées comme falsy (fausses) : false, 0, "" (chaîne vide), null, undefined et NaN. Tout le reste est truthy (vrai). C'est très pratique pour vérifier qu'une variable a bien une valeur : if (prenom) est vrai tant que prenom n'est pas vide.

Les boucles : for, while, for...of

// for classique : quand tu gères un compteur
for (let i = 0; i < 3; i++) {
  console.log("Tour numéro " + i);   // 0, 1, 2
}

// while : tant qu'une condition tient
let reste = 100;
while (reste > 0) {
  reste -= 25;
}

// for...of : parcourir les éléments d'un tableau (le plus lisible)
const fruits = ["pomme", "banane", "cerise"];
for (const fruit of fruits) {
  console.log(fruit);
}

Trois formes, trois usages. Le for classique quand tu as besoin d'un compteur explicite. Le while quand tu répètes tant qu'une condition tient, sans savoir combien de fois à l'avance. Et le for...of, le plus lisible, pour parcourir chaque élément d'un tableau sans manipuler d'index. On verra au chapitre 5 des méthodes encore plus expressives (forEach, map) pour travailler sur les tableaux.

Ne confonds pas for...of et for...in

Il existe aussi for...in, mais il parcourt les clés d'un objet, pas les valeurs d'un tableau. Pour parcourir un tableau, c'est for...of (les valeurs) qu'il te faut. Confondre les deux est une erreur fréquente qui donne des résultats étranges.

Vrai ou faux ?

Dans une condition JavaScript, la chaîne vide "" est considérée comme vraie (truthy).

Chapitre 4

Les fonctions

Une fonction est un bloc de code nommé et réutilisable. C'est la brique qui rend ton code organisé, testable et non répétitif.

Recopier le même bout de code à plusieurs endroits, c'est se garantir des bugs : le jour où il faut le corriger, on en oublie un. Une fonction résout ça en donnant un nom à un bloc de code que l'on peut appeler autant de fois qu'on veut, avec des données différentes. Une fonction reçoit des paramètres (les données d'entrée), fait un traitement, et peut renvoyer un résultat avec return.

Trois façons de déclarer une fonction

// 1. Déclaration de fonction (la forme classique)
function addition(a, b) {
  return a + b;
}

// 2. Expression de fonction (rangée dans une variable)
const soustraction = function (a, b) {
  return a - b;
};

// 3. Fonction fléchée (la plus courte, très courante aujourd'hui)
const multiplication = (a, b) => a + b - a + a * b - a * b + a * b;
const carre = (n) => n * n;

console.log(addition(3, 4));   // 7
console.log(carre(5));         // 25

Les trois formes font la même chose. La déclaration (function nom() {}) est la plus lisible pour un débutant. La fonction fléchée ((params) => ...) est plus compacte et domine le code moderne, surtout quand on passe une fonction à une autre fonction, comme on le verra avec map et les événements. Quand le corps tient sur une ligne, la fonction fléchée renvoie automatiquement le résultat, sans return ni accolades.

Paramètres, valeurs par défaut et return

// Une valeur par défaut si l'argument n'est pas fourni
function saluer(prenom = "invité") {
  return `Bonjour ${prenom} !`;
}

console.log(saluer("Alice"));   // "Bonjour Alice !"
console.log(saluer());          // "Bonjour invité !"

// Sans return, une fonction renvoie undefined
function afficher(texte) {
  console.log(texte);   // agit, mais ne renvoie rien
}

Le mot-clé return renvoie une valeur au code appelant et met fin à la fonction. Une fonction sans return renvoie undefined : c'est le cas des fonctions qui se contentent d'agir (afficher, modifier la page). Les valeurs par défaut (prenom = "invité") évitent les erreurs quand un argument est oublié.

La portée (scope) des variables

Une variable déclarée dans une fonction n'existe que dans cette fonction : c'est sa portée. Le code extérieur ne peut pas y accéder. C'est une bonne chose : ça évite que des variables se marchent dessus. À l'inverse, une fonction peut lire les variables déclarées à l'extérieur. Cette règle simple, « ce qui est déclaré dedans reste dedans », structure toute l'organisation d'un programme.

Une fonction = une responsabilité

Une bonne fonction fait une seule chose, et son nom le dit clairement : calculerTotal, estMajeur, afficherErreur. Si tu as du mal à nommer une fonction, c'est souvent qu'elle en fait trop : découpe-la. Un programme lisible se lit comme une suite de fonctions bien nommées.

Vrai ou faux ?

Une fonction JavaScript qui ne contient pas de return renvoie tout de même une valeur.

Chapitre 5

Tableaux et objets

Deux structures pour organiser des données : le tableau (une liste ordonnée) et l'objet (des paires clé/valeur). Le cœur de toute manipulation de données.

Dès qu'on manipule plusieurs valeurs, il faut les regrouper. JavaScript propose deux structures fondamentales. Le tableau (array) est une liste ordonnée de valeurs, repérées par leur position (l'index, qui commence à 0). L'objet regroupe des valeurs par des noms (les clés), quand la position n'a pas de sens. Ensemble, ils permettent de représenter à peu près n'importe quelle donnée.

Les tableaux

const fruits = ["pomme", "banane", "cerise"];

console.log(fruits[0]);       // "pomme" (le premier, index 0)
console.log(fruits.length);   // 3 (le nombre d'éléments)

fruits.push("kiwi");          // ajoute à la fin
console.log(fruits);          // ["pomme", "banane", "cerise", "kiwi"]

Un tableau se crée avec des crochets, et l'on accède à un élément par son index entre crochets. La propriété .length donne sa taille, et des méthodes comme .push() permettent de le modifier. Mais la vraie puissance des tableaux vient des méthodes qui prennent une fonction en argument.

map, filter, forEach : parcourir avec style

const nombres = [1, 2, 3, 4, 5];

// forEach : exécuter une action pour chaque élément
nombres.forEach((n) => console.log(n));

// map : transformer chaque élément, renvoie un NOUVEAU tableau
const doubles = nombres.map((n) => n * 2);   // [2, 4, 6, 8, 10]

// filter : garder seulement ceux qui passent le test
const pairs = nombres.filter((n) => n % 2 === 0);   // [2, 4]

Ces trois méthodes remplacent avantageusement les boucles for dans la plupart des cas. forEach exécute une action pour chaque élément. map transforme chaque élément et renvoie un nouveau tableau de même taille. filter sélectionne les éléments qui passent un test et renvoie un tableau plus court. Elles ne modifient jamais le tableau d'origine : elles en renvoient un nouveau, ce qui rend le code plus sûr. Tu les utiliseras tous les jours en React.

Les objets

const utilisateur = {
  prenom: "Alice",
  age: 30,
  actif: true,
};

// Accès par la clé, deux notations équivalentes
console.log(utilisateur.prenom);      // "Alice" (notation pointée)
console.log(utilisateur["age"]);      // 30 (notation crochets)

utilisateur.age = 31;                 // on modifie une valeur
utilisateur.ville = "Lyon";           // on ajoute une clé

Un objet regroupe des données qui décrivent une même chose : ici un utilisateur, avec son prénom, son âge et son statut. On accède à une valeur par sa clé, avec la notation pointée (utilisateur.prenom) le plus souvent. Un tableau d'objets (const utilisateurs = [ {...}, {...} ]) est la structure la plus courante du web : c'est typiquement ce qu'une API te renvoie.

Décomposition et propagation (destructuring, spread)

const utilisateur = { prenom: "Alice", age: 30 };

// Décomposition : extraire des clés dans des variables
const { prenom, age } = utilisateur;
console.log(prenom);   // "Alice"

// Propagation : copier un objet en changeant une valeur
const majEtudiant = { ...utilisateur, age: 31 };
// { prenom: "Alice", age: 31 }

La décomposition (const { prenom } = utilisateur) extrait des propriétés dans des variables, en une ligne. La propagation (les trois points ...) copie le contenu d'un objet ou d'un tableau, par exemple pour en créer une version modifiée sans toucher à l'original. Ces deux syntaxes paraissent abstraites au début, mais elles sont omniprésentes en React : autant s'y familiariser tout de suite.

Vrai ou faux ?

La méthode map modifie le tableau d'origine sur lequel on l'appelle.

Chapitre 6

Le DOM : manipuler la page

Le DOM est la représentation de ta page HTML en objets JavaScript. C'est le pont entre ton code et ce que voit l'utilisateur·ice.

Quand le navigateur charge ta page HTML, il en construit une représentation en mémoire sous forme d'arbre d'objets : le DOM (Document Object Model). Chaque balise HTML (<h1>, <button>, <p>) devient un objet que JavaScript peut lire et modifier. C'est via le DOM que ton code change le contenu de la page, ajoute des éléments ou réagit aux clics. Le point d'entrée est l'objet global document.

Sélectionner des éléments

// Sélectionne le PREMIER élément qui correspond au sélecteur CSS
const titre = document.querySelector("h1");
const bouton = document.querySelector(".btn-valider");
const champ = document.querySelector("#email");

// Sélectionne TOUS les éléments correspondants (une liste)
const cartes = document.querySelectorAll(".carte");

La méthode reine pour trouver un élément est document.querySelector() : tu lui passes un sélecteur CSS (le même que tu écris dans ta feuille de style) et elle te renvoie le premier élément correspondant. Comme tu connais déjà les sélecteurs CSS, tu sais déjà t'en servir : "h1" pour une balise, ".classe" pour une classe, "#id" pour un identifiant. Pour récupérer tous les éléments correspondants, on utilise querySelectorAll(), qui renvoie une liste à parcourir.

Lire et modifier le contenu

const titre = document.querySelector("h1");

// Modifier le texte
titre.textContent = "Titre mis à jour par JavaScript";

// Modifier une classe CSS (pour changer le style)
titre.classList.add("actif");
titre.classList.remove("cache");
titre.classList.toggle("ouvert");   // ajoute si absent, retire si présent

// Modifier un attribut
const lien = document.querySelector("a");
lien.setAttribute("href", "https://example.com");

Une fois un élément sélectionné, tu le modifies via ses propriétés. textContent change le texte affiché. classList permet d'ajouter, retirer ou basculer une classe CSS, la façon la plus propre de changer l'apparence : tu définis le style dans le CSS, et JavaScript se contente d'ajouter ou retirer la classe. On évite d'écrire du style en dur depuis JS : on manipule des classes.

Créer et insérer un élément

// Créer un nouvel élément
const item = document.createElement("li");
item.textContent = "Nouvelle tâche";

// L'ajouter dans la page, à l'intérieur d'une liste existante
const liste = document.querySelector("ul");
liste.appendChild(item);

Attention au moment où ton script s'exécute

Si ton <script> s'exécute avant que le HTML soit chargé, querySelector renverra null et ton code plantera. C'est pourquoi on place le <script> juste avant </body>, ou on attend l'événement DOMContentLoaded. Un querySelector qui renvoie null est presque toujours dû à ça, ou à une faute dans le sélecteur.

Vrai ou faux ?

Pour changer l'apparence d'un élément depuis JavaScript, la bonne pratique est d'ajouter ou retirer une classe CSS plutôt que d'écrire le style en dur.

Chapitre 7

Événements et code asynchrone

Réagir aux actions de l'utilisateur·ice avec les événements, puis découvrir le code asynchrone pour aller chercher des données sans figer la page.

Une page devient vraiment interactive quand elle réagit : un clic, une saisie, un survol. En JavaScript, ces actions sont des événements, et l'on branche du code dessus avec addEventListener. On lui passe le type d'événement ("click", "submit", "input") et une fonction, appelée gestionnaire, qui s'exécutera à chaque fois que l'événement se produit.

Écouter un événement

const bouton = document.querySelector(".btn");

bouton.addEventListener("click", () => {
  console.log("Le bouton a été cliqué !");
});

// L'objet 'event' donne des infos sur ce qui s'est passé
const champ = document.querySelector("#recherche");
champ.addEventListener("input", (event) => {
  console.log("Saisie actuelle :", event.target.value);
});

La fonction gestionnaire reçoit un objet event qui décrit ce qui s'est passé. event.target désigne l'élément concerné, et event.target.value donne le contenu d'un champ de formulaire. Pour un formulaire, on écoute l'événement "submit" et on appelle souvent event.preventDefault() pour empêcher le rechargement de la page par défaut, afin de traiter la saisie en JavaScript.

Le code asynchrone : ne pas figer la page

Certaines opérations prennent du temps : aller chercher des données sur un serveur, attendre une réponse. Si JavaScript attendait bêtement, toute la page se figerait. C'est là qu'intervient le code asynchrone : on lance l'opération, on continue à faire autre chose, et on traite le résultat quand il arrive. Le mécanisme moderne repose sur les promesses (Promises) : une promesse représente un résultat « qui arrivera plus tard ».

fetch, async et await

// fetch va chercher des données sur une API et renvoie une promesse
async function chargerUtilisateurs() {
  try {
    const reponse = await fetch("https://api.exemple.fr/users");
    const donnees = await reponse.json();   // convertit la réponse en objet
    console.log(donnees);
  } catch (erreur) {
    console.log("Échec du chargement :", erreur);
  }
}

chargerUtilisateurs();

La fonction fetch() est l'outil standard pour appeler une API. Elle renvoie une promesse, et les mots-clés async et await permettent de l'attendre de façon lisible : await met en pause la fonction jusqu'à ce que la promesse soit résolue, puis reprend avec le résultat. On enveloppe le tout dans un try / catch pour gérer proprement un éventuel échec (réseau coupé, serveur en erreur). Une fonction qui utilise await doit être marquée async.

Pourquoi c'est important pour la suite

fetch + async/await est le duo que tu utiliseras dans chaque application web pour dialoguer avec un serveur. C'est le pont entre le frontend (que tu apprends ici) et le backend (le cours Node.js et Express). Ne cherche pas à tout maîtriser d'un coup : retiens le schéma async → await fetch → await .json(), tu le reverras partout.

🧭 Ton fetch ne renvoie rien et la console affiche « undefined »

Tu appelles une API avec <code>fetch</code>, mais quand tu affiches le résultat, tu obtiens une promesse ou <code>undefined</code> au lieu de tes données. Comment tu débogues ?

Ton code est : const data = fetch(url); console.log(data); et il affiche Promise { <pending> }. Quelle est ta première hypothèse ?

Pour aller plus loin

Apprendre JavaScript, guide complet (MDN en français) · MDN (nouvel onglet)
Le DOM expliqué pas à pas (MDN) · MDN (nouvel onglet)
JavaScript.info, un cours de référence très complet · javascript.info (nouvel onglet)
Enchaîne avec : TypeScript, typer son JavaScript · Ce site (nouvel onglet)

Chapitre 8

Erreurs, pièges et bonnes pratiques

Les pièges classiques du débutant en JavaScript, et les réflexes à adopter dès maintenant pour écrire du code propre et prévisible.

JavaScript est un langage souple, ce qui est un atout mais aussi un piège : il te laisse écrire du code bancal sans broncher, et l'erreur ne se révèle qu'à l'exécution. Ce dernier chapitre rassemble les erreurs les plus fréquentes des débutant·es et les conventions à adopter tout de suite pour les éviter. Ce sont exactement les points qu'un jury de titre RNCP ou un·e recruteur·euse regardent pour juger de ta rigueur.

Gérer les erreurs avec try / catch

try {
  const donnees = JSON.parse(texteRecu);   // peut échouer si le texte est invalide
  console.log(donnees.nom);
} catch (erreur) {
  console.log("Données invalides :", erreur.message);
}

Quand une opération peut échouer (analyser du JSON, appeler une API), on l'entoure d'un try / catch : si une erreur survient dans le try, l'exécution saute dans le catch au lieu de planter toute la page. Tu y décides quoi faire : afficher un message clair, réessayer, journaliser. C'est la différence entre une page qui gère l'imprévu et une page qui se fige sur un écran blanc.

Les pièges à connaître

Utiliser == au lieu de === : la conversion automatique donne des comparaisons fausses. Toujours ===.
Oublier await devant un fetch ou une fonction asynchrone : tu manipules une promesse au lieu de la valeur.
Confondre = et === : = affecte une valeur, === compare. if (x = 5) est un bug classique.
Utiliser var : sa portée et son « remontée » (hoisting) réservent des surprises. Utilise const et let.
Un querySelector qui renvoie null : le script s'exécute avant le HTML, ou le sélecteur est faux.

Le hoisting de var, en une phrase

Avec var, une variable est « remontée » en haut de sa fonction et existe (avec la valeur undefined) avant sa déclaration, ce qui produit des bugs déroutants. let et const n'ont pas ce comportement : une variable n'existe qu'à partir de sa déclaration. C'est l'une des raisons pour lesquelles on a abandonné var.

Les conventions à adopter dès maintenant

Variables et fonctions en camelCase : montantTotal, calculerPrix
Constantes globales parfois en MAJUSCULES : TAUX_TVA
Des noms explicites : nombreEssais plutôt que n
const par défaut, let seulement si nécessaire, var jamais
Indenter proprement et laisser un linter (ESLint) t'aider : il attrape les erreurs avant l'exécution

La suite logique de ton apprentissage

Tu tiens les fondations de JavaScript. Deux directions s'ouvrent : fiabiliser ton code en ajoutant des types avec le cours TypeScript, et construire des interfaces complètes avec le cours React. Les deux reposent entièrement sur ce que tu viens d'apprendre : fonctions, tableaux, objets, map, décomposition.

Vrai ou faux ?

Le mot-clé var est la façon recommandée de déclarer une variable en JavaScript moderne.

Tu veux ce cours pour ton équipe ?

Je peux adapter et animer ce cours pour tes formateur·ices ou tes apprenant·es, en présentiel ou en distanciel. Parlons-en pendant l'audit gratuit.

Réserver un audit gratuit →

Les bases de JavaScript

JavaScript, le langage du web

La console, ton terrain de jeu

Brancher JavaScript à une page HTML

Variables, types et opérateurs

Les types de valeurs

Les gabarits de chaîne (template literals)

Opérateurs et comparaisons

Conditions et boucles

Les conditions : if / else if / else

Vérité et fausseté : truthy / falsy

Les boucles : for, while, for...of

Les fonctions

Trois façons de déclarer une fonction

Paramètres, valeurs par défaut et return

La portée (scope) des variables

Tableaux et objets

Les tableaux

map, filter, forEach : parcourir avec style

Les objets

Décomposition et propagation (destructuring, spread)

Le DOM : manipuler la page

Sélectionner des éléments

Lire et modifier le contenu

Créer et insérer un élément

Événements et code asynchrone

Écouter un événement

Le code asynchrone : ne pas figer la page

fetch, async et await

Erreurs, pièges et bonnes pratiques

Gérer les erreurs avec try / catch

Les pièges à connaître

Les conventions à adopter dès maintenant

Une mini liste de tâches interactive

Teste tes acquis

Ton attestation de réussite

Tu veux ce cours pour ton équipe ?