Vous êtes ici : Accueil des cours Misfu > Informatique > Apprendre la programmation > Cours Javascript > Les fonctions en Javascript

Traduction de la page Functions rédigée par Peter-Paul Koch et traduite par Christophe Bruggeman

La traduction est en cours, si vous trouvez une erreur sur une page ou si vous souhaitez suggérer une amélioration, n'hésitez pas à utiliser le forum.

Fonctions

Les fonctions sont les unités de fonctionnement centrales du Javascript. Presque tous les scripts de ce site emploient une ou plusieurs fonctions pour obtenir le résultat désiré. Par conséquent il est important que vous compreniez ce qu'est une fonction et comment cela fonctionne.

D'abord j'explique la syntaxe de base, d'une fonction, puis j'explique comment l'appeler Ensuite vous apprenez comment passer des arguments et pourquoi vous devriez le faire. En conclusion, nous faisons retourner quelque chose à la fonction.

La fonction

C'est une fonction :

function example(a,b)
{
	number += a;
	alert('You have chosen: ' + b);
}

On l'appelle comme ceci :

example(1,'house')

En fait, quand vous définissez la fonction example vous créez une nouvelle commande Javascript que vous pouvez appeler n'importe où dans la page. A chaque fois que vous l'appelez, le Javascript situé à l'intérieur des accolades {} est exécuté.

Appeller la fonction

Vous pouvez appeler la fonction à partir de n'importe quel autre Javascript. Apres l'exécution de la fonction, l'autre script reprend la main.

alert('Example 1: the House');
example(1,'house');
(Placer la suite ici)

Ainsi ce script génère d'abord une boîte d'alerte, puis appelle la fonction et à la fin de celle-ci il finit d’exécuter le reste des instructions du code.

Vous pouvez également appeler une fonction par un autre évènement :

<A HREF="somepage.html"
 onMouseOver="example(1,'house')">Example 1: the House</A>

Maintenant la fonction est exécutée quand la souris de l’utilisateur passe au-dessus du lien.

Arguments

Vous pouvez passer des arguments à une fonction. Ce sont des variables, des nombres ou des chaînes de caractères, avec lesquelles la fonction est censée faire quelque chose. Naturellement le rendu de la fonction dépend des arguments que vous lui passez.

Dans l'exemple nous passons deux arguments, le nombre 1 et la chaîne de caractère (string)'house':

example(1,'house');

Quand ces arguments arrivent à la fonction, ils sont stockés dans deux variables, a et b. Vous devez déclarer ceci dans l'en-tête de la fonction, comme vous pouvez le voir ci-dessous.

function example(a,b)

Maintenant la fonction commence à travailler et fait quelque chose avec a et b :

function example(a,b)
{
	number += a;
	alert('Vous avez choisi: ' + b);
}

Elle rajoute + 1 à number et affiche: Vous avez choisi: house. Bien sur, si vous appelez la fonction ainsi

example(5,'palace');

Elle rajoute + 5 à number et affiche Vous avez choisi: palace. Le rendu de la fonction dépend des arguments que vous lui donnez.

Utiliser plus d'arguments

Vous pouvez employer autant d'arguments que vous le souhaitez :

function example(a,b,c,data,data2)
{
	number += a;
	alert('Vous avez choisi: ' + b);
	(rajoutez du code avec c, data et data2)
}

Si vous oubliez de passer un argument la fonction se plaint. Supposez que vous faites

example(1,'house',16,'more stuff')

alors 1 est passé à a, 'house' est passée à b, 16 est passés à c et ‘more stuff’ est passée à data. Seulement maintenant il n'y a plus rien pour data2 puisque vous ne lui avez rien passé à l'appel de fonction. Quand la fonction arrive à la partie ou elle censé faire quelque chose avec data2, elle pense que data2 n'existe pas et renvoie des messages d'erreur.

Donc faites toujours attention à passer suffisamment d'arguments. Personnellement j'essaye toujours d'écrire des fonctions avec le moins d’arguments possible. Ceci maintient mon code propre et le rend facile à mettre à jour.

Utilisation sans argument

Vous pouvez également écrire une fonction sans aucun argument:

function example()
{
	number += 1;
	alert('Vous avez choisi: house');
}

Naturellement la fonction fait exactement la même chose à chaque fois que vous l'appelez. Si vous essayez de lui passer des arguments, elle les ignore puisqu'ils ne sont pas définis dans l'en-tête de fonction.

Retourner une valeur

Une chose de plus qu’une fonction peut faire est de retourner une valeur. Supposez que nous ayons la fonction suivante :

function calculate(a,b,c)
{
	d = (a+b) * c;
	return d;
}

Cette fonction calcule un nombre d à partir des nombres (a,b,c) que vous lui passez. Une fois fait elle retourne (return) le résultat du calcul. C'est en fait l'opposé du passage d’arguments: la fonction passe maintenant le résultat retour à l’appelant. Après n’importe quel return la fonction cesse de fonctionner: elle n'exécute plus de lignes, même s'il y en a.

Dans la pratique ça fonctionne ainsi:

var x = calculer(4,5,9);
var y = calculer((x/3),3,5);

Maintenant vous déclarez une variable x et dites au Javascript d'exécuter calculer() avec les arguments 4, 5 et 9 et de mettre la valeur de retour (81) dans x. Puis vous déclarez une variable y et exécutez encore la fonction calculer(). Le premier argument est x/3, qui signifie 81/3 = 27, ainsi ‘y’ devient 150.

Naturellement vous pouvez également renvoyer des chaînes de caractères (string) ou même des valeurs booléennes (vrai ou faux). En utilisant du JavaScript dans des formulaires, vous écrivez une fonction qui renverra vrai ou faux et dira au navigateur s’il faut soumettre le formulaire ou non.

Return pour arrêter la fonction

Parfois il est utile d'ajouter un return à vos scripts pour les arrêter. En utilisant la détection d'objet si vous trouvez qu’un navigateur ne peut exécuter un script, employez un return pour finir la fonction avant que le navigateur n’atteigne les lignes dangereuses qu’il ne pourra pas manipuler.

Supposez que vous écriviez un script en DHTML. La première chose que vous devriez faire c’est de vérifier si le navigateur supporte n'importe quel DOM de haut niveau :

var supported = (document.getElementById || document.all || document.layers);
if (!supported) return;
[Le DHTML commence ici]

Si supported est faux (le navigateur ne supporte aucun niveau de DOM avancé), vous devez arrêter la fonction puisqu'elle ne renverrai que des messages d'erreur pour ce navigateur. Faites le en employant return. La fonction s'arrêtera dans les navigateurs qui ne peuvent pas manipuler le DHTML, et ne continuera que si le navigateur supporte les niveaux de DOM avancé.