Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. PHP et JavaScript
  3. Les fonctions JavaScript
Extrait - PHP et JavaScript Dynamisez vos sites et applications web (avec exercices et corrigés)
Extraits du livre
PHP et JavaScript Dynamisez vos sites et applications web (avec exercices et corrigés) Revenir à la page d'achat du livre

Les fonctions JavaScript

Introduction

Tout comme PHP, JavaScript offre un accès aux fonctions. Mais ce n’est pas tout à fait la même chose, car comme vous l’avez vu dans les chapitres précédents, JavaScript s’exécute dans le navigateur du client, il doit donc faire la plupart du temps référence aux éléments du DOM.

Chaque élément d’une page HTML devient donc disponible et accessible par JavaScript pour être manipulé, modifié, etc.

Les fonctions sont souvent appelées directement sur un objet du DOM, vous avez par exemple déjà beaucoup utilisé la fonction write sur l’objet document.

JavaScript permet également d’écrire vos propres fonctions afin de faciliter la réutilisation de code.

Création d’une fonction

La syntaxe pour déclarer une nouvelle fonction est la suivante :


 function nom_fonction ([paramètre [, ...]]) { 
    //instructions 
 }
 

Ceci est très semblable à PHP, la fonction est définie comme suit :

  • Mot-clé obligatoire : function.

  • Le nom de la fonction qui suit doit commencer par une lettre ou un trait de soulignement, suivi d’un nombre quelconque de lettres, de chiffres, de symboles dollar ou de traits de soulignement.

  • Les parenthèses sont obligatoires.

  • Un ou plusieurs paramètres, séparés par des virgules, sont facultatifs (indiqués par les crochets, qui ne font pas partie de la syntaxe de la fonction).

  • Les accolades marquent le début et la fin des instructions contenues dans la fonction.

Les noms de fonctions sont sensibles à la casse, par exemple les fonctions calculTVA et calculTva seront différentes.

Une fonction JavaScript, comme en PHP, peut contenir une ou plusieurs instructions return, qui permettent de retourner une valeur à l’appelant (variable, autre fonction, objet, etc.), et mettent fin à l’exécution de la fonction.

Les paramètres d’une fonction : arguments

Les paramètres sont également nommés les arguments d’une fonction. Ceux-ci sont stockés dans un tableau intitulé arguments. Prenez par exemple la fonction affiche suivante qui permet de lister à l’écran une liste de fruits passés en paramètres :


<script>   
    function affiche(f1, f2, f3, f4, f5) { 
           document.write(f1 + "<br>") 
           document.write(f2 + "<br>") 
           document.write(f3 + "<br>") 
           document.write(f4 + "<br>") 
           document.write(f5 + "<br>") 
    }  
    affiche("pomme", "banane", "fraise", "poire", "peche") 
</script>
 

Ce qui donne :

images/19RI01.png

Le code de cette fonction peut grandement être amélioré, l’appel à l’instruction document.write peut être géré par une boucle et vous pouvez également utiliser un appel au tableau d’arguments, comme ceci :


<script>   
    function affiche() { 
        for (j = 0 ; j < affiche.arguments.length...

Valeur de retour d’une fonction

La fonction de la section Les paramètres d’une fonction : arguments n’était destinée qu’à un affichage à l’écran d’une liste des arguments passés à une fonction.

Une autre utilisation des fonctions est qu’elles permettent de retourner une valeur (une chaîne, un entier, un booléen, un tableau, etc.), à l’aide de l’instruction return, comme par exemple :


<script>   
    function triple(nombre) { 
           return nombre * 3 
    }  
    document.write ('le triple de 5 est : ' + triple(5)) 
</script>
 

Ce qui affiche :

images/19RI02.png

Bien entendu, on pourrait améliorer ce code en vérifiant que le paramètre passé à la fonction triple est bien une valeur numérique, sinon une erreur se produira.

Enfin, l’exemple ci-dessus montre le retour d’une valeur unique, si vous deviez retourner plusieurs valeurs, n’hésitez pas à utiliser les tableaux.