Aller au menu - Aller au contenu

Icône Créer ses propres fonctions

Par Avatar JoSé2
Mise à jour : 22/07/2009
5 116 visites depuis 7 jours, dont 208 sur ce chapitre classé 38/786
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.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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 :
Code : JavaScript
1
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.


J'attire votre attention sur ces parenthèses. Elles sont indispensables, même si elles sont vides.


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 :
Code : JavaScript
1
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 :
Code : JavaScript
1
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 :
Secret (cliquez pour afficher)
Code : JavaScript
1
2
3
4
5
6
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) :
Code : JavaScript
1
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 :
Code : HTML
1
<img src="EuroFrancs.png" alt="" onclick="conversion();" />


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

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 :
Code : HTML
1
<img src="EuroFrancs.png" alt="" />

Ce code insère une image.
L'image qui est affichée est celle dont on a indiqué le nom : on utilise la même balise (c'est <img />) quelle que soit l'image, mais en précisant quelle image on veut afficher.

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é :
Code : JavaScript
1
2
3
4
5
6
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 :
Code : HTML
1
<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 :
Code : HTML
1
<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 :
Code : JavaScript
1
2
3
4
5
6
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 :
Code : HTML
1
2
3
4
<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 :
Code : JavaScript
1
2
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 :
Code : JavaScript
1
2
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.
Retour en haut

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 :
Code : JavaScript
1
2
3
4
function essai(argument1, argument2)
{
   // code de la fonction
}


Et un appel de cette fonction :
Code : JavaScript
1
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 :
Code : JavaScript
1
2
3
4
function essai()
{
   var variable = 'Bonjour';
}

Appelez ensuite cette fonction, puis affichez la valeur de cette variable, comme ceci :
Code : JavaScript
1
2
essai();
alert(variable);

Cette fois non plus, ça ne marche pas !


Variable locale



À la fin d'une fonction, toutes les variables déclarées à l'intérieur de celle-ci sont détruites.
On utilise le terme de variables locales.

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.
Ces variables sont à utiliser le moins possible !
Si une variable locale suffit pour telle utilisation, ne créez pas une variable globale en vous disant : "comme ça, je pourrai l'utiliser de partout".


Pour créer une telle variable, il y a deux solutions :
  • la première consiste à déclarer la variable en dehors de toute fonction.
    Code : JavaScript
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    // 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...
Retour en haut

Valeur renvoyée

Approche



Partons de cet exemple, que vous connaissez tous :
Code : JavaScript
1
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 :
Code : JavaScript
1
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 ?).
Code : JavaScript
1
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.
Code : JavaScript
1
return resultat;


Lorsqu'une fonction retourne une valeur, son exécution se termine : s'il reste du code à exécuter dans cette fonction, il sera ignoré.
Pour stopper l'exécution d'une fonction, on peut donc utiliser simplement ceci, qui ne renvoie rien, mais termine l'exécution :
Code : JavaScript
1
return;



On assemble maintenant tous nos morceaux, voici la fonction f telle qu'on pourrait la coder en JS :
Code : JavaScript
1
2
3
4
5
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) :
Code : JavaScript
1
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) :
Secret (cliquez pour afficher)
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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 :
Code : JavaScript
1
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.
Retour en haut

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 :
Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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.
Retour en haut

Q.C.M.

Une fonction :
Une fonction :
Vrai ou faux ?
Il vaut mieux utiliser des variables globales que des variables locales, car on peut y accéder depuis n'importe quelle partie de notre script.
Indenter son code...

Statistiques de réponses au QCM

Retour en haut
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...
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
17 commentaires pour "Créer ses propres fonctions"
Note moyenne : 3.51 / 4 (260 votes)
Pseudo Commentaire
Hors ligne kilrou # Posté le 06/04/2010 à 10:21:17
Avatar

 Bonjour tout le monde, voilà, mon code ne fonctionne pas, j'ai bien l'image mais lorsque je clique dessus rien ne se passe...

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Titre de la page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<script type="text/javascript"> 
<!--

function conversion()
{
var euros = prompt("Entrez une valeur en euros");
var franc = euros * 6.55957;

alert(euros + " euros équivaut à\n" franc " francs");
}

//-->
</script>  
  
</head>
<body>

<img src="convert.png" onclick="conversion();">

</body>
</html>
Hors ligne barcelonista00 # Posté le 12/04/2010 à 15:13:47
Avatar

 Bonjour kirlou;
il te manque la concatenation a la ligne 15
alert(euros + " euros équivaut à\n" + franc + " francs");
«La théorie, c'est quand on sait tout et que rien ne fonctionne. La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi. Ici, nous avons réuni théorie et pratique : Rien ne fonctionne... et personne ne sait pourquoi !»
Albert Einstein
 
Hors ligne Micknissart # Posté le 06/08/2010 à 15:36:15

Bonjour, j'ai (déjà :p) un soucis sur script de conversion. Voici le mien:

Code : JavaScript
1
2
3
4
5
6
function conversion()
{
	var euro = prompt("Quel est le montant en euro à convertir");
	var franc = euro * 6,55957;
	alert(euro + " euros vaut " + franc + " francs");
}


A priori, je ne vois pas la différence entre le mien et celui proposé dans le tuto, mais le mien de marche pas. Par contre, quand je remplace le mien par celui du tuto, ca marche nickel :p

Si quelqu'un peut m'aider, ce serait gentil :)
Hors ligne Micknissart # Posté le 07/08/2010 à 14:31:15

Bon et bien j'ai trouvé, j'avais mis une virgule et pas un point pour 6,55957.

Me sent un peu bête là ^^
Hors ligne geniusdj # Posté le 06/11/2011 à 20:36:14

Merci pour le tuto. Enfin compris les fonctions en JS.

Voir tous les commentaires