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 commence à avoir quelque chose de correct concernant la liste !

Le problème, actuellement, est que les éléments de notre liste ne peuvent pas être marqués comme ayant été validés. On voudrait pouvoir valider une tâche sans avoir à la supprimer de la liste.

Pour implémenter cette fonctionnalité, nous allons “augmenter” les capacités des éléments de la liste.
Au lieu d’être de simples String comme c’est le cas actuellement, nous créer une deuxième classe d’objet qui va nous permettre de leur ajouter des propriétés.
Par la suite, on pourra afficher les éléments cochés ou non pour signifier à l’utilisateur l’état d’une tâche.

  1. Dupliquer le fichier v4-object-class.js et le nommer v5-boolean.js
  2. Mettre à jour le commentaire en haut du fichier
  3. Créer une classe Item ( 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 booléen done
    • qui initialise les propriétés name et done de l’objet (avec this.name et this.done) aux valeurs passées en paramètres
    • si le paramètre done n’est pas renseigné, la propriété devrait être false par défaut
  5. Puis une méthode display qui effectue un console.log de l’item avec son nom et son statut de complétion
  6. Créer un nouvel objet de votre classe (avec le mot-clé new) puis afficher le avec un console.log pour tester votre classe
  7. Mise à jour du programme principale
    • Dans la version précédente, on instanciait les objets ToDo de cette manière :
let todo2 = new ToDo('My todo list 2', ['item4', 'item5', 'item6']);
  • Avec la création de notre classe Item, on ne veut plus passer un tableau de String mais un tableau d’objets Item :
let myTodo = new todo('My todo', [new Item('item1'), new Item('item2'), new Item('item3')]);

On remarquera qu’on ne précise pas de statut par défaut pendant la création de nouveau Item. La propriété done sera automatiquement mise à false

  1. Idem pour la fonction add, il ne faudra plus donner un String en argument mais bien une instance de la classe Item
    • On peut remarquer ici le problème des langages non-typés comme Javascript
    • Dans ce cas, si ajoute des String à la place d’objets Item, Javascript ne renverra pas d’erreur
    • Cependant, si dans notre programme on essaie d’appeler la méthode de la classe Item display sur une String, il y aura une erreur !
    • C’est pourquoi il faut essayer de faire très attention lorsque l’on effectue ce genre de modifications
    • C’est aussi la raison pour laquelle le langage TypeScript a été créé. TypeScript est principalement du Javascript typé.
  2. Méthode toggleCompleted
    • Ajouter la méthode toggleCompleted à la classe ToDo :
      • qui prend un entier en paramètre, représentant l’index de l’objet Item à modifier
      • Si l’objet est validé ( item.done == true ) alors on l’invalide ( item.done == false )
      • Et inversement
  3. Tester votre programme

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