|
22.1 Autres évènements |
  copyleftSee You Why? |
"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(); |
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
|
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
|
Le onUnload ne fonctionne pas avec tous les browsers.
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
|
Le
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.
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.
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.
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.
voir suite >>>
voir suite >>>
voir suite >>>
