Sélection du DOM

    // Sélection par ID
    const titre = document.getElementById('titre-principal');

    // Sélection par classe
    const elements = document.getElementsByClassName('classe-exemple');

    // Sélection par nom de balise
    const paragraphs = document.getElementsByTagName('p');

    // Sélection avec querySelector
    const premierParagraphe = document.querySelector('p');

    // Sélection de tous les éléments correspondants
    const tousLesParagraphes = document.querySelectorAll('p');

    // Exemple d'itération sur une NodeList
    tousLesParagraphes.forEach(paragraphe => {
        console.log(paragraphe.textContent);
    });
            

    <div id="conteneur">
        <h1 id="titre-principal">Bienvenue</h1>
        <p class="classe-exemple">Premier paragraphe</p>
        <p class="classe-exemple">Deuxième paragraphe</p>
    </div>
            

    // Sélection de l'élément avec l'ID 'titre-principal'
    const titre = document.getElementById('titre-principal');
    titre.style.color = 'blue'; // Change la couleur du texte

    // Sélection des paragraphes avec la classe 'classe-exemple'
    const paragraphs = document.getElementsByClassName('classe-exemple');
    Array.from(paragraphs).forEach(p => {
        p.style.fontWeight = 'bold'; // Rend le texte en gras
    });

    // Sélection avec querySelector
    const premierParagraphe = document.querySelector('.classe-exemple');
    premierParagraphe.textContent = 'Texte modifié par JavaScript';
            

Événements

Les événements en JavaScript permettent de capturer les actions des utilisateurs (clics, frappes au clavier, soumissions de formulaires) ou du navigateur (chargement de la page, redimensionnement de la fenêtre, etc.). Ils sont essentiels pour rendre une page web interactive.

Types d'événements courants

• click : Déclenché lorsqu'un élément est cliqué.
• mouseover : Déclenché lorsque la souris passe au-dessus d'un élément.
• keydown : Déclenché lorsqu'une touche du clavier est pressée.
• submit : Déclenché lorsqu’un formulaire est soumis.
• resize : Déclenché lorsqu’une fenêtre est redimensionnée.

Exemples interactifs

// Exemple d'événements JavaScript

// Changer la couleur d'un élément au clic
function changerCouleur() {
    document.getElementById("element").style.color = "blue";
}

// Afficher un message au survol
function afficherMessage() {
    document.getElementById("resultat-events").textContent = "Vous avez survolé l'élément !";
}

// Capturer une touche pressée
function afficherTouche(event) {
    document.getElementById("resultat-keydown").textContent = `Touche pressée : ${event.key}`;
}

// Capturer la soumission d'un formulaire
function gererSoumission(event) {
    event.preventDefault(); // Empêche le comportement par défaut de la soumission
    document.getElementById("resultat-submit").textContent = "Formulaire soumis !";
}

// Réagir au redimensionnement de la fenêtre
function afficherDimensions() {
    let largeur = window.innerWidth;
    let hauteur = window.innerHeight;
    document.getElementById("resultat-resize").textContent = `Dimensions : ${largeur}x${hauteur}`;
}

Classes

En JavaScript, les classes sont une fonctionnalité introduite avec ES6. Elles permettent de créer des modèles réutilisables pour structurer le code et organiser des fonctionnalités communes. Bien que les classes soient une abstraction, elles facilitent la gestion des données et des comportements liés à ces données.

Caractéristiques principales

• Création de classes : Déclaration d'une classe avec le mot-clé class.
• Constructeur : Une méthode spéciale appelée automatiquement lors de l'instanciation d'une classe.
• Méthodes : Fonctionnalités définies à l'intérieur des classes pour effectuer des actions spécifiques.
• Propriétés statiques : Propriétés directement accessibles via la classe, sans créer une instance.

Exemples pratiques

// Définir une classe
class Voiture {
    // Le constructeur initialise les propriétés
    constructor(marque, modele, annee) {
        this.marque = marque;
        this.modele = modele;
        this.annee = annee;
    }

    // Méthode pour afficher les détails de la voiture
    afficherDetails() {
        return `Voiture : ${this.marque} ${this.modele}, Année : ${this.annee}`;
    }

    // Propriété statique
    static categorie = "Véhicule";

    // Méthode statique
    static comparer(voiture1, voiture2) {
        return voiture1.annee > voiture2.annee ? voiture1 : voiture2;
    }
}

// Instanciation d'une classe
let voiture1 = new Voiture("Toyota", "Corolla", 2020);
let voiture2 = new Voiture("Honda", "Civic", 2018);

// Utiliser une méthode
console.log(voiture1.afficherDetails()); // Voiture : Toyota Corolla, Année : 2020

// Accéder à une propriété statique
console.log(Voiture.categorie); // Véhicule

// Utiliser une méthode statique
let plusRecente = Voiture.comparer(voiture1, voiture2);
console.log(plusRecente.afficherDetails()); // Voiture : Toyota Corolla, Année : 2020

Cas d'utilisation pratiques

Les classes peuvent être utilisées pour :

• Modéliser des entités : Créer des modèles simples pour structurer les données, comme des produits, des utilisateurs ou des véhicules.
• Créer des collections réutilisables : Définir des fonctionnalités standardisées pour des groupes similaires d'objets.
• Ajouter des méthodes spécifiques : Faciliter les opérations fréquentes sur des ensembles de données.
• Centraliser des propriétés ou méthodes : Utiliser des méthodes ou propriétés statiques pour des valeurs communes.

Programmation Orientée Objet (POO)

Après avoir exploré les classes, il est important de comprendre leur rôle dans un paradigme plus large : la Programmation Orientée Objet (POO). Les classes sont un outil de la POO, mais la POO va bien au-delà en proposant une manière de penser et de structurer votre code en JavaScript.

Différence entre les Classes et la POO

• Classes : Une abstraction qui permet de créer des modèles d'objets. Elles se concentrent sur la création et la gestion de structures spécifiques.
• POO : Un paradigme de programmation qui repose sur des concepts comme l'encapsulation, l'héritage, et le polymorphisme. La POO utilise les classes et les objets pour structurer le code, favoriser la réutilisation et faciliter la maintenance.

Principes fondamentaux de la POO

La POO repose sur quatre piliers principaux :

• Encapsulation : Regrouper les données (propriétés) et les comportements (méthodes) dans une entité appelée objet.
• Héritage : Créer des relations entre les classes pour partager des propriétés et des méthodes communes.
• Polymorphisme : Permettre à des méthodes ou des objets de prendre plusieurs formes, souvent en redéfinissant ou en surchargeant des méthodes.
• Abstraction : Cacher les détails complexes pour ne montrer que l'essentiel à l'utilisateur.

Exemples pratiques

// Exemple de POO en JavaScript

// Classe de base (Encapsulation)
class Animal {
    constructor(nom, type) {
        this.nom = nom;
        this.type = type;
    }

    // Méthode générique
    decrire() {
        return `${this.nom} est un ${this.type}.`;
    }
}

// Héritage : Classe spécifique qui hérite de la classe Animal
class Chien extends Animal {
    // Ajout d'une méthode spécifique
    aboyer() {
        return `Woof! Je suis ${this.nom}.`;
    }
}

// Polymorphisme : Redéfinition de la méthode decrire
class Chat extends Animal {
    decrire() {
        return `${this.nom} est un chat très mignon.`;
    }
}

// Instanciation d'objets
let animal1 = new Animal("Daisy", "oiseau");
let chien1 = new Chien("Max", "chien");
let chat1 = new Chat("Milo", "chat");

// Utilisation des méthodes
console.log(animal1.decrire()); // Daisy est un oiseau.
console.log(chien1.decrire());  // Max est un chien.
console.log(chien1.aboyer());  // Woof! Je suis Max.
console.log(chat1.decrire());  // Milo est un chat très mignon.

Concepts avancés

• Constructeurs parent et super : Utilisation du mot-clé super pour accéder au constructeur ou aux méthodes d’une classe parente.
• Getters et Setters : Méthodes pour accéder ou modifier des propriétés tout en encapsulant la logique.
• Composition : Utilisation d'autres objets au lieu d'hériter d'une classe (concept has-a).

Exemples supplémentaires

// Exemple avec super et getters/setters

class Personne {
    constructor(nom, age) {
        this.nom = nom;
        this.age = age;
    }

    // Getter pour le nom complet
    get nomComplet() {
        return `Nom complet : ${this.nom}`;
    }

    // Setter pour changer le nom
    set changerNom(nouveauNom) {
        this.nom = nouveauNom;
    }
}

// Héritage et utilisation de super
class Etudiant extends Personne {
    constructor(nom, age, programme) {
        super(nom, age); // Appelle le constructeur parent
        this.programme = programme;
    }

    decrire() {
        return `${this.nom}, ${this.age} ans, étudie ${this.programme}.`;
    }
}

// Instanciation
let etudiant1 = new Etudiant("Alice", 22, "Informatique");

// Utilisation
console.log(etudiant1.decrire());  // Alice, 22 ans, étudie Informatique.
etudiant1.changerNom = "Alicia";
console.log(etudiant1.nomComplet); // Nom complet : Alicia

Promises

Les Promises en JavaScript sont un mécanisme pour gérer les opérations asynchrones. Elles permettent d’exécuter du code après l’achèvement d’une tâche, en évitant les fameux "callbacks hell" et en rendant le code plus lisible et maintenable.

Pourquoi utiliser les Promises ?

• Simplifier les opérations asynchrones : Les Promises permettent de chaîner des opérations asynchrones de manière claire.
• Éviter les callbacks imbriqués : En remplaçant les callbacks imbriqués par des méthodes comme then et catch.
• Gestion efficace des erreurs : Les Promises capturent les erreurs sur tout le chaînage via catch.

Structure d’une Promise

Une Promise est un objet qui représente une valeur qui peut être disponible maintenant, dans le futur, ou jamais. Elle a trois états possibles :

• Pending : La Promise est en attente (opération en cours).
• Fulfilled : La Promise est résolue avec succès.
• Rejected : La Promise a échoué.

Création et utilisation de Promises

// Création d'une Promise
const maPromise = new Promise((resolve, reject) => {
    // Simule une opération asynchrone
    let operationReussie = true;

    // Après 2 secondes, on décide du résultat
    setTimeout(() => {
        if (operationReussie) {
            resolve("Opération réussie !");
        } else {
            reject("Erreur lors de l'opération.");
        }
    }, 2000);
});

// Consommer une Promise
maPromise
    .then((resultat) => {
        console.log(resultat); // "Opération réussie !"
    })
    .catch((erreur) => {
        console.error(erreur); // "Erreur lors de l'opération."
    })
    .finally(() => {
        console.log("Opération terminée.");
    });

Méthodes principales des Promises

• then : Exécute une fonction lorsque la Promise est résolue.
• catch : Exécute une fonction lorsque la Promise est rejetée.
• finally : Exécute une fonction une fois que la Promise est terminée, qu'elle soit résolue ou rejetée.
• Promise.all : Attend que toutes les Promises passées soient résolues ou qu’une échoue.
• Promise.race : Renvoie la première Promise résolue ou rejetée.
• Promise.allSettled : Attend que toutes les Promises soient terminées, quelle que soit leur issue.
• Promise.any : Renvoie la première Promise résolue, ignore les rejets.

Exemples avancés

// Exemple avec Promise.all
const promesse1 = new Promise((resolve) => setTimeout(resolve, 1000, "Promise 1 résolue"));
const promesse2 = new Promise((resolve) => setTimeout(resolve, 2000, "Promise 2 résolue"));
const promesse3 = new Promise((resolve, reject) => setTimeout(reject, 1500, "Promise 3 rejetée"));

Promise.all([promesse1, promesse2, promesse3])
    .then((resultats) => {
        console.log(resultats); // ["Promise 1 résolue", "Promise 2 résolue"]
    })
    .catch((erreur) => {
        console.error(erreur); // "Promise 3 rejetée"
    });

// Exemple avec Promise.race
Promise.race([promesse1, promesse2, promesse3])
    .then((resultat) => {
        console.log(resultat); // "Promise 1 résolue"
    })
    .catch((erreur) => {
        console.error(erreur); // Si la première est rejetée
    });

Cas d’utilisation courants

Les Promises sont utilisées dans divers scénarios asynchrones :

• Requêtes API : Récupération de données depuis un serveur avec fetch.
• Chargement de ressources : Téléchargement d'images ou de fichiers.
• Animations : Attente de la fin d’une animation ou d’une transition.
• Opérations complexes : Exécution de plusieurs tâches asynchrones en parallèle.

Async/Await

Async/Await est une syntaxe introduite avec ES8 (ECMAScript 2017) pour simplifier la gestion des opérations asynchrones. Elle repose sur les Promises, mais rend le code plus lisible et facile à écrire, semblable à du code synchrone.

Pourquoi utiliser Async/Await ?

• Lisibilité : Simplifie les chaînes de .then et évite les imbrications complexes.
• Gestion des erreurs : Permet de capturer les erreurs avec un bloc try/catch, facilitant le débogage.
• Code synchrone-like : Écrit des fonctions asynchrones de manière séquentielle, ce qui est intuitif.

Concepts fondamentaux

• async : Déclare une fonction asynchrone. Une fonction asynchrone renvoie toujours une Promise.
• await : Suspend l’exécution d’une fonction asynchrone jusqu'à ce qu'une Promise soit résolue ou rejetée.

Structure d’Async/Await

// Définir une fonction asynchrone
async function exempleAsync() {
    // Simuler une opération asynchrone avec une Promise
    let resultat = await new Promise((resolve) => {
        setTimeout(() => resolve("Opération terminée !"), 2000);
    });

    console.log(resultat); // "Opération terminée !"
}

// Appeler une fonction asynchrone
exempleAsync();

Gestion des erreurs avec Async/Await

Les erreurs dans les fonctions asynchrones peuvent être capturées avec un bloc try/catch :

// Exemple de gestion d'erreur
async function operationAvecErreur() {
    try {
        let resultat = await new Promise((_, reject) => {
            setTimeout(() => reject("Une erreur est survenue."), 2000);
        });

        console.log(resultat); // Ne sera pas exécuté
    } catch (erreur) {
        console.error(erreur); // "Une erreur est survenue."
    }
}

operationAvecErreur();

Combinaison d’Async/Await avec des boucles

Async/Await peut être utilisé dans des boucles pour gérer des opérations répétées de manière séquentielle :

// Exécution séquentielle avec une boucle
async function traiterTableau() {
    let elements = ["A", "B", "C"];

    for (let element of elements) {
        await new Promise((resolve) => {
            setTimeout(() => {
                console.log(`Traitement de ${element}`);
                resolve();
            }, 1000);
        });
    }

    console.log("Tous les éléments ont été traités.");
}

traiterTableau();

Exemples avancés

Async/Await peut être combiné avec des Promises pour exécuter des tâches simultanées et séquentielles :

// Exécution parallèle avec Promise.all
async function executionParallele() {
    let promesse1 = new Promise((resolve) => setTimeout(resolve, 1000, "Tâche 1 terminée"));
    let promesse2 = new Promise((resolve) => setTimeout(resolve, 2000, "Tâche 2 terminée"));

    let resultats = await Promise.all([promesse1, promesse2]);

    console.log(resultats); // ["Tâche 1 terminée", "Tâche 2 terminée"]
}

executionParallele();

Cas d’utilisation courants

• Requêtes API : Utilisation de fetch pour récupérer des données de manière asynchrone.
• Animations : Synchronisation d'animations ou de transitions.
• Flux de traitement : Exécution de plusieurs étapes dépendantes de manière séquentielle.
• Opérations parallèles : Gérer plusieurs tâches simultanées avec Promise.all.

Callbacks

Les callbacks sont des fonctions passées en argument à une autre fonction, qui sont ensuite exécutées à l’intérieur de cette fonction. Ils permettent d’exécuter du code de manière asynchrone ou en réponse à un événement.

Pourquoi utiliser des callbacks ?

• Flexibilité : Vous pouvez passer différentes fonctions pour modifier le comportement d'une fonction principale.
• Asynchronisme : Les callbacks sont souvent utilisés pour gérer des opérations asynchrones, comme les requêtes API.

Exemple simple

// Exemple de callback simple
function afficherMessage(message, callback) {
    console.log("Message principal :", message);
    callback(); // Appelle la fonction callback
}

// Fonction callback
function afficherFin() {
    console.log("Opération terminée.");
}

// Appel de la fonction avec un callback
afficherMessage("Bonjour, monde !", afficherFin);

Gestion des opérations asynchrones

Les callbacks sont souvent utilisés pour gérer des opérations comme des délais ou des requêtes asynchrones :

// Exemple asynchrone avec setTimeout
function executerAvecDelai(callback) {
    console.log("Début de l'opération...");
    setTimeout(() => {
        callback(); // Exécute le callback après 2 secondes
    }, 2000);
}

// Callback
function finDelai() {
    console.log("Opération terminée après 2 secondes.");
}

executerAvecDelai(finDelai);

Closures

Une closure est une fonction qui se souvient de son environnement lexical, même lorsque la fonction est exécutée en dehors de cet environnement. Cela signifie qu’une fonction interne peut accéder aux variables de sa fonction parente, même après que la fonction parente ait terminé son exécution.

Pourquoi utiliser les closures ?

• Encapsulation : Permet de créer des fonctions avec des variables privées.
• Mémoire persistante : Les closures permettent de conserver l’état des variables entre plusieurs appels.

Exemple de base

// Exemple simple de closure
function creerCompteur() {
    let compteur = 0;

    // Retourne une fonction qui utilise la variable compteur
    return function() {
        compteur++;
        console.log(`Compteur : ${compteur}`);
    };
}

// Utilisation
const incrementer = creerCompteur();
incrementer(); // Compteur : 1
incrementer(); // Compteur : 2
incrementer(); // Compteur : 3

Encapsulation avec closures

Les closures sont souvent utilisées pour encapsuler des données dans un environnement privé :

// Exemple d'encapsulation avec une closure
function banqueCompte(initial) {
    let solde = initial;

    // Retourne des fonctions pour gérer le compte
    return {
        deposer(montant) {
            solde += montant;
            console.log(`Solde après dépôt : ${solde}€`);
        },
        retirer(montant) {
            if (montant > solde) {
                console.log("Fonds insuffisants.");
            } else {
                solde -= montant;
                console.log(`Solde après retrait : ${solde}€`);
            }
        },
        consulter() {
            console.log(`Solde actuel : ${solde}€`);
        }
    };
}

// Utilisation
const monCompte = banqueCompte(100);
monCompte.deposer(50); // Solde après dépôt : 150€
monCompte.retirer(30); // Solde après retrait : 120€
monCompte.consulter(); // Solde actuel : 120€

Cas d’utilisation des closures

• Fonctions mémorisées : Créer des fonctions avec un état persistant (par ex. compteurs).
• Encapsulation : Protéger les données en limitant leur accès via des méthodes.
• Gestion d'événements : Utiliser des closures pour conserver des valeurs dans des gestionnaires d’événements.

JSON (JavaScript Object Notation)

JSON (JavaScript Object Notation) est un format de données léger, facile à lire et à écrire pour les humains, et facile à analyser et générer pour les machines. JSON est largement utilisé pour échanger des données entre un client (navigateur) et un serveur.

Pourquoi utiliser JSON ?

• Interopérabilité : JSON est pris en charge par presque tous les langages de programmation.
• Format léger : JSON est compact et facile à transporter sur le réseau.
• Facilité de lecture : Sa structure est intuitive et proche de celle des objets JavaScript.
• Standard web : JSON est devenu un standard pour l’échange de données dans les API RESTful.

Structure de JSON

JSON est constitué de paires clé-valeur, et il peut contenir :

• Objets : Représentés par des accolades {}.
• Tableaux : Représentés par des crochets [].
• Types de données : String, Number, Boolean, Array, Object, null.

Exemple d’un fichier JSON

{
    "nom": "Alice",
    "age": 30,
    "estAdmin": false,
    "hobbies": ["lecture", "voyage", "cuisine"],
    "adresse": {
        "ville": "Paris",
        "codePostal": 75001
    }
}

Manipulation de JSON en JavaScript

JavaScript offre deux méthodes principales pour travailler avec JSON :

• JSON.stringify(objet) : Convertit un objet JavaScript en chaîne JSON.
• JSON.parse(jsonString) : Convertit une chaîne JSON en objet JavaScript.

Exemple d’utilisation

// Exemple d'utilisation de JSON.stringify et JSON.parse

// Un objet JavaScript
const utilisateur = {
    nom: "Alice",
    age: 30,
    hobbies: ["lecture", "voyage"],
    estAdmin: false
};

// Convertir l'objet en JSON
const jsonString = JSON.stringify(utilisateur);
console.log(jsonString);
/*
    {"nom":"Alice","age":30,"hobbies":["lecture","voyage"],"estAdmin":false}
*/

// Convertir une chaîne JSON en objet
const jsonObjet = JSON.parse(jsonString);
console.log(jsonObjet);
/*
    {
        nom: "Alice",
        age: 30,
        hobbies: ["lecture", "voyage"],
        estAdmin: false
    }
*/

Requêtes HTTP et JSON

JSON est fréquemment utilisé dans les requêtes API pour envoyer et recevoir des données. Voici un exemple avec fetch :

// Exemple d'utilisation de JSON avec fetch
async function obtenirUtilisateurs() {
    try {
        // Effectuer une requête GET
        const response = await fetch("https://jsonplaceholder.typicode.com/users");
        // Convertir la réponse en JSON
        const utilisateurs = await response.json();
        console.log(utilisateurs);
    } catch (erreur) {
        console.error("Erreur lors de la récupération des utilisateurs :", erreur);
    }
}

obtenirUtilisateurs();

Cas d’utilisation courants

• APIs : Échanger des données entre un client et un serveur.
• Stockage local : Stocker des données dans localStorage ou sessionStorage.
• Configuration : Utiliser JSON pour des fichiers de configuration.
• Mock de données : Simuler des réponses de serveur pour les tests.

Bonnes pratiques avec JSON

• Vérifiez toujours la validité de votre JSON avec des outils comme JSONLint.
• Utilisez try/catch pour gérer les erreurs lors du parsing JSON.
• Évitez les références circulaires dans vos objets, car elles provoquent des erreurs avec JSON.stringify.
• Minimisez vos données pour réduire la taille de vos requêtes réseau.

Modules en JavaScript

Les modules en JavaScript permettent de mieux organiser le code en le divisant en plusieurs fichiers. Cela permet de maintenir un code plus propre, réutilisable et facile à déboguer. Les modules facilitent l’importation et l’exportation de fonctionnalités entre différentes parties de l’application.

Pourquoi utiliser des modules ?

• Modularité : Divisez le code en blocs réutilisables pour éviter la duplication.
• Maintenance : Facilite la gestion du code à long terme en le rendant plus lisible et organisé.
• Scalabilité : Permet de développer des applications plus complexes avec une architecture bien structurée.
• Réutilisation : Permet de partager du code entre différents projets ou modules.

Les types de modules en JavaScript

En JavaScript, il existe deux principaux systèmes pour gérer les modules :

• Modules ES6 : La syntaxe native de JavaScript pour l'importation et l'exportation de modules.
• CommonJS : Un système de modules principalement utilisé côté serveur (Node.js).

Modules ES6

Les modules ES6 sont maintenant la norme pour la gestion des modules en JavaScript, notamment dans les navigateurs modernes et les outils de bundling comme Webpack.

• export : Permet d'exporter une fonction, un objet, ou une variable d'un module.
• import : Permet d'importer des fonctions, objets ou variables depuis un autre module.

Exemple d’utilisation des Modules ES6

Imaginons que vous avez deux fichiers : calcul.js et app.js.

Fichier calcul.js

// Fichier calcul.js - Contient des fonctions pour des calculs

// Exportation d'une fonction
export function addition(a, b) {
    return a + b;
}

export function soustraction(a, b) {
    return a - b;
}

export const pi = 3.14;

Fichier app.js

// Fichier app.js - Utilise les fonctions du module calcul.js

// Importation des fonctions et variables depuis calcul.js
import { addition, soustraction, pi } from "./calcul.js";

console.log(addition(5, 3));  // 8
console.log(soustraction(5, 3));  // 2
console.log(pi);  // 3.14

Importation et exportation par défaut

Un module peut également exporter un seul élément par défaut à l'aide de export default. Cela simplifie l'importation d'un module avec un seul export.

Exemple d'exportation par défaut

// Fichier calcul.js - Exportation par défaut
export default function multiplication(a, b) {
    return a * b;
}

Importation par défaut

// Fichier app.js - Importation de la fonction par défaut
import multiplication from "./calcul.js";

console.log(multiplication(5, 3));  // 15

Cas d’utilisation des Modules

• Organiser le code : Diviser un code complexe en plusieurs fichiers pour améliorer la lisibilité et la maintenance.
• Réutilisation : Créer des modules réutilisables pour partager du code entre plusieurs projets.
• Gestion des dépendances : Utiliser des modules pour gérer des bibliothèques externes avec des outils comme NPM.
• Scalabilité : Développer des applications complexes en répartissant les responsabilités entre différents modules.

Utilisation des Modules avec un Bundler (Webpack)

Les modules ES6 sont très efficaces dans un environnement de développement avec un bundler comme Webpack. Ce dernier permet de regrouper plusieurs fichiers JavaScript en un seul fichier pour optimiser les performances du site.

• Installation : Vous pouvez installer Webpack et ses dépendances via npm ou yarn.
• Configuration : Utilisez un fichier de configuration pour définir les points d’entrée et de sortie des fichiers modules.
• Utilisation : Après avoir configuré Webpack, vous pouvez importez vos fichiers JavaScript et ils seront automatiquement regroupés.

Conclusion

Les modules JavaScript permettent de structurer et de maintenir efficacement des applications complexes. Utiliser la syntaxe des modules ES6, combinée à des outils modernes comme Webpack, rend le code plus modulaire, réutilisable et optimisé.

Web Storage

Le Web Storage est une API JavaScript qui permet de stocker des données côté client directement dans le navigateur. Il se compose de deux types principaux de stockage : localStorage et sessionStorage. Ces méthodes offrent une manière simple et efficace de conserver des informations utilisateur pour des applications web.

Pourquoi utiliser le Web Storage ?

• Persistant : Les données peuvent persister après le rechargement ou la fermeture du navigateur (avec localStorage).
• Accessible : Les données sont facilement accessibles via une simple API JavaScript.
• Sécurisé : Les données sont spécifiques au domaine et ne sont pas envoyées au serveur automatiquement.
• Rapide : Idéal pour stocker des préférences utilisateur, des jetons de session, ou des données temporaires.

Différences entre localStorage et sessionStorage

Fonctionnalités principales

• setItem(key, value) : Enregistre une donnée avec une clé.
• getItem(key) : Récupère une donnée à partir d'une clé.
• removeItem(key) : Supprime une donnée à partir d'une clé.
• clear() : Supprime toutes les données stockées.
• length : Retourne le nombre d'éléments stockés.

Exemples pratiques

Stocker et récupérer des données

// Stocker une donnée
localStorage.setItem("utilisateur", "Alice");

// Récupérer une donnée
const utilisateur = localStorage.getItem("utilisateur");
console.log(utilisateur); // Alice

Supprimer une donnée ou tout effacer

// Supprimer une donnée
localStorage.removeItem("utilisateur");

// Supprimer toutes les données
localStorage.clear();

Manipuler des objets avec Web Storage

// Stocker un objet après sérialisation
const utilisateur = {
    nom: "Alice",
    age: 30,
    estAdmin: true
};

localStorage.setItem("utilisateur", JSON.stringify(utilisateur));

// Récupérer et désérialiser l'objet
const utilisateurRecupere = JSON.parse(localStorage.getItem("utilisateur"));
console.log(utilisateurRecupere); // { nom: "Alice", age: 30, estAdmin: true }

Cas d’utilisation courants

• Jetons de session : Stocker des tokens pour l’authentification (ex : OAuth).
• Préférences utilisateur : Sauvegarder les thèmes, langues ou paramètres de personnalisation.
• Panier d’achat : Conserver les articles ajoutés au panier dans une application e-commerce.
• Statistiques locales : Enregistrer des données non sensibles pour l’analyse hors ligne.

Bonnes pratiques

• Utilisez JSON.stringify pour stocker des objets et JSON.parse pour les récupérer.
• Évitez de stocker des données sensibles comme des mots de passe ou des informations bancaires.
• Nettoyez régulièrement les données inutilisées pour optimiser l'espace.
• Utilisez sessionStorage pour les données temporaires spécifiques à un onglet.

Programmation Orientée Objet (POO) Expert

La Programmation Orientée Objet (POO) au niveau expert en JavaScript consiste à maîtriser des concepts avancés tels que l’héritage complexe, les mixins, les design patterns, et l’utilisation efficace des classes dans des applications scalables et maintenables. Ce niveau approfondit les bases pour concevoir des systèmes robustes avec une architecture modulaire.

Concepts avancés de la POO

• Héritage complexe : Implémentation d'héritages multiples avec des classes et des prototypes.
• Mixins : Ajout de fonctionnalités partagées à plusieurs classes sans héritage direct.
• Encapsulation avancée : Gestion des membres privés et protégés dans les classes.
• Polymorphisme : Permet d’utiliser une interface commune pour différentes implémentations.
• Design Patterns : Application de modèles comme Singleton, Factory, ou Observer.

Héritage complexe

En JavaScript, l’héritage est basé sur les prototypes, mais avec les classes ES6, il est simplifié et plus intuitif.

// Exemple d'héritage complexe
class Animal {
    constructor(nom) {
        this.nom = nom;
    }

    parler() {
        console.log(`${this.nom} fait un bruit.`);
    }
}

class Chien extends Animal {
    parler() {
        console.log(`${this.nom} aboie.`);
    }
}

class Chat extends Animal {
    parler() {
        console.log(`${this.nom} miaule.`);
    }
}

// Utilisation
const rex = new Chien("Rex");
rex.parler(); // Rex aboie.

const felix = new Chat("Félix");
felix.parler(); // Félix miaule.

Mixins

Les mixins permettent d’ajouter des fonctionnalités à plusieurs classes sans utiliser l’héritage direct.

// Exemple de Mixin
const Volant = {
    voler() {
        console.log(`${this.nom} peut voler !`);
    }
};

class Oiseau {
    constructor(nom) {
        this.nom = nom;
    }
}

Object.assign(Oiseau.prototype, Volant);

// Utilisation
const aigle = new Oiseau("Aigle");
aigle.voler(); // Aigle peut voler !

Encapsulation avancée

Les membres privés ou protégés sont essentiels pour contrôler l’accès aux propriétés ou méthodes d’une classe. En JavaScript, cela peut être réalisé avec des symboles ou le mot-clé #.

// Exemple d'encapsulation avec membres privés
class CompteBancaire {
    constructor(soldeInitial) {
        this.#solde = soldeInitial; // Membres privés
    }

    #verifierFonds(montant) {
        return montant <= this.#solde;
    }

    retirer(montant) {
        if (this.#verifierFonds(montant)) {
            this.#solde -= montant;
            console.log(`Retrait de ${montant}€. Solde restant : ${this.#solde}€`);
        } else {
            console.log("Fonds insuffisants.");
        }
    }
}

// Utilisation
const compte = new CompteBancaire(1000);
compte.retirer(200); // Retrait de 200€. Solde restant : 800€
compte.retirer(900); // Fonds insuffisants.

Polymorphisme

Le polymorphisme permet d’appeler des méthodes sur des objets dérivés, en garantissant un comportement spécifique à chaque sous-classe.

// Exemple de polymorphisme
class Forme {
    aire() {
        throw new Error("Méthode non implémentée.");
    }
}

class Cercle extends Forme {
    constructor(rayon) {
        super();
        this.rayon = rayon;
    }

    aire() {
        return Math.PI * this.rayon ** 2;
    }
}

class Rectangle extends Forme {
    constructor(largeur, hauteur) {
        super();
        this.largeur = largeur;
        this.hauteur = hauteur;
    }

    aire() {
        return this.largeur * this.hauteur;
    }
}

// Utilisation
const formes = [
    new Cercle(5),
    new Rectangle(4, 6)
];

formes.forEach((forme) => {
    console.log(`Aire : ${forme.aire()}`);
});

Design Patterns

• Singleton : Créer une seule instance d’une classe pour tout un projet.
• Factory : Générer des objets sans spécifier leur classe exacte.
• Observer : Permet à un objet de notifier automatiquement les changements à ses abonnés.

Web Workers

Les Web Workers sont des scripts qui permettent d’exécuter du code JavaScript en arrière-plan, indépendamment du thread principal du navigateur. Cela empêche les tâches intensives (comme les calculs complexes ou les requêtes longues) de bloquer l’interface utilisateur, offrant une meilleure expérience utilisateur.

Pourquoi utiliser les Web Workers ?

• Performances : Exécuter des tâches lourdes sans affecter l’interactivité de la page.
• Multi-threading : Permet de tirer parti du traitement parallèle.
• Expérience utilisateur : Maintenir une interface réactive tout en exécutant des calculs ou des traitements en arrière-plan.

Types de Web Workers

• Dedicated Workers : Associés à un seul script principal, parfaits pour des tâches spécifiques.
• Shared Workers : Partagés entre plusieurs scripts principaux, utile pour gérer des ressources communes.
• Service Workers : Utilisés pour les Progressive Web Apps (PWA), permettant des fonctionnalités comme le cache hors ligne et les notifications push.

Créer et utiliser un Web Worker

Un Web Worker est défini dans un fichier JavaScript séparé. Voici un exemple complet :

Fichier du Worker (worker.js)

// worker.js - Fichier exécuté en arrière-plan

// Réception d'un message depuis le thread principal
self.addEventListener("message", (event) => {
    const nombre = event.data;

    // Calcul intensif
    let resultat = 0;
    for (let i = 1; i <= nombre; i++) {
        resultat += i;
    }

    // Envoi du résultat au thread principal
    self.postMessage(resultat);
});

Script principal (main.js)

// main.js - Script principal

// Création d'un Worker
const worker = new Worker("worker.js");

// Envoi d'un message au Worker
worker.postMessage(1000000);

// Réception du résultat
worker.addEventListener("message", (event) => {
    console.log(`Résultat : ${event.data}`);
});

// Gestion des erreurs
worker.addEventListener("error", (error) => {
    console.error(`Erreur dans le Worker : ${error.message}`);
});

Shared Workers

Les Shared Workers peuvent être partagés entre plusieurs fenêtres ou onglets du même domaine :

Fichier Shared Worker (shared-worker.js)

// shared-worker.js

// Gestion des connexions multiples
self.addEventListener("connect", (event) => {
    const port = event.ports[0];

    port.addEventListener("message", (e) => {
        const data = e.data;
        port.postMessage(`Données reçues : ${data}`);
    });

    port.start();
});

Utilisation d’un Shared Worker (main.js)

// main.js

// Création d'un Shared Worker
const sharedWorker = new SharedWorker("shared-worker.js");
const port = sharedWorker.port;

// Envoi de données
port.postMessage("Hello depuis le script principal");

// Réception de données
port.addEventListener("message", (event) => {
    console.log(event.data); // Affiche : "Données reçues : Hello depuis le script principal"
});

port.start();

Cas d’utilisation courants

• Calculs intensifs : Traitement de grandes quantités de données ou algorithmes complexes.
• Analyse de données : Parsing de fichiers volumineux (JSON, CSV) sans ralentir l'interface utilisateur.
• Mises à jour en temps réel : Gérer les connexions WebSocket ou les notifications.
• Manipulation d’images ou vidéos : Traitement en arrière-plan avec des librairies comme Canvas.

Bonnes pratiques

• Utilisez les Workers pour des tâches longues ou intensives uniquement.
• Communiquez de manière efficace en limitant les messages envoyés entre le Worker et le thread principal.
• Gérez les erreurs dans le Worker avec des écouteurs d'événements.
• Nettoyez les Workers inutilisés en appelant worker.terminate() pour libérer des ressources.

Gestion des Erreurs et Debugging

En JavaScript, la gestion des erreurs et le debugging sont essentiels pour assurer la robustesse et la fiabilité des applications. Une bonne gestion des erreurs permet d'anticiper et de traiter les problèmes, tandis que le debugging aide à localiser et corriger les bugs.

Pourquoi gérer les erreurs ?

• Prévenir les plantages : Empêche une erreur d’interrompre complètement l’exécution du programme.
• Améliorer l’expérience utilisateur : Fournir des messages d’erreur clairs au lieu de comportements inattendus.
• Faciliter le debugging : Identifier rapidement les causes des problèmes grâce à une gestion structurée.

Les erreurs en JavaScript

• SyntaxError : Erreur de syntaxe, détectée lors de l’analyse du code.
• ReferenceError : Variable ou fonction non définie.
• TypeError : Utilisation d’une valeur avec un type inapproprié.
• RangeError : Utilisation d'une valeur en dehors d'une plage autorisée.
• Custom Error : Erreurs définies par le développeur.

Gestion des erreurs avec try...catch

Le bloc try...catch permet de capturer les erreurs et d’exécuter un code alternatif.

// Exemple simple avec try...catch
try {
    // Code qui peut générer une erreur
    console.log(utilisateur.nom); // ReferenceError : utilisateur n'est pas défini
} catch (erreur) {
    console.error("Une erreur est survenue :", erreur.message);
} // Continue l'exécution sans plantage

Lancer des erreurs avec throw

Vous pouvez créer vos propres erreurs personnalisées en utilisant throw pour signaler des conditions spécifiques.

// Exemple avec throw
function verifierAge(age) {
    if (age < 18) {
        throw new Error("L'âge doit être supérieur ou égal à 18.");
    }
    console.log("Âge valide :", age);
}

try {
    verifierAge(15);
} catch (erreur) {
    console.error(erreur.message); // L'âge doit être supérieur ou égal à 18.
}

Déboguer avec console

L'objet console est un outil puissant pour afficher des informations dans la console du navigateur :

• console.log() : Affiche des informations générales.
• console.error() : Affiche une erreur.
• console.warn() : Affiche un avertissement.
• console.table() : Affiche des données sous forme de tableau.

// Exemples de console
const utilisateur = { nom: "Alice", age: 30 };
console.log(utilisateur); // Affiche l'objet
console.table(utilisateur); // Affiche l'objet sous forme de tableau
console.warn("Attention : Variable non utilisée.");
console.error("Erreur critique détectée.");

Déboguer avec les outils du navigateur

Les navigateurs modernes offrent des outils de développement puissants :

• Breakpoints : Permet de mettre en pause l'exécution du code pour analyser son état.
• Call Stack : Affiche la pile d’appels pour retracer l’origine d’une erreur.
• Watch Variables : Surveillez des variables spécifiques pendant l'exécution.
• Network Tab : Vérifie les requêtes réseau pour identifier les erreurs côté serveur.

Gestion globale des erreurs

Vous pouvez capturer toutes les erreurs non gérées avec window.onerror ou window.addEventListener('error').

// Gestion globale des erreurs
window.addEventListener("error", (event) => {
    console.error(`Erreur capturée globalement : ${event.message}`);
});

Cas d’utilisation courants

• Validation des entrées : Vérifiez les données utilisateur avant de les traiter.
• Requêtes API : Gérez les erreurs de réseau ou de réponse.
• Gestion des dépendances : Anticipez les erreurs causées par des modules ou scripts externes.

Bonnes pratiques

• Utilisez try...catch uniquement pour les blocs susceptibles de générer des erreurs.
• Écrivez des messages d'erreur clairs et descriptifs pour faciliter le debugging.
• Gérez les erreurs spécifiques pour éviter des comportements imprévisibles.
• Utilisez les outils de développement pour localiser et résoudre les bugs rapidement.

Service Workers & Progressive Web Apps (PWA)

Les Service Workers sont des scripts exécutés en arrière-plan par le navigateur, indépendamment des pages web. Ils sont une composante essentielle des Progressive Web Apps (PWA), offrant des fonctionnalités avancées comme le support hors ligne, les notifications push, et la mise en cache optimisée des ressources.

Pourquoi utiliser les Service Workers ?

• Fonctionnalité hors ligne : Permet de charger des pages même sans connexion Internet.
• Performances accrues : Mise en cache des ressources pour des temps de chargement plus rapides.
• Notifications push : Interagir avec l'utilisateur via des notifications.
• Fondation des PWA : Indispensables pour transformer un site web en une application progressive.

Les étapes pour utiliser un Service Worker

1. Enregistrer le Service Worker dans votre application.
2. Gérer l'installation et l'activation pour mettre en cache les ressources.
3. Intercepter les requêtes réseau pour fournir des réponses en cache ou dynamiques.

Exemple pratique de Service Worker

Fichier du Service Worker (sw.js)

// sw.js - Service Worker

// Nom du cache
const CACHE_NAME = "v1";

// Ressources à mettre en cache
const ressources = [
    "/index.html",
    "/style.css",
    "/app.js",
    "/images/logo.png"
];

// Installation du Service Worker
self.addEventListener("install", (event) => {
    console.log("Service Worker : Installé");
    event.waitUntil(
        caches.open(CACHE_NAME).then((cache) => {
            console.log("Mise en cache des ressources");
            return cache.addAll(ressources);
        })
    );
});

// Activation du Service Worker
self.addEventListener("activate", (event) => {
    console.log("Service Worker : Activé");
    event.waitUntil(
        caches.keys().then((cacheNames) => {
            return Promise.all(
                cacheNames.map((cache) => {
                    if (cache !== CACHE_NAME) {
                        console.log(`Suppression de l'ancien cache : ${cache}`);
                        return caches.delete(cache);
                    }
                })
            );
        })
    );
});

// Interception des requêtes réseau
self.addEventListener("fetch", (event) => {
    console.log(`Requête interceptée : ${event.request.url}`);
    event.respondWith(
        caches.match(event.request).then((response) => {
            // Retourne la réponse en cache si disponible, sinon fait une requête réseau
            return response || fetch(event.request);
        })
    );
});

Enregistrement du Service Worker (app.js)

// app.js - Enregistrer le Service Worker

if ("serviceWorker" in navigator) {
    navigator.serviceWorker
        .register("/sw.js")
        .then((registration) => {
            console.log("Service Worker enregistré :", registration.scope);
        })
        .catch((error) => {
            console.error("Échec de l'enregistrement du Service Worker :", error);
        });
}

Progressive Web Apps (PWA)

Les PWA combinent des technologies web modernes pour offrir une expérience utilisateur proche des applications natives :

• Installable : Ajout de l'application sur l'écran d'accueil du téléphone.
• Fonctionnalité hors ligne : Accessible même sans connexion Internet grâce au Service Worker.
• Performances optimisées : Chargement rapide des ressources mises en cache.

Fichier Manifest (manifest.json)

Un fichier manifest.json est requis pour transformer un site web en PWA :

{
    "name": "Ma PWA",
    "short_name": "PWA",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "/images/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/images/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Cas d’utilisation courants

• Applications hors ligne : Sites web accessibles sans Internet.
• Optimisation des performances : Mise en cache des ressources pour des temps de chargement plus rapides.
• Notifications push : Garder les utilisateurs engagés avec des mises à jour en temps réel.

Bonnes pratiques

• Utilisez des stratégies de mise en cache adaptées (cache first, network first, etc.).
• Testez votre PWA avec des outils comme Lighthouse.
• Minimisez les ressources mises en cache pour optimiser les performances.
• Assurez-vous que le fichier manifest.json est correct et lié à votre HTML.

Syntaxe Moderne ES6+

ES6 (ECMAScript 2015) et les versions ultérieures ont introduit des fonctionnalités modernes et puissantes en JavaScript. Ces ajouts facilitent l'écriture d'un code plus propre, lisible et maintenable, tout en améliorant les performances des applications.

Pourquoi adopter la syntaxe ES6+ ?

• Lisibilité : Syntaxe plus concise et claire.
• Productivité : Réduit la quantité de code nécessaire pour accomplir des tâches complexes.
• Compatibilité : La plupart des navigateurs modernes et des outils comme Babel permettent une adoption large.

Principales fonctionnalités ES6+

1. Déclaration de variables avec let et const

Avant ES6, toutes les variables étaient déclarées avec var. Désormais, let et const offrent des portées plus précises.

// Différences entre var, let, et const

// var : portée globale ou fonctionnelle
var x = 10;

// let : portée de bloc
let y = 20;

// const : valeur constante, portée de bloc
const z = 30;

// Exemple de portée
if (true) {
    let y = 50;
    console.log(y); // 50
}
console.log(y); // 20

2. Fonctions fléchées (=>)

Les fonctions fléchées introduisent une syntaxe concise pour écrire des fonctions. Elles ne modifient pas la valeur de this, ce qui est utile dans certains contextes.

// Fonction classique
function addition(a, b) {
    return a + b;
}

// Fonction fléchée
const additionFl = (a, b) => a + b;

console.log(additionFl(5, 3)); // 8

3. Littéraux de gabarits (`)

Les littéraux de gabarits permettent d'insérer facilement des variables ou des expressions dans des chaînes de caractères.

// Exemple avec littéraux de gabarits
const nom = "Alice";
const age = 30;

const message = `Bonjour, je m'appelle ${nom} et j'ai ${age} ans.`;
console.log(message);

4. Destructuration des objets et tableaux

La destructuration permet d'extraire des valeurs ou des propriétés d'objets et de tableaux.

// Destructuration des objets
const utilisateur = { nom: "Alice", age: 30 };
const { nom, age } = utilisateur;

console.log(nom); // Alice
console.log(age); // 30

// Destructuration des tableaux
const nombres = [1, 2, 3];
const [a, b] = nombres;

console.log(a); // 1
console.log(b); // 2

5. Opérateurs Spread et Rest (...)

Ces opérateurs permettent de copier, fusionner ou passer des arguments de manière flexible.

// Spread
const nombres = [1, 2, 3];
const nouveauxNombres = [...nombres, 4];

console.log(nouveauxNombres); // [1, 2, 3, 4]

// Rest
function addition(...args) {
    return args.reduce((somme, val) => somme + val);
}
console.log(addition(1, 2, 3)); // 6

6. Modules JavaScript

L'importation et l'exportation de modules facilitent l'organisation et la réutilisation du code.

// Exportation dans calcul.js
export function addition(a, b) {
    return a + b;
}

// Importation dans main.js
import { addition } from "./calcul.js";
console.log(addition(5, 3)); // 8

7. Classes

Les classes introduisent une syntaxe simplifiée pour la Programmation Orientée Objet.

// Exemple de classe
class Animal {
    constructor(nom) {
        this.nom = nom;
    }

    parler() {
        console.log(`${this.nom} fait un bruit.`);
    }
}

const chien = new Animal("Rex");
chien.parler(); // Rex fait un bruit.

Cas d’utilisation courants

• Créer un code plus lisible et maintenable grâce à let, const, et les classes.
• Réduire les bugs avec des modules et une structure modulaire.
• Améliorer les performances avec des fonctions optimisées comme les littéraux de gabarits et les opérateurs spread/rest.

Tests Unitaires

Les tests unitaires consistent à vérifier individuellement chaque fonction ou composant d'un programme pour s'assurer qu'ils fonctionnent correctement. Ils permettent de détecter les bugs rapidement et d'assurer la fiabilité du code lors des modifications.

Pourquoi effectuer des tests unitaires ?

• Détection précoce des bugs : Identifiez les problèmes avant qu'ils n'affectent l'ensemble de l'application.
• Réduction des coûts : Corrigez les erreurs avant qu'elles ne deviennent coûteuses à résoudre.
• Facilite la maintenance : Assurez-vous que les modifications du code n'introduisent pas de régressions.
• Améliore la confiance : Garantit que votre code fonctionne comme prévu.

Principes des tests unitaires

• Un test doit être indépendant des autres tests.
• Les tests doivent être faciles à écrire, lire et maintenir.
• Chaque test doit se concentrer sur un cas spécifique (input/output attendu).

Outils populaires pour les tests unitaires

• Jest : Framework complet pour le test unitaire, fourni avec des fonctionnalités avancées.
• Mocha : Framework flexible pour créer des tests personnalisés.
• Chai : Librairie d'assertions souvent utilisée avec Mocha.
• Vitest : Framework rapide et moderne pour les projets basés sur Vite.

Exemple de test unitaire avec Jest

Fichier à tester (calcul.js)

// Fonction à tester
export function addition(a, b) {
    return a + b;
}

export function division(a, b) {
    if (b === 0) {
        throw new Error("Division par zéro interdite");
    }
    return a / b;
}

Fichier de test (calcul.test.js)

// Importation des fonctions à tester
import { addition, division } from "./calcul.js";

// Tests pour la fonction addition
test("Addition de deux nombres positifs", () => {
    expect(addition(2, 3)).toBe(5);
});

test("Addition avec zéro", () => {
    expect(addition(0, 3)).toBe(3);
});

// Tests pour la fonction division
test("Division de deux nombres positifs", () => {
    expect(division(10, 2)).toBe(5);
});

test("Division par zéro génère une erreur", () => {
    expect(() => division(10, 0)).toThrow("Division par zéro interdite");
});

Commandes pour exécuter les tests

• npm install jest --save-dev : Installe Jest dans votre projet.
• npx jest : Lance tous les tests.
• npx jest --watch : Exécute les tests automatiquement à chaque modification de fichier.

Cas d’utilisation courants

• Validation de logique métier : Tester les calculs, les conversions, ou toute logique clé.
• Gestion des erreurs : S'assurer que les exceptions sont correctement levées et gérées.
• Régressions : Vérifier que les nouvelles fonctionnalités n’introduisent pas de bugs dans le code existant.

Bonnes pratiques

• Écrivez des tests simples et ciblés pour chaque cas d'utilisation.
• Assurez-vous que les noms des tests décrivent clairement leur objectif.
• Automatisez vos tests pour exécuter régulièrement votre suite.
• Évitez les dépendances externes dans vos tests unitaires.
• Incluez des tests pour les cas normaux, limites et erreurs.