COAP:COAP-2100/week6: Difference between revisions

Revision as of 15:44, 13 February 2011

We shall have a (superficial) look at key elements of client-side web page interactivity

(Whort) mid-term exam feedback
JavaScript lecture using Javascript tutorial - basics
DHTML lecture (part I) and some JavaScript hands-on, i.e. code modification of examples shown in the DHTML tutorial:
- tree-walking2.html (save link as)
- tree-walking3.html(save link as)

HW feedback
Term projects (short Q/R)
DHTML lecture (part II, if needed)
HTML forms lecture (only parts) and hands-on. Modify the following example. Save both files on your local computer !
- 2-xhtml-radio-buttons.html (save as !)
- 2-xhtml-radio-buttons.js

Create a DHTML page that has a least one button allowing the user to change a style or something else in a page
You may reuse code from the DHTML page starting from the Collections and creation of elements section. "May reuse" means of course that you can code your own or build on top of other code (but if you choose the latter, make sure to give credits somewhere, e.g. in the code)

Create a page with real contents and implement DHTML changes that make sense for a given target population.
Add some extra CSS style
Explain somewhere in the page what pressing the button(s) will do or at least make the button labels self-explaining.

@@ Line 21: / Line 21: @@
 ; Monday
-* Exam feedback
+* (Whort) mid-term exam feedback
 * JavaScript lecture using [[Javascript tutorial - basics]]
-* Some JavaScript code modifications
+* [[DHTML]] lecture (part I) and some JavaScript hands-on, i.e. code modification of examples shown in the [[DHTML]] tutorial:
+** [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking2.html tree-walking2.html] (save link as)
+** [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking3.html tree-walking3.html](save link as)
 ; Wednesday
 * HW feedback
-* Term projects
+* Term projects (short Q/R)
-* [[DHTML]] lecture
+* [[DHTML]] lecture (part II, if needed)
-* Code modification to examples shown in the [[DHTML]] tutorial
+* [[HTML forms tutorial|HTML forms]] lecture (only parts) and hands-on. Modify the following example. Save both files on your local computer !
-I suggest to pick:
+** [http://tecfa.unige.ch/guides/js/ex/coap/week-3/2-xhtml-radio-buttons.html 2-xhtml-radio-buttons.html] (save as !)
-* [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking3.html tree-walking3.html](save link as)
+** [http://tecfa.unige.ch/guides/js/ex/coap/week-3/2-xhtml-radio-buttons.js 2-xhtml-radio-buttons.js]
-If you want something slightly simple (only change colors):
-* [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking2.html tree-walking2.html] (save link as)
 ==== Homework 5 ====