Regrouper les tâches dans un tableau

Pour afficher plusieurs tâches et suivre leur progression, vous devez d’abord les regrouper dans une structure commune. Un tableau vous permet de conserver une suite d’éléments, d’en ajouter et d’en retirer.

Jusqu’ici, vous avez parcouru des valeurs temporaires avec des boucles, sans représenter les tâches dans une collection. Dans cette leçon, vous allez créer cette collection et manipuler son contenu ; les tâches seront des chaînes simples, avant d’être décrites plus précisément dans la prochaine leçon.

Créer un tableau de tâches

Un tableau JavaScript s’écrit entre crochets. Vous placez ses éléments à l’intérieur, en les séparant par des virgules ; il peut aussi être vide. Pour le projet, nommez-le taches afin de désigner clairement la collection que vous allez faire évoluer.

const taches = [
  "Préparer le repas",
  "Lire un chapitre",
  "Ranger le bureau"
];

console.log(taches);

["Préparer le repas", "Lire un chapitre", "Ranger le bureau"]

Vous pouvez déclarer le tableau avec const : la variable continue de désigner le même tableau, même lorsque vous modifiez son contenu. Ce choix est cohérent avec les règles de déclaration vues précédemment. Ici, chaque élément est une chaîne qui porte le nom d’une tâche ; le tableau ne contient pas encore leur état accompli.

Lire un élément et connaître la longueur

Chaque élément possède une position appelée index. Le premier index est 0, le deuxième est 1, et ainsi de suite ; vous accédez à un élément en écrivant son index entre crochets après le nom du tableau. La propriété length indique combien d’éléments le tableau contient.

const taches = [
  "Préparer le repas",
  "Lire un chapitre",
  "Ranger le bureau"
];

console.log(taches[0]);
console.log(taches.length);

Préparer le repas
3

Ajouter et retirer des éléments

La méthode push ajoute un élément à la fin du tableau. Elle modifie le tableau existant : vous pouvez donc déclarer taches avec const, puis lui ajouter de nouveaux éléments sans réaffecter la variable. Après l’ajout, length reflète le nouveau nombre de tâches.

const taches = [
  "Préparer le repas",
  "Lire un chapitre",
  "Ranger le bureau"
];

taches.push("Sortir marcher");
console.log(taches);
console.log(taches.length);

["Préparer le repas", "Lire un chapitre", "Ranger le bureau", "Sortir marcher"]
4

Pour retirer un élément situé à une position donnée, utilisez splice. Son premier argument est l’index de départ et son deuxième indique le nombre d’éléments à supprimer. Dans l’exemple suivant, splice(1, 1) retire un élément à partir de l’index 1 : le tableau restant contient alors la première, la troisième et la quatrième tâche.

const taches = [
  "Préparer le repas",
  "Lire un chapitre",
  "Ranger le bureau",
  "Sortir marcher"
];

taches.splice(1, 1);
console.log(taches);
console.log(taches.length);

["Préparer le repas", "Ranger le bureau", "Sortir marcher"]
3

Les extraits affichent des données dans la console et ne modifient pas encore la page HTML. Dans js/main.js, exécutez un seul extrait à la fois, ou retirez les déclarations répétées de taches avant de réunir les exemples dans le même fichier. Le tableau sert ici de modèle temporaire pour apprendre les opérations ; le lien avec le formulaire et la liste affichée viendra plus tard.

À retenir

• Un tableau regroupe plusieurs éléments entre crochets, séparés par des virgules.
• Le premier index est 0 ; la propriété length donne le nombre d’éléments.
• push ajoute un élément à la fin du tableau.
• splice(index, nombre) retire le nombre d’éléments indiqué à partir de l’index.

Dans la prochaine leçon, vous remplacerez ces chaînes simples par des objets pour décrire chaque tâche avec davantage d’informations.