COAP:COAP-2100/week6

COAP 2100

COAP 2100 Archive

COAP:COAP-2100

COAP:COAP-2100/exams

COAP:COAP-2100/term project

COAP:COAP-2100/week1

COAP:COAP-2100/week2

COAP:COAP-2100/week3

COAP:COAP-2100/week4

COAP:COAP-2100/week5

COAP:COAP-2100/week6

COAP:COAP-2100/week7

COAP:COAP-2100/week8

Week 6 COAP 2100

Topics Covered

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

• HTML forms
• JavaScript
• DOM
• DHTML (HTML + DOM + JavaScript + CSS)

Teaching materials

• Javascript tutorial - basics
• DHTML
• HTML forms tutorial (only parts)
• DOM (just some links)

Classroom activities

Monday

• (Short) mid-term exam feedback
• JavaScript lecture using Javascript tutorial - basics
• Code modification of examples shown in the DHTML tutorial:
  • tree-walking2.html (save link as)
  • tree-walking3.html(save link as)
• Additional reading for those who are curious: DHTML

Wednesday

• No HW feedback (will be done on week 7)
• Term projects (short Q/R)
• HTML forms lecture (only parts) and hands-on.
  • Play with Kompozer or another HTML editor (adding some forms)
  • Modify the following example. Save both files on your local computer ! If you use Kompozer, you may have to edit in the Source Window since positioning the cursor after a form element seems to be difficult. You also might consider installing Kompozer 0.8beta which includes a split interface. Do not use Kompozer to edit JavaScript files. Use any programming editor you like, e.g. HTML Notetab.
  • 2-xhtml-radio-buttons.html (save as !)
  • 2-xhtml-radio-buttons.js

Homework 6

Due

• Before Monday week 7 class

Submission

• Submit the files to the worldclassroom.

Final exam

• There will be some minimal JS testing in the final exam. However, I require neither that you understand programming principles nor technical DOM details. However, I may ask you to be able to make very small changes in JS code or to adjust some HTML forms code (radio buttons).

Pick either option A or option B !

Option A

Task

• 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. For example, take either one
  • tree-walking2.html (just color change)
  • tree-walking3.html

You also can take code made by someone else. In this case, dot not forget to quote the source and to insure that you are allowed to reuse it. There is a fine line between plagiarism and reuse .....

To get an A

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

Option B

• Create a simple quiz with JavaScript (including mine, i.e. the files we used in class)
• You may use code from any source, but it must work with modern browsers, quiz contents must be your own and you must explain what you did change

To get an A

• Create a small, but useful quiz
• Add some extra CSS style
• Care for usability and user experience, e.g. add some introductory text and make sure that the feedback is understandable.
• Give credits in a proper way if you reuse materials and contents from another web site.