Premiers pas en JavaScript
6.2 Appel de fonctions
cuy copyleft
  See You Why?  

 


fonction miniprogramme (6.1) | | exercices sur les fonctions (6.8)

Contenu

 

 

I. Fonction = miniprogramme

voir <<< séquence précédente

 

II. Comment appeler une fonction ?

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 :

 

 

A. dans le code principal

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&eacute;es que vous introduirez et n\'est valable qu\'&agrave; partir du 1er janvier 2012, <br>pour les salaires soumis au pr&eacute;compte belge <br>et inférieurs à un imposable de 5&nbsp;610,00&nbsp;&euro;. ";
message2+="<br>Notre intention est de vous donner une id&eacute;e de votre salaire net MENSUEL. ";
message2+="<br>CUY ne pourra en aucun cas être tenue pour responsable des &eacute;ventuelles diff&eacute;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

<html>
<head><title>la fonction faire()</title></head>
<body>
<script type="text/javascript">

function faire() {
       alert("Un bonjour de la part de CUY");
       // d'autres instructions pourraient être notées ici
}


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&eacute;es que vous introduirez et n\'est valable qu\'&agrave; partir du 1er janvier 2012, <br>pour les salaires soumis au pr&eacute;compte belge <br>et inférieurs à un imposable de 5&nbsp;610,00&nbsp;&euro;. ";
message2+="<br>Notre intention est de vous donner une id&eacute;e de votre salaire net MENSUEL. ";
message2+="<br>CUY ne pourra en aucun cas être tenue pour responsable des &eacute;ventuelles diff&eacute;rences par rapport au calcul fourni par votre employeur.";
message2+="<br>© CUY-01/2012</p></div></center>";
faire();
document.write(message2);
 
</script>
</body>
</html>


   

B. dans une autre fonction

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.

 

 

 

D. dans la fonction elle-même

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()...

 

 

E. dans un 'href'

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>

 

 

 

F. au chargement de la page

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 :

        1. placer dans la balise <BODY>, un paramètre gestionnaire de l'évènement onload, suivi d'un signe =, suivi de guillemets qui contiendront les fonctions à exécuter des l'ouverture de la page courante (sans oublier les points-virgules à la fin de chaque fonction) ;
        2. dans ce cas particulier, on aura veillé à définir les fonctions appelées avant l'ouverture de la balise <BODY>, donc entre les balises <HEAD et </HEAD> de la page.

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>
 

 

 

G. par hyperlien

Cette méthode a été abordée dans la partie intitulée "dans un href" ci dessus. Cependant, $$$

 

 

 

H. suite à un évènement

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.

 

 

III. Comparaison : illustration de fonctions

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 :

    1. appuyer sur le bouton "On" de son ordinateur
      pour allumer son ordinateur ;
    2. attendre que l'installation se termine ;
    3. appuyer la touche "Windows"
      pour voir les choix de "démarrer" ;
    4. cliquer sur "programmes"
      pour voir la liste des programmes installés sur votre ordi ;
    5. choisir "notepad++"
      pour pouvoir éditer ce que votre prof vous dira ;
    6. ré-appuyer la touche "Windows"
      pour voir les choix de "démarrer" ;
    7. cliquer sur "programmes"
      pour voir la liste des programmes installés sur votre ordi ;
    8. choisir votre navigateur (IE ou Google Chrome ou Mozila Firefox) ;
    9. écrire l'URL : "cuy.be/cours/jvs/" ;
    10. appuyer sur la touche "Enter"
      pour valider votre URL notée ;
    11. cliquer sur l'étape 5
      pour choisir : "JavaScript : Variables et chaines" et voir les sous-sections du chapitre ;
    12. cliquer la section : "outils de manipulation d'objet 'string' "
      pour voir s'afficher le cours ;
    13. appuyer sur ???,
      pour ouvrir un nouvel onglet dans votre navigateur ;
    14. appuyer sur "Alt" et sur "Tab" (double flèche)
      pour basculer sur l'application "Notepad++" ;

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.

 

 

VIII. Exercices relatifs aux fonctions (notions de base)

voir suite >>>

 

IX. Test relatif aux fonctions (notions de base)

voir suite >>>

 

 


fonction miniprogramme (6.1) | | exercices sur les fonctions (6.8)

 

 

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_062_appel_fonction.html

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).