src/01/index.html src/01.jar (xhtml + JavaScript + css + images) 2

(1)

Structures, techniques et normes du Web (CSI 3540)

CSI 3540 - Laboratoire 7

* Objectifs

- Introduction à la gestion des événements du DOM niveau 2 - Comprendre les trois phases de gestion, capture, cible et bouillonnement

- Savoir utiliser la gestion des événements afin de valider

les informations des formulaires avant d'envoyer l'information au serveur

Note: Utilisez Firefox, Chrome, Safari ou tout autre navigateur qui implémente le DOM de niveau 2.

1. Vous devez modifier la page ci-dessous (ajout de JavaScript et CSS si nécessaire) afin que l'élément au-dessus duquel se trouve la souris soit mis en évidence.

Assurez de remettre l'élément tel qu'il était lorsque la souris se sera déplacée vers un autre noeud du DOM et assurez-vous que vos modifications n'interfèrent pas avec les fonctionnalités existantes de la page.

Pour cette question, vous devez utiliser des gestionnaires en phase 'target'.

src/01/index.html

src/01.jar (xhtml + JavaScript + css + images)

2. Reprenez la question ci-haut, mais cette fois-ci n'utilisez qu'un seul gestionnaire (pour chaque type d'événement). Expérimentez avoir les modes capture et bubbling. Dans ce cas-ci, est-ce que l'un ou l'autre de ces deux modes est favorable?

3. Modifier le formulaire de recherche ci-dessous : src/03/index.html

src/03.jar (xhtml + css + images)

3.1 L'information ne doit pas être transmise au serveur si le champ est vide.

3.2 Il faut choisir par l'une des options de recherche possible.

3.3 Si l'option « téléphone » a été sélectionnée, assurez-vous que le format du numéro de téléphone est correct. Si le format est

erroné, n'envoyez pas l'information au serveur, modifié le DOM afin

http://www.site.uottawa.ca/~turcotte/teaching/csi-3540/lectures/lab-07/index.html (1 sur 3)20/01/2018 19:14:50

(2)

d'y ajouter un message d'erreur, sélectionnez le champ pour l'entrée de données.

3.4 Si l'option « poste téléphonique » a été sélectionnée,

assurez-vous que le format est correct. Si le format est erroné, n'envoyez pas l'information au serveur, modifié le DOM afin d'y ajouter un message d'erreur, sélectionnez le champ pour l'entrée de données.

4. Adaptez l'exemple du menu déroulant du chapitre 5 du livre du cours afin de le transformer en menu pour la sélection de valeurs associées à un champ de type texte d'un formulaire.

Au prochain laboratoire, vous pourrez modifier cet exemple afin que les valeurs soient obtenues dynamiquement du serveur à l'aide de Ajax.

Voici l'exemple du chapitre 5: DropDownMenu.html, DropDownMenu.js.

5. Travaillez sur la partie 3 du projet

* Projet(s)

Développez une calculette à l'aide de JavaScript et du DOM.

* Liens(s)

Voici un petit exemple de l'utilisation de JavaScript, du DOM, mais aussi du nouvel API de HTML5 pour la sauvegarde d'information côté client (à essayer à l'aide d'un navigateur basé sur Webkit, donc

(3)

Chrome ou Safari):

http://webkit.org/demos/sticky-notes

* Ressources

developer.mozilla.org/en/Core_JavaScript_1.5_Guide

www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.

html

www.yoyodesign.org/doc/w3c/dom2-core/Overview.html www.yoyodesign.org/doc/w3c/dom2-events/Overview.html www.yoyodesign.org/doc/w3c/dom2-html/Overview.html www.yoyodesign.org/doc/w3c/dom2-style/Overview.html

www.yoyodesign.org/doc/w3c/dom2-traversal-range/Overview.html