Structures, techniques et normes du Web (CSI 3540)
CSI 3540 - Laboratoire 6
1. Rappel au sujet de l'échéance pour la partie 2 du projet!
2. Étudiez l'application Puzzler Puzzler
Puzzler.zip
Ce programme tourne sous Firefox! Il est programmé à l'aide de JavaScript et du DOM En particulier,
- Notez comment la page XHTML est créée
- Comment les gestionnaires sont associés aux cellules - Etc.
3. Créer une application pour la gestion de tâches («To Do List») 3.1. Créez l'aspect statique/visuel de l'application
Voir Jot.pdf ou todo
Afin de rendre l'exercice plus complet, utilisez une feuille de style pour contrôler les principaux paramètres liés à l'aspect visuel de l'application.
3.2 Ajoutez une option afin de changer la taille des polices de caractères Associez des gestionnaires d'événements, écrit en JavaScript, afin de changer la taille du texte.
3.3 Implémentez l'ajout d'items
Il y a en haut de l'écran une zone input et un bouton Add. À chaque fois que le bouton add est cliqué, l'application ajoute un nouvel élément à une liste (<ol>). Il faut donc 1) saisir le contenu de la zone d'entrée, 2) mettre à blanc cette zone, 3) créer un nouvel
élément, 4) l'ajouter à la suite du dernier élément de la liste <ol>.
3.4 Ajoutez un bouton print
Lorsqu'on appuie sur le bouton, la page s'imprime...
3.5 Fonctions de mise à jour de la liste
- Ajoutez des boutons 'Delete', 'Up' et 'Down'.
- Lorsque l'usager clic sur une tâche, l'action correspondante est effectuée sur cet élément. Si 'Delete' est sélectionné et que l'usager clic sur la deuxième tâche, celle-ci est retirée de la liste.
http://www.site.uottawa.ca/~turcotte/teaching/csi-3540/lectures/lab-06/index.html (1 sur 3)20/01/2018 18:56:52
Structures, techniques et normes du Web (CSI 3540)
4. ( Optionnel ) Calculette JavaScript
Vous devez concevoir une calculette à l'aide de JavaScript et du DOM.
5. ( Optionnel ) Charte de couleur
Vous devez concevoir un programme JavaScript/DOM qui construira une table de couleur. La méthode makeColorChart( increment ) crée et insert la table dans un document HTML. La méthode crée une cellule par couleur, le fond de la cellule aura la couleur donnée, et on doit créer toutes les couleurs possibles selon l'incrément donné en
paramètre:
makeColorChart( 20 )
Créera un tableau, dont les cellules auront les couleurs suivantes:
RGB( 0, 0, 0 ) RGB( 0, 0, 20 ) ...
RGB( 0, 0, 255 ) RGB( 0, 20, 0 ) RGB( 0, 20, 20 ) ...
RGB( 0, 20, 255 ) ...
Ideallament, la méthode makeColorChart assignera un gestionnaire d'événement pour chaque cellule, et ce dernier à l'aide l'un appel à la fonction alert affichera la couleur de cette cellule.
* 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
http://www.site.uottawa.ca/~turcotte/teaching/csi-3540/lectures/lab-06/index.html (2 sur 3)20/01/2018 18:56:52
Structures, techniques et normes du Web (CSI 3540)
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
* Lien intéressant www.tiddlywiki.com
http://www.site.uottawa.ca/~turcotte/teaching/csi-3540/lectures/lab-06/index.html (3 sur 3)20/01/2018 18:56:52
