• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

Créer ses propres fonctions

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous savez qu'en JS, il existe ce qu'on appelle des "fonctions".
Eh bien il est maintenant temps d'apprendre à créer les vôtres, c'est ce que nous allons voir tout au long de ce chapitre.

Créer une fonction

À propos des fonctions

Quelques rappels

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.

Un petit exemple :

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 :

Image utilisateur
Nos fonctions à nous

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é ^^ ).

Mais on peut bien faire ça sans avoir besoin de faire une fonction ?

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.

Déclarer et appeler une 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.

Déclarer notre fonction

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

Déclaration

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.
    Le code sera alors placé dans l'en-tête de la page, entre les balises <head> et </head>.

  • 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 ? :'(

Appeler notre fonction

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.

Image utilisateur

Et vous savez quoi ? Eh bien on peut maintenant l'appeler quand on veut dans notre page !
Insérons une image qui exécutera cette fonction lorsque nous cliquerons dessus.
Pour ceux qui voudraient une image un poil correcte pour notre convertisseur, je vous en ai concoctée une.
Vous n'avez qu'à faire clic droit > Enregistrer l'image sous...

Nous voulons appeler notre fonction lorsque l'utilisateur cliquera sur l'image. Utilisons alors le gestionnaire d'événement onclick :

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

Et voilà, vous venez de créer un script qui n'est pas totalement inutile :D .

Les arguments

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...

Créer une fonction qui possède des arguments

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).
Et on peut même faire un convertisseur belge, avec conversion(1), qui convertit des francs belges (BEF) en francs belges (1 BEF = 1 BEF) ! :D (désolé pour les belges...).
Il nous suffit de préciser le taux entre les parenthèses. Pratique, pas vrai ? :soleil:

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>
Fonction à plusieurs arguments

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 ? :p

Arguments facultatifs

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.

Portée d'une variable

Fonctionnement des arguments

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.

Portée des variables

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 !

Variable locale

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

Mais c'est nul ! :waw: Pourquoi on ne peut pas accéder quand on veut et où on veut à toutes les variables ?!

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.

Variables globales

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 terminee
  • 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...

Valeur renvoyée

Approche

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.

Création d'une fonction classique

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;
Renvoi de la valeur

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 :) .

Quelques exemples

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);
Pour s'entraîner

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.

L'indentation

Je vais terminer ce chapitre sur un point tout simple, mais qui a son importance.

Indenter son code

Vous avez peut-être remarqué que dans le code de la fonction, certaines lignes sont en retrait par rapport aux autres : cela s'appelle l'indentation.

Cela consiste à décaler certaines parties du code (mais pas n'importe lesquelles), de manière à le rendre plus lisible.
C'est assez dur à expliquer, mais cela reste très simple d'utilisation, comme vous le verrez au cours des exemples de ce tutoriel.

Le code se rassemble en "groupes" (la plupart du temps, ils correspondent aux blocs d'instructions).
L'indentation consiste à décaler tout le code de ce "groupe" d'une tabulation.

Exemple

Un petit exemple sera beaucoup plus parlant :

instruction1;

{

     instruction2;

     instruction3;

     {

          instruction4;

     }

}

instruction5;

On distingue beaucoup plus facilement à quel bloc appartient chaque instruction.

Espaces ou tabulation ?

Pour créer ce retrait, on utilise la touche TAB.
Les espaces sont aussi utilisés, mais sont plus contraignants (il faut en insérer plusieurs), bien que mieux adaptés (car on peut choisir la largeur du retrait).
C'est pourquoi certains logiciels (tels que Notepad++) associent à chaque appui sur TAB un nombre configurable d'espaces.

Pour modifier ce nombre d'espaces avec Notepad++ : menu Paramétrage > Préférence... > onglet MISC > Taille de tab.

Pour ceux qui voudraient plus d'exemples à propos de l'indentation et des différents "styles", je vous encourage à visiter cette page wikipédia.

Ce chapitre vous a apporté beaucoup d'éléments nouveaux, qui sont à la base de la programmation : en effet, les fonctions forment une notion clé, indispensable dans la création de scripts un minimum élaborés.

Si vous ne vous sentez pas très à l'aise avec ce concept, n'hésitez pas à relire ce chapitre et surtout à vous exercer sur des sujets que vous voulez.

Un petit proverbe pour conclure : c'est en forgeant que l'on devient forgeron...

Exemple de certificat de réussite
Exemple de certificat de réussite