ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Dynamic Documents with JavaScript ======

**Adapted from**: Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. **Supporting**: [[eg-259:lecture10|Lecture 10]]. 

===== 1. Exercises from the Lecture =====

//Write, test, validate, and debug (if necessary) the following documents//:

  - The document must have a paragraph of at least 10 lines of text that describe you. This paragraph must be centered on the page and have space for only twenty characters per line (that is ''20em'' wide). A light-grey image of yourself must be superimposed over the centre of the text as a nested element. 
  - Modify the document described in Exercise 1 to add four buttons. These buttons must be labeled //Northwest//, //Northeast//, //Southwest//, and //Southeast//. When they're pressed, the buttons must move your image to the specified corner of the text. Initially, your image must appear in the //northwest// (upper left) corner of the text. 
  - The document must have a paragraph of text that describes your home. Choose at least three different phrases (three to six words) of this paragraph and make them change font, font style, colour, and font size when the mouse cursor is placed over them. Each of the different phases must change to different fonts, font styles, colours and font sizes. 
  - The document must contain four short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can always be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. 
  - The document must have a small image of yourself, which must appear when the mouse button us clicked at the position of the mouse cursor, regardless of the position of the cursor at that time. 
  - The document must contain the statement "save time with TIMESAVER 2.2", which continuously moves back and forth across the top of the display. 
===== 2. Homework Exercises =====

Some variations on a theme for you to try.

//Write, test, validate, and debug (if necessary) the following documents//:

  - Modify the document described in Exercise 1.2 to make the buttons toggle their respective copies of your image on and off so that, at any time, the document may include none, one, two, three, or four copies of your image. The initial document should have no images shown. 
  - The document must display an image and three buttons. The buttons should be labeled simply 1, 2, and 3. When pressed, each button should change the content of the image to that of a different image. 
  - Modify the document of Exercise 1.4 so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom. 
  - Modify the document of Exercise 1.6 to make the statement change color between red and blue every fifth step of its movement (assuming each move is 1 pixel long). 

----

[[eg-259:homework:home|More Homework Exercises]]