Assignment 6
[ Home ] [ Up ] [ Assignment 1 ] [ Assignment 2 ] [ Assignment 3 ] [ Assignment 4 ] [ Assignment 5 ] [ Assignment 6 ] [ Assignment 7 ]

 

Assignment 6

 

CS 160 - 100 pts

Javascript

In this assignment you will create a javascript animation of selected images on your disk. Then you will need to upload the pictures and the htm file on the server of your choice.

Some of you already accomplished this doing this in the last assignment. Those that did not go for the extra credit will need to find a server to upload this script and the pictures.

Email your instructor when this assignment is uploaded and its location. Use the Subject: CS160 MW - your name - Assignment 6. In the body of your message include the URL where your page can be found.

Issues: Some web severs are case sensitive and you may encounter problems when you publish your page and will not be capable of viewing the files. In this case, double check the filenames. For instance, your program may be asking for a file called pic1.jpg, but the file on the server is named pic1.JPG. So, when you look at the page, you will not see the image. Also, spelling errors, missing symbols in the program will cause the program not to work properly.

The /*    */ sections are comments on your program.

Do the following:

  1. Create 5 small images using the Paint application. (Start going to Image… properties.. and set the size of the image to 2x2inches, otherwise the images will be too big for your disk)
  2. Make sure that you save each image with the names pic1.jpg, pic2.jpg etc. (use the option File… Save as … and under Save as type change to JPEG.)
  3. Type the following program and save it on your disk as javasample.htm
  4. Open your web browser and use the option File .. Open.. and open the file javasample.htm on your browser. Make sure that the images and the .htm file are in the same directory, otherwise your pictures will not show. Also, watch out the capitalization of the pic documents.
  5. Upload the pictures and the javascript to a web server.
  6. Send an email to your instructor indicating the URL of the page containing the code.

<HTML>
<HEAD>

   <TITLE>javaanimation.htm</TITLE>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><SCRIPT LANGUAGE = "JavaScript"><!--HIDE

/* Start the counter at 1

   Create images all the same size
   Name the images in sequence like the example pic1.jpg
   Start the names at 1 and goto N

*/

var counter = 1
var timer

/* load the numpics images into an array of images */

var speed = prompt(" Enter speed (1 .. 5) where 1 is fast and 5 is slow ","3")

var numpics = prompt("Enter the number of pictures (5 is default):","5")

var imgs = new Array()

for (var i = 1;i < numpics + 1; i++){
     imgs[i] = new Image()
     imgs[i].src = "pic" + i + ".jpg"
     }

function animate() {

/* As long as the counter is less than numpics add 1 else make the counter 1*/

     if (counter < numpics){
          counter += 1
     }

     else{
          counter = 1
     }

     document.anim.src = imgs[counter].src
     timer=setTimeout("animate()",speed*100)

}

//STOP HIDING --></SCRIPT>

</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H2><CENTER>Simple Animation.</CENTER></H2>

<FORM ACTION="" METHOD=POST>

<IMG SRC= "pic1.jpg" ALIGN=bottom name=anim><BR>
<INPUT TYPE=button NAME=Button VALUE="Stop" onclick="clearTimeout(timer)">
<INPUT TYPE=button NAME=Button VALUE=" Go " onclick="animate()">
</FORM>

</BODY>
</HTML>

The result of this script can be seen here