Avec les événements et surtout leur gestion, nous abordons le côté "magique" de Javascript. En Html classique, il y a un événement que vous connaissez bien. C'est le clic de la souris sur un lien pour vous transporter sur une autre page Web. Hélas, c'est à peu près le seul. Heureusement, Javascript va en ajouter une bonne dizaine, pour votre plus grand plaisir. Les événements Javascript, associés aux fonctions, aux méthodes et aux formulaires, ouvrent grand la porte pour une réelle interactivité de vos pages.
| onChange (après modification réussie) 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. |
L'objet Array (ou tableaux) est une liste d'éléments indexés dans lesquels on pourra ranger (écrire) des données ou aller reprendre ces données (lire).
| Objets | Gestionn aires d'événement disponibles  |
| Fenêtre | onLoad, onUnload |
| Lien hypertexte | onClick, onmouseOver, on mouseOut |
| Elément de texte | onBlur, onChange, onFocus, onSelect |
| Elément de zone de texte | onBlur, onChange, onFocus, onSelect |
| Elément bouton | onClick |
| Case à cocher | |
| Bouton Radio | onClick |
| Liste de sélection | Blur, onChange, onFocus |
| Bouton Submit | onClick |
| Bouton Reset  | onClick |
On notera que, "le nombre d'éléments est limité à 255. Cette restriction ne figure pas dans la documentation de Netscape mais elle a été constatée expérimentalement." Source : Javascript de Michel Dreyfus Collection Mégapoche.
Ensuite, on va alimenter la structure ainsi définie :
nom_du_tableau[i] = "elément";
où i est un nombre compris entre 0 et x moins
1.
Javascript étant un langage peu typé, il n'est pas nécessaire de déclarer le nombre d'élément du tableau (soit x). Javascript prendra comme nombre d'éléments, le nombre i le plus élevé lors de "l'alimentation" de la structure (en fait i + 1).Ainsi la formulation suivante serait aussi correcte pour un tableau à 3 dimensions. carnet = new Array(); carnet[2]="Van Lancker";
| var tab = new Array(); | vide |
| ('pomme','ananas','poire','cerise')  | pomme ananas poire cerise |
| ('abricot','raisin') | pomme ananas poire cerise abricot raisin |
| tab.reverse() | raisin abricot cerise poire ananas pomme |
| fruit = () | raisin abricot cerise poire ananas |
| fruit = pomme | |
| fruit = tab.shift() | abricot cerise poire ananas |
| tab.unshift('kiwi') | kiwi abricot cerise poire ananas |
| liste_fruits = tab.splice(2,4) | kiwi abricot |
| liste_fruits = ["cerise", "poire", "ananas"] | |
| ('pomme','ananas','poire','cerise')  | kiwi abricot pomme ananas poire cerise |
| () | abricot ananas cerise kiwi poire pomme |
| liste_fruits = (' - ') | liste_fruits = abricot - ananas - cerise - kiwi - poire - pomme |
| liste_fruits = tab.slice(1,4) | abricot ananas cerise kiwi poire pomme |
| liste_fruits = ["ananas", "cerise", "kiwi"] |
Avec Javascript, les formulaires Html prennent une toute autre dimension. N'oublions pas qu'en Javascript, on peut accéder à chaque élément d'un formulaire pour, par exemple, y aller lire ou écrire une valeur, noter un choix auquel on pourra associer un gestionnaire d'événement... Tous ces éléments renforceront grandement les capacités interactives de vos pages.
Mettons au point le vocabulaire que nous utiliserons. Un formulaire est l'élément Html déclaré par les balises <FORM></FORM>. Un formulaire contient un ou plusieurs éléments que nous appellerons des contrôles (widgets). Ces contrôles sont notés par exemple par la balise <INPUT TYPE= ...>.
La zone de texte est l'élément d'entrée/sortie par excellence de
Javascript. La syntaxe Html est
<INPUT TYPE="text"
NAME="nom" SIZE=x
MAXLENGTH=y> pour un champ de saisie d'une seule ligne, de longueur x et de longueur maximale de y.
Voici le code :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript"> function afficher(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE="">
Zone de texte d'entrée <BR>
<INPUT TYPE="button" NAME="bouton"
VALUE="Afficher" onClick="afficher(form2)"><BR>
<INPUT TYPE="text" NAME="output" VALUE="">
Zone de texte de sortie
</FORM> </BODY> </HTML>
Prenons un exemple :
<HTML>
<HEAD>
<SCRIPT language="javascript"> function choixprop(form3) {
if (form3.choix[0].checked) { alert("Vous avez choisi la proposition " + form3.choix[0].value) };
if (form3.choix[1].checked) { alert("Vous avez choisi la proposition " + form3.choix[1].value) };
if (form3.choix[2].checked) { alert("Vous avez choisi la proposition " + form3.choix[2].value) };
}
</SCRIPT>
</HEAD> <BODY>
Entrez votre choix :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro
1<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro
2<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?" onClick="choixprop(form3)">
</FORM>
</BODY>
</HTML>
Les boutons case à cocher sont utilisés pour noter un ou plusieurs choix (pour rappel avec les boutons radio un seul choix) parmi un ensemble de propositions. A part cela, sa syntaxe et son usage est tout à fait semblable aux boutons radio sauf en ce qui concerne l'attribut name.
| Propriété  | Description |
| name | indique le nom du contrôle. Toutes les cases à cocher portent un nom différent. |
| checked | indique l'état en cours de l'élément case à cocher. |
| defaultchecked | indique l'état du bouton sélectionné par défaut. |
| value | indique la valeur de l'élément case à cocher. |
Entrez votre choix :
<FORM NAME="form4">
<INPUT TYPE="CHECKBOX" NAME="check1" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="CHECKBOX" NAME="check2" VALUE="2">Choix numéro 2<BR>
<INPUT TYPE="CHECKBOX" NAME="check3" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="CHECKBOX" NAME="check4"
VALUE="4">Choix numéro 4<BR>
<INPUT TYPE="button"NAME="but"
VALUE="Corriger" onClick="reponse(form4)">
</FORM>
</BODY>
</HTML>
| Le contrôle liste de sélection vous permet de proposer diverses options sous la forme d'une liste déroulante dans laquelle l'utilisateur peut cliquer pour faire son choix. Ce choix reste alors affiché. La boite de la liste est crée par la balise <SELECT> et les éléments de la liste par un ou plusieurs tags <OPTION>. La balise </SELECT> termine la liste. |
Propriété Description
name indique le nom de la liste déroulante.
length indique le nombre d'éléments de la liste. S'il est indiqué dans le tag <SELECT>, tous les éléments de la liste seront affichés. Si vous ne l'indiquez pas un seul apparaîtra dans la boite de la liste déroulante.
selectedIndex indique le rang à partir de 0 de l'élément de la liste qui a été sélectionné par l'utilisateur.
defaultselected indique l'élément de la liste sélectionné par défaut. C'est lui qui apparaît alors dans la petite boite.
| Propriété | Description |
| name | indique le nom du contrôle par lequel on pourra accéder. |
| defaultvalue | |
| value | indique la valeur en cours de la zone de texte. Soit celle tapée par l'utilisateur ou si celui-ci n'a rien tapé, la valeur par défaut |
| Le contrôle a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire à l'URL désignée dans l'attribut ACTION du tag <FORM>. la syntaxe Html est : <INPUT TYPE="submit" NAME="nom" VALUE="texte"> où VALUE donne le texte du bouton.  Une seule méthode est associée au contrôle Submit, c'est la méthode onClick(). |
Avec les événements et surtout leur gestion, nous abordons le côté "magique" de Javascript. En Html classique, il y a un événement que vous connaissez bien. C'est le clic de la souris sur un lien pour vous transporter sur une autre page Web. Hélas, c'est à peu près le seul. Heureusement, Javascript va en ajouter une bonne dizaine, pour votre plus grand plaisir. Les événements Javascript, associés aux fonctions, aux méthodes et aux formulaires, ouvrent grand la porte pour une réelle interactivité de vos pages.
| onChange (après modification réussie) 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. |
L'objet Array (ou tableaux) est une liste d'éléments indexés dans lesquels on pourra ranger (écrire) des données ou aller reprendre ces données (lire).
| Objets | Gestionn aires d'événement disponibles |
| Fenêtre | onLoad, onUnload |
| Lien hypertexte | onClick, onmouseOver, on mouseOut |
| Elément de texte | onBlur, onChange, onFocus, onSelect |
| Elément de zone de texte | onBlur, onChange, onFocus, onSelect |
| Elément bouton | onClick |
| Case à cocher | |
| Bouton Radio | onClick |
| Liste de sélection | Blur, onChange, onFocus |
| Bouton Submit | onClick |
| Bouton Reset | onClick |
On notera que, "le nombre d'éléments est limité à 255. Cette restriction ne figure pas dans la documentation de Netscape mais elle a été constatée expérimentalement." Source : Javascript de Michel Dreyfus Collection Mégapoche.
Ensuite, on va alimenter la structure ainsi définie :
nom_du_tableau[i] = "elément";
où i est un nombre compris entre 0 et x moins
1.
Javascript étant un langage peu typé, il n'est pas nécessaire de déclarer le nombre d'élément du tableau (soit x). Javascript prendra comme nombre d'éléments, le nombre i le plus élevé lors de "l'alimentation" de la structure (en fait i + 1).Ainsi la formulation suivante serait aussi correcte pour un tableau à 3 dimensions. carnet = new Array(); carnet[2]="Van Lancker";
| var tab = new Array(); | vide |
| ('pomme','ananas','poire','cerise') | pomme ananas poire cerise |
| ('abricot','raisin') | pomme ananas poire cerise abricot raisin |
| tab.reverse() | raisin abricot cerise poire ananas pomme |
| fruit = () | raisin abricot cerise poire ananas |
| fruit = pomme | |
| fruit = tab.shift() | abricot cerise poire ananas |
| tab.unshift('kiwi') | kiwi abricot cerise poire ananas |
| liste_fruits = tab.splice(2,4) | kiwi abricot |
| liste_fruits = ["cerise", "poire", "ananas"] | |
| ('pomme','ananas','poire','cerise') | kiwi abricot pomme ananas poire cerise |
| () | abricot ananas cerise kiwi poire pomme |
| liste_fruits = (' - ') | liste_fruits = abricot - ananas - cerise - kiwi - poire - pomme |
| liste_fruits = tab.slice(1,4) | abricot ananas cerise kiwi poire pomme |
| liste_fruits = ["ananas", "cerise", "kiwi"] |
Avec Javascript, les formulaires Html prennent une toute autre dimension. N'oublions pas qu'en Javascript, on peut accéder à chaque élément d'un formulaire pour, par exemple, y aller lire ou écrire une valeur, noter un choix auquel on pourra associer un gestionnaire d'événement... Tous ces éléments renforceront grandement les capacités interactives de vos pages.
Mettons au point le vocabulaire que nous utiliserons. Un formulaire est l'élément Html déclaré par les balises <FORM></FORM>. Un formulaire contient un ou plusieurs éléments que nous appellerons des contrôles (widgets). Ces contrôles sont notés par exemple par la balise <INPUT TYPE= ...>.
La zone de texte est l'élément d'entrée/sortie par excellence de
Javascript. La syntaxe Html est
<INPUT TYPE="text"
NAME="nom" SIZE=x
MAXLENGTH=y> pour un champ de saisie d'une seule ligne, de longueur x et de longueur maximale de y.
Voici le code :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript"> function afficher(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE="">
Zone de texte d'entrée <BR>
<INPUT TYPE="button" NAME="bouton"
VALUE="Afficher" onClick="afficher(form2)"><BR>
<INPUT TYPE="text" NAME="output" VALUE="">
Zone de texte de sortie
</FORM> </BODY> </HTML>
Prenons un exemple :
<HTML>
<HEAD>
<SCRIPT language="javascript"> function choixprop(form3) {
if (form3.choix[0].checked) { alert("Vous avez choisi la proposition " + form3.choix[0].value) };
if (form3.choix[1].checked) { alert("Vous avez choisi la proposition " + form3.choix[1].value) };
if (form3.choix[2].checked) { alert("Vous avez choisi la proposition " + form3.choix[2].value) };
}
</SCRIPT>
</HEAD> <BODY>
Entrez votre choix :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro
1<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro
2<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?" onClick="choixprop(form3)">
</FORM>
</BODY>
</HTML>
Les boutons case à cocher sont utilisés pour noter un ou plusieurs choix (pour rappel avec les boutons radio un seul choix) parmi un ensemble de propositions. A part cela, sa syntaxe et son usage est tout à fait semblable aux boutons radio sauf en ce qui concerne l'attribut name.
| Propriété | Description |
| name | indique le nom du contrôle. Toutes les cases à cocher portent un nom différent. |
| checked | |
| defaultchecked | indique l'état du bouton sélectionné par défaut. |
| value | indique la valeur de l'élément case à cocher. |
Entrez votre choix :
<FORM NAME="form4">
<INPUT TYPE="CHECKBOX" NAME="check1" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="CHECKBOX" NAME="check2" VALUE="2">Choix numéro 2<BR>
<INPUT TYPE="CHECKBOX" NAME="check3" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="CHECKBOX" NAME="check4"
VALUE="4">Choix numéro 4<BR>
<INPUT TYPE="button"NAME="but"
VALUE="Corriger" onClick="reponse(form4)">
</FORM>
</BODY>
</HTML>
| Le contrôle liste de sélection vous permet de proposer diverses options sous la forme d'une liste déroulante dans laquelle l'utilisateur peut cliquer pour faire son choix. Ce choix reste alors affiché. La boite de la liste est crée par la balise <SELECT> et les éléments de la liste par un ou plusieurs tags <OPTION>. La balise </SELECT> termine la liste. |
Propriété Description
name indique le nom de la liste déroulante.
length indique le nombre d'éléments de la liste. S'il est indiqué dans le tag <SELECT>, tous les éléments de la liste seront affichés. Si vous ne l'indiquez pas un seul apparaîtra dans la boite de la liste déroulante.
selectedIndex indique le rang à partir de 0 de l'élément de la liste qui a été sélectionné par l'utilisateur.
defaultselected indique l'élément de la liste sélectionné par défaut. C'est lui qui apparaît alors dans la petite boite.
| Propriété | Description |
| name | indique le nom du contrôle par lequel on pourra accéder. |
| defaultvalue | |
| value |
| Le contrôle a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire à l'URL désignée dans l'attribut ACTION du tag <FORM>. la syntaxe Html est : <INPUT TYPE="submit" NAME="nom" VALUE="texte"> où VALUE donne le texte du bouton. Une seule méthode est associée au contrôle Submit, c'est la méthode onClick(). |
