SELFHTML/Quickbar
JavaScript
Éléments du langage
Les Event-Handler (gestionnaire d'évènement) sont un maillon
important entre HTML et JavaScript. Les Event-Handler sont notés sous
forme d'attributs dans des repères HTML. Étant donné qu'il s'agit de parties
intégrantes qui apparaissent en HTML, le consortium W3 les a entre temps acceptés
dans le standard HTML (voir aussi attributs
universels:
Event-Handler).
Là est également fixé dans quels repères HTML quel Event-Handler peut-il
apparaître. Le problème est cependant que la pratique actuelle s'en
éloigne largement - tout au moins en ce qui concerne Netscape. L'Explorer Internet MS 4.x,
par contre, interprète les Event-Handler de façon presque aussi
universelle que celle prévue par le consortium W3. Lors des descriptions
des Event-Handler sur cette page, on essaiera à chaque fois d'aborder la
problématique. En fin de compte il n'y a cependant qu'un moyen: tester et
essayer soi-même au cas par cas - avec différents navigateurs.
Vous reconnaissez les Event-Handler à ce que ces attributs HTML
commencent toujours par on, par exemple onClick=.
Derrière le signe égal, notez entre guillemets une instruction
JavaScript. Si vous voulez exécuter plusieurs instructions, définissez alors
pour le mieux dans un passage JavaScript une fonction
et appelez cette fonction derrière le signe égal, par exemple onClick="calculer()".
Chaque Event-Handler correspond à un certain évènement chez l'utilisateur, onClick= par exemple pour l'évènement "l'utilisateur a cliqué avec la souris". Le domaine d'affichage de l'élément HTML dans lequel l'Event-Handler est noté en est l'élément déclencheur. Si l'Event-Handler onClick= par exemple est noté dans un bouton de formulaire, le code JavaScript qui y est relié ne sera exécuté que si le cliquement de souris se passe dans le domaine d'affichage de cet élément. Cela peut vous paraître évident... Ça l'est aussi, tant qu'il s'agit par exemple de boutons de formulaire. Mais d'après le modèle élargi de HTML 4.0, un passage HTML défini par <div>...</div>, peut par exemple aussi contenir un Event-Handler comme onClick=.
N'ont été pris en compte que les Event-Handler qui peuvent réellement être mentionnés dans des repères HTML, et qui sont mentionnés dans le standard HTML-4.0 (à l'exception de onAbort=). Cela en fait moins que tous ceux que connaissent Netscape et l'Explorer Internet MS. Chez Netscape s'ajoute à la confusion le fait que quelques Event-Handler sont bien décrits comme tels mais ne peuvent pas du tout être mentionnés dans des repères HTML. Il faut espérer qu'à l'avenir, il y aura à ce sujet davantage de conformité entre les standards de langages et les implémentations de navigateurs.
![]() ![]() |
Est prévu pour le cas où un utilisateur appuie sur le bouton stop du navigateur, alors que tous les graphiques ne sont pas encore chargés.
D'après JavaScript (Netscape) est permis dans le repère suivant:
<img>
<html><head><title>Test</title> </head><body> <img src="graphiques.jpg" width=400 height=600 alt="Grafique" onAbort="alert('Dommage que vous ne vouliez pas voir le graphique')"> </body></html> |
Dans l'exemple un graphique est référencé en HTML. Au cas où l'utilisateur appuie sur le bouton stop du navigateur avant que le graphique ne soit tout à fait chargé, un message sortirait avec alert().
![]() ![]() |
Au cas où l'utilisateur quitte maintenant un élément qui était activé.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<body> <frameset> <input> <layer> <select> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <area> <button> <input> <label> <select> <textarea>
<html><head><title>Test</title> </head><body> <form name="Test"> Nom: <input type=text name="entree" onBlur="verifcontenu(this.value)"> </form> <script language="JavaScript"> document.Test.entree.focus(); function verifcontenu(champ) { if(champ== "") { alert("Le champ Nom doit avoir un contenu!"); document.Test.entree.focus(); return false; } } </script> </body></html> |
Dans l'exemple est défini un formulaire contenant un champ de saisie. Sous le formulaire est noté un passage JavaScript. Le passage est défini sous le formulaire parce qu'au début du passage est exécutée une instruction qui nécessite l'existence du formulaire. Cette instruction (document.Test.entree.focus();) place le curseur dans le champ de saisie. Là, l'utilisateur doit entrer son nom. S'il clique ailleurs, l'Event-Handler onBlur noté dans le repère HTML du champ de saisie devient actif. À ce moment la fonction verifcontenu(), elle aussi notée dans le passage JavaScript, est appelée. Cette fonction demande si la chaîne de caractères (le contenu du champ pour entrer le nom) qui lui est transmise est vide. Si oui, une fenêtre de dialogue apparaît et le curseur est replacé dans le champ.
![]() ![]() |
Au cas où un élément a reçu une valeur modifiée.
D'après HTML 4.0 et JavaScript 1.2 (Netscape) est permis dans les repères HTML
suivants:
<input> <select> <textarea>
<html><head><title>Test</title> </head><body> <form name="Test"> <textarea rows=10 cols=40 onChange="alert(this.value)">votre commentaire!</textarea> </form> </body></html> |
Dans l'exemple est défini un formulaire avec un champ de saisie de plusieurs lignes. Si l'utilisateur entre quelque chose et clique ensuite ailleurs, l'Event-Handler onChange noté dans le repère HTML du champ de saisie de plusieurs lignes devient actif. Dans l'exemple le contenu modifié actuel du champ est simplement affiché dans une fenêtre de dialogue.
![]() ![]() |
Au cas où l'utilisateur clique sur un élément.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area> <input> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <form> <input size=30 name="sortie" readonly><br> <input type=button value="Dernière mise à jour" onClick="this.form.sortie.value=document.lastModified"> </form> </body></html> |
Dans l'exemple est défini un formulaire avec un champ de saisie (qui cependant a été défini en lecture seule avec l'attribut "readonly") et un bouton. Le bouton porte l'inscription "Dernière mise à jour". En cliquant sur le bouton l'Event-Handler onClick, défini dans le repère HTML du bouton, devient actif. Dans l'exemple s'inscrit alors dans le champ de saisie la date de la dernière modification du document.
![]() ![]() |
Au cas où l'utilisateur double-clique sur un élément.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area> <input> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <form name="calculer"> valeur: <input size=10 name="valeur"> <input type=button value="doubleclic = puissance 2" onDblClick="document.calculer.valeur.value=document.calculer.valeur.value*document.calculer.valeur.value"> </form> </body></html> |
Dans l'exemple est défini un formulaire avec un champ de saisie et un bouton. Dans le bouton est noté l'Event-Handler onDblClick=. Le bouton ne réagit de ce fait qu'au double-clic. Si l'utilisateur double-clique sur le bouton, le carré de la valeur qu'il a entrée dans le champ de saisie est calculée et inscrite à son tour dans ce champ.
Chez les navigateurs Netscape tournant sur Macintosh cet Event-Handler n'est pas disponible!
![]() ![]() |
Est approprié pour capter les messages d'erreur et les remplacer par des messages personnalisés. Attention pourtant, les erreurs ne sont pas pour autant écartées! onError est conçu avant tout pour traiter les erreurs intervenant lors du chargement de graphiques.
D'après JavaScript est permis dans le repère HTML suivant:
<img>
<html><head><title>Test</title> </head><body> <img src="yapas.gif" onError="alert('Le graphique ne peut être affiché')"> </body></html> |
Dans l'exemple est attribué à une référence de graphique l'Event-Handler onError=. Il devient actif si le graphique n'existe pas ou ne peut pas être affiché: ici, une fenêtre de dialogue correspondante est alors affichée.
![]() ![]() |
Entre en action quand l'utilisateur active un élément.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<body> <frame> <input> <layer> <select> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <area> <button> <input> <label> <select> <textarea>
<html><head><title>Test</title> </head><body> <form> <input size=30 onFocus="this.value='Entrez votre nom ici'"><br> <input size=30 onFocus="this.value='Entrez votre adresse ici'"><br> <input size=30 onFocus="this.value='Entrez votre âge ici'"><br> </form> </body></html> |
Dans l'exemple un formulaire est défini et contient trois champs de saisie. Étant donné que les champs ne portent pas d'inscription, l'utilisateur ne sait pas ce qu'il doit entrer dans les différents champs. Pourtant, s'il déplace le curseur par curiosité dans l'un des champs de saisie, l'Event-Handler onFocus= du champ concerné deviendra actif. Alors s'inscrira dans le champ concerné une invite de ce qu'il faut y mettre.
![]() ![]() |
Entre en action si l'utilisateur, alors qu'il a activé un élément, appuie sur une touche.
D'après JavaScript (Netscape) n'est pour l'instant pas possible dans des
repères HTML mais seulement en relation avec l'objet event.
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> <script language="JavaScript"> function actualiser() { document.Test.controle.value = document.Test.entree.value.length + 1 + " caractères déjà entrés"; return true; } </script> </head><body> <form name="Test"> courte description de votre page d'accueil (max 50 caractères):<br> <textarea rows=2 cols=30 name="entree" onKeydown="actualiser(this.value)"> </textarea><br> <input type=text readonly size=30 name="controle"><br> <input type=reset> </form> </body></html> |
L'exemple ne fonctionne pas avec Netscape, seulement avec l'Explorer Internet MS 4.x, qui interprète amplement les Event-Handler d'après HTML 4.0. Dans l'exemple un formulaire est défini dans lequel l'utilisateur peut entrer une courte description de sa page d'accueil. Le texte ne doit pas excéder 50 caractères. Pour que l'utilisateur n'ait pas à compter, il y a un champ de saisie dans lequel après chaque touche appuyée est affiché le nombre de caractères déjà entrés. Pour cela est noté dans le champ de saisie de plusieurs lignes l'Event-Handler onKeydown=. Il fait en sorte qu'aussi longtemps que l'utilisateur entre quelque chose dans le champ du formulaire, il appelle à chaque touche frappée la fonction actualiser(), définie dans l'entête du fichier dans un passage Script. Cette fonction calcule avec document.Test.entree.value.length + 1, combien de signe ont été entrés et écrit le résultat obtenu dans le champ "d'entrée" prévu à cet effet.
![]() ![]() |
D'après JavaScript (Netscape) n'est jusqu'à présent pas possible dans des
repères HTML mais seulement en relation avec l'objet event
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <form name="Test"> <input type=text size=30 name="entree" onKeypress="alert(window.event.keyCode)"> </form> </body></html> |
L'exemple ne fonctionne pas avec Netscape, seulement avec l'Explorer Internet MS 4.x, qui interprète amplement les Event-Handler d'après HTML 4.0. Dans l'exemple un formulaire avec un champ de saisie est défini. Si l'utilisateur entre quelque chose dans le champ de saisie, une boite de dialogue est affichée à chaque touche appuyée avec la valeur ASCII du signe entré. Pour cela est noté dans le champ de saisie l'Event-Handler onKeypress=. Il entre en action quand une touche a été appuyée puis relâchée. Avec window.event.keyCode la valeur du signe entré peut être recherchée d'après la syntaxe de l' Internet Explorer Internet MS.
![]() ![]() |
D'après JavaScript (Netscape) n'est pour l'instant pas possible dans des
repères HTML mais seulement en relation avec l'objet event
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <form name="Test"> <input type=text size=30 name="entree" onKeyup="this.form.sortie.value=this.value"><br><br> <input type=text readonly size=30 name="sortie"><br> <input type=reset> </form> </body></html> |
L'exemple ne fonctionne pas avec Netscape, seulement avec l'Explorer Internet MS 4.x, qui interprète amplement les Event-Handler d'après HTML 4.0. Dans l'exemple est défini un formulaire avec deux champs de saisie appelés entree et sortie. Si l'utilisateur entre quelque chose dans le champ supérieur, dans celui donc prévu pour l'entrée, le valeur sera reprise signe pour signe dans le champs du bas, dans celui donc prévu pour la sortie. Pour cela est noté dans le champ de saisie l'Event-Handler onKeyup. Cet Event-Handler entre en action si l'utilisateura appuyé (dans le champ) une touche qu'il a relâchée - ce qui est le cas pour chaque signe entré. Avec this.form.sortie.value=this.value est affectée au champ de sortie la valeur actuelle du champ d'entrée.
![]() ![]() |
Entre en action quand un fichier HTML est chargé.
D'après JavaScript (Netscape) et HTML 4.0 est permis dans les repères HTML suivants:
<frameset> <body>
<html><head><title>Test</title> <script language="JavaScript"> <!-- function Navifenetre() { Navigation = window.open("navigat.htm","Navigation","height=100,width=300"); Navigation.focus(); } // --> </script> </head> <body onLoad="Navifenetre()"> </body></html> |
Dans l'exemple est ouverte, à la lecture du fichier HTML, une deuxième fenêtre, qui pourrait servir par exemple de "télécommande" de la fenêtre principale. Pour cela est noté dans le repère d'ouverture <body> l'Event-Handler onLoad=. Il appelle la fonction Navifenetre() qui est définie dans un passage JavaScript dans l'entête de fichier. Dans cette fonction se trouve la commande pour ouvrir la deuxième fenêtre. La fenêtre reçoit aussi tout de suite le Focus (devient fenêtre active), de façon à ce qu'elle soit visible en premier plan de la fenêtre principale.
![]() ![]() |
Entre en action quand l'utilisateur maintient la touche de souris appuyée.
D'après JavaScript (Netscape) n'est pour l'instant pas possible dans des
repères HTML mais seulement en relation avec l'objet event.
L'exemple ci-dessous fonctionne malgré tout avec Netscape 4.x.
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <a href="home.htm" onMousedown="window.status='lien à la page de réception';return true;">lien</a> </body></html> |
L'exemple contient un lien. En cliquant sur le lien, la cible du lien, dans l'exemple donc home.htm, est appelée tout à fait normalement. Auparavant toutefois, dés que l'utilisateur a appuyé sur la touche et avant qu'il l'ait relâchée, l'Event-Handler onMousedown= noté dans le repère du lien entre en action,. Dans l'exemple, s'inscrira dans la ligne d'état du navigateur: lien à la page de réception.
![]() ![]() |
Entre en action si l'utilisateur bouge la souris indépendamment du fait que la touche en soit appuyée ou non.
D'après JavaScript (Netscape) n'est pour l'instant pas possible dans des
repères HTML mais seulement en relation avec l'objet event
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> <script language="JavaScript"> function controlesouris() { Pos = window.event.x + "/" + window.event.y; window.status = Pos; return true; } </script> </head><body> <p onMousemove="controlesouris()">Ici un petit texte</p> </body></html> |
L'exemple montre comment l'Event-Handler fonctionne également dans des repères HTML pour lesquels ce n'était jusqu'alors pas possible. L'exemple fonctionne avec l'Explorer Internet MS 4.x, qui interprète largement les Event-Handler d'après HTML 4.0. Dans l'exemple a été défini un paragraphe de texte, dans lequel est noté l'Event-Handler onMousemove=. L'Event-Handler entre en action aussi longtemps que l'utilisateur bouge la souris dans le domaine d'affichage du paragraphe. Alors est appelée aussi souvent que possible la fonction controlesouris(), notée dans un passage Script de l'entête de fichier. Cette fonction fait en sorte que les coordonnées de la souris s'affichent dans la ligne d'état du navigateur.
![]() ![]() |
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <a href="news.htm" onMouseout="alert('Vous devriez aller visiter les News')">News</a> </body></html> |
Dans l'exemple est défini un lien. Si l'utilisateur passe avec la souris sur le lien, sans cependant le cliquer, et s'éloigne à nouveau du lien, l'Event-Handler onMouseout= entre en action. Dans l'exemple apparaît alors une boite de dialogue incitant l'utilisateur à aller visiter les pages News.
![]() ![]() |
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <h1 id="Test" onMouseover="document.all.Test.innerText='Vous voyez?'" onMouseout="document.all.Test.innerText='Je suis dynamique'">Je suis dynamique</h1> </body></html> |
L'exemple montre comment les Event-Handler fonctionnent également dans
des repères HTML, pour lesquels ce n'était jusqu'alors pas possible.
L'exemple
fonctionne avec l'Explorer Internet MS 4.x, qui interprète largement les
Event-Handler d'après HTML 4.0. Dans l'exemple est défini un titre N°1. Dans
le titre sont notés les Event-Handler onMouseover= et onMouseout=.
L'Event-Handler onMouseover= entre en action si l'utilisateur
bouge la souris dans le domaine d'affichage du titre, et onMouseout=
devient actif quand il quitte à nouveau le domaine d'affichage.
À l'aide de l'objet all
et de la propriété innerText le texte du titre est modifié
dynamiquement à chaque activation de l'un des deux Event-Handler.
Avec onMouseover=, un autre texte est affiché, avec onMouseout=
revient le texte d'origine.
![]() ![]() |
D'après JavaScript (Netscape) n'est pour l'instant pas possible dans des
repères HTML mais seulement en relation avec l'objet event.
L'exemple ci-dessous fonctionne malgré tout avec Netscape 4.x.
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <a href="jeu.htm" onMouseup="alert('Le jeu commence');">lien</a> </body></html> |
Dans l'exemple est noté un lien. Si l'utilisateur clique le lien et relâche la touche, alors juste avant que la page à laquelle mène le lien soit chargée, une boite de dialogue s'ouvre et prévient encore solennellement l'utilisateur que le jeu va maintenant commencer. Pour cela, est noté dans le repère du lien l'Event-Handler onMouseup=. Quand il entre en action, une boite de dialogue est d'abord affichée. Après le fichier jeu.htm est chargé.
![]() ![]() |
Entre en action quand l'utilisateur veut initialiser le formulaire.
D'après JavaScript (Netscape) est permis dans le repère HTML suivant:
<form>
<html><head><title>Test</title> <script language="JavaScript"> function ResetCheck() { chk = window.confirm("Voulez vous effacer toutes les saisies?"); return chk; } </script> </head><body> <form name="Test" onReset="return ResetCheck()"> Name: <input size=30><br> Idee: <input size=30><br> <input type=reset><input type=submit> </form> </body></html> |
L'exemple contient un formulaire avec entre autres un bouton annuler (Reset-button). En cliquant ce bouton, toutes les données dans le formulaire sont en principe effacées. Dans l'exemple, pourtant, est noté dans le repère d'ouverture <form> l'Event-Handler onReset=. Celui-ci entre en action si le bouton Reset est cliqué. Ici est alors appelée la fonction ResetCheck(), définie dans un passage Script dans l'entête de fichier. Cette fonction demande à l'utilisateur dans une fenêtre de confirmation (window.confirm()) s'il veut réellement effacer toutes les données du formulaire. S'il le confirme, la fenêtre de confirmation renvoie la valeur true. S'il l'infirme, la valeur false est renvoyée. La valeur renvoyée est sauvegardée dans la variable chk et celle-ci est renvoyée à son tour par la fonction ResetCheck() à l'Event-Handler qui l'a appelée. L'effet en est que les données du formulaire ne sont effacées que si la valeur true est renvoyée.
![]() ![]() |
Entre en action quand l'utilisateur sélectionne du texte.
D'après JavaScript (Netscape) est permis dans le repère HTML suivant:
<input> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <form name="Test" onReset="return ResetCheck()"> <input size=30 value="ma page d'accueil" onselect="this.blur()"> </form> </body></html> |
Dans l'exemple est défini un formulaire avec un champ de saisie, qui est est déjà occupé avec du texte (value="ma page d'accueil"). Si l'utilisateur essaie de sélectionner du texte dans le formulaire pour l'effacer par exemple, Le curseur sera éloigné du champ de saisie. Pour ce faire est employéee la méthode objet blur().
![]() ![]() |
Entre en action quand l'utilisateur envoie un formulaire.
D'après JavaScript (Netscape) permis dans le repère HTML suivant:
<form>
<html><head><title>Test</title> <script language="JavaScript"> function CheckInput() { for(i=0; i<document.forms[0].elements.length; ++i) if(document.forms[0].elements[i].value == "") { alert("Tous les champs n'ont pas été remplis!"); document.forms[0].elements[i].focus(); return false; } return true; } </script> </head><body> <form onSubmit="return CheckInput();"> champ 1: <input size=30><br> champ 2: <input size=30><br> champ 3: <input size=30><br> <input type=submit> </form> </body></html> |
L'exemple contient un formulaire avec plusieurs champs de saisie. Lors de
l'envoi du formulaire, à savoir en cliquant sur le bouton prévu à cet effet,
il est d'abord vérifié si l'utilisateur a entré quelque chose dans chaque champ. Si
un champ a été laissé vide, le formulaire n'est pas envoyé.
Au lieu de cela est
affiché un message d'erreur, et le curseur est replacé dans le premier champ
de saisie qui n'aura pas été rempli. À cet effet est noté dans le repère d'ouverture <form>
l'Event-Handler onSubmit=. En envoyant le formulaire, la fonction CheckInput(),
définie dans un passage Script de l'entête de fichier, est appelée. Cette
fonction vérifie dans une boucle-for
tous les différents champs du formulaire, en cherchant s'ils ont un contenu vide (chaîne
de caractères vide ""). Si c'est le cas, un message d'erreur
est affiché et le curseur placé dans le champ de saisie correspondant. La
valeur false est renvoyée à l'Event-Handler onSubmit qui a
appelé la fonction. Ce n'est que lorsque tous les champs du formulaire sont
remplis que la valeur est true renvoyée. C'est ce qui décide si le
formulaire est envoyé ou non.
![]() ![]() |
Entre en action quand l'utilisateur quitte un fichier HTML.
D'après JavaScript (Netscape) et HTML 4.0 est permis dans les repères HTML suivants:
<frameset> <body>
<html><head><title>Test</title> <script language="JavaScript"> Start = new Date(); heuredebut = Start.getTime(); function sejour() { fin = new Date(); heurefin = fin.getTime(); sejour= Math.floor((heurefin - heuredebut) / 1000); alert("Vous êtes restés " + sejour + " secondes sur cette page"); } </script> </head> <body onUnload="sejour()"> </body></html> |
Dans l'exemple un passage JavaScript a été défini dans l'entête du
fichier. Dés la lecture du fichier et grâce à l'objet
Date,
l'heure actuelle est recherchée et sauvegardée dans la variable heuredebut.
Dans le repère d'ouverture <body> du fichier, l'Event-Handler onUnload=
est noté. Il entre en action quand le fichier est quitté, par exemple après
avoir cliqué sur un lien menant ailleurs. Dans ce cas, la
fonction de l'exemple sejour(), qui se trouve dans l'entête de fichier, est appelée.
Cette fonction recherche l'heure actuelle et la différence entre
l'heuredebut sauvegardée et l'heurefin qu'elle vient de
trouver, et donne le résultat dans une boite de dialogue.
![]() ![]() |
Ce n'est pas un Event-Handler au sens propre du terme. Il s'agit d'une syntaxe qui fut introduite pour noter du code JavaScript comme cible d'un lien.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area>
<html><head><title>Test</title> </head> <body> <a href="javascript:alert(document.lastModified)">Dernière mise à jour</a> </body></html> |
Pour noter un lien de ce genre, notez entre guillemets derrière l'attribut href= une ou plusieurs instructions JavaScript. Pour plusieurs instructions, il est pourtant préférable de noter celles-ci dans une fonction et d'appeler cette fonction avec le lien.
![]() | |
après:![]() |
![]() |
avant:![]() |
![]() |
SELFHTML/Quickbar
JavaScript
Éléments du langage
Serge François, 13405@free.fr