Apprendre Javascript pour rendre vos pages Web interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Niveau recommandé pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 6: Les fonctions

Toutes les pages

Les fonction en Javascript

Javascript dispose de fonctions prédéfinies comme la fonction parseInt() qu'on a vue dans la page qui traite les chaines de caractères. Il dispose aussi d'autres fonctions qu'on appelle des méthodes, qu'on va voir plus loin dans ce cours. Cependant, le développeur peut créer ses propres fonctions en Javascript. Ce sont ces fonctions qui nous intéressent pour le moment.

Une fonction: une procédure ou sous-programme

Une fonction est une procédure ou un sous-programme qui contient un ensemble d’instructions. Ces instructions ne seront exécutées que suite à l'appel de la fonction.

Les fonctions ont de nombreux avantages qu'on va résumer dans les points suivants:
  • Réutilisation du code: Les fonctions sont faites pour qu'elle soit appelées à plusieurs reprises. Donc leur code est réutilisable à chaque appel.
  • Réduction de la taille du code: Le fait que la fonction est réutilisable, nous épargne de déclarer des lignes et des lignes de codes.
  • Organisation du code: Le fait d'utiliser les fonctions met de l'ordre dans le programme. Au lieu d'éparpiller les bouts de code par ci et par là. On met tout dans des fonctions qu'on connait par le nom.
  • Récursivité: Une fonction peut se rappeler par elle même, ce qui est très utiles dans certains cas. D'ailleurs c'est une technique largement utilisée en Javascript.

Donc les fonctions constituent un aspect fondamentale quand on programme en Javascript.

Où placer nos fonctions?

Vous vous souvenez quand j'ai dit qu'il vaut mieux mettre, autant que possible, son code Javascript dans la balise <head>? Et bien, c'est justement à cause des fonctions. En effet, Javascript est un langage interprété. Par conséquent, on ne peut pas appeler une fonction qu'après l'avoir créée (ou déclarée). Cependant la quasi totalité des appels se font à partir de la balise <body>, il faut donc monter un peu plus haut dans le code HTML pour déclarer nos fonctions Javascript. Y'a pas mieux que le <head>!
Des fois, on déclare nos fonctions tout en bas du code HTML (souvent avant la balise </body>). Mais il s'agit de fonctions spéciales appelées fonctions anonymes qui sont associées à des objets HTML créés dynamiquement. On va aborder ce sujet dans la partie DOM plus loin dans ce cours.

Function hoisting: élévation de fonctions

Depuis quelque temps, Javascript prend en charge une particularité intéressante en rapport avec la gestion des fonctions. Il s'agit de function hoisting (ou élévation de fonctions). Cela signifie qu'au moment de l'analyse (parsing) du code par le moteur Javascript, si ce dernier détecte la déclaration d'une quelconque fonction, alors il la place automatiquement au tout début du script. Dans ce cas, même si la fonction est appelée avant sa déclaration dans le code, elle sera exécutée correctement car, implicitement, sa déclaration est située avant son appel.

Bien que Javascript prenne en charge le function hoisting, une bonne pratique de codage consiste à toujours déclarer ses fonctions avant de les appeler. D'une part, cela rend le code plus claire et compréhensible et, en d'autre part, c'est un bon réflexe surtout si on souhaite coder à l'aide d'un autre langage de programmation ne supportant pas cette particularité.

Déclaration d'une fonction

Comme je l'ai souligné plus haut, il est préférable qu'une fonction soit déclarée avant qu'elle ne soit appelée. La déclaration d'une fonction signifie sa création. Dans le cas général, la déclaration d'une fonction se fait comme ceci:
function Nom_de_la_fonction(liste_des_arguments){
   Corps_de_la_fonction;
   return Valeur_de_retour;
}
La définition (ou déclaration) d'une fonction commence toujours par le mot clé function, suivi du nom que l'on souhaite donner à la fonction (qui vérifie les mêmes règles que le nom d'une variable) suivi de parenthèses qui peuvent contenir la liste des arguments séparés par une virgule, suivi des accolades. Les accolades renferment le corps de la fonction qui représente l'ensemble des instructions à exécuter lors de son appel. Parfois, la fonction retourne une valeur à l'aide de l'instruction return.

Exemple d'une fonction sans arguments ni valeur de retour:
function afficher(){
   alert("Bonjour à tous!");
}
Si la fonction afficher() est appelée, elle affichera le message "Bonjour à tous" dans la boite de dialogue de type alert().

Bien entendu, on peut appeler la fonction n'importe où dans le document, à condition qu'elle soit déclarée avant. Si on souhaite appeler la fonction afficher() juste après sa déclaration le code ressemblera à ceci:
function afficher(){
   alert("Bonjour à tous!");
}
afficher(); // Appel de la fonction afficher()
L'appel de la fonction consiste à saisir son nom (sans oublier les parenthèses).

Maintenant on va faire un exemple d'une fonction qui reçoit un argument:
function afficher(salut){
   alert(salut+" à tous!");
}
afficher("Bonsoir");
Là on a déclaré la même fonction afficher() mais qui reçoit un argument représenté par la variable salut. Le moment de l'appel de la fonction, on spécifie la valeur de l'argument entre les parenthèses. Dans ce cas sa valeur est "Bonsoir". La fonction est donc sensée afficher le message "Bonsoir à tous" dans la boite de dialogue alert().

Vous comprenez désormais l'utilité des fonctions avec arguments, ils peuvent donner des résultats qui changent en fonction des augments qui leur sont passés.

Maintenant on va faire une exemple d'une fonction qui reçoit des arguments et retourne une valeur:
function afficher(salut,personne){
   str=salut+" à "+personne;
   return str;
}
alert(afficher("Bonsoir","vous"));
Dans ce cas le message "Bonsoir à vous" s'affichera. En effet, nous avons passé deux arguments à la fonction "Bonsoir" et "vous" affectés respectivement aux variables salut et personne. La fonction va donc composer le message "Bonsoir à vous" qu'elle affectera à la variable str qui sera finalement retournée.

Quand on a appelé la fonction, on a reçu la valeur qu'elle a retourné, qu'on a directement placé dans la fonction alert(). C'est comme ça que "Bonsoir à vous" est affiché.

Les fonctions et la portée des variables

Dans la page qui traite les variables, nous avons vu qu'on peut déclarer une variable avec le mot clé var. Dans ce cas, si elle est déclarée en dehors de la fonction, elle aura une porté globale, et si elle est déclarée dans la fonction, elle aura une portée locale à cette fonction. Par contre, si une variable est déclarée sans le mot clé var, elle aura une portée globale quelque soit l'endroit où elle a été déclarée.

Exemple:
a=10;
var b=20;
function f(){
   c=30;
   var d=40;
   alert(a); // Affiche 10
   alert(b); // Affiche 20
}
f();
alert(c); // Affiche 30
alert(d); // Erreur
Quand on appelle la fonction, celle ci affichera les valeurs des variables globales a et b (même si b est précédée par var car elle est initialisée en dehors de la fonction). En dehors de la fonction, quand on affiche c, il n'y a aucun problème car même si elle est déclarée dans la fonction elle n'est pas précédée par var, ce qui la rend globale. Par contre, quand on essaie d'afficher d, une erreur survient, car d est initialisées à l'intérieur de la fonction avec le mot clé var, ce qui la rend locale à la fonction f().

Fonction récursive

Une fonction récursive est une fonction dans laquelle figure un appel à elle même.

Exemple:
function f(){
   f(); // Appel récursif
}
f(); // Premier appel
Dans une fonction récursif, il faut toujours prévoir une condition de sortie qui cessera son exécution. Sinon, la fonction se rappellera indéfiniment.

Exemple:
a=0;
function f(){
   a+=1;
   if(a>=5)
      return;
   f(); // Appel récursif
}
f(); // Premier appel
alert(a);
Le code affichera 5 dans la boite de dialogue. Vous avez remarqué la condition de sortie de la fonction récursive? Il s'agit bien de if(a>=5) return;. En effet le retour d'une valeur à l'aide des instructions tels que return, return true, return false, return valeur... force l'arrêt de la fonction et par conséquent l'arrêt de la récursivité.
Avec l'implémentation d'ECMAScript 2015 (ou ES6), il est possible de déclarer les fonctions autrement, en l’occurrence en utilisant l'écriture fléchée qui permet d'abréger la syntaxe, ce qui très utile dans le cas d'imbrication de fonctions ou de passage de fonctions en guise d'arguments d'autres fonctions (fonctions rappel ou de callback).

Les fonctions en Javscript en vidéo



Quiz (Pour tester vos connaissances)
  1. Quelle serait la valeur de la variable i après l’exécution de ce code?
    i=0;
    function f(){
       i+=1;
    }
    function g(){
       i+=1;
       f();
    }
    g();
0
1
2
  1. Une fonction peut être déclarée:
Uniquement dans la balise <body>
Uniquement dans la balise <head>
A n'importe quel endroit du document
  1. Si on veut vérifier la parité du nombre 19 et afficher le résultat dans une boite de dialogue alert() suite au code ci-dessous. Comment allons-nous appeler la fonction f()?
    function f(arg){
       if(arg%2==0)
          return "Nombre pair.";
       else
          return "Nombre impair.";
    }
f(19)
alert(f(19))
alert(f)(19)
  1. Les deux codes suivants donneront-ils le même résultat?
    s=0;
    for(i=0;i<5;i++){
       s+=i;
    }
    alert(s);
    s=0;
    i=0;
    function f(){
       s+=i;
       i+=1;
       if(i==5)
          return;
       f();
    }
    f();
    alert(s);
Oui
Non
  1. Le mot-clé return
Retourne un résultat et continue l’exécution de la fonction.
Retourne un résultat et stoppe l'exécution de la fonction.