Chapitre 2 : Variables, types et conditions

Objectif

À la fin de ce chapitre, le bouton ne répète plus la même phrase. Vous nommez un texte, un nombre et un booléen, vous lisez leur type dans la console, et un if choisit le texte du paragraphe. Vous voyez aussi pourquoi "3" et 3 ne donnent pas le même résultat. La page du chapitre 1 reste en place.

Reprendre le dossier

Ouvrez premiere-page. index.html et script.js sont côte à côte. Le paragraphe garde id="message", le bouton garde id="action", et script reste à la fin de body.

Changez seulement le libellé du bouton :

<p id="message">En attente d’un clic.</p>
<button type="button" id="action">Nouvel essai</button>

Rechargez. Le bouton affiche « Nouvel essai ». Le clic écrit encore « Le bouton a été cliqué. » : script.js est celui du chapitre 1. C’est ce fichier que vous remplacez.

Un nom pour une valeur

Une variable relie un nom à une valeur. La suite du script utilise le nom, sans réécrire la valeur à chaque ligne. Deux mots suffisent : const et let.

const nomme une valeur que le script ne remplace pas. let nomme une valeur qui change. message et bouton, au chapitre 1, sont des const : les éléments restent les mêmes. Le nombre d’essais augmente à chaque clic : il se déclare avec let.

Remplacez tout script.js par ceci. Enregistrez, rechargez, ouvrez la console.

const prenom = "Aina";
let tentatives = 0;
const sessionOuverte = false;

console.log(prenom, tentatives, sessionOuverte);

La console affiche Aina, 0 et false. Le nom est à gauche de =, la valeur à droite. Un nom commence par une lettre, ne contient pas d’espace, et n’est pas un mot du langage comme if. prenom dit ce qu’on range. x ne le dit pas.

Ajoutez prenom = "Ravo"; puis rechargez. JavaScript refuse : une constante ne se remplace pas, et le fichier s’arrête. Supprimez cette ligne. tentatives, en let, accepte tentatives = tentatives + 1.

Texte, nombre, booléen

Les guillemets font un texte. "Aina" et 'Aina' sont le même type. Sans guillemets, 0 est un nombre. true et false, sans guillemets, sont des booléens : oui ou non.

"false" n’est pas un booléen. C’est cinq lettres. Un texte non vide, placé dans une condition, compte comme oui. Le booléen s’écrit donc nu. typeof affiche le type retenu. Ajoutez ces lignes et rechargez :

console.log(typeof prenom);
console.log(typeof tentatives);
console.log(typeof sessionOuverte);
console.log(typeof "false");

Vous lisez string, number, boolean, puis encore string. Les guillemets l’emportent sur le mot false. Si une condition répond à l’envers, affichez le type avant de la réécrire.

Le texte « 3 » et le nombre 3

Entre deux nombres, + additionne. Dès qu’un texte entre dans l’opération, + colle les morceaux. Vérifiez-le dans la console, avant de revenir au bouton :

console.log(3 + 1);
console.log("3" + 1);
console.log("3" + "1");
console.log("3" === 3);

Les résultats sont 4, 31, 31 et false. La deuxième ligne n’a pas calculé : elle a écrit le caractère 3, puis le caractère 1. === compare la valeur et le type. Le texte "3" et le nombre 3 ne sont pas égaux.

== convertirait les deux côtés avant de comparer. Un texte et un nombre peuvent alors sembler égaux. Ici, toute comparaison s’écrit === ou !==.

Number("3") + 1 vaut 4. Number("Aina") vaut NaN, « pas un nombre » : on ne convertit qu’une valeur numérique. Pour compter des clics, les deux côtés restent des nombres, sans guillemets.

Choisir la phrase

Un if pose une question oui ou non. Oui : le bloc entre accolades s’exécute. Non : le navigateur passe au else. else if pose la question suivante seulement si la précédente a répondu non. Un seul bloc part.

Remplacez tout script.js par le programme suivant.

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

const prenom = "Aina";
let tentatives = 0;
const sessionOuverte = true;
const limite = 3;

bouton.addEventListener("click", function () {
  if (sessionOuverte === false) {
    message.textContent = "Connectez-vous pour continuer.";
  } else {
    tentatives = tentatives + 1;

    if (tentatives < limite) {
      message.textContent = prenom + ", essai " + tentatives + " sur " + limite + ".";
    } else if (tentatives === limite) {
      message.textContent = prenom + ", dernier essai.";
    } else {
      message.textContent = "Limite dépassée.";
    }
  }
});

sessionOuverte vaut true, donc la première branche est sautée. Le else ajoute 1, puis choisit la phrase. On compte d’abord : les questions portent sur la valeur déjà mise à jour, pas sur un calcul répété dans chaque branche.

Clic 1 : tentatives vaut 1, 1 < 3 est oui, la page affiche « Aina, essai 1 sur 3. » Clic 2 : même branche, essai 2. Clic 3 : 3 < 3 est non et 3 === 3 est oui, donc « Aina, dernier essai. » Clic 4 : les deux questions sont non, donc « Limite dépassée. » Rechargez : let tentatives = 0 repart de zéro. Rien n’est gardé d’une visite à l’autre.

Dans la phrase, " sur " est un texte : le nombre est affiché, pas additionné. Le compteur, juste au-dessus, n’a aucun guillemet. Chaque branche garde ses accolades. Sans elles, seule la ligne suivante dépendrait du if.

Si la phrase ne suit pas

La console cite tentatives et parle d’une constante. Passez la déclaration en let, enregistrez, rechargez.
La phrase contient NaN. Un texte non numérique s’est glissé dans le calcul. Affichez typeof tentatives au début du clic.
Un seul = dans le if affecte, il ne compare pas. Écrivez ===.
Le premier clic dit déjà « dernier essai ». tentatives ne part pas de 0, ou limite n’est pas le nombre 3.
"true" ou "false", avec guillemets, est un texte. typeof répond string. Enlevez les guillemets.

Exercice

Restez dans premiere-page.

Passez sessionOuverte à false, rechargez, cliquez. La phrase de connexion reste. Remettez true.
Changez "Aina" pour un autre prénom, sans toucher au if. Les phrases suivent.
Dans la console, affichez 3 + 1, "3" + 1 et "3" === 3. Notez les trois résultats.
Passez limite au texte "3". Les premiers essais s’affichent, « dernier essai » non : 3 === "3" est faux. Remettez le nombre 3.
Déclarez tentatives avec const, lisez le fichier et la ligne, puis réparez avec let.

C’est réussi quand vous nommez, sans le fichier, le texte, le nombre, le booléen, et la branche qui a écrit la phrase affichée.

À retenir

const ne se remplace pas. let sert à une valeur qui change.
Les guillemets font un texte. Un nombre, true et false s’écrivent nus.
"3" + 1 donne 31. 3 + 1 donne 4. === compare valeur et type.
On compte, puis on interroge cette valeur. Un seul bloc du if part.
Une phrase inattendue se lit dans la console : typeof, puis les deux valeurs comparées.

La suite

Le clic compte, compare et fabrique la phrase au même endroit. Recopier ce bloc ailleurs recopierait aussi une erreur. Le chapitre 3, « Fonctions », range ce travail sous un nom : une fonction reçoit le prénom et le nombre d’essais, renvoie la phrase, et le clic l’appelle. Gardez premiere-page. Le paragraphe, le bouton et ces variables restent la base.