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 grouper nos fonctions dans un objet, plutôt que d’avoir des fonctions “qui se baladent” dans notre programme.

  1. Dupliquer le fichier v2-functions.js et le nommer v3-object.js
  2. Mettre à jour le commentaire en haut du fichier
  3. Créer une variable de type objet (avec les accolades { }) nommée todo
  4. À l’intérieur de l’objet ( == des accolades ), déclarer tout d’abord :
    • Une propriété name ayant pour valeur ‘My todo list’
    • Une propriété items contenant un tableau vide
    • À ce stade, votre objet devrait ressembler à ça :
let todo = {
    name: 'My todo list',
    items: []
}
  1. Méthode display
    • La déclaration d’une méthode est similaire à celle d’une propriété
    • Cependant, sa valeur sera une fonction
    • Déclarer la méthode display puis ajouter lui le code de votre précédente fonction display
    • Attention, il faudra retirer le nom display de votre fonction. Il n’y en a plus besoin, car cette fonction anonyme est assignée à notre méthode
    • Votre code devrait maintenant ressembler à quelque chose comme ça :
let todo = {
    name: 'My todo list',
    items: [],
    display: function () {
        console.log(this.name, this.items);
        console.log('Items number: ', this.items.length, '\n');
    },
}

Vous pouvez tester votre objet en appelant la fonction display :

todo.display();

Les autres méthodes se déclarent et s’utilisent de la même manière.

Essayez des les faire par vous-même et posez des questions avant de consulter le corrigé !

  1. Remplacer la fonction add par une méthode add
  2. Remplacer la fonction change par une méthode change
  3. Remplacer la fonction remove par une méthode remove

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