Présentation de JavaScript  

Présentation de JavaScript  

L’appel direct

Dans le corps de la page (), ouvrez un deuxième bloc de code JavaScript qui vous permet de faire appel directement aux fonctions définies plus haut : Listing 8-4 : exécution de la fonction message() par appel dans le corps de la page Comme en PHP, les éléments (fonctions, variables) définis dans les différents blocs de code sont accessibles à partir des autres blocs. Dans le cas présent, vous auriez pu définir les fonctions juste au-dessus de leur appel : Listing 8-5 : Déclaration de la fonction et son appel dans le même bloc Afin de faciliter la relecture, l’usage veut cependant de les laisser dans l’en-tête de la page. 

Les événements

La nature des événements liés à une page web est assez variée. Un événement peut être lié à la page elle-même (ouverture, fermeture) ou à un widget (clic sur un lien, sur un bouton, focus sur un champ de texte, choix d’une option dans un menu déroulant). L’exemple ci-dessous ouvre une petite fenêtre (à l’aide de la fonction alert()) une fois la page chargée, et une autre quand vous fermez le navigateur. Les deux événements utilisés sont onLoad() et onUnload() liés à la balise . Listing 8-6 : Exécution de la fonction popup() à l’ouverture et à la fermeture de la page avec des paramètres différents événements JavaScript Figure 8.1 : Apparition de la fenêtre pop-up une fois la page chargée 202 LE GUIDE COMPLET Chapitre 8 JavaScript, contrôle de formulaires et AJAX Vous allez maintenant déclencher la fonction popup() en cliquant sur un bouton : Listing 8-7 : La fonction popup() est associé au clic sur le bouton.

Plutôt que de créer des fonctions dans l’en-tête, il est préférable, quand celles-ci sont simples, de mettre le code directement au niveau de l’événement. Listing 8-8 : le code responsable de l’ouverture de la fenêtre pop-up est directement placé au niveau de l’événement .L’exemple suivant ouvre une fenêtre lorsque vous survolez (événement onMouseOver()) un lien : Listing 8-9 : Affichage d’une fenêtre lorsque le pointeur de la souris passe au-dessus du lien lien Tableau 8.1 : Événements JavaScript Événement Gestionnaire d’événement Signification abort onAbort Le chargement d’une image a échoué blur onBlur Perte du focus d’un élément change onChange Changement de valeur d’un élément click onClick Simple clic sur un élément dblclick onDblClick Double clic sur un élément error onError Erreur lors du chargement d’une image focus onFocus Un élément obtient le focus keydown onKeyDown Une touche du clavier est pressée keypress onKeyPress Suit le keydown keyup onKeyUp Une touche du clavier est relâchée load onLoad Lorsque la page est intégralement chargée mousedown onMouseDown Le bouton de la souris est pressé mousemove onMouseMove La souris est déplacée mouseout onMouseOut Le curseur de la souris quitte l’élément.