|
6.2 Appel de fonctions |
  copyleftSee You Why? |
Il existe plusieurs façons d'appeler une fonction en JS, mais dans tous les cas, la définition (ou la déclaration) de la fonction doit avoir été faite avant que la fonction ne soit appelée. Il ne faut pas oublier que JS est interprété dans l'ordre de lecture du programme... qui peut difficilement exécuter un ordre dont il ne comprend pas le sens.
Voici donc quelques méthodes d'appel d'une fonction :
La méthode la plus simple d'appeler une fonction est, dans le corps principal de la page, comme on note d'autres instructions. Il suffit d'appeler la fonction par son nom, sans oublier les parenthèses ouvrante et fermante, mais restant vides puisqu'il n'y a pas de paramètres à transmettre pour l'instant.
Ne pas oublier de terminer l'instruction par un point-virgule, puisqu'appeler votre fonction est un ordre, une instruction que vous venez de définir.
Votre code, pour la définition de la fonction, pourrait ressembler à ceci :
function faire() {
alert("Un bonjour de la part de CUY");
// d'autres instructions pourraient être notées ici
}
et pour l'appel, par exemple :
var message2;
message2="<center><div style='background:#E6E6FA; width:80%; border:1px solid blue; margin-top:50px; font-family: arial'>";
message2+="<p align='center' style='color:#191970; margin-top: 10px; margin-bottom: 10px; font-size: 120%'><br>";
message2+="<br>Ce calcul se fera dans les limites des données que vous introduirez et n\'est valable qu\'à partir du 1er janvier 2012, <br>pour les salaires soumis au précompte belge <br>et inférieurs à un imposable de 5 610,00 €. ";
message2+="<br>Notre intention est de vous donner une idée de votre salaire net MENSUEL. ";
message2+="<br>CUY ne pourra en aucun cas être tenue pour responsable des éventuelles différences par rapport au calcul fourni par votre employeur.";
message2+="<br>© CUY-01/2012</p></div></center>";
faire();
document.write(message2);
... et sans oublier que ce code doit toujours se trouver entre des balises <script>.
Ce petit programme enverra donc une fenêtre pop-up d'accueil,
(ce que lui demande la fonction faire()),
avant d'afficher normalement à l'écran un message d'information dans un cadre.
L'indentation de la source n'est pas obligatoire, mais plus que fortement conseillée : nous essayons toujours de fermer une accolade au niveau de la ligne qui a ouvert cette accolade.
L'avenir va vous démontrer que ce conseil n'est pas un luxe.
Tout lecteur verra que l'accolade fermante termine la fonction 'faire' qui a exigé l'accolade ouvrante.
« Jamais de courant d'air en Javascript », il faut fermer toutes les portes que l'on ouvre (ou les parenthèses ou les accolades).
Exemple
|
Un autre usage courant d'une fonction est de l'appeler dans une autre fonction, de la même façon que si on l'appelait du corps principal du programme.
Il est aussi fréquent qu'une fonction soit récursive... c'est-à-dire qu'elle s'appelle elle-même. On retrouve alors l'appel de la fonction dans les instructions de définition de la fonction.
Prudence cependant car c'est l'histoire du serpent qui se mange par la queue ; c'est comme si dans un dictionnaire vous cherchiez la définition du mot "chat" et que le dictionnaire vous indique "jeune de chat qui est devenu grand" (à réfléchir pour de nombreux enseignants) ; c'est le cas de celui à qui on promet de réaliser deux vœux... et qui choisit comme deuxième vœu "je souhaite qu'on réalise mes deux voeux suivants"...
Le lecteur aura compris que le risque est de rentrer dans une boucle sans fin... sauf si on y place une condition de sortie. Mais pour l'instant, ces solutions sont inconnues ; on abordera plus tard les conditions à partir du chapitre 14 (voir ici) et différentes boucles seront étudiées à partir du chapitre 19 (voir ici).
Le cas de récursivité pourrait aussi se présenter avec plusieurs fonctions. Par exemple lorsqu'une fonction1() appelle une fonction2() et que cette dernière rappelle la fonction1()...
Les tutoriels existants montrent parfois cette possibilité d'appeler une fonction dans une page HTML, sans ouvrir de balises <script> pour l'appel de la fonction. Il reste cependant évident que la définition de la fonction doit avoir été faite entre les balises <script>.
Les deux propositions rencontrées pour appeler une fonction faire() sont :
<a href="javascript:faire()"> lien déclencheur </a>
ou
<a href="#" onclick="javascript:faire()"> lien déclencheur </a>.
Nous en proposons ici une troisième que nous avons testé et qui supprime un rappel de la page courante ou des erreurs souvent engendrées par l'une des possibilités ci-dessus :
<a href="#" onclick="javascript:faire()"; return false;> lien déclencheur </a>
Une méthode particulière d'appeler une fonction est, dans la balise <body> de la page, de faire appel, non pas comme première instruction, mais comme opération à faire dès l'ouverture de la page. Ce peut être utile si on veut demander une information qui sera utilisée dans la suite du programme, si on doit charger une série de fonctions qui risquent d'être utilisées dans la page en cours, etc.
Pour ce faire, il faut :
Notre code devrait alors ressembler à ceci, si vous souhaitez créer une page qui lancera un messga d'accueil dès l'arrivée de l'internaute sur votre page :
<!DOCTYPE HTML>
<html>
<head>
<title>page avec salutation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function salutation(){
alert("Le site CUY vous souhaite la bienvenue.");
}
</script>
</head>
<body onLoad="salutation()">
// ici apparaitra le code HTML de votre page
</body>
</html>
Cette méthode a été abordée dans la partie intitulée "dans un href" ci dessus. Cependant, $$$
Le JS est un langage événementiel. Nous avons abordé un événement qui consiste en un chargement de la page... et nous savons que cet évènement est géré dans la balise <BODY onload="faire()">. JS peut gérer de nombreux événements tels que : onClick, onLoad, onUnload, onMouseOver, onMouseOut, onFocus, onBlur, onChange, onSelect, onSubmit, etc.
Ces événement seront étudiés plus en détail dans nos chapitres 21 ("Les événements dans la programmation", voir ici) et 22 ("Quelques événements : onMouseOver onLoad etc.", voir ici). Nous y renvoyons le lecteur.
Vous pouvez donc créer et appeler une fonction sans paramètre. Vous voilà prêt pour la suite du cours... patience... Les chapitres suivants vous montreront comment créer et utiliser des fonctions à paramètres, d'abord à paramètre unique puis à paramètres multiples.
Votre enseignant (prof de JavaScript, évidemment) entre pour son cours et vous dit : "Aujourd'hui, nous verrons les outils de manipulation d'objet 'string'." Comme un seul homme vous vous exécutez car vous savez qu'il faut :
Vous voilà prêt pour la suite du cours... patience, bientôt un nouvel ordre qui engendrera une nouvelle série d'actions plus élémentaires.
voir suite >>>
voir suite >>>
