Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Fonctions et procédures en Javascript partie 1

Compatible JavaScript. Cliquer pour en savoir plus sur les compatibilités.Par qwix, le 10 juin 2005

Définitions :

- Une fonction est un ensemble d'instructions.
Elle fait office de bloc de code réutilisable, et renvoie une valeur.

- Une procédure effectue les mêmes tâches qu'une fonction.
Mais ne renvoie pas de valeur.

Exemple :

function Somme (parametre1,parametre2) {
return parametre1 + parametre2 ;
}
 
s = Somme ( 5 , 6 ) ; // retourne s = 11

- Une procédure est une fonction qui effectue aussi un tâche unique et qui ne renvoie PAS de résultat directement.

Les personnes qui connaissent déjà ses notions doivent se demander pourquoi je dis que les fonctions et les procédures n'effectuent qu'une seule tâche, alors qu'il est possible de leur en demander autant qu'on veut. Tout simplement parce que c'est un bonne pratique de programmation de ne leur affecter qu'un seule tâche, cela permet un débogage et une réutilisation optimale.

Un peu de théorie maintenant :

Les exemples qui vont vous êtres exposés ici seront écrits en pseudocode, c'est à dire que les programmes seront écrits en langue naturelle (en gros, en français ;) ), c'est un langage que beaucoup de programmeur utilisent pour développer leurs programmes, pour ensuite les écrire dans le langage qu'ils souhaitent :), c'est ce qu'on apelle l'algorithmique.

Une phase de développement peut se résumer comme ceci:
- Définition des besoins
- Ecriture du programme en pseudocode
- Ecriture du programme dans le langage souhaité

Ecriture d'une fonction

Comme il l'a été expliqué plus haut, une fonction ne renvoie qu'UNE SEULE VALEUR.

Voyons tout de suite un exemple:

- Définitions des besoins: nous voulons un programme qui effectue la somme de deux nombres.

- Ecriture du programme en pseudo-code :

     
fonction calculeLaSomme()
var nombreUn = 5 ;
var nombreDeux = 6 ;
var somme = 0 ;

somme = nombreUn + nombreDeux ;

retourne somme ;

Décortiquons cette fonction:

-La première ligne fonction calculeLaSomme() signifie que l'on veut créer une FONCTION dont le nom est calculeLaSomme, vous remarquerez les (), elles sont là pour donner des paramètres à la fonction, mais nous verrons cela un peu plus loin.

-La deuxième ligne var nombreUn = 5 signifie que l'on a déclaré une variable du nom de nombreUn et qu'elle a pour valeur 5.

-La troisième ligne var nombreDeux = 6 ; signifie que l'on a déclaré une variable du nom de nombreDeux et qu'elle a pour valeur 6.

-La quatrième ligne var somme = 0 ;, signifie que l'on a déclaré une variable du nom de somme et qu'elle a pour valeur 0 (pour l'instant ;) ).

-La cinquième ligne “somme = nombreUn + nombreDeux, signifie que l'on fait l'addition des deux variables nombreUn et nombreDeux et que le résultat va être affecté à la variable somme qui a maintenant la valeur 11 (he oui 6+5 = 11 ).

-La dernière ligne retourne somme est la plus importante !!! Elle retourne la valeur de la somme mais N'EFFECTUE AUCUN TRAITEMENT DESSUS (ni affichage, ni autre chose).C'est grâce à cette ligne que l'on peut différencier les fonctions des procédures. En effet les procédures ne contiennent PAS cette ligne, mais nous verrons cela juste après .

Si nous décidons maintenant d'afficher la somme, il nous suffirait de faire comme ceci, dans le programme principal:

var resultat = calculeLaSomme() ;
affiche resultat ;

Nous déclarons un nouvelle variable resultat qui prend la valeur retournée par la fonction c'est à dire somme et plus précisemment 11(he oui 6 + 5 ).
Ensuite il nous suffit d'afficher la variable resultat, mais je crois que cette ligne assez explicite ;) .

- Ecriture du programme en JavaScript:

<script language="JavaScript" type="text/javascript">
 
function calculeLaSomme()
{
var nombreUn = 5 ;
var nombreDeux = 6 ;
var somme = 0 ;
 
somme = nombreUn + nombreDeux ;
 
return somme ;
}
 
/**** programme principal ****/
var resultat = calculeLaSomme() ;
document.write (resultat) ;
 
</script>




Tutorial de qwix