JavaScript ..le bras droit d'HTML
 
<<Page précédente
Table des Matières
 
INTERNET Construction de Pages Web
Les Fonctions
 
Les Fonctions(généralités)  

Une fonction  est une partie de code JavaScript  destinée à réaliser une ou plusieurs actions  bien spécifiques .
On pourra, si besoin est, l'utiliser à plusieurs reprises. C'est souvent son grand intérêt.
L'usage des fonctions améliore la lisibilité et la maintenance du Script. 

En JavaScript existe 2 types de fonctions  : 

  • les fonctions propres à JavaScript. Ce sont les "méthodes" des objets de JavaScript . Par exemple : la méthode Prompt de l'Objet document. Nous exploitons ces méthodes mais ne pouvons pas les modifier. 
  • les sous-programmes (ou function ) qui sont écrits par nous suivant  les besoins de notre programme . Ils peuvent ou non retourner une valeur.Ils peuvent ou non recevoir des paramètres.
Déclaration d'une Fonction

Pour déclarer ou définir une Fonction , on utilise le mot (réservé)      function. 
La syntaxe est, par exemple..

    function nom_de_fonction( [ arg1,arg2 ] )  
    {  // début du code de la fonction
    ... code JavaScript ( diverses instructions ...  )
    } // fin du code..

    Les noms des Fonctions répondent aux mêmes règles que celles qui régissent le nom de variables (nombre de caractères 255, commencer par une lettre, peuvent inclure des chiffres...etc..).  

Rappel: JavaScript fait le distingo entre  Majuscules et Minuscules .Alors Calcul() ne sera pas égal à calcul(). 
De plus, tous les noms des fonctions dans un script doivent être uniques. 

Les parenthèses destinées à décrire les arguments sont obligatoires, même si la fonction ne reçoit pas d'arguments.. C'est d'ailleurs grâce à ces parenthèses que l'interpréteur JavaScript distingue les variables des fonctions. 
Bientôt nous reviendrons plus en détail sur les arguments ( ou paramètres).  
Lorsqu'une accolade est ouverte elle doit obligatoirement être refermée..( sinon erreur signalée!!)

Conseil: Il est une bonne habitude que de placer une accolade ouvrante et une accolade fermante dès que l'on commence à écrire une fonction...Ensuite il suffit d'écrire le code entre ces 2 accolades.

Dans une Page Html, le fait de définir une fonction n'entraîne pas l' exécution des commandes qui la composent. 
Ce n'est que lors de l'appel de la fonction que le code de programme sera exécuté. 

L'appel d'une Fonction 

L'appel d'une fonction se fait simplement , en citant le nom de la fonction ( avec les parenthèses obligatoirement). 
Par exemple  ..

calcul()
Bien entendu , l'interprèteur, lisant votre page du Haut vers le Bas ..veillez à ce qu'une fonction qui est appelée soit déjà définie ( plus haut ).
. 
Où placer les fonctions ?

Une bonne solution est de placer les fonctions dans l'en-tête de la Page ..C'est-à-dire entre les balises :
<HEAD> et  </HEAD>
L'appel des fonctions se fera , le plus souvent depuis le Corps de la Page ( entre les balises <BODY> et </BODY> )
Ainsi les fonctions étant placées avant BODY elles seront obligatoirement connues par l'interprèteur avant d'être appelées.

Sachez qu'il est possible de placer des balises SCRIPT contenant ou non des fonctions devant , à l'intérieur ou derrière les balises BODY. 

Voici un exemple très simple :

    <HTML>
    <HEAD>
    <SCRIPT language="JavaScript"><!--
    function bonjour( )
    {
      alert ( 'Bonjour ..le Click!!);
    }
    // -->
    </SCRIPT>
    <BODY>
    <A href="#" onClick="bonjour()">GO</A>
    </BODY>
    </HTML>
Cet exemple très simple, permet de voir 
  • comment on appelle la fonction en donnant son nom au gestionnaire de l'évènement Click
Passage de paramètres à une fonction  

Il est possible de passer des paramètres à une fonction..Afin qu'elle réalise son travail en tenant compte de la valeur de ces paramètres.

Par exemple:

    <HTML>
    <HEAD>
    <SCRIPT language="JavaScript"><!--
    function calcul( X , Y )
    {
      alert ( 'Le Produit de ces 2 éléments est : ' + X*Y);
    }
    // -->
    </SCRIPT>
    <BODY>
    <A href="#" onClick="calcul( 125,7.15);">GO</A>
    </BODY>
    </HTML>
Cet exemple très simple, permet de voir 
    • comment on appelle la fonction en donnant son nom au gestionnaire de l'évènement Click
    • comment on lui passe des arguments
    • comment elle les exploite.

    Remarquez que les 2 variables X et Y n'ont pas à être déclarées..!
La fonction peut retourner une valeur à l'appelant

On utilise pour cela le mot-clé return suivi de l'expression à retourner.
Par exemple :

    <HTML>
    <HEAD>
    <SCRIPT language="JavaScript"><!--
    function calcul(prix_unit,quantite)
    {
      var prix=prix_unit*quantite;
      return prix;
    }
    // -->
    </SCRIPT>
    <BODY>
    <A href="#" onClick="alert('Vous devez payer: ' + calcul(234,6));">GO</A>
    </BODY>
    </HTML>
Cet exemple permet de comprendre: 
    • comment on appelle la fonction en lui passant 2 paramètres
    • que son nom ( 'calcul' ) représente le résultat retourné 

Voici un autre exmple de fonction qui retourne un booléen ( VRAI ou FAUX )

    <HTML>
    <HEAD>
    <SCRIPT language="JavaScript"><!--
    function teste(chaine)
    {
      if (chaine=="") 
              return false ; else return true;
      }
    // -->
    </SCRIPT>
On comprendra que cette fonction reçoit une chaine de caractère ..puis teste si elle est vide et enfin retourne le résultat booléen..

REMARQUES ( rappel et complément) concernant les variables:
Dans ce dernier exemple, la variable prix qui est déclarée dans la fonction est dite variable LOCALE.
Elle est en effet uniquement connue au sein de cette fonction..Elle perdra sa valeur lors d'un autre appel à la fonction.

Si l'on souhaite travailler avec des variables GLOBALES à la Page entière , il faut les déclarer en dehors des fonctions..avec ou sans le mot-clé : var.
 
<<Page précédente
Table des Matières