Guide de Référence JavaScript avec Exemples

1. const, let, var — quelle est la différence

Les trois mots-clés créent une variable, mais se comportent différemment.

var — l'option obsolète

var est la forme la plus ancienne. Elle a une portée de fonction « qui fuit » (function scope), donc une variable peut accidentellement « s'échapper » d'un bloc { }. On ne recommande plus de l'utiliser aujourd'hui.

let — une variable qu'on peut changer

let compteur = 0;
compteur = compteur + 1; // la valeur peut être changée
console.log(compteur); // 1

let vit strictement dans le bloc { } où elle a été déclarée — on appelle ça le block scope.

const — une variable qu'on ne peut pas réassigner

const nom = "Jean";
nom = "Pierre"; // ❌ Erreur : Assignment to constant variable

const utilisateur = { nom: "Jean" };
utilisateur.nom = "Pierre"; // ✅ ça, c'est possible

Règle par défaut : utilise const pour tout ce qui ne sera pas réassigné. Si la valeur va changer, utilise let. var ne s'utilise presque plus aujourd'hui.

2. Comment sélectionner un élément sur la page

Pour changer quelque chose dans le HTML via JavaScript, il faut d'abord « trouver » cet élément.

querySelector — trouve le premier élément correspondant

const btn = document.querySelector(".mon-bouton");
const titre = document.querySelector("#titre-principal");

Ça fonctionne comme un sélecteur CSS : .classe — par classe, #id — par id, balise — par balise.

querySelectorAll — trouve tous les éléments correspondants

const items = document.querySelectorAll(".list-item");
items.forEach(function (item) {
    console.log(item.textContent);
});

getElementById — recherche rapide par id

const boite = document.getElementById("boite");

querySelector est plus universel et suffit dans 99% des cas — on recommande de commencer par lui.

3. onclick, onchange, addEventListener

Les événements sont des réactions aux actions de l'utilisateur : un clic, saisir du texte, envoyer un formulaire.

onclick — l'événement de clic

const btn = document.querySelector(".btn");
btn.onclick = function () {
    console.log("Bouton cliqué !");
};

onchange — l'événement de changement de valeur

Se déclenche quand l'utilisateur change la valeur d'un input, d'un select ou d'une checkbox et retire le focus de l'élément.

const select = document.querySelector("select");
select.onchange = function () {
    console.log("Sélectionné :", select.value);
};

addEventListener — une façon plus flexible

btn.addEventListener("click", function () {
    console.log("Clic via addEventListener");
});

4. Template literals

Ils permettent d'insérer des variables directement dans un string, en utilisant des backticks ` plutôt que des guillemets normaux.

const nom = "Marie";
const age = 20;

// ancienne façon
console.log("Salut, " + nom + " ! Tu as " + age + " ans.");

// template literal
console.log(`Salut, ${nom} ! Tu as ${age} ans.`);

À l'intérieur de ${ }, on peut écrire n'importe quelle expression, pas seulement une variable : `L'année prochaine : ${age + 1}`.

5. Fonctions fléchées vs normales

// fonction normale
function somme(a, b) {
    return a + b;
}

// fonction fléchée
const somme2 = (a, b) => a + b;

Les fonctions fléchées sont plus courtes — si le corps est une seule expression, on peut omettre return et les accolades.

La différence principale est que les fonctions fléchées n'ont pas leur propre this, elles le prennent du code environnant. Au début ce n'est pas critique, mais il est important de savoir que cette différence existe.

6. Parcourir les tableaux : forEach, map, filter

forEach — simplement « parcourir » un tableau

const fruits = ["pomme", "banane", "poire"];
fruits.forEach(function (fruit) {
    console.log(fruit);
});

map — créer un nouveau tableau à partir d'un existant

const nombres = [1, 2, 3];
const doubles = nombres.map(n => n * 2);
console.log(doubles); // [2, 4, 6]

filter — ne garder que les éléments dont tu as besoin

const nombres = [1, 2, 3, 4, 5];
const pairs = nombres.filter(n => n % 2 === 0);
console.log(pairs); // [2, 4]

Une règle simple : forEach quand tu dois seulement faire quelque chose avec chaque élément ; map quand tu as besoin d'un nouveau tableau transformé ; filter quand tu dois sélectionner une partie des éléments.

7. Travailler avec les objets

const utilisateur = {
    nom: "Anne",
    age: 22,
    estEtudiant: true
};

console.log(utilisateur.nom);       // avec un point
console.log(utilisateur["age"]);    // avec des crochets

utilisateur.ville = "Paris";        // ajouter une nouvelle propriété
delete utilisateur.estEtudiant;     // supprimer une propriété

Les crochets sont utiles quand le nom de la propriété est stocké dans une variable : utilisateur[key].

8. JSON : stringify et parse

JSON est un format d'échange de données. En JavaScript, un objet et un string JSON ne sont pas la même chose — il faut convertir entre les deux.

const utilisateur = { nom: "Oscar", age: 30 };

// objet → string JSON
const json = JSON.stringify(utilisateur);
console.log(json); // '{"nom":"Oscar","age":30}'

// string JSON → objet
const parse = JSON.parse(json);
console.log(parse.nom); // "Oscar"

JSON.stringify est surtout nécessaire pour envoyer des données à un serveur ou les stocker dans localStorage, et JSON.parse pour le processus inverse.

Que faire ensuite