Étape 9 : JS - Structure de la Classe et Initialisation

Entrons maintenant dans le vif du sujet : le JavaScript. Nous allons adopter une approche Orientée Objet (POO). Cela signifie que nous allons regrouper toute la logique de nos tâches à l’intérieur d’une “Classe”. C’est plus propre et plus facile à maintenir que d’avoir des fonctions partout.

Ouvrez script.js.

1. La Classe GestionnaireTaches

Créez la structure de base qui va stocker nos données.

class GestionnaireTaches {
    constructor() {
        // Ce tableau stockera toutes nos tâches (objets)
        this.taches = [];
    }
}

Pour l’instant, c’est vide. Le constructor est la fonction qui s’exécute automatiquement quand on crée une nouvelle instance de la classe.

2. Sélection des éléments DOM et Initialisation

En dehors de la classe (à la fin du fichier), nous allons connecter notre code HTML à notre code JS.

// --- Interaction avec le DOM ---

// 1. On crée une instance de notre gestionnaire
const app = new GestionnaireTaches();

// 2. On sélectionne les éléments HTML dont on aura besoin
const form = document.getElementById('task-form');
const listElement = document.getElementById('task-list');

// Pour les stats, on regroupe tout dans un objet pour faire propre
const statsElements = {
    total: document.getElementById('total-tasks'),
    active: document.getElementById('active-tasks'),
    terminees: document.getElementById('completed-tasks'),
};

// 3. Initialisation au chargement de la page
// On attend que tout le HTML soit chargé avant de faire quoi que ce soit
document.addEventListener('DOMContentLoaded', () => {
    // Plus tard, on appellera ici les fonctions pour afficher les tâches
    console.log('Application lancée !');
});

Explication

• const app = new GestionnaireTaches(); : C’est notre cerveau central.
• document.getElementById(...) : C’est le pont entre le fichier HTML et le JS. On récupère les références vers les balises pour pouvoir les manipuler.
• DOMContentLoaded : C’est une bonne pratique. On s’assure que la page est prête.

---

Test : Si vous ouvrez la console de votre navigateur (F12 > Console), vous devriez voir le message “Application lancée !” quand vous rechargez la page.