====== Fonctions ======

===== Introduction =====

Lorsque nous programmons, il arrive régulièrement que nous devions répéter une suite d'opérations à plusieurs reprises dans notre programme.  Si la répétition s'exécute un nombre de fois déterminées, nous pourrions nous contenter de faire un copier coller.  Par contre, si la répétition est dépendante de facteurs externes ou qu'elle peut varier à chaque exécution, le copier coller ne suffira plus.  La plupart des langages nous permettent de regrouper ces opérations dans une structure que nous pouvons appeler lorsque nous en avons besoin.  En Javascript, cette structure s'appelle une fonction. Elle est créée avec l'énoncé suivant:

<sxh js>
function maFonction(){
// Placez votre code à exécuter ici
}
</sxh>
==== Déclaration de fonction ====

  * mot réservé "function", doit toujours être là pour informer l'interpréteur Javascript que nous sommes en train de créer une fonction
  *  le nom de la fonction, ici "maFonction", ce nom doit respecter les mêmes règles que les variables et ne doit pas être un mot réservé du langage Javascript
  *  Les paranthèses nous permettent d'envoyer de l'information à la fonction lors de l'exécution.  Elles doivent toujours être présentes, même lorsqu'il n'y a rien à transmettre.
  * Les accolades '{}' délimitent le code qui devra être exécuté lors de l'appel de la fonction.

==== Appel de fonction ====

<sxh js>
maFonction();
</sxh>

Lorsque la fonction est ainsi appelée, elle est exécutée immédiatement et lorsqu'elle est complétée, l'exécution du programme reprend à partir du point d'appel de la fonction et l'énoncé suivant sera exécuté.

===== Données de travail pour les fonctions =====

Pour transmettre de l'information à une fonction, nous utilisons les paramètres entre paranthèses.  Par exemple:

<sxh js>
function afficheMessage(codeMessage,corpsMessage)
{
    var messageComplet = codeMessage + ": " + corpsMessage;
    alert(messageComplet);
}
</sxh>


==== Paramètres et corps de fonctions ====

  * "codeMessage" et "corpsMessage" sont les paramètres de la fonction afficheMessage.  Ils n'existent que dans le corps de la fonction afficheMessage et sont des pointeurs vers les objets envoyés en paramètres.  Il faut faire attention avec ces pointeurs.  Dans le cas d'objets simples tels que string, bool et number, il n'y a pas d'impacts, mais des objets plus complexes seront modifiés par la fonction si nous leur affectons de nouvelles valeurs.  À ne pas oublier, ça peut être la source de nombreux bugs.
  * les symboles { et } nous permettent de délimiter le début et la fin du corps de la fonction.
  * en précédant la variable "messageComplet" du mot réservé var, nous limitons l'existence de celle-ci à l'exécution de la fonction.  À la fin de l'exécution elle est effacée et son contenu est éliminée.  Une telle variable est dite **locale** à la fonction.  Si nous voulons une variable accessible dans l'ensemble du programme, il suffit de ne pas mettre le mot réservé "var" et la variable devient automatiquement **globale**.

La fonction est appelée avec l'énoncé suivant:

<sxh js>
afficheMessage("404","Page non existante");  // Affiche "404: Page non existante"
</sxh>
    
===== Valeur de retour =====


Avec le mot réservé "return", la fonction est capable de renvoyer une valeur au programme appelant. Cette valeur est contenue dans une donnée en tout point comparable à une variable typée.

<sxh js>
function concatChaines(chaine1, chaine2)
{
    var chaineConcatenee = "";
    chaineConcatenee = chaine1 + chaine2;
    return chaineConcatenee;                            // renvoyer le résultat
}
alert(concatChaines("Concaténation de","chaînes")); // Affiche "Concaténation de chaînes"
</sxh>

===== Exercices Fonctions =====

  * [[Exercice Fonction et Variables]]