Premiers pas en JavaScript
21.1 Évènements
cuy copyleft
  See You Why?  

 


test concernant la boucle WHILE (20.9) | | L'évènement ONCLICK (21.2)

Contenu


JavaScript 1 - Introduction
JavaScript 2 - Commentaires et instructions
JavaScript 3 - Variables
JavaScript 4 - Types de variables
JavaScript 5 - Variables et chaines
JavaScript 6 - Les fonctions
JavaScript 7 - Les fonctions à paramètre unique
JavaScript 8 - Les fonctions à paramètres multiples
JavaScript 9 - L'instruction RETURN dans une fonction
JavaScript 10 - Appel d'une fonction dans une autre fonction
JavaScript 11 - Les variables locales ou globales
JavaScript 12 - Quelques opérateurs mathématiques
JavaScript 13 - ???
JavaScript 14 - L'instruction IF, pour les conditions
JavaScript 15 - L'instruction IF... ELSE..., pour les conditions à deux sorties
JavaScript 16 - Les IF imbriqués et fonction aléatoire
JavaScript 17 - Les conditions complexes
JavaScript 18 - L'instruction SWITCH, en cas de choix multiples
JavaScript 19 - La boucle FOR
JavaScript 20 - La boucle WHILE
JavaScript 21 - Les événements dans la programmation
21.1 JS : Évènements ou événements en JavaScript
21.2 JS : Un exemple onClick sur un bouton ou sur un bouton radio
21.3 JS : Évènements : onMouseover et onMouseout sur image ou sur tableau
21.8 JS : quelques exercices sur l'événementiel chez JS
21.9 JS : un test sur l'événementiel chez JS
JavaScript 22 - Quelques événements : onMouseOver onLoad etc.
JavaScript 23 - Les objets
JavaScript 24 - Créer ses propres objets
JavaScript 25 - Appliquer des méthodes à ses objets
JavaScript 26 - Les tableaux
JavaScript 27 - Différentes façons de créer des tableaux
JavaScript 28 - Propriétés et méthodes applicables aux tableaux
JavaScript 29 - Les méthodes applicables aux tableaux
JavaScript 30 - Méthodes de tris pour tableaux SORT, REVERSE et PUSH
JavaScript 31 - Ajouter des éléments à un tableau en utilisant une boucle
JavaScript 32 - Tecnique pour imprimer les éléments d'un tableau
JavaScript 33 - Lecture de bases de données
JavaScript 34 - Les objets mathématiques
JavaScript 35 - Les objets relatifs aux dates
JavaScript 36 - Les formulaires JS sont des objets
JavaScript 37 - Accès aux éléments d'un formulaire
JavaScript 38 - Validation des entrées d un formulaire
JavaScript 39 - Graphisme et JavaScript

JavaScript 50 - Calculateur d'emprunt
JavaScript 51 - Calendrier perpétuel et options diverses
JavaScript 99 - Documentation


 
 

 
Avec un peu de JavaScript,
n'oubliez pas de rendre vos pages
plus dynamiques et plus interactives.
 

 
 

 
Notre volonté est de rendre cette formation de JavaScript,
disponible le plus rapidement possible.
Le lecteur excusera l'imperfection de ce travail en cours de construction
et pourrait nous informer des défauts rencontrés.

  MERCI
 

 

 

I. Évènements ou événements en JavaScript

Depuis 1990, l'Académie française tolère les deux graphies et conseille même la nouvelle 'évènement', la plus logique, le 2e 'e' n'étant pas prononcé 'é', mais 'è'. Ceux que cela intéresse peuvent vérifier ici.

Déjà dans notre introduction, nous avions signalé que le langage JS était un langage évènementiel. Qu'est-ce à dire ?
L'internaute qui consulte vos pages Web, peut rester inactif... le JS ne va en rien réagir à ses actions... quoique... il cliquera sur un lien, sur un bouton que vous aurez créé, il arrivera sur une de vos pages, il déplacera sa souris, il touchera son écran, il survolera certaines zones de son écran avec sa souris, il complètera un formulaire que vous aurez conçu, etc.

Sans le vouloir, l'internaute qui visite vos pages est plus actif que vous ne le pensez... à vous donc de réagir à chacune de ses actions :

Il nous paraît évident que l'action la plus courante est le clic sur un bouton (comme ci-dessus), mais il existe des tas d'actions possibles, donc d'évènements possibles et applicables à différents objets en JS.
Par contre, en HTML pur, votre internaute visiteur ne disposait que d'une seule action possible : le clic sur un hyperlien défini par <a href="xxx">lien</a> qui permettait à votre internaute visiteur de suivre le lien que vous aviez fixé... c-à-d être transporté sur une autre page Web, éventuellement à un endroit fixé dans la page, si vous aviez fait usage d'ancre nommée dans votre document.

Le JS permet de détecter d'autres évènements et d'y réagir de façon adéquate.

La particularité du gestionnaire d'évènements est qu'ils ne doivent pas s'écrire entre les balises <script> et </script>. Nous avions déjà découvert cette caractéristique en employant le onLoad dans la balise <body> où les fonctions JS appelées ne sont pas notées entre des balises <script>, mais entre des guillemets derrière le mot clé appelant onClick= , cependant, les fonctions appelées doivent soit être prédéfinies ou définies préalablement entre des balises <script>.

Nous ne pourrons pas être exhaustifs concernant le gestionnaire d'évènements de JS. Cependant, nous nous proposons :
1.- de dresser une liste d'évènements qui peuvent être gérés par JS ;
2.- de montrer la syntaxe générale du gestionnaire d'évènements ;
3.- de montrer par deux exemples (onClick avec un bouton ordinaire et avec un radio bouton) la syntaxe à respecter ;
4.- dans le chapitre suivant, montrer divers exemples et leur code.

 

A. une liste d'évènements JS...

Il nous semble important d'établir une liste d'évènements auxquels JS peut réagir.

Description mot-clé
Évènement
Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément onClick
Lorsque la page est chargée par le browser ou le navigateur onLoad
Lorsque l'utilisateur quitte la page onUnload
Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément onMouseOver
Lorsque le pointeur de la souris quitte un lien ou tout autre élément onMouseOut
Lorsque l'utilisateur maintient la touche de souris appuyée onMouseDown
Lorsque l'utilisateur, après avoir appuyé la touche de souris, la relâche onMouseUp
Lorsque l'utilisateur bouge la souris indépendamment du fait que la touche en soit appuyée ou non onMouseMove
Lorsque un élément de formulaire a le focus c-à-d devient la zone d'entrée active onFocus
Lorsque un élément de formulaire perd le focus c-à-d que l'utilisateur clique hors du champ et que la zone d'entrée n'est plus active onBlur
Lorsque la valeur d'un champ de formulaire est modifiée onChange
Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire onSelect
Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire onSubmit
Lorsque l'utilisateur clique sur le bouton Reset d'un formulaire pour le réinitialiser onReset
Lorsque l'utilisateur clique sur le bouton stop du navigateur, alors que tous les graphiques ne sont pas encore chargés onAbort
Lorsque l'utilisateur double-clique sur un élément onDblClick
Pour capter les messages d'erreur et les remplacer par des actions et/ou messages personnalisés. Attention pourtant, les erreurs ne sont pas pour autant écartées onError
Lorsque l'utilisateur, alors qu'il a activé un élément, appuie sur une touche onKeyDown
Lorsque l'utilisateur clique ou appuie sur une touche et la maintient appuyée onKeyPress
Lorsque l'utilisateur clique ou appuie sur une touche et la relâche onKeyUp
Lorsque l'utilisateur dépose un objet (un fichier par exemple) dans la fenêtre du navigateur Web à l'aide de la souris onDragDrop
pas un événement au sens propre du terme
syntaxe qui a été introduite pour noter du code JavaScript comme cible d'un lien
javascript:fonction();

 

Un programme est une succession d'étapes dont chacune peut éventuellement être décomposée en actions plus élémentaires réalisables par l'ordinateur.
Il n'est pas rare que des concepteurs de programmes lancent au démarrage d'une page web une fonction initiale (qu'ils appellent init(), par exemple).
À partir de cette fonction initiale, ils appellent d'autres fonctions qu'ils détailleront par la suite.

Nous avions signalé que certains tutoriels parlent de sous-fonctions... alors que cela n'existe pas en JS. Tout au plus, dans le cadre d'une conception objet, la fonction en question peut-elle effectivement être considérée comme une méthode mais privée.

Dans notre chapitre 6, section "appel d'une fonction", nous avons déjà
d'une part montré l'appel d'une fonction dans une autre fonction et
d'autre part, signalé la possibilité d'appeler une fonction dès l'ouverture d'une page HTML.
Nous pourrions donc appeler cette fonction, soit dès l'instant où la page est chargée dans l'ordinateur de l'internaute (c'est l'utilité de l'évènement onLoad), soit en imaginant un bouton, qui appellerait la fonction, si l'on clique sur ce bouton (c'est l'utilité de l'évènement onClick).

L'appel de cette fonction init() peut se faire dès le chargement d'une page par la formulation de la balise <body> du document HTML, on lira alors :
<body onLoad="init()">
qui illustrerait parfaitement l'évènement onLoad.
Cependant, comme le but de ce chapitre est d'illustrer l'évènement onClick sur un bouton, nous nous conformerons à ce parcours.

Rien à faire, sauf à tester le code ci-dessous :

Exemple

<html>
<head><title>fonction dans fonction</title></head>
<body>
<script type="text/javascript">

function premiere() {
        document.write("premiere etape<br>");
}

function seconde() {
        document.write("seconde etape<br>");
}

function depart() {
        premiere()
;
        seconde();
}

depart();

 
</script>
</body>
</html>


Un bref rappel ici : les noms de fonctions ne peuvent pas comporter de lettres accentuées.

 

B. syntaxe générale du gestionnaire d'évènements

Même si chaque évènement peut avoir quelques caractéristiques propres, on remarquera que la syntaxe générale du gestionnaire d'évènements est toujours la même :

onÉvènement="lafonction();"

Facile : un exemple illustré devrait vous aider.

 

 

C. Exemple : onClick avec un bouton

Reprenons l'exemple donné ci-dessus. Un bouton "Compris ?" au centre de la page et si l'on clique sur ce bouton, le message "J'espère bien !"... Comme cela :

La source de ce bouton magique ?

<form>
   <center>
   <input name="button" type="button" onClick="alert('J\'espère bien !')" value="Compris ?">
   </center>
</form>

Illustrons ce propos par un exemple plus simple dans la section suivante de ce chapitre.

 

 

II. L'évènement ONCLICK sur un bouton ou sur un bouton radio

voir suite >>>

 

III. Autres évènements onMouseover et onMouseout sur une image

voir suite >>>

 

VIII. Exercices relatifs aux évènements

voir suite >>>

 

 

IX. Test relatif aux évènements

voir suite >>>

 


test concernant la boucle WHILE (20.9) | | L'évènement ONCLICK (21.2)