Concevoir des fonctions

Dans les chapitres précédents vous avez découvert quatre fonctions : alert(), prompt(), confirm() et parseInt(). En les utilisant, vous avez pu constater que chacune de ces fonctions avait pour but de mener à bien une action précise, reconnaissable par un nom explicite (en anglais ça l'est en tous les cas).

Pour faire simple, si l'on devait associer une fonction à un objet de la vie de tous les jours, ce serait le moteur d'une voiture : vous tournez juste la clé pour démarrer le moteur et celui-ci fait déplacer tout son mécanisme pour renvoyer sa force motrice vers les roues. C'est pareil avec une fonction : vous l'appelez en lui passant éventuellement quelques paramètres, elle va ensuite exécuter le code qu'elle contient puis va renvoyer un résultat en sortie.

Le plus gros avantage d'une fonction est que vous pouvez exécuter un code assez long et complexe juste en appelant la fonction le contenant. Cela réduit considérablement votre code et le simplifie d'autant plus ! Seulement, vous êtes bien limités en utilisant seulement les fonctions natives du Javascript. C'est pourquoi il vous est possible de créer vos propres fonctions, c'est ce que nous allons étudier tout au long de ce chapitre.

Quand on parle de fonction ou variable native, il s'agit d'un élément déjà intégré au langage que vous utilisez. Ainsi, l'utilisation des fonctions alert(), prompt(), confirm(), etc. est permise car elles existent déjà de façon native.

Créer sa première fonction

On ne va pas y aller par quatre chemins, voici comment écrire une fonction :

Code : JavaScript

function myFunction(arguments) {

// Le code que la fonction va devoir exécuter

}

Décortiquons un peu tout ça et analysons un peu ce que nous pouvons lire dans ce code :

Le mot-clé function est présent à chaque déclaration de fonction. C'est lui qui permet de dire « Voilà, j'écris ici une fonction ! » ;
Vient ensuite le nom de votre fonction, ici myFunction ;
S'ensuit un couple de parenthèses contenant ce que l'on appelle des arguments. Ces arguments servent à fournir des informations à la fonction lors de son exécution. Par exemple, avec la fonction alert() quand vous lui passez en paramètre ce que vous voulez afficher à l'écran ;
Et vient enfin un couple d'accolades contenant le code que votre fonction devra exécuter.

Il est important de préciser que tout code écrit dans une fonction ne s'exécutera que si vous appelez cette dernière (« appeler une fonction » signifie « exécuter »). Sans ça, le code qu'elle contient ne s'exécutera jamais.

Bien entendu, tout comme les variables, les noms de fonctions sont limités aux caractères alphanumériques (dont les chiffres) et aux deux caractères suivants : _ et $.

Bien, maintenant que vous connaissez un peu le principe d'une fonction, voici un petit exemple :

Code : JavaScript

function showMsg() {

alert('Et une première fonction, une !');

}

showMsg(); // On exécute ici le code contenu dans la fonction

Dans ce code nous pouvons voir la déclaration d'une fonction showMsg() qui exécute elle-même une autre fonction qui n'est autre que alert() avec un message prédéfini.
Bien sûr, tout code écrit dans une fonction ne s'exécute pas immédiatement, sinon l'intérêt serait nul. C'est pourquoi à la fin du code on appelle la fonction afin de l'exécuter, ce qui nous affiche le message souhaité.

Un exemple concret

Comme nous le disions plus haut, l'intérêt d'une fonction réside notamment dans le fait de ne pas avoir à réécrire plusieurs fois le même code. Nous allons ici étudier un cas intéressant où l'utilisation d'une fonction va se révéler utile :

Code : JavaScript

var result;

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

Comme vous pouvez le constater, nous avons écrit ici exactement deux fois le même code, ce qui nous donne un résultat peu efficace. Nous pouvons envisager d'utiliser une boucle mais si nous voulons afficher un texte entre les deux opérations comme ceci alors la boucle devient inutilisable :

Code : JavaScript

var result;

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

alert('Vous en êtes à la moitié !');

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

Notre solution, ici, est donc de faire appel au système des fonctions de cette façon :

Code : JavaScript

function byTwo() {

var result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

}

byTwo();

alert('Vous en êtes à la moitié !');

byTwo();

Concrètement, qu'est-ce qui a changé ? Eh bien, tout d'abord, nous avons créé une fonction qui contient le code à exécuter deux fois (ou autant de fois qu'on le souhaite). Ensuite, nous faisons la déclaration de notre variable result directement dans notre fonction (oui, c'est possible, vous allez obtenir de plus amples explications d'ici peu) et surtout nous appelons deux fois notre fonction plutôt que de réécrire le code qu'elle contient.

Voilà l'utilité basique des fonctions : éviter la répétition d'un code. Mais leur utilisation peut être largement plus poussée, continuons donc sur notre lancée !

Créé avec HelpNDoc Personal Edition: Environnement de création d'aide complet