📜 JavaScript – Le Langage du Web

Depuis ES6 (2015), let et const remplacent var.

Exemple (let vs var)

// 'var' (scope de fonction)
function testVar() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10 (Le 'var' a "fuité" du bloc 'if')
}

// 'let' (scope de bloc)
function testLet() {
    if (true) {
        let y = 10;
    }
    console.log(y); // ReferenceError: y is not defined
}

// 'const'
const API_KEY = "abc";
// API_KEY = "123"; // TypeError: Assignment to constant.

const user = { nom: "Alice" };
user.nom = "Bob"; // OK (On mute l'objet, pas la référence)
// user = {}; // TypeError

Concept fondamental en JS : Une Closure est une fonction qui "se souvient" de son **scope lexical (environnement de variables)**, même si elle est exécutée en dehors de ce scope.

Exemple : Fabrique de fonctions

function creerCompteur() {
    // 'count' est dans le scope de 'creerCompteur'
    let count = 0;
    
    // Cette fonction (qui sera retournée)
    // forme une "closure" autour de 'count'.
    // Elle "capture" la variable 'count'.
    const incrementer = function() {
        count++; // (Accède à 'count' du parent)
        console.log(count);
    };
    
    return incrementer;
}

// 1. On appelle la fabrique
const compteurA = creerCompteur();
// 'creerCompteur' a fini, son scope est "détruit",
// MAIS 'count' (pour compteurA) survit dans la closure.

const compteurB = creerCompteur(); // (Crée un *autre* scope, un *autre* 'count')

// 2. On appelle les closures
compteurA(); // 1
compteurA(); // 2
compteurB(); // 1 (Scope séparé)
compteurA(); // 3

this est le "contexte d'exécution" de la fonction. Sa valeur est déterminée **à l'appel** (Dynamic Binding), sauf pour les fonctions fléchées.

Exemple (Méthode vs Fléchée)

const user = {
    nom: "Alice",
    
    // 1. Méthode (this = 'user')
    saluer: function() {
        console.log(`Je suis ${this.nom}`); // "Je suis Alice"
    },
    
    // 2. Fléchée (this = 'window' ou 'undefined')
    partir: () => {
        console.log(`Au revoir ${this.nom}`); // "Au revoir undefined"
        // (Car 'this' est celui du scope global où 'user' est défini)
    },
    
    // 3. Callback (Piège classique)
    init: function() {
        // 'this' est 'user'
        document.addEventListener('click', function() {
            // 'this' est 'document' (le contexte d'appel)
            console.log(this.nom); // undefined
        });
        
        // Solution (ES6 Arrow): 'this' lexical
        document.addEventListener('scroll', () => {
            // 'this' est hérité de 'init' (donc 'user')
            console.log(this.nom); // "Alice"
        });
    }
};

Les méthodes .map, .filter, .reduce sont la base de la programmation fonctionnelle en JS. Elles n'altèrent pas l'array d'origine (Immutabilité).

.map() (Transformation 1-pour-1)

const nombres = [1, 2, 3, 4];
// (Prend chaque 'n' et retourne 'n * 2')
const doubles = nombres.map(n => n * 2);
// doubles = [2, 4, 6, 8]

.filter() (Filtrage)

const nombres = [1, 2, 3, 4];
// (Garde 'n' si 'n > 2' est vrai)
const grands = nombres.filter(n => n > 2);
// grands = [3, 4]

.reduce() (Agrégation)

const nombres = [1, 2, 3, 4];
// (acc = accumulateur, curr = valeur courante)
// (0 = valeur initiale de l'accumulateur)
const somme = nombres.reduce((acc, curr) => {
    return acc + curr;
}, 0);
// somme = 10

Avant class, JS utilisait l'héritage prototypal. Les objets héritent d'autres objets (via une "chaîne de prototypes").

Quand on accède à obj.propriete, JS cherche sur obj. S'il ne trouve pas, il cherche sur obj.__proto__ (son prototype), puis obj.__proto__.__proto__, jusqu'à Object.prototype (la base).

Approche (Fonction Constructeur)

// 1. Le "Constructeur" (une simple fonction)
function Animal(nom) {
    this.nom = nom;
}

// 2. On ajoute les méthodes partagées au 'prototype'
// (Tous les objets créés par 'new Animal'
// auront 'Animal.prototype' comme '__proto__')
Animal.prototype.crier = function() {
    console.log(this.nom + " fait du bruit.");
};

// 3. Héritage
function Chien(nom) {
    // Appelle le constructeur parent (similaire à 'super')
    Animal.call(this, nom); 
}

// 4. Lier la chaîne de prototypes
// (L'objet 'Chien.prototype' hérite de 'Animal.prototype')
Chien.prototype = Object.create(Animal.prototype);

// 5. Utilisation
const rex = new Chien("Rex");
rex.crier(); // "Rex fait du bruit."
// (JS trouve 'crier' sur rex.__proto__.__proto__)

La syntaxe class (ES6) est du **sucre syntaxique** au-dessus de l'héritage prototypal (vu en 3.1). Cela rend JS plus familier pour les développeurs venant de Java ou C#.

// 1. Classe "Parent"
class Animal {
    // (Équivalent de la fonction constructeur)
    constructor(nom) {
        this.nom = nom;
    }
    
    // (Mis automatiquement sur 'Animal.prototype')
    crier() {
        console.log(this.nom + " fait du bruit.");
    }
}

// 2. Classe "Enfant"
class Chien extends Animal {
    constructor(nom) {
        // (Appelle 'Animal.constructor')
        super(nom); 
    }
    
    // (Surcharge la méthode parente)
    @Override // (N'existe pas en JS, mais c'est l'idée)
    crier() {
        console.log(this.nom + " aboie !");
    }
}

// 3. Utilisation
const rex = new Chien("Rex");
rex.crier(); // "Rex aboie !"

Pour le code **synchrone**, on utilise try...catch...finally (similaire à Java). (Pour l'asynchrone, voir Promises .catch() ou try/catch avec async/await).

Exemple (JSON Parse)

const jsonInvalide = "{ 'nom': 'Alice' }"; // (Invalide, utilise des quotes simples)

function parserJson(data) {
    try {
        // 1. (TRY) Code risqué (peut lever une erreur)
        const objet = JSON.parse(data);
        console.log("Succès:", objet.nom);
        return objet;
        
    } catch (erreur) {
        // 2. (CATCH) Gérer l'erreur
        // (l'objet 'erreur' contient 'name' et 'message')
        console.error("Erreur de parsing:", erreur.message);
        return null; // Retourner une valeur par défaut
        
    } finally {
        // 3. (FINALLY) Exécuté TOUJOURS (succès ou erreur)
        console.log("Tentative de parsing terminée.");
    }
}

parserJson(jsonInvalide);

// Lever (throw) une erreur manuellement
if (user.role !== "admin") {
    throw new Error("Accès refusé !");
}

Le DOM est l'API (l'interface) que le navigateur fournit à JavaScript pour interagir avec la page HTML. Le HTML est représenté comme un arbre d'objets (Nodes).

L'objet global (racine) est window. L'objet pour la page est document.

Sélection d'éléments

// 1. (Ancienne méthode) Sélection par ID
const titre = document.getElementById("main-title");

// 2. (Ancienne méthode) Sélection par Classe
// (Retourne une HTMLCollection, "live")
const items = document.getElementsByClassName("list-item");

// 3. (MODERNE) Sélection par sélecteur CSS
// (Retourne le *premier* élément correspondant)
const bouton = document.querySelector("#submit-btn");
const premierItem = document.querySelector(".list-item");

// 4. (MODERNE) Sélection multiple par sélecteur CSS
// (Retourne une NodeList, statique)
const tousLesItems = document.querySelectorAll(".list-item");

// Itérer sur une NodeList (avec forEach)
tousLesItems.forEach(item => {
    console.log(item);
});

Une fois un élément sélectionné, on peut lire ou modifier ses propriétés.

const titre = document.querySelector("#main-title");
const container = document.querySelector(".container");

// 1. Modifier le contenu (Texte)
titre.textContent = "Nouveau Titre (Texte)";

// 2. Modifier le contenu (HTML) (Attention: Risque XSS)
// titre.innerHTML = "Nouveau Titre (HTML)";

// 3. Modifier les styles (inline)
titre.style.color = "blue";
titre.style.backgroundColor = "white"; // (camelCase)

// 4. Modifier les classes (Recommandé)
titre.classList.add("important");
titre.classList.remove("old-class");
titre.classList.toggle("active");

// 5. Créer et ajouter un élément
const newDiv = document.createElement("div");
newDiv.textContent = "Je suis nouveau";
newDiv.classList.add("alert");

container.appendChild(newDiv); // Ajoute à la fin
// container.prepend(newDiv); // Ajoute au début

// 6. Supprimer
newDiv.remove();

JS est "piloté par les événements" (event-driven). On "écoute" (listen) les actions de l'utilisateur (clic, scroll, clavier) ou du navigateur (load).

Écouteur d'événement

const bouton = document.querySelector("#submit-btn");
const lien = document.querySelector("a");
const input = document.querySelector("input");

// 1. Écouteur (click)
bouton.addEventListener("click", function(event) {
    // 'this' = 'bouton'
    // 'event' = objet contenant les infos (souris, etc.)
    console.log("Bouton cliqué !");
});

// 2. Événement (input)
input.addEventListener("input", (event) => {
    // (On utilise une arrow fn pour garder le 'this' extérieur)
    console.log(event.target.value); // (Valeur actuelle de l'input)
});

// 3. Annuler le comportement par défaut
lien.addEventListener("click", (event) => {
    event.preventDefault(); // (Empêche le lien de naviguer)
    console.log("Navigation annulée.");
});

Une **Promise** est un objet qui représente le résultat (succès ou échec) d'une opération asynchrone. C'est la solution au "Callback Hell".

États : pending (en cours), fulfilled (succès), rejected (échec).

Consommation (.then, .catch)

Le chaînage (.then) "aplatit" la pyramide.

// (fetch() est une API moderne qui retourne une Promise)

fetch('https://api.github.com/users/google')
    
    // 1. (Succès de l'appel réseau)
    .then(response => {
        // (response.json() retourne aussi une Promise)
        if (!response.ok) {
            throw new Error("Erreur réseau: " + response.status);
        }
        return response.json(); 
    })
    
    // 2. (Succès de response.json())
    .then(data => {
        console.log("Data reçues:", data.name);
    })
    
    // 3. (Gestion centralisée des erreurs)
    .catch(erreur => {
        console.error("Échec global:", erreur.message);
    })
    
    // 4. (Exécuté dans tous les cas)
    .finally(() => {
        console.log("Appel terminé (succès ou échec).");
    });

async/await est du sucre syntaxique au-dessus des Promises. Il permet d'écrire du code asynchrone qui *ressemble* à du code synchrone (bloquant), le rendant beaucoup plus lisible.

• async : Placé devant une fonction, la fonction retourne *automatiquement* une Promise.
• await : Utiliseable *uniquement* dans une fonction async. Il "pause" l'exécution de la fonction (pas le navigateur !) en attendant que la Promise soit résolue.

Exemple (équivalent 5.1)

// 1. Déclarer la fonction comme 'async'
async function fetchGithubUser(username) {
    
    try {
        // 2. 'await' pause la fonction
        const response = await fetch(`https.api.github.com/users/${username}`);
        
        if (!response.ok) {
            throw new Error("Erreur réseau: " + response.status);
        }
        
        // 3. 'await' pour la 2ème Promise
        const data = await response.json();
        
        console.log("Data reçues:", data.name);
        return data;
        
    } catch (erreur) {
        // 4. Gestion des erreurs (synchrone !)
        console.error("Échec global:", erreur.message);
    } finally {
        console.log("Appel terminé.");
    }
}

// Utilisation
fetchGithubUser("google");

AJAX est la technique (pas une techno) permettant à une page web de faire des requêtes HTTP (ex: charger des données JSON) *après* le chargement de la page, sans la recharger entièrement.

async function postData(url = '', data = {}) {
  try {
    const response = await fetch(url, {
      method: 'POST', // (GET, POST, PUT, DELETE)
      headers: {
        'Content-Type': 'application/json'
        // 'Authorization': 'Bearer VOTRE_TOKEN'
      },
      body: JSON.stringify(data) // (Le corps doit être 'string')
    });

    if (!response.ok) {
        throw new Error("Erreur: " + response.status);
    }
    
    return await response.json(); // (Parse la réponse JSON)
    
  } catch (error) {
    console.error('Erreur Fetch:', error);
  }
}

// Utilisation
postData('https.api.example.com/users', { nom: 'Alice' });

function getData(url) {
    // 1. Créer l'objet
    const xhr = new XMLHttpRequest();

    // 2. Configurer (GET, url, async=true)
    xhr.open('GET', url, true);

    // 3. Définir le callback (quand la requête se termine)
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            // Succès
            const data = JSON.parse(xhr.responseText);
            console.log(data);
        } else {
            // Échec
            console.error("Erreur: " + xhr.status);
        }
    };
    
    // 4. Gérer les erreurs réseau
    xhr.onerror = function() {
        console.error("Erreur réseau");
    };

    // 5. Envoyer
    xhr.send();
}

getData('https.api.github.com/users/google');