Concevoir des fonctions
Dans les chapitres précédents vous avez découvert quatre fonctions :alert()
,prompt()
,confirm()
et parseInt()
. Vous avez pu constater que chacune de ces fonctions avait pour but de mener à bien une action précise, reconnaissable par un nom explicite.
Voici comment écrire une fonction :
function myFunction(arguments) { // Le code que la fonction va devoir exécuter }
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.
Un exemple concret
function calculate() {
var var1 = 2, var2 = 3; alert(var1 * var2);
}
calculate(); var result;
Un autre:
result = parseInt(prompt(‘Donnez le nombre à multiplier par 2 :’));
alert(result * 2);
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 pour ne pas écrire deux fois la même chose:
function byTwo() {
var result = parseInt(prompt(‘Donnez le nombre à multiplier par 2 :’));
alert(result * 2);
}
byTwo(); alert(‘Vous en êtes à la moitié !’); byTwo();
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 et surtout nous appelons deux fois notre fonction plutôt que de réécrire le code qu’elle contient.
Exemple simple:
Les valeurs de retour
Les arguments
Créer et utiliser un argument
Comme nous venons de le dire, les arguments sont des informations envoyées à une fonction. Ces informations peuvent servir à beaucoup de choses.
function myFunction(arg) { // Notre argument est la variable « arg » // Une fois que l’argument a été passé à la fonction, vous allez le retrouver dans la variable « arg »
alert(‘Votre argument : ‘ + arg);
}
myFunction(‘En voilà un beau test !’);
Ex:
function myFunction(arg) {
alert(‘Votre argument : ‘ + arg);
}
myFunction(prompt(‘Que souhaitez-vous passer en argument à la fonction ?’));
Dans cet exemple quand on remplit le champs par, par exemple: il fait beau! et que l’on valide, la fonction nous renvoie Votre argument : il fait beau!
La fonction
myFunction()
est déclarée, son code est donc enregistré en mémoire mais ne s’exécute pas tant qu’on ne l’appelle pas ;À la dernière ligne, nous faisons appel à
myFunction()
mais en lui passant un argument, la fonction va donc attendre de recevoir tous les arguments avant de s’exécuter ;La fonction
prompt()
s’exécute puis renvoie la valeur entrée par l’utilisateur, ce n’est qu’une fois cette valeur renvoyée que la fonctionmyFunction()
va pouvoir s’exécuter car tous les arguments auront enfin été reçus ;Enfin,
myFunction()
s’exécute !
Le premier couple de parenthèses permet de dire « je désigne cette fonction » pour que l’on puisse ensuite indiquer, avec le deuxième couple de parenthèses, que l’on souhaite l’exécuter.
Une fois les parenthèses ajoutées, la fonction (qui est une structure) est exécutée, ce qui fait que l’on obtient une instruction, il faut donc ajouter un point-virgule.
(function() {
// Code isolé
})();
L’intérêt de cet « isolement de code » concerne la portée des variables : vous pouvez créer autant de variables que vous le souhaitez dans cette fonction avec les noms que vous souhaitez, tout sera détruit une fois que votre fonction aura fini de s’exécuter. Exemple (lisez bien les commentaires) :
var test = ‘noir’; // On crée une variable « test » contenant le mot « noir »
(function() { // Début de la zone isolée
var test = ‘blanc’; // On crée une variable du même nom avec le contenu « blanc » dans la zone isolée
alert(‘Dans la zone isolée, la couleur est : ‘ + test);
})(); // Fin de la zone isolée. Les variables créées dans cette zone sont détruites.
alert(‘Dans la zone non-isolée, la couleur est : ‘ + test); // Le texte final contient bien le mot « noir » vu que la « zone isolée » n’a aucune influence sur le reste du code
Parfois on aimerait bien enregistrer dans le code global une des valeurs générées dans une zone isolée. Pour cela il vous suffit de procéder de la même façon qu’avec une fonction classique, c’est-à-dire comme ceci :
var sayHello = (function() {
return ‘Yop !’;
})();
alert(sayHello); // Affiche : « Yop ! »