Contenu du cours
Projet TodoList
Programmer une Todo list (liste de choses à faire) en Javascript est un excellent exercice d'apprentissage. Une Todo list couvre différents aspects et concepts que l'on retrouvera dans la majorité des projets web : Manipulation d'objets Javscript, du DOM HTML et du CSSOM, formulaire, changement d'états, animation, etc. Dans cette section, nous allons réaliser plusieurs versions d'une Todo list, en démarrant avec une version simple que nous ferons évoluer en ajoutant des fonctionnalités.
0/13
Introduction au Javascript

On veut maintenant faire évoluer notre version précédente et créer une classe d’objets ToDo à la place d’un seul objet todo.

Ceci va nous permettre de créer autant d’objet todo que l’on souhaite, et donc apporter la possibilité de créer plusieurs listes.

  1. Dupliquer le fichier v3-object.js et le nommer v4-object-class.js
  2. Mettre à jour le commentaire en haut du fichier
  3. Créer une classe ToDo ( avec le mot-clé class et des accolades { } )
  4. À l’intérieur de la classe, créer une méthode constructor :
    • qui prend en paramètres une String name et un tableau items
    • qui initialise les propriétés name et items de l’objet (avec this.name et this.items) aux valeurs passées en paramètres
  5. Créer un nouvel objet de votre classe (avec le mot-clé new) puis afficher le avec un console.log
  6. Votre code devrait ressembler à cela :
class ToDo {
    constructor(name = 'My todo list', items = []) {
        this.name = name;
        this.items = items;
    }
}

let todo1 = new ToDo;
console.log(todo1);
  1. Méthode display
    • Une différence de syntaxe notable entre les objets et les classes d’objet est la séparation des méthodes
    • Dans les objets, les méthodes sont séparées par des virgules ,
    • Dans les classes, il ne faut pas de virgule, uniquement un saut de ligne
    • Exemple pour la méthode display :
class ToDo {

    constructor(name = 'My todo list', items = []) {
        this.name = name;
        this.items = items;
    }

    display() {
        console.log(this.name, this.items);
        console.log('Items number: ', this.items.length, '\n');
    }
    
}
  1. Replacer la méthode add dans la classe
  2. Replacer la méthode change dans la classe
  3. Replacer la méthode remove dans la classe
  4. Créer maintenant au moins 2 objets de la classe ToDo et tester les différentes méthodes

Essayez de tout faire par vous même, puis vous pouvez comparer avec cette correction.