Chapitre 3 : Fonctions

Objectif

À la fin de ce chapitre, la phrase n’est plus rédigée dans le clic. Une fonction reçoit le prénom, le nombre d’essais et la limite, puis elle renvoie le texte. Le clic compte, appelle cette fonction, et place le résultat dans le paragraphe. Vous l’appelez aussi depuis la console, avec d’autres valeurs, sans recopier le if. Le dossier premiere-page reste en place.

Reprendre le dossier

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

script.js choisit encore la phrase à l’intérieur du clic. Rechargez, cliquez une fois : « Aina, essai 1 sur 3. » Le programme marche, mais compter, comparer et rédiger vivent dans le même bloc. Pour changer une virgule, il faut la chercher dans le clic. Pour lire la phrase de l’essai 3 sans cliquer trois fois, aucun nom ne répond.

Ce chapitre sort la rédaction de ce bloc. Le compteur et la session restent dans le clic.

Écrire la fonction une fois

Une fonction est un bloc nommé. On l’écrit une fois, on l’appelle par son nom. Le mot function annonce la déclaration. Le nom suit, puis les paramètres entre parenthèses, puis le corps entre accolades. Remplacez tout script.js par ceci. Enregistrez, rechargez, ouvrez la console.

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.";
  }
}

console.log(phraseEssai("Aina", 1, 3));
console.log(phraseEssai("Aina", 3, 3));
console.log(phraseEssai("Ravo", 4, 3));

La console affiche « Aina, essai 1 sur 3. », « Aina, dernier essai. », puis « Limite dépassée. » Le if du chapitre 2 n’est écrit qu’une fois. Les trois appels passent dessous, chacun avec ses valeurs.

Ce fichier ne touche pas au paragraphe. phraseEssai fabrique un texte, console.log le montre. On vérifie la réponse avant de l’afficher. Le nom dit ce qu’elle rend. faire ou f obligerait à relire le corps.

Paramètres, arguments, valeur renvoyée

Les noms entre parenthèses, à la déclaration, sont les paramètres : des emplacements. Les valeurs entre parenthèses, à l’appel, sont les arguments. Elles remplissent les emplacements dans l’ordre. phraseEssai("Aina", 1, 3) place "Aina" dans personne, 1 dans nombre et 3 dans maximum. Le troisième appel place "Ravo" et 4. Le corps ne change pas. Seuls les arguments changent, donc la phrase change.

return quitte la fonction et remet une valeur à l’endroit de l’appel. console.log la reçoit. Sans return, JavaScript fournit undefined. Retirez le return de la première branche, rechargez : la première ligne devient undefined, les deux autres restent. Remettez-le. Un seul return part : dès que la branche « inférieur » est prise, le reste ne tourne pas.

Les paramètres n’existent qu’entre les accolades. Sous les appels, console.log(personne) stoppe la console : ce nom est introuvable ici. Dehors, le prénom s’appellera prenom. La valeur passe d’un nom à l’autre à l’appel. Ces paramètres diffèrent des noms du clic, pour ne pas confondre la valeur reçue avec le compteur.

Le nombre reçu est une copie. nombre = nombre + 1 dans la fonction changerait cette copie, pas la variable qui a fourni l’argument. Un essai dans la console ne fait pas monter le compteur. Seul le clic ajoutera 1.

L’appel a besoin des parenthèses. phraseEssai seul désigne la fonction. phraseEssai("Aina", 1, 3) l’exécute. Sans parenthèses, la page peut afficher le code de la fonction, parce qu’on lui a donné la fonction au lieu du texte renvoyé.

Le clic appelle

Remettez les trois return. 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;

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 {
    tentatives = tentatives + 1;
    message.textContent = phraseEssai(prenom, tentatives, limite);
  }
});

La fonction passée à addEventListener n’a pas de nom. Le navigateur l’appelle à chaque clic, comme au chapitre 1. On ne peut pas la retaper dans la console. phraseEssai, elle, est nommée : après le rechargement, phraseEssai("Aina", 2, 3) répond dans la console, et le paragraphe ne change pas.

L’addition vient avant l’appel. phraseEssai reçoit le compteur déjà augmenté. Passer encore 0 répondrait « Aina, essai 0 sur 3. » Le premier clic affiche l’essai 1, le troisième « Aina, dernier essai. », le quatrième « Limite dépassée. » Rechargez : tentatives repart de zéro.

Passez sessionOuverte à false, rechargez, cliquez. Le clic n’entre pas dans le else, n’appelle pas phraseEssai, et le compteur reste à 0. La phrase de connexion reste écrite sur place : une fonction suffit aujourd’hui. Remettez true.

phraseEssai ne contient pas message.textContent. La console l’essaie sans afficher, le bouton affiche sans réécrire le if.

Si le résultat surprend

• Le paragraphe affiche undefined. Le return manque sur la branche prise. Dans la console, appelez phraseEssai(prenom, tentatives, limite) avec les mêmes valeurs que le clic.
• Le paragraphe affiche le code de phraseEssai. Les parenthèses de l’appel manquent. Écrivez phraseEssai(prenom, tentatives, limite).
• « Dernier essai » n’arrive pas. maximum a reçu le texte "3". 3 === "3" est faux, comme au chapitre 2. Passez le nombre 3.
• Chaque clic avance de deux. tentatives = tentatives + 1 est écrit dans la fonction et dans le clic. Gardez l’addition dans le clic seulement.
• phraseEssai() sans argument affiche « undefined, dernier essai. » Les paramètres manquants valent undefined, et undefined === undefined est vrai : la branche « égal » part, avec un prénom absent. Passez les trois arguments, dans l’ordre.

Exercice

Restez dans premiere-page.

1. Dans la console, appelez phraseEssai("Aina", 1, 3), phraseEssai("Aina", 3, 3) et phraseEssai("Ravo", 4, 3). Notez les trois phrases.
2. Changez "Aina" dans prenom, sans ouvrir le if. Rechargez, cliquez. La phrase suit le nouveau prénom.
3. Le bouton en est à l’essai 1. Appelez phraseEssai(prenom, 2, limite) dans la console. Le paragraphe et le compteur restent où ils étaient.
4. Retirez le return de la branche « dernier essai ». Cliquez trois fois, lisez undefined, puis remettez le return.
5. Passez limite au texte "3". Le troisième clic ne dit plus « dernier essai ». Remettez le nombre 3.

C’est réussi quand vous nommez, pour la phrase affichée, l’argument devenu personne, l’argument devenu nombre, et la ligne return qui a fourni le texte.

À retenir

• function suivi d’un nom écrit le geste une seule fois. Le nom suivi de parenthèses l’exécute.
• Les arguments remplissent les paramètres dans l’ordre. Le corps ne se recopie pas.
• return remet la valeur à l’appelant. Sans return, le résultat est undefined.
• phraseEssai ne modifie ni le paragraphe ni tentatives. Le clic compte, appelle, puis affiche.
• Un paramètre n’existe que dans la fonction. Le nombre reçu est une copie.

La suite

Un prénom et un compteur tiennent chacun dans un nom. Plusieurs personnes, ou plusieurs phrases déjà obtenues, ne tiennent plus ainsi. Le chapitre 4, « Tableaux et objets », range des valeurs dans une liste, puis groupe le prénom, le nombre d’essais et la limite. phraseEssai recevra encore ces valeurs, lues dans ce groupe. Gardez premiere-page.