CogSci 3 - -- JavaScript - Part 1
Due: Saturday, November 21st, 11:59 p.m. 2009
Goals
- Create an XHTML form. (Part 1)
- create a captioned slide show controlled by navigation buttons.
- Learn how to insert JavaScript code into your XHTML documents. (Part 2)
- Learn how to use JavaScript to manipulate parts of your page.
- Learn how to use JavaScript to work with text fields.
Class lectures
- The concepts for this assignment will be presented in class.
Start with getting some images...
- In this assignment, you will be creating a slide show with six images.
- The images need to have some common theme - e.g. vacation, hobbies, movies, books. It would be best (i.e., you'll be happiest with the result)
if the images were all about the same size.
- Place all of the images in your hw7 folder.
- For each of the images, you will need to
write a caption that is appropriate. You might want to keep
notes about which caption will go with each image.
- Note: it is great to be creative, but if there is anything that is rude or inappropriate, you will get zero for this assignment.
Part 1: cg3fzz-java-1.html (create the table)
- Use notepad++ to create a new xhmtl
document called:
cg3fzz-java-1.html.
- Make a <h2> heading describing your slide show.
- Make a <title> describing your slide show.
- Create a 1 column by 2 row table without a border.
- Use the following element: <div align="center"> ... </div> around your heading and table so that they are centered.
for example:

- The first row of your table should have the following phrase: "This is where the photo goes"
- The second row, should have:
"This is where the caption goes" <br />
" This is where the previous photo and next photo buttons go" <br />
" This is where the slide number goes" <br />
- By now, your table should look like this:

Add the <img /> element (where the photo goes)
- In the first row, instead of the text "This is where the photo goes" put in your <img /> element.
- The src attribute value is the URL of your first photo (in your hw7 directory).
- The alt attribute value should be the following text: "Slide show images appear here.".
- The name attibute value should be "slideframe"


Add the <form> ... </form> and <textarea> .... </textarea> elements (where the caption goes)
The form will contain three parts --- the caption (textarea element), the buttons (type="button"), and the slide number (type="text").
- This section will focus on the caption using the <textarea> ... </textarea> element.
- The form name attribute value should be: "slidecontrols".
- The textarea name attribute value should be: "caption"
the textarea
rows attribute value should be: "2"
the textarea cols attibute value should be: "50"
- Provide an appropriate caption.


Add the "Previous Slide" and "Next Slide" buttons. <input type="button" ... />
- You will have two buttons next to each other.
- Use the <input .... /> element for each button within the form for the caption.
- They both should have the input attribute type value "button".
- The first <input type="button"> should have the the attribute "value" set to "Previous Slide.
- The second button should have its value set to "Next Slide"


Add the Slide Number using the <input ... /> element
- Again, inside the <form> ... </form> element, add a new paragraph (to gain vertical space).
- Type in: Slide Number
- Use the <input ... /> element for the Slide Number.
- The input element type attribute value should be "text".
- The input element value attribute should be "1" (set a current value).
- The input element name attribute value should be "currentslide"
- The input element size attribute value should be "5"
- Clean up the "This is where..." place holder statements.


Copyright 2006, Mary E.T. Boyle
Modified November 2007, mrw