5 Procédures et fonctions

Déclaration et appel des fonctions en JS

On distingue traditionnellement les procédures et les fonctions.
JavaScript ne différencie pas leur syntaxe. Il est recommandé de les inclure dans la section d'en-tête du document à l'intérieur du couple de balises
Une procédure est une suite d'instructions qui forment un tout et qui sont regroupées sous un même nom.
Une fonction est une suite d'instructions qui calcule un résultat; celui-ci est transmis à l'expression qui a appelé la fonction, après le mot return. A noter que l'instruction return peut être utilisée plusieurs fois en cas de valeur retournée conditionnellement.
De plus, procédures et fonctions peuvent admettre des paramètres.
Ce sont des variables dont les valeurs sont fixées par le programme appelant au moment de l'exécution et qui apparaissent "formellement", sans valeur affectée au niveau de la déclaration.
S'il n'y a pas besoin de paramètres, le nom de la fonction est suivi d'un couple de parenthèses vides.

Déclaration générale d'une procédure et d'une fonction

<HEAD>
<SCRIPT LANGUAGE=JavaScript >
Function nomProcédure(param1, param2, ...)  {
  séquence d'instructions;
  }
Function nomFonction(param1, param2, ...)   {
  séquence d'instructions;
  return nom_variable
  }
</SCRIPT>
</HEAD>

Appel d'une procédure et d'une fonction

JS lit les fonctions présentes dans une page, lors de son ouverture, mais ne les exécutent pas.
Une fonction n'est exécutée qu'au moment de son appel.
Dans l'écriture de l'appel de la fonction, il faut fournir une liste de valeurs correspondant exactement à la liste des paramètres présents dans la déclaration.
Les procédures forment des instructions à part entière, tandis que les fonctions doivent être affectées à une variable du type de retour ou incluses dans des expressions comme document.write(...).

nomProcédure(valeur1, valeur2, ...) ; variable = nomFonction(valeur1, valeur2, ...) ;

Exemple

Etudier l'exemple suivant et prévoir exactement son exécution.
Ensuite, comparer avec le corrigé.

<HEAD> <SCRIPT> // déclaration de la procédure function bonjour(prenom) { document.write("Bonjour, comment vas-tu ", prenom," ?<br>"); } // déclaration de fonctions function volumeSphere(rayon) { return 4/3*Math.PI*Math.pow(rayon,3); } function calculerPrix(PrixUnitaire, NbArticles) { return PrixUnitaire* NbArticles; } </SCRIPT> </HEAD> <BODY> // appel de la procédure bonjour("Toto") ; //appels des fonctions var montant=CalculPrix( 150 , 4) ; document.write( "Tu dois payer ", calculerPrix( 150, 4), "F.<BR>"); document.write( "Sais-tu que le volume de la sphère de rayon unité est ", volumeSphere(1)," ?<BR>" ); </BODY>

Visibilité des paramètres

De façon générale, les paramètres formels d'une fonction ne sont connus qu'à l'intérieur de la fonction.
De même, les variables locales, variables qui sont explicitement déclarées à l'intérieur de la fonction.
Conséquences :
Si la valeur d'un paramètre ou d'une variable locale est modifiée dans la fonction, cette modification ne sera pas connue à l'extérieur de la fonction. On dit que cette variable n'est pas visible au niveau du programme général

Examiner l'exemple suivant : qu'obtient-on exactement à l'exécution ?

<HEAD>
<SCRIPT LANGAGE=JavaScript > 
function bonjour(nom) {   // nom est un paramètre local 
  var ch ="Salut !";     // ch est une variable locale
  document.write("au début de la fonction :  Bonjour "+nom +"<BR>"); 
  nom = "Alain";	     // on modifie le paramètre local
  document.write("à la fin de la fonction : Bonjour "+nom +"<BR>"); 
  }

 var prenom = "Jacques";
 bonjour(prenom) ;
 document.write("après appel de la fonction : Bonjour  "+prenom +"<BR>"); 
 </SCRIPT>
<HEAD>

Comparez avec le corrigé 1.

On ajoute à la fin l'instruction suivante :
document.write("après appel de la fonction : "+ ch +" bonjour "+nom +"<BR>");
- Que va t-il se passer exactement ?
- Et si on supprime + ch , qu'obtient-on ?
- Comparez avec le corrigé 2.

Fonctions récursives

JavaScript est un langage récursif !
Exemple classique : la fonction factorielle

<HTML> <BODY> <script> function fact(n) { if (n==0) return 1 else return (n*fact(n-1)) } nb=prompt("N= ","0"); document.write("Liste des premières factorielles jusqu'à ", nb); for (var i=0;i<nb;i++) document.write(i+ " ! = "+fact(i)+"<br>") </script> </BODY> </HTML>

Qu'obtient-on exactement à l'exécution ?
Pour vérifier, voir le corrigé exemple 3

L'objet Function

A chaque fonction rencontrée, JavaScript construit un tableau de ces arguments, appelés arguments.
Si la fonction s'appelle calculer, ce tableau a :
- pour éléments calculer.arguments[i]
- pour taille calculer.arguments.length
Exemple
```
 function calculerPrix(PrixUnitaire, NbArticles)  {
 if (calculerPrix.arguments.length !=2)
 	alert("impossible de calculer le prix !")
 else
  return  PrixUnitaire* NbArticles; 
  }
  
```
Dans le cas où l'on ne passe pas 2 paramètres effectifs lors de son appel, cette fonction affiche un message d'alerte et renvoie la valeur undefined
On peut définir aussi une fonction dynamiquement, en cours d'exécution, et avec un nombre d'arguments non précisés au départ !

Ce nombre d'arguments variables (et non défini à la déclaration), trouve son utilité dans le cas où ces arguments doivent être traités comme les éléments d'un tableau

function somme() { var resultat=0 ; for (var i=0; i < somme.arguments.length; i++) resultat += somme.arguments[i] ; return resultat ; } // quelques appels document.write("1+2+3 = somme(1,2,3) = " + somme(1,2,3)+"<p>"); document.write("1+2+3+ .. +10 = somme(1,2,3,4,5,6,7,8,9,10) = " + somme(1,2,3,4,5,6,7,8,9,10)+"<p>"); document.write(" somme(15.4) = " + somme(15.4)+"<p>"); document.write(" somme() = " + somme()+"<p>");
Qu'obtient-on exactement à l'exécution ?
Pour vérifier, voir le corrigé exemple 4

Création d'instance de la classe Function

Il existe un constructeur Function(), semblable aux constructeurs Date(), Image(), permettant de définir une nouvelle fonction, lors de l'exécution.
Syntaxe :

nom_fct=Function("arg1", .. "argN", "code_fct"), où :
arg1, .. argN est la liste des paramètres de la fonction
code_fct est le code, donc la suite des instructions, séparées par des ;

Exemple :
Les 2 fonctions f1 et f2 sont équivalentes :

<script>
function f1(x) {
return x*x
}
var f2 = new Function("x","return x*x")
document.write("f1(12) =" + f1(12) + "<BR>")
document.write("f2(12) =" + f2(12) + "<BR>")
</script>

Pour vérifier, voir le corrigé exemple 5