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:

• Save your file (in hw7).

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"

• save your file.

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.

• save your file

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.

• save your file.
• Congratulations, you have completed part 1 of the assignment.
• Go to JavaScript Assignment Part 2.

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