CSE 3 Fluency in Information Technology, UCSD, Winter 2004

Laboratory 4: To be done in your lab section in the week of January 26

Suggested reading: Snyder book, Chapters 18 & 19.

REQUIRED reading: Do the tutorial at

http://www.webteacher.com/javascript/

Required supplies: You must bring two “IBM formatted” diskettes containing your work from the previous lab.

Exploring JavaScript

This is an exercise in dynamically changing pictures on

a webpage using JavaScript.

All files will be provided by your proctor

(except for the ones you write of course).

animation1.html

animation1.html is provided for you. Get a copy from your

proctor. animation1.html is a webpage with a

a JavaScript program that changes the picture displayed.

Display the page in Windows Explorer.

Click the "change picture" button. Click "OK" in the alert windows.

Again click the "Change picture" button etc.

Press the refresh button on your keyboard (F5) and

repeat the exercise.

Read and understand the code in the file animation1.html.

Notice the line that displays the original picture:

Note that it gives the picture a name, namely "original"

Notice the following line in the function definition:

document[imageName].src="icons/flame.gif";

When the function is executed the parameter imageName is

replaced by "original". So, the code executed is equivalent to

document["original"].src="icons/flame.gif";

document[name of some picture in the original page].src

is a name for where the picture is stored. You can change

that picture with an assignment statement of the form:

document[name of some picture in the original page].src = name of new picture;

animation2.html

Now you know enough to write your own magic trick.

Enhance animation1.html to obtain a webpage animation2.html.

animation2.html is like animation1.html except that it has

two pictures and two buttons. If you press the button associated with one

picture, then only that picture changes.

Use the icon nasty.gif for the second picture.

animation3.html

You write this one.

This page is very similar to animation1.html and you may want to

start with animation1.html and change it. When the page is first displayed

is has a title of your choice, such as "Smile Darn You Smile!"

and it displays the nasty.gif face instead of the smiley face.

The button says "Make my day!". When the button is clicked

the nasty face is replaced by a smiley face and an alert

window pops up that says "Have a nice day.".

When the user clicks the OK button the alert window goes away

but nothing else happens.

animation4.html

You write this one.

It is just like animation3.html with one change.

When the user clicks OK in the "have a nice day!" alert

window, the alert window goes away and the smiley face

turns back into a nasty face.