Premiers pas en JavaScript
22.1 Autres évènements
cuy copyleft
  See You Why?  

 


Test : évènements onclick en JavaScript (21.9) | | Exemples : autres évènements JS (22.2)

Contenu

 

 

I. Autres évènements en JavaScript

"Pages dynamiques et interactives" disaient-ils à ceux qui abordaient le langage JS... et ils n'avaient pas tort. Dans le chapitre précédent, nous venons de créer un bouton qui appelle une fonction... il suffit d'imaginer maintenant un bouton qui appelle une calculatrice, un autre qui appelle un logiciel de lecture de mp3, etc. et voilà une page dynamique et interactive.

Dans le chapitre précédent, nous avons établi une liste d'évènements que JS peut gérer. Cependant, chaque évènement peut avoir ses caractéristiques et nous nous efforcerons ici de commenter certains d'entre eux. Voici donc, comme promis, une belle brochette dévènements détectables et gérables par JS. Un simple clic sur le mot clé correspondant devrait vous amener à la séquence qui traite du sujet :

 

Description mot-clé
Évènement
Lorsque l'utilisateur clique (clic gauche sur les souris Windows) sur un bouton, un lien ou tout autre élément onClick ou
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 ou 2
Lorsque le pointeur de la souris quitte un lien ou tout autre élément onMouseOut ou 2
Lorsque l'utilisateur maintient la touche de souris (gauche ou droite) appuyée onMouseDown
Lorsque l'utilisateur, après avoir appuyé la touche (gauche ou droite) 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 et que ce champ perd le focus 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 (gauche sous Windows) 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 du clavier onKeyDown
Lorsque l'utilisateur clique ou appuie sur une touche et la maintient appuyée onKeyPress/onKeyPressed
Lorsque l'utilisateur clique ou appuie sur une touche du clavier 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
Lorsque l'utilisateur veut quitter la page, les instructions sont exécutées juste avant la fermeture de la page onBeforeUnload
Lorsque l'utilisateur utilise la barre de défilement (ascenseur latéral de la page) onScroll
Lorsque l'utilisateur clique sur le bouton "OK" de la fenêtre d'impression onBeforePrint
Lorsque l'utilisateur a terminé d'imprimer onAfterPrint
Lorsque l'utilisateur copie vers le presse-papier (soit lors d'un "CTRL+C", soit via le menu) onCopy
Lorsque l'utilisateur colle du presse-papier (soit lors d'un "CTRL+V", soit via le menu) onPaste
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();

 

A. onLoad et onUnload...

L'évènement Load survient dans 3 cas : lorsque la page a fini de se charger, lorsqu'une frame ou lorsqu'une image a fini de se charger. À l'inverse, l'évènement Unload survient uniquement lorsque l'utilisateur quitte la page.

Objets concernés : Window, Image et Layer.

Balises concernées : <body>, <frameset>.

Comme l'évènement Load intervient dès la fin du chargement de la page, il paraît normal de prendre soin de placer le script de la fonction dans la section d'en-tête du document (entre les balises <head> et </head>), ou tout au moins, avant l'appel.

Rappelons ici que ces évènements pourront être utilisés ou auront des réactions différentes selon les navigateurs utilisés, les O.S. et leurs versions : onAfterPrint ne fonctionne que sous Internet Explorer, onScroll ne fonctionne pas dans les 'textarea' de Firefox, etc.

Pour illustrer cet exemple, imaginons une page qui, lorsqu'elle est chargée, affiche un message de bienvenue dans un popup puis la date et l'heure...

Il faudra donc d'abord relever l'heure d'arrivée, créer deux fonctions arrivee() et duree_sejour(), ainsi :

var arrivee = new Date();
function arrivee() {
        alert(arrivee);
}
function fnfn() {
        alert("Bienvenue sur le site CUY ! ");
}

et l'appel de ces fonctions devra se faire dans la balise <body>, via les instructions de gestion d'évènements onLoad et onUnload, on lira alors :
<body onLoad="fnfn();arrivee();">

Reste à tester le code ci-dessous et sourtout ne pas s'étonner si ce code ne fonctionne pas, car les processeurs actuels sont devenus si rapides et surtout multitâches que la page peut être chargée avant même que le code contenu dans le <head> ne soit complètement lu... d'où impossibilité de l'exécuter (nous avons dû écrire deux fonctions pour ralentir) :

Exemple

<html>
<head>
       <title>heure depart et duree sejour</title>
       <script type="text/javascript">

          var arrivee = new Date();
          function fnfn() {
                alert("Bienvenue sur le site CUY ! ");
          }
          function arrivee() {
                alert(arrivee);
          }

      </script>
</head>

<body onLoad="fnfn();arrivee()">
    <p>bonjour
</body>
</html>


Un lecteur attentif aura remarqué et se sera peut-être étonné de l'emploi de arrivee, tantôt comme variable contenant un objet Date() abordé dans un chapitre suivant, tantôt comme nom d'une fonction... c'est possible (la preuve ici), mais attention aux respect de la syntaxe de chacun.
Le même lecteur aura remarqué que plusieurs fonctions peuvent être appelées dans le onLoad, mais ces appels doivent être séparés par un point-virgule... facultatif après le dernier appel.

Une autre possibilité aurait été de définir le code JS dans une page notée par exemple code_220.js, sans balises <script>, puis dans le code principal de notre page 220b_sejour_js.html de faire appel au code JS par l'instruction <script type="text/javascript" src="code_220.js"> </script> . À vous de tester :

Exemple

<html>
<head>
       <title>heure depart et duree sejour</title>
       <script type="text/javascript" src="code_220.js">
      </script>
</head>

<body onLoad="fnfn();arrivee()">
    <p>bonjour
</body>
</html>


Le onUnload ne fonctionne pas avec tous les browsers.

 

B. onFocus et onBlur...

Deux évènements opposés l'un de l'autre :
onFocus est l'évènement qui se produit lorsqu'un élément reçoit le focus,
onBlur est l'évènement qui se produit lorsqu'un élément perd le focus.

Encore faut-il savoir ce qu'est "recevoir le focus" ou "perdre le focus"... comme ces évènements s'appliquent essentiellement à des input de type 'text' ou de type 'textarea', à des options dans un module du type 'select' voire même à des ancres <a>, nous illustrerons chacun de ces cas.

Sans être joueur de cartes, j'assimilerais volontiers ces expressions à "avoir la main" ou "perdre la main" ; et comme j'ai obtenu mon permis de conduire belge il y a bien des années, on pouvait à l'époque "avoir la priorité" mais aussi "perdre sa priorité" alors qu'aujourd'hui, en Belgique, on ne perd plus sa priorité.

Dans un formulaire HTML, il y a généralement plusieurs input de type 'text', comme dans le bas de cette page, à gauche au-dessus des drapeaux.
Lorsqu'un internaute visiteur visitera ce type de page, l'input qui aura le focus, sera celui sur lequel l'internaute vient de cliquer ou celui sur lequel il vient d'accéder par utilisation de la touche 'TAB' ;
l'input qui perdra le focus, sera celui sur lequel l'internaute était juste avant de cliquer ou celui qu'il quitte pour accéder à celui sur lequel il parvient par utilisation de la touche 'TAB'.

Exemple

<html>
<head>
       <title>exemple onBlur</title>
       <script type="text/javascript">
            function valider(valeur) {
                if (valeur< 5) alert("Vous êtes un de mes plus jeunes lecteurs...");
            }
      </script>
</head>

<body>
    <FORM>
        Entrez votre age (essayez de rentrer une valeur inférieure à 5) :<br>
        <INPUT TYPE="text" onBlur="validate(this.value)"><br>
        Entrez votre prénom : <br>
        <input type="text">
    </FORM>
</body>
</html>


Le

 

 

C. Exemple : onClick avec un bouton

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

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

Nous ne reprendrons pas ici ce que nous avons déjà explicité préalablement ici dans le chapitre précédent.

 

D. Exemple : onMouseOver

Reprenons notre icône propre au site CUY, imaginons que nous voulions l'utiliser comme fond d'écran de notre page au passage de la souris sur celle-ci, mais revenir à l'ancienne image dès que la souris est ailleurs.

Il nous suffira d'écrire :
<img src="images/logocuy1mini4.gif" width="84" height="62" onMouseOver="document.body.background='images/logocuy1_a.gif'" onMouseOut="document.body.background='../../images/FondClem2.jpg'">

Pour ceux qui s'étonnent du texte noté entre guillemets après les instructions onMouseOver et onMouseOut, la notation des objets JavaScript sera expliquée dès le chapitre suivant.

On remarquera aussi que le choix d'une éventuelle image de fond de ses pages HTML est important pour permettre la lisibilité totale et facile sur tout l'écran.

 

E. Exemple : onChange

Imaginons que vous souhaitiez avoir le nom de votre interlocuteur, mais de l'avoir en capitales (parfois aussi appelées malencontreusement majuscules [voir ici pour ceux qui veulent en savoir plus]). Vous créez un petit formulaire (voir <form> en HTML) et dès que votre interlocuteur aura terminé de compléter (donc de modifier votre réponse), le nom introduit sera écrit en capitales, même s'il a écrit (partiellement) en bas de casse.

Entrez votre nom ici SVP :

Il suffira d'écrire une petite fonction capit() de la manière suivante :
<script type="text/javascript">
function capit() {
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>

et d'introduire dans son formulaire un <input> de type text :
Entrez votre nom ici SVP : <input type="text" id="fname" value="votre nom" onchange="capit()">

Ici aussi, ceux qui s'étonnent du texte noté dans la fonction capit(), la notation des objets JavaScript sera expliquée dès le chapitre suivant.

 

F. Un autre exemple : onChange

Reprenons un petit menu qui vous donne accès à plusieurs options. Selon le choix de votre internaute visiteur, vous souhaitez arriver sur la page choisie... présélectionnée par vos soins. Illustration ci dessous :

"Une rapide visite sur..." Menu :

Ici, on définira une courte fonction jumpto() :
<script type="text/javascript" >
function jumpto(x){
    if (document.form1.jumpmenu.value != "null") {
        document.location.href = x
    }
}
</script>

puis, dans le formulaire :
<center><form name="form1">
<select name="jumpmenu" onChange=
"jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)"
<option>Jump to...</option>
<option value='http://cuy.be/index2.php'>Page d'accueil de CUY</option>
<option value='http://cuy.be/orthotypo/orthotypo0.htm'>JavaScript</option>
<option value='http://cuy.be/html/htmldepfr.htm'>HTML</option>
<option value='http://cuy.be/cours/cpta/'>COMPTABILITÉ</option>
<option value='http://cuy.be/cours/access/bases_de_donnees.ppt'>BASE de DONNÉES</option>
</select>
</form></center>

 

 

 

 

 

ité avec laquelle une fonction peut en appeler une autre est telle que parfois on en arrive à ce que le serpent se morde la queue : les boucles involontaires sont fréquentes. J'appelle une fonction, qui en appelle une autre, qui elle-même en appelle une troisième... mais si cette troisième appelle la première, la boucle est bouclée... et tant que nous n'aurons pas étudié les conditions ou les boucles volontaires... gare aux ronds-points dans lesquels on peut entrer sans jamais pouvoir en sortir...

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

 

 

II. Exemples d'autres évènements

voir suite >>>

 

 

VIII. Exercices relalifs aux évènements

voir suite >>>

 

 

IX. Test relatif aux fonctions imbriquées

voir suite >>>

 

 


Test : évènements onclick en JavaScript (21.9) | | Exemples : autres évènements JS (22.2)