4.2.1 Exemple

En cliquant →ici, vous déclenchez un événement.

4.1.2. Fonctions et événements

Un événement est défini dans une balise. Cet événement appelle une fonction (= un bloc de commandes, une routine) Javascript qu'on place entre <head><script> et </script> </head>.

La syntaxe est la suivante:

<head>
<script>
function nom_de_la_fonction()
{

----ici le Javascript de la fonction-----

}
<script>
</head>
<body>
............
<balise événement="nom-de-la-fonction()">......</balise>
............

</body>

Le nom_de_la_fonction peut être choisi librement par le programmeur, les événements et les balises possibles sont bien déterminés. Vous trouverez →ici la liste des événements simples avec les balises possibles et des exemples.

4.1.3. Exemples d'événements


4.1.3.a         onMouseOver

→ Cet événement est déclencé par le passage de la souris sur la balise.

<head>
<script>
function souris_dessus() {
alert('Vous avez provoqué l\'événement onMouseOver en passant avec la souris! ');
}
<script>
</head>
<body>

<span onMouseOver='souris_dessus()'>Passez la souris sur ce texte!</span>


</body>

4.1.3.b         onDblClick

→ Cet événement est déclencé en doublecliquant sur la balise.

<head>
<script>
function ecrire_sur_document() {
document.write('Vous avez provoqué l\'événement onDblClick! ');
}
</script>
</head>
<body>

<button onDblClick='ecrire_sur_document()'>Doublecliquez sur ce bouton!</button>


</body>

document.write a écrit le texte au début du document tout en effaçant le bouton!

4.1.3.c         onChange

→ Cet événement est déclencé en changeant n'importe quoi dans un champ d'entrée (balise <input>, notez la syntaxe ou un champ de texte (balise <textarea>), puis en sortant le curseur et en cliquant.

4.1.3.d         onLoad

→ Cet événement est déclenché dès que la page HTML est chargée. Notez que dans Javascript les commandes HTML sont exécutées si elles sont incluses dans document.write()



4.1.3.e         Tous les événements

Pour chaque événement important vous trouvez un exemple →ici

4.1.4 Exercices

  1. Prenez le code de la présente page et essayez de placer le Javascript dans un fichier séparé que vous appellerez "donaldscript.js". Enlevez ensuite le code de la présente page et essayez de la faire fonctionner comme avant!
  2. Vous ne connaissez pas encore le langage Javascript. Regardez quand-même le code de la présente page, modifiez-le pour faire faire à Donald
    • un mouvement plus rapide
    • un mouvement dans une autre direction
    • un mouvement avec un autre point de départ.
  3. Cherchez un autre personnage Disney sur Internet et appliquez le même code à ce personnage.
  4. Construisez une page Internet modèle où vous montrez le fonctionnement de tous les événements trouvés dans la référence du point 4.1.2. et 4.1.3.