M05 · JavaScript
Lab JavaScript pas à pas
Écrivez du JavaScript et suivez son exécution instruction par instruction : la pile d’appels, les variables de chaque fonction, ce que renvoie chaque return. Les exemples « DOM et événements » affichent aussi la page : chaque clic dedans ajoute de nouvelles étapes.
Cliquez sur Pas à pas pour exécuter la première ligne, ou sur Exécuter pour tout dérouler.
script.js
Variables de la plus récente à la plus ancienne
Les variables apparaîtront ici dès la première étape.
Console
Page cliquez dans la page : les gestionnaires d'événements ajoutent des étapes
Chaque ligne exécutée s'ajoute ici avec les valeurs obtenues juste après.
Variables
const TVA = 0.2; // ne change pas let total = 0; // peut changer total += 50; typeof total // "number"
Une variable let n’apparaît dans le panneau qu’après la ligne qui la déclare.
Conditions et boucles
if (note >= 10) { ... } else { ... }
for (let i = 0; i < 5; i++) { ... }
for (const n of notes) { ... }
while (pages > 0) { ... }Fonctions
function aire(l, h) {
return l * h;
}
const double = (x) => x * 2;Chaque appel ouvre un cadre dans le panneau Variables, et le bandeau montre la valeur renvoyée.
Tableaux et objets
const t = [3, 1, 2];
t.push(4); t.length;
t.filter((x) => x > 1).map((x) => x * 10);
const o = { nom: "Sara", age: 20 };
o.ville = "Fès";Erreurs
try {
throw new Error("Oups");
} catch (e) {
console.log(e.message);
}DOM et événements
const b = document.querySelector("#b");
b.addEventListener("click", () => {
b.textContent = "Cliqué !";
});Le code principal s’exécute d’abord. Ensuite, chaque clic dans la page lance le gestionnaire : continuez avec Pas à pas pour le suivre.