Cet extrait de l'ouvrage HTML vous est offert par Micro Application

Retrouvez-en d'autres sur www.microapp.com

10.1  Introduction aux scripts

Les scripts permettent d'augmenter la réactivité et le dynamisme de documents HTML. Par exemple :

   Modifier dynamiquement le contenu d'un document lors du chargement de celui-ci.

   Accompagner un formulaire et valider les données avant la soumission.

   Actions particulières suite à un événement comme le chargement, le déchargement, la prise de focus d'un élément, le mouvement de la souris, etc.

   Action liée aux commandes d'un formulaire (par exemple, les boutons) pour simuler une interface utilisateur graphique.

Cette liste permet de séparer les scripts en deux catégories principales :

   Scripts à action unique : ils sont exécutés une seule fois, lors du chargement du document par l'agent utilisateur. Ils apparaissent dans le document à l'intérieur d'un élément SCRIPT. Pour tenir compte des agents utilisateurs qui ne peuvent pas gérer les scripts, mieux vaut inclure un contenu de remplacement via l'élément NOSCRIPT.

Ces scripts sont capables de modifier dynamiquement le contenu du document. Leurs capacités dépendent du langage de script concerné. La modification dynamique d'un document peut être modélisée comme suit :

   Tous les éléments SCRIPT sont évalués dans l'ordre au fur et à mesure du chargement du document.

   Toutes les structures de script à l'intérieur d'un élément SCRIPT donné, qui génèrent des valeurs SGML de type CDATA, sont évaluées. Leur texte généré combiné est inséré dans le document à la place de l'élément SCRIPT.

   Les données générées de type CDATA sont réévaluées.

Par exemple, imaginons le fragment de document suivant (vous l'étudierez plus en détail par la suite) :

<script language="JavaScript">
<!--
Navigateur = navigator.appName;
if (Navigateur == 'Netscape')
{
document.write("<TD><A href='region_nets.html' ");
}
if (Navigateur == 'Microsoft Internet Explorer')
{
document.write("<TD><A href='region_IE.html' ");
}
document.writeln("target=princ>Ma r&eacute;gion</A></TD>"
//-->
</script>

Considérons que vous l'examinez avec un navigateur de type Netscape, configuré pour accepter les scripts.

1   Le navigateur examine le contenu de l'élément SCRIPT.

2   Comme il s'agit d'un navigateur de type Netscape, c'est le premier cas de l'instruction conditionnelle qui est évalué. Le moteur de script place donc dans le document la chaîne de caractères <TD><A href='region_nets.html', sort de l'instruction conditionnelle, puis insère la chaîne target=princ>Ma r&eacute;gion</A></TD> et sort de l'élément SCRIPT. Le navigateur interprète ensuite la chaîne totale, soit :

<TD><A href='region_IE.html' target=princ>Ma région</A></TD>

S'il s'était agi d'un navigateur Internet Explorer, le résultat aurait été :

<TD><A href='region_nets.html' target=princ>Ma région</A></TD>

Les documents HTML sont contraints de se conformer au DTD HTML avant comme après le traitement de chaque élément SCRIPT.

   Scripts répétitifs : ils sont exécutés chaque fois qu'un événement particulier se produit. Ils peuvent être affectés à un certain nombre d'éléments à l'aide des attributs d'événement intrinsèque, étudiés plus loin.

HTML ne dépend pas d'un langage de script particulier. Les auteurs des documents indiquent explicitement aux agents utilisateurs le langage de chaque script.

Les deux grands langages de script côté client, JavaScript (développé par Netscape) et VBScript (Microsoft), ont mené une bataille féroce afin d’attirer l’attention des développeurs. Microsoft a même développé sa propre version de JavaScript, nommée JScript. Cela s'est traduit à l'époque par une fragmentation croissante des sites Web : une fonction n’était reconnue que par un type de navigateur et partageait le public en deux parties, ceux qui possédaient un navigateur compatible et tous les autres.

Tout ce qui impose aux concepteurs Web de faire un choix quant à la plate-forme de destination est une négation de la technologie et de l’esprit qui régit Internet et le World Wide Web. L’idée originelle était et reste de partager idées et informations, indépendamment de l’ordinateur, du système d’exploitation ou de l’application.

La tendance est toutefois désormais au respect de ECMAScript, une tentative de normalisation du noyau du langage JavaScript et de ses dérivés : sa syntaxe, ses mots-clés et ses composants natifs. La troisième édition du standard ECMA-262 a été publiée en décembre 1999 (www.ecma-international.org/publications/standards/Ecma-262.htm).

Nous reviendrons plus en détail sur ces principaux langages dans la suite de ce chapitre. Pour le moment, intéressons-nous à la façon d'incorporer un script côté client à un document HTML.

10.2  Élément SCRIPT

Vous insérez un script dans un document à l'aide de l'élément SCRIPT, obligatoirement doté de balises d'ouverture et de fermeture. Cet élément peut apparaître un nombre quelconque de fois dans les éléments HEAD ou BODY d'un document HTML.

Par exemple, ajoutons à notre page d'accueil un petit script :

1   Ouvrez accueil.html dans le Bloc-Notes.

2   Modifiez le numéro de version :

<META name="version" content="3.10.1">

3   Insérez, dans l'élément H2 du corps (l'élément BODY), l'élément SCRIPT suivant, en remplaçant ce qui se trouve entre la balise d'ouverture H2 et l'élément EM :

<H2>
<SCRIPT type="text/javascript">
<!--
     document.write("Bienvenue sur ")
</SCRIPT>
-->
<EM>mon</EM> site.</H2>

4   Enregistrez votre fichier, sans modifier son nom, puis ouvrez index.html dans un navigateur. Guère passionnant : l'effet est strictement identique à la version précédente (regardez la Figure 10.1 et comparez-la à la Figure 8.10).

Fig. 10.1 : Votre premier script JavaScript

Ce script JavaScript (remarquez la valeur de l'attribut type) est en effet d'une grande simplicité, puisqu'il ne contient qu'une instruction : document.write signifie « imprimer à l’écran l’information placée entre parenthèses ». Celle-ci étant identique au texte original, aucune différence n'est visible. Autrement dit, ce script est strictement identique à la version précédente du code, soit :

<H2>Bienvenue sur <EM>mon</EM> site.</H2>

Nous reviendrons par la suite sur la signification des lignes <!‐‐ et ‐‐>, mais souvenez-vous qu'il s'agit d'un commentaire HTML.

JavaScript désactivé

Aucune différence n'est visible si, et seulement si, votre navigateur est configuré de façon à autoriser les scripts. Si ce n'est pas le cas, vous obtenez quelque chose de similaire à ce qui est présenté figure suivante.

Fig. 10.2 : Page d'accueil sous Firefox, JavaScript étant désactivé.

Activer JavaScript

Vous activez JavaScript avec Firefox en choisissant Outils > Options. Sélectionnez Général dans la zone de gauche, puis cochez l'option Autoriser JavaScript.

Avec Internet Explorer, les réglages s'effectuent en choisissant Outils > Options Internet, puis en cliquant sur l'onglet Sécurité. Reportez-vous pour plus de détails à la documentation de votre navigateur. Internet Explorer 6 vous informe si une page contient un ou plusieurs script alors que le navigateur n'est pas configuré pour les accepter.

Fig. 10.3 : Message d'Internet Explorer, qui signale que les scripts sont désactivés.

Ce script ne présentant guère d'intérêt, essayons autre chose :

1   Revenez à accueil.html, ouvert dans le Bloc-Notes.

2   Enregistrez le fichier sous le nom accueil_3_10_1.html.

3   Modifiez le numéro de version :

<META name="version" content="3.10.2">

4   Redonnez à l'élément H2 sa forme antérieure :

<H2>Bienvenue sur <EM>mon</EM> site.</H2>

5   Insérez après cet élément le code suivant :

<SCRIPT type="text/JavaScript">
<!--
document.write("<P>Vous utilisez un navigateur " + navigator.appName + "</P>");
 -->
</SCRIPT>

6   Enregistrez votre fichier sous le nom accueil.html, puis ouvrez index.html dans un navigateur. Le résultat est plus intéressant (voir Figure 10.4, 10.5).

Remarquez dans cette figure que Firefox est identifié comme navigateur Netscape. Il est possible d'obtenir plus de détails, en particulier sur la version employée, comme vous le verrez par la suite.

Fig. 10.4 : Affichage du type de navigateur à l'aide d'un script JavaScript

Fig. 10.5 : Affichage du type de navigateur à l'aide d'un script JavaScript

Définition du type de script : déclaration META et attribut type de l'élément SCRIPT

Nous ne le répéterons jamais assez : HTML ne dépend pas d'un langage de script particulier. Vous devez indiquer explicitement aux agents utilisateurs le langage de chaque script.

Vous pouvez spécifier un langage de script par défaut pour tous les scripts d'un document. Pour ce faire, placez la déclaration META suivante dans l'élément HEAD :

<META http-equiv="Content-Script-Type" content="un_certain_type">

La valeur un_certain_type représente le type de contenu qui nomme le langage de script, par exemple text/tcl, text/JavaScript ou text/vbscript.

Un document qui ne spécifie pas de langage de script par défaut et qui contient un ou plusieurs éléments spécifiant un ou plusieurs scripts d'événement intrinsèque est incorrect. Les agents utilisateurs peuvent toujours essayer d'interpréter les scripts spécifiés incorrectement, mais ne sont nullement tenus de le faire.

Vous pouvez également spécifier localement le langage d'un script en définissant l'attribut type de son élément SCRIPT dans le document. La valeur de l'attribut type spécifie le langage de script du contenu de l'élément. Il outrepasse le langage de script par défaut. Le langage de script est spécifié comme type de contenu (par exemple, text/javascript). Il faut fournir une valeur pour cet attribut, qui est dépourvu de valeur par défaut. Cet attribut remplace désormais l'attribut language, qui spécifiait le langage de script du contenu de cet élément à l'aide d'un identifiant du langage. Ces identifiants n'étant pas normalisés, l'attribut est déconseillé en faveur de l'attribut type.

Autres attributs de l'élément SCRIPT

Un script peut être défini en contenu de l'élément SCRIPT (comme dans les exemples précédents) ou dans un fichier externe. L'attribut src spécifie alors l'emplacement du script externe :

<SCRIPT type="text/javascript" src="quelquepart/script.js">

Si l'attribut src n'est pas spécifié, l'agent utilisateur doit interpréter le contenu de l'élément comme étant le script. Dans le cas contraire, l'agent utilisateur doit ignorer le contenu de l'élément et ramener le script désigné par l'URI. Remarquez que l'attribut optionnel charset se réfère à l'encodage de caractères du script désigné par l'attribut src et non au contenu de l'élément SCRIPT.

Quand il est présent, l'attribut booléen defer indique à l'agent utilisateur que le script ne va générer aucun contenu de document (par exemple, aucune instruction document.write en JavaScript). L'agent utilisateur peut donc poursuivre l'analyse et la restitution.

Cas des agents utilisateurs qui ne gèrent pas les scripts

Les scripts sont précieux, mais il serait dommage de fonder un site sur l'exploitation de ceux-ci sans tenir compte des agents utilisateurs qui ne reconnaissent pas les scripts. Deux précautions sont à prendre :

   Fournir un contenu de remplacement aux agents utilisateurs qui ne reconnaissent pas les scripts ou ne sont pas configurés pour les accepter.

   Dissimuler le contenu de ceux-ci pour les agents utilisateurs qui seraient susceptibles d'afficher leur contenu comme du texte.

Nous allons examiner ces deux précautions.

Élément NOSCRIPT

L'élément NOSCRIPT permet de fournir un contenu de remplacement lorsque, pour une raison quelconque, un script n'est pas exécuté. Le contenu de l'élément NOSCRIPT ne doit être restitué par un agent utilisateur reconnaissant les scripts que dans les cas suivants :

   L'agent utilisateur est configuré pour ne pas exécuter (évaluer) les scripts.

   L'agent utilisateur ne reconnaît pas le langage de script invoqué par un élément SCRIPT apparu plus tôt dans le document.

Les agents utilisateurs qui ne gèrent pas les scripts côté client doivent restituer le contenu de cet élément.

Dans l'exemple suivant, l'agent utilisateur qui interprète l'élément SCRIPT va inclure certaines données créées dynamiquement dans le document. S'il ne reconnaît pas les scripts, l'utilisateur peut toujours obtenir les données grâce à un lien.

<SCRIPT type="text/javascript">
 ...un script javascrit qui incorpore des données...
</SCRIPT>
<NOSCRIPT>
   <P><A href="http://quelquepart.fr/données.html">
        Acc&eagrave;s aux donn&eacute;es.
      </A>
</NOSCRIPT>

Grâce à l'élément NOSCRIPT, vous pouvez fournir de précieuses indications à vos visiteurs.

Fig. 10.6 : Exemple de contenu d'un élément NOSCRIPT

Dissimulation des données de script aux agents utilisateurs

La seconde précaution consiste à dissimuler le contenu des scripts. En effet, un agent utilisateur qui ne reconnaît pas l'élément SCRIPT va vraisemblablement restituer le contenu de cet élément comme un texte. Certains moteurs de script, dont ceux des langages JavaScript et VBScript, autorisent la délimitation des déclarations d'un script par un commentaire SGML <!‐‐    ‐‐>. Les agents utilisateurs qui ne reconnaissent pas l'élément SCRIPT ignoreront le commentaire tandis que les moteurs de script intelligents comprendront que le script dans le commentaire doit être exécuté.

Solution alternative

Une autre solution à ce problème consiste à placer les scripts dans des documents externes et à les appeler avec l'attribut src.

Avec JavaScript, vous pouvez employer la chaîne <!‐‐ au début de l'élément SCRIPT : le moteur ignore les caractères suivants jusqu'à la fin de la ligne. JavaScript interprète la chaîne // comme le début d'un commentaire qui s'étend jusqu'à la fin de la ligne courante. Elle est nécessaire pour dissimuler la chaîne ‐‐> à l'analyseur JavaScript (même si celle-ci ne lui pose généralement pas de problème).

Voici un exemple :

<SCRIPT type="text/javascript">
<!—dissimulation du contenu du script aux anciens navigateurs
  function square(i) {
    document.write("L'appel a pass&eacute; ", i ," à la fonction.","<BR>")
    return i * i
  }
  document.write("La fonction a renvoy&eacute; ",square(i),".")
// fin de la dissimulation du contenu aux anciens navigateurs -->
</SCRIPT>

Avec VBScript, c'est le caractère « guillemet simple » qui fait, du reste de la ligne courante, un commentaire. Par exemple :

   <SCRIPT type="text/vbscript">
     <!--
       Sub foo()
        ...
       End Sub
     ' -->
    </SCRIPT>

Vous l'avez compris, le choix du caractère de commentaire dépend du langage de script employé. Avec Tcl, par exemple, ce serait le caractère #, etc.

Fermeture de commentaires

Certains navigateurs referment les commentaires au premier caractère > rencontré. Pour dissimuler le contenu du script à ces navigateurs, vous pouvez transposer les opérandes des opérateurs relationnels et de décalage (par exemple, en écrivant y < x plutôt que x > y) ou employer le mécanisme d'échappement du langage de script pour le caractère >.

10.3  Événements intrinsèques

Chaque langage de script obéit à ses propres règles pour appeler des objets HTML à partir d'un script. La spécification HTML ne définit aucun mécanisme standard d'appel des objets HTML. La syntaxe des données du script dépend du langage de script.

Les scripts doivent toutefois référer à un élément en fonction du nom qui lui est assigné. Les moteurs de script doivent observer la règle de préséance suivante dans l'identification d'un élément : l'attribut name est prioritaire sur l'attribut id si les deux sont présents. Sinon, l'un ou l'autre peuvent être employés indifféremment.

Il est possible d'associer une action à un certain nombre d'événements, qui se produisent lorsque l'utilisateur interagit avec l'agent utilisateur. Chacun des événements intrinsèques prend comme valeur un script :

nom_événement="script"

Evénements intrinsèques

Des modifications vont probablement être apportées aux événements intrinsèques, notamment en ce qui concerne la façon dont les scripts sont rattachés aux événements. Les recherches dans ce domaine sont menées par les membres du groupe de travail sur le Modèle Objet de Document (DOM) du W3C. Consultez le site Web du W3C (www.w3.org/) pour plus de renseignements.

Le script s'exécute chaque fois que l'événement se produit pour cet élément. La syntaxe des données de script dépend du langage de script.

Les événements reconnus par les différents éléments HTML sont présentés dans le tableau suivant.

Tableau 10.1 : Événements intrinsèques HTML
Événement Survient lorsque
Événements concernant les éléments BODY et FRAMESET
onload L'agent utilisateur finit de charger une fenêtre ou bien tous les cadres dans un jeu d'encadrement FRAMESET
onunload L'agent utilisateur retire le document d'une fenêtre ou d'un cadre
Événements de formulaire (élément FORM)
onsubmit Un formulaire est soumis
onreset Un formulaire est réinitialisé
Événements concernant les commandes de formulaire
onfocus Un élément reçoit le focus via le dispositif de pointage ou une navigation par tabulation. S'applique aux éléments A, AREA, LABEL, INPUT, SELECT, TEXTAREA et BUTTON.
onblur Un élément perd le focus via le dispositif de pointage ou une navigation par tabulation. S'applique aux mêmes éléments que onfocus.
onselect L'utilisateur sélectionne un certain texte dans un champ textuel. S'applique aux éléments INPUT et TEXTAREA.
onchange Une commande perd le focus ou sa valeur a été modifiée depuis l'instant où elle a reçu le focus. S'applique aux éléments INPUT, SELECT et TEXTAREA.
Événements génériques. Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE et TITLE.
onclick Le bouton du dispositif de pointage est cliqué au-dessus d'un élément
ondblclick Le bouton du dispositif de pointage est double-cliqué au-dessus d'un élément
onmousedown Le bouton du dispositif de pointage est appuyé au-dessus d'un élément
onmouseup Le bouton du dispositif de pointage est relâché au-dessus d'un élément
onmouseover Le dispositif de pointage est déplacé sur un élément
onmousemove Le dispositif de pointage est déplacé alors qu'il est au-dessus d'un élément
onmouseout Le dispositif de pointage est déplacé en dehors d'un élément
onkeypress Une touche est pressée puis relâchée au-dessus d'un élément
onkeydown Une touche est gardée appuyée au-dessus d'un élément
onkeyup Une touche est relâchée au-dessus d'un élément

Comme vous pouvez le voir, la liste des événements qu'il est possible d'identifier et de relier à une action est impressionnante. Vous pouvez par exemple employer des éléments de commande de formulaire (INPUT, SELECT, BUTTON, TEXTAREA et LABEL), qui répondent tous à certains événements intrinsèques, pour améliorer l'interface utilisateur graphique du document.

Voici quelques exemples d'emploi d'événements intrinsèques.

Nous avions vu, lors de l'examen des formulaires, que certains champs pouvaient être obligatoires, et qu'il était possible de tester la validité des données d'un formulaire avant sa soumission à l'aide de scripts.

Dans le premier exemple, la commande nommée nomUtilisateur est un champ obligatoire. Lorsque l'utilisateur quitte ce champ, celui-ci perd le focus (événement onblur), ce qui appelle une fonction JavaScript qui teste la validité de nomUtilisateur.

<INPUT name="nomUtilisateur" onblur="verifNomUtilisateur(this.value)">

Dans l'exemple suivant, le champ nombre doit normalement contenir une valeur comprise entre 1 et 10. Le code JavaScript suivant vérifie ce fait après la saisie d'un nombre par l'utilisateur :

<INPUT name="nombre"
    onchange="if (!verifNombre(this.value, 1, 10))
        {this.focus();this.select();} else {remercier()}"
    value="0">

Document.write

Une déclaration document.write ou équivalente placée dans un gestionnaire d'événements intrinsèques crée et écrit vers un nouveau document au lieu de modifier le document courant.

Voici enfin un autre exemple d'emploi d'événements intrinsèques. Supposons que nous ayons modifié la barre de navigation en remplaçant le texte par une icône. Pour l'icône correspondant à Accueil, ce pourrait être une icône nommée accueil.gif.

Le fichier de la barre de navigation a été modifié en conséquence (ce fichier se trouve dans les fichiers exemples sous le nom barrenav1.html ; vous devez l'appeler à l'aide du fichier index1.html, également présent) :

<TD><A href="accueil.html" target=princ>
      <IMG src="images/accueil.gif" alt="Accueil" border="0">
      </A>
 </TD>

L'aspect de la barre de navigation, ainsi modifiée, serait quelque chose d'analogue à ce qui est présenté dans la figure suivante.

Fig. 10.7 : Aspect de la barre de navigation modifiée

Imaginez que nous voulions que l'utilisateur visualise encore mieux sa navigation en modifiant l'aspect de l'icône. Pour faire simple, nous nous sommes bornés ici à inverser les couleurs de l'icône, à l'aide de la fonction Négatif de Paint Shop Pro, pour créer un fichier nommé accueil2.gif.

Fig. 10.8 : Aspect des icônes accueil.gif et accueil2.gif

Nous modifions alors comme suit l'élément A qui concerne la page d'accueil, en ajoutant ce qui suit :

<TD><A href="accueil.html" target=princ
     onmouseover="t=acc.src;acc.src=acc.lowsrc"
     onmouseout="acc.src=t"
     >
<IMG name="acc" lowsrc="images/accueil2.gif"
     src="images/accueil.gif" alt="Accueil" border="0">
</A>
</TD>

Ce fichier se trouve dans les fichiers exemples, sous le nom barrenav2.html. En l'examinant dans votre navigateur (en appelant index2.html, également fourni), vous constatez que, lorsque votre dispositif de pointage (en principe votre souris) est placé au-dessus de l'icône Accueil, celle-ci se modifie immédiatement : cela ajoute de l'interactivité et du dynamisme à votre site, pour des efforts somme toute relativement faibles.

Fig. 10.9 : Modification à la volée de l'icône selon que le dispositif de pointage est placé ou non dessus

Ce petit fragment de code mérite que vous l'examiniez d’un peu plus près, pour comprendre ce qui se passe. Il est un peu particulier en ce qu'il n'emploie pas un « vrai » script (vous remarquerez l'absence d'élément SCRIPT), mais a recours au Modèle Objet de Document (DOM) sous-jacent à tout document HTML ou XML bien formé. Regardez d'abord l'élément IMG : vous l'avez nommé (name="acc"), avez laissé l'attribut src défini comme précédemment, mais avez également défini un autre attribut, lowsrc, avec comme valeur la seconde icône.

Dans l'élément A, vous avez ajouté deux gestionnaires d'événements : un pour onmouseover (la souris est sur l'icône) et un pour onmouseout (la souris quitte l'icône).

Par défaut, la souris n'est pas sur l'icône et l'icône affichée est celle qui correspond à la valeur de l'attribut src de l'élément IMG (ou acc.src, puisque cet élément se nomme acc), soit donc celle située à l'URI images/accueil.gif.

Lorsque la souris se place sur l'icône, la valeur de acc.src est placée dans la variable t et est remplacée par la valeur de acc.lowsrc, soit l'URI qui mène à la seconde icône : images/accueil2.gif. L'agent utilisateur applique alors la modification et affiche la seconde icône.

Lorsque le curseur quitte l'icône, la valeur de t est placée dans acc.src et la première icône est à nouveau affichée.

Modèle Objet de Document (DOM)

Le Modèle Objet de Document (DOM), spécification du W3C (http://xmlfr.org/w3c/TR/REC-DOM-Level-1/), est une interface de programmation d'applications (API) pour documents HTML et XML. Il se divise en deux parties : DOM Core (ou noyau) et DOM HTML (les spécifications propres à HTML).

Le DOM définit la structure logique des documents ainsi que la façon dont vous accédez aux éléments et les manipulez. Avec le Modèle Objet de Document, les programmeurs peuvent construire des documents, naviguer dans leur structure, et ajouter, modifier ou supprimer des éléments ou du contenu. Tout ce qui se trouve dans un document HTML ou XML peut être accédé, changé, détruit ou ajouté en utilisant le Modèle Objet de Document, à quelques rares exceptions près. DOM est conçu pour être utilisé avec n'importe quel langage de programmation.

Dans DOM, les documents ont une structure logique comparable à une arborescence. Le nom « Modèle Objet de Document » a été choisi parce qu'il s'agit d'un « modèle objet » au sens traditionnel de la conception orientée objet : les documents sont modélisés en utilisant des objets, tandis que le modèle ne contient pas uniquement la structure du document mais aussi son comportement et celui des objets dont il est composé. En d'autres termes, les nœuds ne représentent pas une structure de données, mais des objets possédant une identité, un comportement et des propriétés. Le DOM contient également les événements associés aux différents éléments du document.

Par exemple, dans l'exemple ci-dessus, DOM contient l'élément HTML A ainsi que les événements associés onMouseOver et onMouseOut. Les attributs des éléments HTML nommés sont traités comme des propriétés de l'objet. Ainsi, vous accédez à l'attribut src de l'élément IMG nommé acc à l'aide de acc.src.

Une étude plus complète du DOM dépasse largement l'objectif de ce livre. Reportez-vous si nécessaire à la spécification du W3C, à l'adresse indiquée en haut de cet encadré.

10.4  Travail avec les scripts

Vous devez l'avoir compris, si insérer un script, interne ou externe, dans un document HTML ne présente guère de difficultés, c'est tout autre chose dès que l'on passe à la rédaction de ces scripts.

Les langages de script sont généralement réputés ne pas être très faciles à apprendre. Si vous souhaitez vous y attaquer, commencez par la syntaxe : c’est la grammaire fondamentale des langages informatiques, de programmation, de script ou hypertextes. Après avoir compris la syntaxe, passez au vocabulaire : les mots réservés et les noms. Par exemple, en quoi un frame JavaScript diffère-t-il d'un FRAME HTML ?

Vous pouvez apprendre un langage de script en utilisant la même méthode que celle dont vous vous êtes servi pour HTML : en achetant un ouvrage consacré au langage qui vous intéresse, en examinant des codes source dans votre navigateur Web, ainsi qu'en menant des recherches dans les listes de diffusion et les forums de discussion.

Sans vouloir plonger trop avant dans l'étude de ces langages de script, il existe une méthode simple et efficace : réutiliser du code.