US

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>
 
        <!-- Premier script écrit en JavaScript -->
        <SCRIPT type="text/javascript">
        function message()
        {
            window.alert ('Message intéressant');
        }
        </SCRIPT>
 
    <BODY>
        <!-- Second script écrit en VBScript -->
        <SCRIPT type="text/vbscript">
        Function message
            MsgBox "Message intéressant", 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>
 
        <SCRIPT type="text/javascript">
        function message()
        {
            window.alert ('Message intéressant');
        }
        </SCRIPT>
 
    <BODY>
        <FORM>
            <P align="center"><INPUT type="button" value="Cliquez ici !" onclick="message();">
        </FORM>
listing h8.2 Réagir au clic sur un bouton
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.

1 
2 
3 
4 
5 
<SCRIPT type="text/javascript">
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.

1 
2 
3 
4 
5 
6 
<SCRIPT type="text/javascript" defer>
function message()
{
    window.alert ('Message intéressant');
}
</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.

1 
<SCRIPT type="text/javascript" src="hours.js"></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 
<SCRIPT type="text/javascript">
now = new Date();
msg = "<P>Il est " + now.getHours() + ":" + now.getMinutes();
document.write (msg);
</SCRIPT>
<NOSCRIPT>
    <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.

1 
2 
3 
4 
5 
6 
7 
<SCRIPT type="text/javascript">
<!--
now = new Date();
msg = "<P>Il est " + now.getHours() + ":" + now.getMinutes();
document.write (msg);
//-->
</SCRIPT>
listing h8.7 Cacher les scripts pour les vieux navigateurs

En VBScript, on utilisera '--> et enfin, en #--> en Tcl.

  • Espace membre
  • Learning Center
  • Les forums
  • Livre d'or
  • Imprimer
  • Boutique
  • Info
  • Règlement
  • Erreur
  • Newsletter

MyPagerank.Net

Firefox 3.6

Browse Happy logo

Open Clip Art Library

Join our Facebook Group

Twitter

Copyright © 2000-2017 UKO. Toute reproduction strictement interdite sans autorisation du webmaster

Valid XHTML 1.1 !
Valid CSS2 !
Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0
ICRA Internet Content Rating Association
Creative Commons License
Site optimisé pour Firefox avec une résolution 1024x768 --- Page chargée en 0.0689631 secondes --- This site uses Thumbshots previews