CS301 Fall 2007 Homework
#4
Javascript, CSS, Dynamic HTML
Due 10/3/2007
Goal:
- Learn how
to write Javascript for checking the form input.
- Learn how to learn
how to combine Javascript with CSS to create dynamic HTML web page.
Assignment
Date: 9/24/2007
Due Day: 10/3/2007
Description:
1. Use Javascript to check form
input.
2. Using Javascript and DOM to improve the web access performance
-
Follow the example
in http://cs.uccs.edu/~gsc/UCCSNetworkSecurity.htm to create a web page
that displays the embedded content based on the button which the user
clicks. For example, in http://cs.uccs.edu/~cs301/hw/hw4/ we have sample web pages of a "fake" company, default.htm, product.htm, download.htm, techsupport.htm, you can merge them as a single web page with faster response time when switches the content. Here is a partial done merged web page, secureAccess.html. You can copy these web pages to your own cs301 directory and finish secureAccess.html or create a company web page similar to this.
Note that in Javascript when you have string spams multiple lines, we need to put '\' behind each line except the last line. '\' need to be the last character, if you have a space behind it, the browser will complain. It will be very difficult to debug since the space is invisible.
3. Create Dynamic HTML web page.
- You have two choices
here. Let me know if you want to substitute with other DHTML
web page you would like to work on.
- Create a class photo
album web page that shows one student's photo image one at a time similar to the slide show slide2.html, each
with x seconds. Creaet buttons to stop displaying and to allow the change
of x values. Here is the list of student login:
cbeckma2 abrunner bcable cflesia cgreenma chaggen mhankins rjohnso7 tmai apaschal jpeet ayoung5 chow
Their photo images can be referenced as http://cs.uccs.edu/~cs301/images/F2007/<login>.jpg
- You can also substitute
with a slide shows displaying photo collection of yours. See the example
at http://cs.uccs.edu/~cs301/js/example/slide3.html.
I just revised original slide.html and use an array to save the list of
slide name and corresponding images. It uses the same getElementById()
function following the Document Object Model supported by both IE version
6 and Netscape 7.2.
Semester Project Idea: Photo Album Utility.
You can extend the above exercise by creating
- a
script/program
that creates a web page for displaying all photo images in a directory.
- a
script/program
that creates a web page for creating title and annotating of the images
for the above web page.
Using the dropbox on e-companion to submit your hw4.
