Retour d'un niveau
Retour à l'accueil

Une fonction est une suite d'instructions ayant un rôle précis (pour ne pas dire une fonction précise…).

• On lui donne (éventuellement) des arguments (également appelés paramètres) entre les parenthèses qui suivent le nom de cette fonction.
• Certaines fonctions nous renvoient une valeur, que l'on peut par exemple enregistrer dans une variable.

var message = prompt('Entrez un texte');

• On appelle la fonction prompt()
• On lui fournit un seul argument, qui est 'Entrez un texte' (c'est le message d'invite qui sera affiché dans la boîte de dialogue).
• Cette fonction nous renvoie le texte saisi par l'utilisateur, qu'on enregistre ici dans la variable message.

Voici comment on pourrait schématiser une fonction :

Les fonctions que nous allons créer fonctionnent selon le même principe.
Dans de ce chapitre, notre fonction aura pour but de convertir des Euros en Francs (c'est un bon exemple, même s'il est un peu démodé ).

Oui, mais en créant une fonction, nous pourrons lancer le script à chaque fois que nous en aurons envie .
Il nous suffira pour cela d'appeler cette fonction.

Commençons par quelques mots de vocabulaire :

• on dit que l'on déclare une fonction lorsqu'on la “crée” : on dit à l'ordinateur qu'elle existe et ce qu'elle doit faire (on écrit le code de cette fonction).
• On pourra ensuite appeler notre fonction, ce qui veut dire qu'on va lui demande d'exécuter son code.

Voyons comment faire notre propre fonction : nous allons utiliser l'exemple du convertisseur dont je vous ai parlé plus haut.

On commence par déclarer notre fonction : on va dire à l'ordinateur “je veux créer une fonction qui s'appelle machin et qui fait ceci”. Quelques informations à ce sujet :

• lors de la déclaration d'une fonction, celle-ci n'est pas exécutée, mais mise en mémoire, pour être exécutée plus tard.
• Une fonction se déclare un peu à la manière d'une variable, à l'aide d'un mot-clé (qui est var pour les variables, souvenez-vous ;) ) : ici, il s'agit de function (eh oui, c'est de l'anglais, d'où cette orthographe).
• Pour le nom, c'est comme pour les variables, à savoir les 26 lettres de l'alphabet, en majuscules et en minuscules (une majuscule étant en JS différente d'une minuscule), le underscore et les chiffres (sauf pour le premier caractère).
• Le nom doit être suivi de parenthèses (même si elles ne contiennent rien), qui vont contenir les éventuels arguments.

Si on récapitule ce que je viens de dire, on peut déjà déclarer notre fonction. Nommons-la conversion. On obtient donc ceci :

function conversion()

Contenu de la fonction On fait suivre cette déclaration du contenu de la fonction (les instructions de celle-ci). S'il y a plusieurs instructions (ce qui est généralement le cas ), on délimite le contenu de notre fonction grâce à des accolades { et } : on forme alors ce qu'on appelle un bloc d'instructions.

Il va donc falloir écrire le code entre accolades, à la suite de la ligne :

function conversion()

Quel code ? Eh bien celui que la fonction doit exécuter. Si on résume, on veut :

• demander une valeur en euros à l'utilisateur
• la convertir en francs (pour rappel, 1 Euro = 6,55957 Frs)
• afficher le résultat (pourquoi pas sur deux lignes, une en euros, l'autre en francs).

On ne s'occupe pas d'arrondir le résultat, ni de vérifier si l'utilisateur écrit bien un nombre (si c'est un boulet, tant pis pour lui ).

Essayez de coder cela vous-mêmes, ça ne devrait pas vous poser de problème… Vous avez terminé ? Parfait, voici ce que ça nous donne :

function conversion()
{
   var somme = prompt("Entrez la valeur en Euros :");
   var resultat = somme * 6.55957;
   alert(somme + " E\n" + resultat + " Frs");
}

Nous venons de créer notre première fonction. Ça va, vous n'êtes pas trop émus ?

Maintenant que notre fonction est créée, on va enfin pouvoir l'utiliser . Pour cela, on écrit simplement ceci (dans le corps de la page cette fois) :

conversion();

Et notre fonction est exécutée !
Elle va, comme nous le voulions, demander une valeur (en euros) à l'utilisateur, et lui afficher le résultat de la conversion en francs.

Revenons à notre fonction de conversion : nous allons lui faire subir quelques modifications.

L'idée est, avec une unique fonction, de pouvoir convertir tout type d'unités.
Par exemple, on peut faire un bouton qui, lorsqu'on cliquerait dessus, convertirait des mètres en centimètres, et une image convertissant les Euros en Francs.

En y réfléchissant, le code à exécuter serait presque le même, il n'y a que le taux de conversion et le nom des unités qui changent…
Il nous suffirait, au moment de l'appel de la fonction, de dire : “le taux de change est de 6.55957, et les unités sont les Euros et les Francs”.

Eh bien c'est possible grâce aux arguments !

Pour vous en expliquer le principe, je vais prendre l'exemple d'une balise (x)HTML :

<img src="EuroFrancs.png" alt="" />

Eh bien c'est exactement le même principe : on va indiquer à notre fonction le taux de conversion à utiliser…

On va reprendre notre fonction de conversion, en y apportant quelques modifications : commençons par enlever les unités (on les ajoutera plus tard), et ajouter un argument : le taux de change.

On pourra ainsi, à partir de cette même fonction, convertir tout ce qu'on veut.
Si on veut convertir des euros en francs, on n'aura qu'à écrire conversion(6.55957).
Pour convertir des mètres en centimètres, ça sera conversion(100) (1 m = 100 cm).

Il nous suffit de préciser le taux entre les parenthèses. Pratique, pas vrai ?

Allons-y :
tout d'abord, lors de la déclaration de la fonction, il nous faut préciser entre les parenthèses le nom de l'argument : appelons-le taux.
Lorsqu'on appellera la fonction conversion(6.55957), cela aura pour effet de créer une variable taux avant d'exécuter la fonction, et cette variable aura pour valeur 6.55957.
Elle sera détruite une fois la fonction exécutée.

Voici le code modifié et commenté :

function conversion(taux)   // declaration de la fonction avec un argument
{
   var valeur = prompt("Entrez la valeur à convertir");
   var resultat = valeur * taux;   // on calcule le resultat, en utilisant l'argument
   alert('Valeur  : '+valeur + '\nRésultat : '+resultat);
}

Il ne faut donc pas oublier de préciser ce taux lorsqu'on appellera la fonction :

<p> <img src="EuroFrancs.png" alt="" onclick="conversion(6.55957)" /> </p>

Et si on veut convertir des mètres en centimètres, pas besoin d'une autre fonction, il suffit de faire comme ceci :

<p> <a href="#" onclick="conversion(100)">Conversion mètres &gt; centimètres</a> </p>

Il serait tout de même plus agréable de voir s'afficher le nom des unités…
Eh bien il suffit pour cela de créer deux arguments supplémentaires !

Rien de bien compliqué, il faut juste les séparer par des virgules. Vous pouvez les créer dans l'ordre que vous voulez (essayez cependant d'utiliser un ordre “logique”).
Ensuite, lorsque vous appellerez votre fonction, il faudra donner les paramètres dans le même ordre (si le taux de conversion est le premier, on l'indiquera en premier - logique ).

Choisissons cet ordre : unité 1, taux et unité 2.

Après quelques modifications apportées à notre fonction, on obtient ceci :

function conversion(unite1, taux, unite2)
{
   var valeur = prompt("Entrez la valeur à convertir, en " + unite1);
   var resultat = valeur * taux;
   alert(valeur + ' ' + unite1 + '\n' + resultat + ' ' + unite2);
}

Et on l'appelle ensuite de cette manière :

<p>
 <img src="EuroFrancs.png" alt="" onclick="conversion('Euros', 6.55957, 'Frs')" /> <br />
 <a href="#" onclick="conversion('m',100, 'cm')">Conversion mètres &gt; centimètres</a>
</p>

Je vous laisse tester…
Ça commence à avoir de la gueule, pas vrai ?

Il est possible de créer des arguments facultatifs : on peut choisir de ne pas les préciser lors de l'appel de notre fonction.
Par exemple, il serait possible de créer une fonction qui additionne tous les nombres passés en arguments :

addition(12, 5);   // nous donnerait 17
addition(21, 4, 15, 11, 6);   // nous donnerait 57

Ceci n'étant qu'un exemple.

Tenez, vous rappelez-vous de notre fonction prompt() ? Eh bien elle possède un second paramètre facultatif : la valeur initiale du champ de saisie. Essayez plutôt ceci :

var nombre = prompt('Entrez un nombre', 'Votre nombre ici');
alert('Vous avez tapé ' + nombre);

Si on ne donne pas de second paramètre, le champ est initialement vide. Mais si on en indique un, alors il aura cette valeur.

Je vous parle de ces arguments pour que vous sachiez qu'ils existent.
Cependant, créer des paramètres facultatifs fait appel à des notions que vous ne connaissez pas encore. Nous approfondirons donc ce sujet un peu plus tard, dès que vous aurez les éléments nécessaires.

Comme je vous l'ai annoncé plus haut, les arguments ne sont en fait rien d'autre que des variables, mais propres à la fonction : elles sont créées lors de son appel, et elles sont détruites à la fin de celle-ci.

Voici une fonction :

function essai(argument1, argument2)
{
   // code de la fonction
}

Et un appel de cette fonction :

essai(57, 'un message');

Lorsqu'on appellera cette fonction ainsi, voici comment ça se passera :

• tout d'abord, les variables argument1 et argument2 seront créées et prendront comme valeurs respectives le nombre 57 et la chaîne de caractères 'un message'.
• Ensuite, le code de la fonction sera exécuté (ces variables peuvent être modifiées, comme des variables classiques).
• Lorsque la fonction sera terminée, les variables argument1 et argument2 seront détruites.

Essayez donc de créer cette fonction, de l'appeler, et une fois cette dernière terminée, d'afficher la valeur de la variable argument1 : ça ne marche pas. C'est normal, elle a été détruite.

Essayez de renouveler l'opération, mais en créant vous-mêmes une variable à l'intérieur de la fonction, comme ceci :

function essai()
{
   var variable = 'Bonjour';
}

Appelez ensuite cette fonction, puis affichez la valeur de cette variable, comme ceci :

essai();
alert(variable);

Cette fois non plus, ça ne marche pas !

Notez que j'ai bien parlé de déclaration, ce qui signifie l'utilisation de var.

Voici pourquoi, dans le dernier exemple, ça ne “marchait pas”.

Eh bien imaginez le bazar !
Certaines variables seront peut-être utilisées plusieurs fois (si vous donnez le même nom à deux variables différentes, par exemple).
De plus, il est moyennement apprécié (pour ne pas dire qu'il ne faut jamais le faire) de déclarer plusieurs fois la même variable.
Enfin bref, c'est ingérable.

Au moins, avec les variables locales, c'est bien rangé : chaque fonction a ses variables à elle seule,
on peut donc les modifier sans craindre de modifier une variable d'une autre fonction.
Et il suffit d'utiliser les arguments pour passer des valeurs d'une fonction à l'autre.

Il est quand même possible de créer des variables dites globales, c'est-à-dire accessibles depuis n'importe quelle fonction.

Pour créer une telle variable, il y a deux solutions :

• la première consiste à déclarer la variable en dehors de toute fonction.

// on cree deux variables globales
var variable1;
var variable2 = 0;
 
function essai()
{
   variable1 = 1;
   variable2 = 8;
   // modification des variables globales
}
    // ces deux variables seront encore accessibles une fois la fonction terminée

• La seconde est de ne pas déclarer la variable avec var : on l'utilise comme si elle avait déjà été déclarée (on parle de déclaration implicite). L'exemple serait le même que celui du dessus, mais sans les 3 premières lignes. Les variables sont créées directement dans la fonction. Personnellement, je préfère utiliser la première solution.
  

Au risque de me répéter, je vous rappelle qu'il faut privilégier au maximum l'emploi de variables locales…

Partons de cet exemple, que vous connaissez tous :

var ma_variable = prompt('Entrez une valeur');

On utilise le signe = : mais comment une fonction peut-elle avoir une valeur ?

Prenons l'exemple des fonctions en mathématiques…
Soit f la fonction définie par f(x) = 5x - 3.
On a f(x) = 5x - 3 …c'est bien ce signe = qui nous intéresse !

Eh bien essayons de créer une fonction f qui fait la même chose que notre fonction mathématique.

On peut d'ores et déjà écrire la première ligne de code :

function f(x)

On déclare une fonction nommée f ayant un seul attribut, nommé x.

Que va contenir cette fonction ?
On va également créer une variable pour le résultat du calcul : appelons-la resultat (très original, n'est-ce pas ?).

var resultat = 5*x - 3;

On a notre fonction et notre résultat, il nous reste plus qu'à dire : “je veux que ma fonction prenne cette valeur”.
Pour employer le terme exact, on veut que notre fonction renvoie (ou retourne) cette valeur.
Par exemple, avec prompt, la valeur retournée est le texte tapé par l'utilisateur.
Dans notre cas, c'est le contenu de la variable resultat.

Pour ce faire, on fait précéder la valeur à renvoyer du mot-clé return.

return resultat;

On assemble maintenant tous nos morceaux, voici la fonction f telle qu'on pourrait la coder en JS :

function f(x)
{
   var resultat = 5*x - 3;
   return resultat;
}

On teste de cette manière (ou en enregistrant le résultat dans une variable) :

alert( f(7) );

Et… on voit s'afficher le résultat : 32 .

De cette manière, vous pouvez créer toutes sortes de fonctions (particulièrement mathématiques . Voici quelques exemples :

• triple(x) qui renvoie le triple de l'argument
• carre(x) qui renvoie le carré de l'argument (x²)
• cube(x) qui renvoie le cube de l'argument.

Voici la correction (vous pouvez faire différemment, avec une variable par exemple) :

function triple(x)
{
   return 3*x;
}
 
function carre(x)
{
   return x*x;
}
 
function cube(x)
{
   return x*x*x;
}

Un exemple de calcul dans lequel on voit clairement l'utilité de ceci :

var resultat = 4*cube(5) - 7*3 / carre(6);

function sayHello() {
    return 'Bonjour !'; 
// L'instruction « return » suivie d'une valeur, cette dernière est donc renvoyée par la fonction
}
alert(sayHello()); // Ici on affiche la valeur retournée par la fonction sayHello()
 
// ou alors on stocke le return dans une variable comme ceci
var gloups = sayHello();
alert(gloups);

function triple (argu1){
    var result1 = 3 * argu1;
    return result1;
}
 
var ok = triple(3); // on stocke le return dans une variable
alert(ok);          // on affiche la variable

Voici un exercice que vous pouvez réaliser : une mini-calculatrice, demandant deux nombres et affichant les résultats des 4 opérations “de base” (addition, …), en créant une fonction pour chaque opération (même si c'est inutile, c'est un entraînement).

Il est également possible d'améliorer et de compléter notre convertisseur.

Bref, plein de bonnes idées pour progresser.

Retour d'un niveau
Retour à l'accueil