Utiliser des scripts : Les scripts clients

Insérer un script

Pour insérer un script dans un document HTML, on utilise l'élément SCRIPT. La balise fermante de l'élément est obligatoire. On peut insérer un script dans l'entête ou dans le corps du document.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<HTML>

<HEAD>

<TITLE>Utiliser les scripts client</TITLE>

function message()

{

window.alert ('Message ');

}

</SCRIPT>

<BODY>

Function message

MsgBox , vbExclamation, "Attention"

End Function

</SCRIPT>

listing h8.1 Insérer des scripts clients

L'élément SCRIPT prend donc un attribut, l'attribut type, qui permet de spécifier le langage dans lequel le script est écrit. Dans l'exemple du listing h8.1, on a donc un script écrit en javascript et l'autre en vbscript. Le tableau suivant donne quelques exemples de langages de script possibles.

Langage	Valeur de l'attribut `type`
Javascript	`text/javascript`
VBScript	`text/vbscript`
TCL	`text/tcl`

tab h8.1 Langages de script

Exécuter un script

On a dit précédemment que les scripts peuvent être exécuté suite à une action de l'utilisateur. Tous les éléments HTML avec lesquels l'utilisateur peut interagir possèdent toute une batterie d'attributs qui permettent de répondre à un évènement de l'utilisateur. Voyons de suite un exemple.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<HTML>

<HEAD>

<TITLE>Utiliser les scripts client</TITLE>

function message()

{

window.alert ('Message ');

}

</SCRIPT>

<BODY>

<FORM>

</FORM>

listing h8.2 Réagir au clic sur un bouton

fig h8.1 Réagir au clic sur un bouton

Dans l'exemple précédent, on a donc utiliser l'attribut onclick de l'élément INPUT pour dire que l'on souhaite réagir au clic de l'utilisateur sur le bouton. La valeur de l'attribut est le nom de la fonction Javascript qu'il faut exécuter lorsque l'utilisateur clique sur le bouton. Dans notre exemple, cette fonction Javascript affiche une boite de dialogue avec un message.

Tous les script ne doivent pas être exécuté suite à une action de l'utilisateur, voici par exemple un script qui altère le contenu du document en y affichant l'heure courante.

now = new Date();

msg = "<P>Il est " + now.getHours() + ":" + now.getMinutes();

document.write (msg);

</SCRIPT>

listing h8.3 Afficher l'heure

Il suffit de placer ce script n'importe où dans le corps du document pour y afficher l'heure courante. Voici d'ailleur l'heure qu'il est pour le moment :

Ce script va donc altérer dynamiquement le contenu du document en y insérant l'heure courante. Pour résumer, les scripts agissent de deux manières différentes : suite à une action de l'utilisateur ou un évènement particulier ou alors ils agissent dans tous les cas.

Les évènements

Le tableau suivant liste tous les évènements qui sont utilisables pour générer l'exécution d'un script. Certains de ces évènements seront déclenchés par l'utilisateur tandis que d'autre le seront par le navigateur.

Évènement	Description	Utilisable avec
`onload`	Est activé une fois la page ou tous les cadres d'un `FRAMESET` chargés	`BODY`, `FRAMESET`
`onunload`	Est activé lorsque la page ou tous les cadres d'un `FRAMESET` sont fermés	`BODY`, `FRAMESET`
`onclick`	Est activé lorsque l'utilisateur clique sur un élément	La plupart des éléments
`ondblclick`	Est activé lorsque l'utilisateur double-clique sur un élément	La plupart des éléments
`onmousedown`	Est activé lorsque l'utilisateur clique sur un élément mais garde le bouton de la souris enfoncé	La plupart des éléments
`onmouseup`	Est activé lorsque l'utilisateur a cliqué sur un élément et relache le bouton de la souris	La plupart des éléments
`onmouseover`	Est activé lorsque le pointeur de la souris se trouve sur un élément	La plupart des éléments
`onmousemove`	Est activé lorsque l'utilisateur bouge la souris sur un élément	La plupart des éléments
`onmouseout`	Est activé lorsque le pointeur de la souris quitte un élément	La plupart des éléments
`onfocus`	Est activé lorsqu'un élément reçoit le focus	`A`, `AREA`, `LABEL`, `INPUT`, `SELECT`, `TEXTAREA`, `BUTTON`
`onblur`	Est activé lorsqu'un élément perd le focus	Les mêmes éléments que `onfocus`
`onkeypress`	Est activé lorsque l'utilisateur enfonce puis relache une touche du clavier	La plupart des éléments
`onkeydown`	Est activé lorsque l'utilisateur enfonce et maintient enfoncée une touche du clavier	La plupart des éléments
`onkeyup`	Est activé lorsque l'utilisateur a enfoncé et relache une touche du clavier	La plupart des éléments
`onsubmit`	Est activé lorsqu'un formulaire est soumis	FORM
`onreset`	Est activé lorsqu'un formulaire est remis à zéro	FORM
`onselect`	Est activé lorsque l'utilisateur sélectionne du texte dans un champ texte	INPUT, TEXTAREA
`onchange`	Est activé lorsqu'un élément perd le focus et que sa valeur a changé depuis qu'il avait reçu le focus	INPUT, SELECT, TEXTAREA

tab h8.2 Les évènements

Maintenant, pour en savoir plus, il vous faudra consulter un tutoriel consacré à un des langages de script disponible : Javascript, VBScript, TCL, ... le plus commun des langages étant bien entendu Javascript.

Modification dynamique du document

Comme on l'a vu dans l'exemple du listing h8.3, il est possible, avec des scripts, de modifier le document HTML en y insérant des morceaux de code HTML.

Mettez-vous maintenant à la place du navigateur, il reçoit la page HTML à afficher du serveur, mais il ne peut pas l'afficher tout de suite sur l'écran du client étant donné qu'il y a potentiellement des scripts qui vont modifier le contenu du document. Le navigateur va donc devoir exécuter les scripts avant de pouvoir afficher le document.

On peut épargner cette attente au navigateur et donc accélérer le rendu du document, ce qui plaira à l'utilisateur, en utilisant une propriété de l'élément SCRIPT : la propriété defer.

Le fait de préciser cette propriété permet de dire au navigateur que le script ne modifiera pas le document, et que le navigateur peut donc afficher le document sans déjà exécuter le script.

function message()

{

window.alert ('Message ');

}

</SCRIPT>

listing h8.4 La propriété defer

Charger un script depuis un fichier externe

Dans les exemples que nous avons montré jusqu'à présent, on placait le code du script dans le code du document HTML. On peut également placer le code dans un fichier séparé, puis faire appel à ce fichier dans le document HTML en utilisant l'attribut src de l'élément SCRIPT.

listing h8.5 Chargement depuis un fichier externe

Dans l'exemple du listing h8.5, le code du script se trouve dans le fichier hours.js.

Texte de remplacement

Si maintenant un navigateur ne supporte pas les scripts que vous avez inséré, vous pouvez fournir un texte de remplacement en utilisant l'élément NOSCRIPT. La balise fermante de cet élément est obligatoire.

1
2
3
4
5
6
7
8

now = new Date();

msg = "<P>Il est " + now.getHours() + ":" + now.getMinutes();

document.write (msg);

</SCRIPT>

<P>Pour connaitre l'heure, rendez-vous sur le site de <A href="http://www.horlogeparlante.com/">l'horloge parlante</A>

</NOSCRIPT>

listing h8.6 Texte de remplacement

Le texte de remplacement est affiché si, soit le navigateur ne supporte pas les scripts, soit le navigateur ne supporte pas le langage de script. Dans notre cas, si le navigateur supporte les scripts et le langage Javascript, il va afficher l'heure, sinon, il affichera un lien vers le site de l'horloge parlante.

Et pour les anciens navigateurs

Certains très anciens navigateurs ne connaissent pas l'élément SCRIPT. Si vous avez mis le code du script dans le document HTML, vous risquez de voir tout ce code apparaitre sur la page rendue par le navigateur, en effet, ne connaissant pas l'élément SCRIPT, le navigateur croira que le code du script fait partie du contenu de la page.

Pour éviter cet effet avec les anciens navigateurs, deux solutions s'offrent à vous : la première est simple et évidente, il suffit de placer le code du script dans un fichier externe comme on l'a vu un peu plus haut.

La seconde solution est plus subtile. On peut mettre au début d'un script les caractère <!==, cette première ligne sera donc ignorée. Ensuite, il suffit de placer en dernière ligne, les caratères --> pour en fait mettre le code du script en tant que commentaire HTML.

La petite astuce subtile est de déclarer ces derniers caractères comme des commentaires dans le langage de script utilisé, afin que cette dernière ligne soit ignorée par les navigateur qui savent exécuter les scripts. Le listing suivant montre un exemple avec Javascript.