vendredi 26 octobre 2012

Les fonctions en Javascript


En effet, il arrive très souvent que les fonctions soient bien plus complexes et bien plus "encombrantes" que cette fonction alert(). De plus, une même fonction peut être appelée plusieurs fois dans une même page web.
D'où l'interêt de définir à l'avance la fonction et de la stocker dans un endroit "sûr" : la partie <head> de la page HTML.
Posons que nous ayons besoin de la fonction alert() pour faire apparaître les messages "Bienvenue chez vous !" ou "Votre code est erroné !" dans une boîte de dialogue selon qu'un champ contient ou non une certaine valeur. Dans notre exemple, nous savons aussi que cette fonction sera sollicitée 10 fois dans la même page.
Nous avons le choix entre écrire la fonction alert() et sa "longue" variable autant de fois que nécessaire dans la page OU créer cette fonction et simplement faire appel à elle au moment voulu.
Voici la fonction qui recourt à la fonction Javascript alert() :

<script>
function quoi () 
{
var d="mon_code"
if (document.forme.champ.value==d)
{
alert("Bienvenue chez vous !")
}
else
{
alert ("Votre code est erroné !")
}
}
</script>

Traduction :
Si le champ contient la valeur "d" donc le bon code "mon_code", "Bienvenue chez vous" s'affiche, sinon l'écran indiquera "Votre code est erroné".
** Note :
>  une fonction porte un nom (ici elle s'appelle quoi)
>  tout comme document.write() ou alert(), votre fonction s'écrit quoi() avec les parenthèses qui pourront par la suite inclure des variables
>  entre les accolades { } se trouvent les instructions de la fonction, ce qu'elle va faire, (ici elle active la fonction embarquée alert())
>  le tout est encapsulé dans les balises <script> et </script>

Mais n'oubliez pas qu'une fonction n'existe pas par elle-même ! C'est le bouton qui va l'activer :

<input type="button" value="essai" onclick="javascript:quoi()">



Admettez qu'il est bien plus simple d'écrire <onclick="javascript:quoi()"> 10 fois que d'écrire 10 fois la totalité du code de la fonction quoi() !!!
Vous connaissez maintenant les fonctions document.write() et alert() et savez comment les appeler par un event handler !
Les évenements en Javascript représentent les étapes de la vie d'une page HTML, par exemple son chargement, sa fermeture, ou plus simplement les actions de la souris...
Pour une fonction nommée faire() les principaux évenements placés dans leur contexte sont les suivants :
** <body bgcolor="red" onload="faire()">
La fonction faire() est appelée lors du chargement de la page

** <body bgcolor="red" onunload="faire()">
La fonction faire() est appelée lors de la fermeture de la page...

** <img src="votre_image.jpg" onmouseover="faire()">
La fonction faire() est appelée lors du survol de l'image...

** <img src="votre_image.jpg" onmouseout="faire()">
La fonction faire() est appelée lorsque la souris quitte la zone de l'image...

** <input type="button" onclick="faire()">
La fonction faire() est appelée lorsque le bouton est cliqué...






Aucun commentaire:

Enregistrer un commentaire