L'interaction côté client

XHTML possède un moyen puissant d'interagir avec le visiteur en ajoutant et intégrant des scripts dans diverses parties de la page. Bien qu'en théorie, on pourrait utiliser plusieurs langages de scripts, ce n'est que l'implémentation de la norme ECMAScript qui s'est répandue dans la majorité des navigateurs: le javascript. Je ne parlerai donc que de cette implémentation dans cette section du tutoriel.

À l'aide, de javascript on peut transformer, accéder ou analyser une page XHTML grâce aux modèles objets (DOM) qui définit d'une façon complète les objets, attributs et propriétés que possèdent un document. On peut aussi ajouter des procédures qui seront appelées et déclenchées par des évènements du visiteur ou du navigateur.

Regardons donc à quel endroit on peut ajouter des bouts de code javascript à l'intérieur d'un document XHTML.

La balise <script>

La balise <script> permet d'insérer un script qui est inclu à l'intérieur du document où dans un fichier externe à la page XHTML. Il existe trois syntaxe pour insérer un script: 

  1. <!-- Syntaxe standard -->
<script type="text/javascript">
/** déclaration de code javascript à l'intérieur du document XHTML */

// <![CDATA[ 
On peut insérer des caractères comme &, < et > à l'intérieur des blocs CDATA 
// ]]>
</script>

  2. <!-- Syntaxe pour inclure un fichier externe .js. -->
<script type="text/javascript" src="nomdufichier.js"></script>

  3. <!-- Syntaxe courte
     Avertissement: cette syntaxe n'est valide que dans des 
                    documents envoyé en mode XML soit de type: 
                    application/xml, text/xml ou application/xhtml+xml
-->
<script type="text/javascript" src="nomdufichier.js" />

Dans le code XHTML, on peut définir des constantes, des fonctions, créer des objets, etc.

Les balises <script> peuvent être inscrites à l'intérieur des balises <head>, <body>, les balises de type bloc ou en-ligne.

Il faut noté que les documents envoyés en mode XML ne se comporte pas de la même façon que les documents XHTML envoyés en mode HTML. Ainsi, l'instruction suivante document.write('text') ne fonctionne pas en mode XML. Il faut utiliser les instructions du DOM XML, soit document.createElement('nomBalise') et ainsi de suite.

La balise <noscript>

La balise <noscript> permet d'insérer du texte ou un bout de code XHTML qui sera affiché par un navigateur ne supportant pas les scripts. On peut penser au navigateur texte Lynx. Habituellement, on le retrouve à la suite de la balise script.

Les attributs d'évènements

Les balises XHTML possèdent des attributs-évènements. Il s'agit d'attribut qui permettent d'ajouter des bouts de scripts et qui sont exécutés lorsque l'évènement correspondant est déclenché par le visiteur ou le navigateur. Voici des évènements communs qui peuvent être déclenchés sur la majorité des balises.

  • onclick : se déclenche lorsque l'usager clique sur un élément.
  • ondblclick : se déclenche lorsque l'usage double-clique sur un élément.
  • onmousedown : se déclenche lorsque l'usager appuie sur un bouton de souris.
  • onmouseup : se déclenche lorsque l'usager relâche un bouton de souris.
  • onmouseover : se déclenche lorsque l'usager place sa souris par dessus un élément.
  • onmousemove : se déclenche lorsque l'usager déplace sa souris par dessus un élément.
  • onmouseout : se déclenche lorsque l'usager enlève sa souris d'un élément.
  • onkeypress : se déclenche lorsque l'usager tape une touche de clavier.
  • onkeydown : se déclenche lorsque l'usager appuie sur une touche de clavier.
  • onkeyup : se déclenche lorsque l'usager relâche une touche de clavier.

Il existe d'autres attributs-évènements qui sont spécifiques à certaines balises. Par exemple, le corps du document (body possède les évènements onload et onunload, les éléments d'un formulaire ou les liens possèdent l'attribut onfocus, un formulaire possède les évènements onsubmit et onreset, etc. Il suffit de consulter la liste des attributs de chacune des balises pour les connaîtres.

Annuler le comportement normal d'une balise

On peut annuler comportement normal d'une balise, en javascript, en utilisant l'instruction return false;. Par défaut, les évènements retournent une valeur vraie qui indique que la balise peut continuer son exécution normale. Voici des exemples:

Clique sur un lien

<!-- Comportement normal: l'usager clique sur le lien et la nouvelle page s'affiche. -->
<a href="page.htm">Page</a>

<!-- 
Comportement modifié: l'usager clique sur le lien, une boîte de dialogue 
avec le message 'allo' s'affiche. Puis, la nouvelle page s'affiche.
L'évènement onclick="" est déclenché avant la redirection de l'attribut href. 
 -->
<a href="page.htm" onclick="alert('allo');">Page</a>

<!-- 
Comportement annulé: l'usager clique sur le lien, une boîte de dialogue 
avec le message 'allo' s'affiche. Rien d'autre se produit.
L'instruction return false; a annulé le comportement normal de la balise. 
 -->
<a href="page.htm" onclick="alert('allo');return false;">Page</a>

<!-- 
Comportement annulé mais accessible pour les usagers sans javascript
Si l'usager possède javascript, une fenêtre popup est affichée avec 
l'instruction window.open().
L'élément javascript this.href représente l'attribut href de la balise a.
Si l'usager ne possède pas javascript, la page "page.htm" est affichée.
 -->
<a href="page.htm" onclick="window.open(this.href);return false;">Page</a>

Soumettre un formulaire

<!-- Comportement normal: l'usager clique sur le bouton soumettre, 
        le formulaire est envoyé -->
<form method="get" action="page.php"><div>
 <p><input type="text" name="txt1" value="" /></p>
 <p><input type="submit" value="Envoyer" ></p>
</div></form>


<!-- Comportement modifié: l'usager clique sur le bouton soumettre, 
        le formulaire est envoyé si javascript est activé
        et si la valeur de l'élément txt1 n'est pas vide.
        car (this.txt1.value!='') retourne vrai ou faux.
        return true : envoie le formulaire
        return false : n'envoie pas le formulaire

        si javascript n'est pas activé, alors le formulaire est envoyé
        rappel: javascript ne sert pas à valider des champs pour éviter
                des données erronées dans les scripts du côté serveur, il
                sert à améliorer l'expérience utilisateur et éviter
                des rafraîchissement inutile de la page pour les navigateurs 
                qui peuvent utiliser le langage côté client.
 -->
<form method="get" action="page.php" onsubmit="return (this.txt1.value!='');"><div>
 <p><input type="text" name="txt1" value="" /></p>
 <p><input type="submit" value="Envoyer" ></p>
</div></form>

Accès à la représentation javascript d'une balise

On peut accéder à la représentation 'javascript' d'une balise à l'intérieur d'un attribut-évènements avec le mot-clé this. Voici quelques exemples

<body><div>
 <p title="premier paragraphe" onclick="alert(this.title);">
  Lorsqu'on clique sur ce paragraphe, une boîte de dialogue affiche l'attribut title.
 </p>

 <p>
  Lorsque l'image a terminée de se charger, une boîte de dialogue affiche
  la source et la description de l'image.
  <img src="image.png" alt="image du document" onload="alert(this.src + ':' + this.alt);" />
 </p>

 <p>
  Lorsque l'usager sort du champ texte et que la valeur a été modifiée,
  on exécute trois fonctions quelconques en envoyant la valeur et le nom du champ
  on peut aussi envoyé le champ lui-même ou le formulaire.
  <input type="text" name="nomChamp" value="test" 
         onchange="fonctionA(this.name, this.value); 
                   modifieChamp(this); 
                   modifieFormulaire(this.form);" />
 </p>

</div></body>

Conclusion

Il ne s'agit que de quelques éclaircissements sur l'utilisation de scripts intéractifs dans un document XHTML. Le sujet est beaucoup plus vaste et demande beaucoup plus d'exemples pour comprendre toutes les possibilités offertes. Il est bon de se rappeler que chaque attribut et balise peuvent être créer, modifier, supprimer grâce aux méthodes définies dans la norme DOM du W3C. On peut donc écrire de A à Z un document XHTML à l'aide de javascript. On pourrait aussi utiliser javascript pour produire une table des matières à l'aides des balises h1, h2 et h3 contenu dans le document. Noter que même le CSS peut être modifié en javascript.

Précédent | Table des matières

Lire les commentaires | Laisser un commentaire