Chapitre 4 : Tableaux et objets

Objectif

À la fin de ce chapitre, trois prénoms tiennent dans un tableau, et l’essai affiché tient dans un objet : le prénom, le nombre d’essais, la limite. Le clic lit cet objet, appelle phraseEssai, puis range la phrase renvoyée dans un second tableau. Vous changez de prénom sans réécrire le if. Le dossier premiere-page reste en place.

Plusieurs prénoms, un seul nom

Ouvrez premiere-page. index.html ne change pas : le paragraphe porte id="message", le bouton porte id="action" et affiche « Nouvel essai », la balise script est en bas de body.

script.js est celui du chapitre 3. Le prénom vit dans prenom. Pour passer à Ravo, vous remplacez le texte et vous rechargez. Aina disparaît. Rien ne garde les deux.

Un tableau range plusieurs valeurs sous un seul nom, dans un ordre. Remplacez tout script.js par ceci. Enregistrez, rechargez, ouvrez la console.

const prenoms = ["Aina", "Ravo", "Hery"];

console.log(prenoms[0]);
console.log(prenoms[1]);
console.log(prenoms[2]);
console.log(prenoms.length);

La console affiche « Aina », « Ravo », « Hery », puis 3. L’indice commence à 0. prenoms[0] vaut "Aina", prenoms[2] vaut "Hery". length compte les cases : ici 3, donc le dernier indice est 2. La case 1 est Ravo, pas le premier prénom. Tapez prenoms[3] : la console affiche undefined. La case n’existe pas, et ce n’est pas une erreur rouge.

La documentation appelle ce tableau un array. Dans le fichier, les crochets suffisent. const refuse prenoms = ["Lala"] : la case 0 vaut encore "Aina". Changer une case est permis. prenoms[0] = "Lala" écrit dans l’indice 0, length reste 3. Remettez Aina avec prenoms[0] = "Aina".

Ranger les phrases déjà obtenues

phraseEssai ne connaît pas le tableau. Elle reçoit un prénom, un nombre et une limite, puis elle renvoie un texte. Un second tableau peut garder ce texte. Remplacez tout script.js par le programme suivant.

const prenoms = ["Aina", "Ravo", "Hery"];
const phrases = [];

function phraseEssai(personne, nombre, maximum) {
  if (nombre < maximum) {
    return personne + ", essai " + nombre + " sur " + maximum + ".";
  } else if (nombre === maximum) {
    return personne + ", dernier essai.";
  } else {
    return "Limite dépassée.";
  }
}

phrases.push(phraseEssai(prenoms[0], 1, 3));
phrases.push(phraseEssai(prenoms[1], 3, 3));

console.log(phrases[0]);
console.log(phrases[1]);
console.log(phrases.length);

[] crée un tableau vide : length vaut 0. push ajoute à la fin. Le premier appel range « Aina, essai 1 sur 3. » en case 0. Le second range « Ravo, dernier essai. » en case 1, parce que le nombre reçu est égal à la limite. La console affiche ces deux phrases, puis 2.

La fonction ne voit pas phrases. Sans push, le texte est oublié après l’appel. N’écrivez pas phrases = phrases.push(...) : push renvoie un nombre, la nouvelle longueur, et phrases est const. Appelez push, puis gardez le nom du tableau. prenoms contient des prénoms, phrases contient des phrases.

Un objet pour l’essai en cours

Le prénom, le compteur et la limite n’ont pas le même rôle. Les ranger dans ["Aina", 0, 3] obligerait à se souvenir que la case 2 est la limite. Un objet nomme chaque valeur. Ce bloc prendra place sous les deux tableaux :

const essai = {
  prenom: prenoms[0],
  tentatives: 0,
  limite: 3
};

Les accolades ouvrent l’objet. Une propriété est un nom, deux-points, une valeur. essai.prenom la lit. Quand le programme du clic sera chargé, avant tout clic, essai.prenom, essai.tentatives et essai.limite affichent « Aina », 0, puis 3.

La propriété a reçu une copie de "Aina". prenoms[0] = "Lala" change le tableau, essai.prenom reste "Aina". Pour suivre la liste, écrivez essai.prenom = prenoms[0]. const refuse essai = { prenom: "Ravo" }, mais essai.tentatives = essai.tentatives + 1 est permis : l’objet reste, le compteur bouge. essai["limite"] vaut comme essai.limite. essai[0] vaut undefined, car un objet ne numérote pas ses propriétés.

Le clic lit l’objet

Remplacez tout script.js par le programme suivant. Au chargement, phrases est vide. Seul un clic l’allonge.

const message = document.getElementById("message");
const bouton = document.getElementById("action");

const prenoms = ["Aina", "Ravo", "Hery"];
const phrases = [];

const essai = {
  prenom: prenoms[0],
  tentatives: 0,
  limite: 3
};

const sessionOuverte = true;

function phraseEssai(personne, nombre, maximum) {
  if (nombre < maximum) {
    return personne + ", essai " + nombre + " sur " + maximum + ".";
  } else if (nombre === maximum) {
    return personne + ", dernier essai.";
  } else {
    return "Limite dépassée.";
  }
}

bouton.addEventListener("click", function () {
  if (sessionOuverte === false) {
    message.textContent = "Connectez-vous pour continuer.";
  } else {
    essai.tentatives = essai.tentatives + 1;
    const phrase = phraseEssai(essai.prenom, essai.tentatives, essai.limite);
    phrases.push(phrase);
    message.textContent = phrase;
  }
});

Rechargez, cliquez une fois. Le paragraphe affiche « Aina, essai 1 sur 3. » Le else part, le compteur passe de 0 à 1, phraseEssai reçoit "Aina", 1 et 3. push range la phrase en case 0, message.textContent l’affiche. Au deuxième clic, la case 1 reçoit la phrase suivante et la case 0 reste. phrases.length vaut 2. Le paragraphe ne montre que la dernière. Le troisième clic affiche « Aina, dernier essai. », le quatrième « Limite dépassée. »

phraseEssai ne reçoit pas essai. Elle ne modifie pas l’objet et n’appelle pas push. L’addition reste dans le clic.

Sans recharger, tapez essai.prenom = prenoms[1], puis cliquez. La phrase commence par Ravo, le if n’a pas bougé. Rechargez : Aina, le compteur 0 et un tableau vide reviennent, parce que le script reprend au début du fichier.

Passez essai.limite à 1 dans le fichier, rechargez, cliquez. Le premier clic dit « Aina, dernier essai. » Remettez 3. Passez sessionOuverte à false dans le fichier, rechargez, cliquez : pas d’appel, pas de push, le compteur reste 0. Remettez true. La session reste hors de l’objet : elle décide si le clic compte. L’objet décrit l’essai.

Si le résultat surprend

Le paragraphe commence par undefined. Lisez essai.prenom. S’il vaut undefined, le prénom n’a pas été copié. Le dernier indice valable de prenoms est 2.
phrases.length reste 0. push manque dans le else, ou sessionOuverte est false. Placez push après l’appel.
« Dernier essai » ne vient pas. essai.limite est le texte "3", et 3 === "3" est faux. Le else affiche « Limite dépassée. » Écrivez le nombre 3.
prenoms ou essai est déclaré deux fois. Remplacez tout le fichier, sans coller l’ancien en dessous.
essai = ou prenoms = est refusé. Changez une propriété : essai.prenom = prenoms[1].

Exercice

Restez dans premiere-page, avec le programme du clic.

Dans la console, lisez prenoms[0], prenoms[2] et prenoms.length. Notez l’indice du dernier prénom.
Rechargez, cliquez deux fois, puis lisez phrases[0], phrases[1] et phrases.length. Le paragraphe montre la seconde phrase, le tableau garde les deux.
Sans recharger, écrivez essai.prenom = prenoms[2], puis cliquez. La phrase commence par Hery. Rechargez pour retrouver Aina et un tableau vide.
Dans le fichier, passez essai.limite au texte "3", rechargez, cliquez trois fois. Le troisième clic dit « Limite dépassée. » Remettez le nombre 3.
Retirez phrases.push(phrase), rechargez, cliquez. Le paragraphe change, phrases.length reste 0. Remettez push.

C’est réussi quand vous montrez, pour la phrase affichée, la case du prénom dans prenoms, la propriété lue dans essai, et la case de phrases qui garde ce texte.

À retenir

Un tableau range des valeurs dans l’ordre. L’indice commence à 0. length compte les cases. Le dernier indice est length - 1.
push ajoute à la fin. Une case absente vaut undefined.
Un objet nomme des valeurs de rôles différents. essai.prenom lit une propriété.
const bloque le remplacement du tableau ou de l’objet. Une case ou une propriété peut changer.
phraseEssai reçoit trois valeurs lues dans l’objet. Le clic compte, appelle, range, puis affiche.

La suite

Le clic trouve le paragraphe et le bouton avec getElementById, puis il écrit dans textContent. Ces noms viennent du document, pas des tableaux. Le chapitre 5, « Le DOM », s’arrête sur cette recherche : trouver un élément, lire son texte, le changer, et voir ce qui arrive si l’identifiant n’existe pas. Gardez premiere-page, l’objet essai et les deux tableaux.