CogSci 3 - JavaScript Assignment - Part 2
Due: Saturday November 21st, 11:59 p.m. 2009

Goals

Create an XHTML form. (Part 1)
To learn how to place JavaScript code into your XHTML documents. (Part 2)
To understand the principles of using Javascript to interact with form fields.
To understand how to create a captioned slide show controlled by form buttons.

Class lectures

The concepts for this assignment will be presented in class.

Part 2: cg3fzz-java-2.html

Copy cg3fzz-java-1.html to cg3fzz-java-2.html in your hw7 folder. cg3fzz-java-1.html becomes a backup file.
Open cg3fzz-java-2.html in Notepad.
You will be working in the <head> ... </head> section of your xhtml document.
The <script language="javascript" type="text/javascript"> goes first. Don't forget the </script> tag.
When writing JavaScript code, you will need to enclose it within xhtml comments, as older browsers don't always understand JavaScript.
Recall, xhtml comments:

Before we go any further

We are going to give you different snippets of Javascript code to enter. You can't actually test any of it until all of the Javascript has been entered. It's entirely possible to enter some syntactically incorrect Javascript early on and not realize that it's in error. The syntax error(s) will keep your page from working properly when you finally do test it at the end. And then you will have put in so much stuff (code) it will be hard to know where to look for the error.

So we suggest that you use the browser Firefox. In the Firefox Tools menu, there is an "Error Console". Select that and it will show you any Javascript syntax errors! (Actually it will show you CSS syntax errors too. )

First, open your page in Firefox. You will probably have to either right click on your .html document and then use "Open with Firefox", or having started Firefox, use File->Open File... and browse to your .html file.
Then, select Tools->Error Console, and a new window will open. (and keep it open while you work)
Use the Clear button on the Error Console window to clear any errors.
Then reload your page in Firefox
Switch to the Error Console (Alt+Tab ?) and see if there are any errors. There shouldn't be any at this point.
Now, as you work through the assignment, each time you add some Javascript code to your .html page:
- Save your changes
- Reload your page in Firefox
- Switch to the Error Console and check for errors
- If there are errors, see if you can figure them out before continuing on. It will make your life much easier if you do.
- When there are no errors indicated, continue on with the assignment.

Declare an array called mySlides

Arrays, in Javascript, typically start with index 0, however, for simplicity in this assignment, we will pretend that they start with 1.
Recall, every statement in JavaScript needs to end with a semi-colon.
The browser leads the <head> section of the document, and stores six new image objects in an array called mySlides.
The .src property of each image will be set to the name of a .jpg file located in the same directory. I.e., creating a relative URL.
This step effectively preloads all the images (so they don't take a noticeable time to load the first time you show each slide).

Load all of the images into the mySlides array -- and create myCaptions array.

Each of the images is associated with an array element (indexes 1 through 6).
By using the src property of images, we point to the specific name of the image file in the current directory. This actually causes the browser to load that image into its cache ready to be viewed.
Next, declare another new array - this one is named: myCaptions.
- Load the array elements with a text caption that would be associated with the picture.

Global Variables - slidenumber and totalslides

Next, the global variable, slidenumber, is created to hold the number of the current slide.
A second global variable, totalslides, is created to hold the total number of slides in the presentation.
Because element 0 of the mySlides array was not used, we must subtract 1 from the length of the array to determine the number of slides.

Writing the function - showSlide(direction)

A function is a group of JavaScript statements that performs a designated task. Functions are often defined in the <head> section of an XHTML document and do their work when invoked (called) by other JavaScript statements.
A function always begins with the word: function and is then followed by the name of the function and a pair of left and right parentheses that contain any parameters that are passed to the function..
The left and right curly braces { and } are used to contain the statements of the function.

Add JavaScript comments to the XHTML comments when finishing the script!!

(double slashes) // are comments in JavaScript
Recall, the JavaScript script was enclosed in XHTML comments to accommodate early browsers.
You need to make sure that JavaScript does not hiccup when it comes to the closing --> XHTML comment.
In order to do this, just put the // before it.

Modify the form buttons (previous and next) --- so that when you click on them, they call the JavaScript function.

Go down to the XHTML code that you completed in part 1 of this assignment.
Go to the <input type="button" ... > line in the form.
You need to add an event handler to these buttons when the buttons get clicked.
For the previous button, the onclick event handler should call showSlide function and pass 'previous' as the value of its parameter.
For the next button, the onclick event handler should call showSlide function and pass 'next' as the value of its parameter.

Note: in the figure above, the last <input element needs to have a closing />, of course.

done!
save your file
make sure that it works-- enjoy!
if it doesn't work, check the Firefox Error Console for errors and fix those and try it again.
you should have two html files in your hw7 directory: cg3fzz-java-1.html and cg3fzz-java-2.html
you should have six image files in your hw7 directory that are directly related to this assignment.

CogSci 3 - JavaScript Assignment - Part 2 Due: Saturday November 21st, 11:59 p.m. 2009