Webpage 9 - Javascript

Due : Nov 27th, 2006 at 4:15 pm

It is strongly recommended that you review the class notes for Monday Nov 20th evenings class to understand how java scripts work:

Class notes

 

Exercise : Slide Show
  1. We will first hand code some javascript so we can understand the different elements of the code .
  2. Open a Secure shell client session to itsunix
  3. cd public_html/ist361
  4. cp -r /home2/f/a/as845383/public_html/shelton/images/ images/

The above is assuming you have a folders called ist361/images

  1. Creade a file in UNIX, using an editor of your choice, call this file slide_show.html

<html>
<head>
<title>Slide Show</title>
<script type="text/javascript" language="javascript">

  1. Enter the following two functions for the slide show:

    <!--
    var img_group = new Array("image_1.jpg","image_2.jpg","image_3.jpg","image_4.jpg","image_5.jpg");
    var cur_img_pointer = -1;
    function next() {
    cur_img_pointer++;
    if (cur_img_pointer == img_group.length) {
    cur_img_pointer = 0;
    }
    var img = document.myImg;
    img.src = "images/" + img_group[cur_img_pointer];
    }
    function goBack() {
    cur_img_pointer--;
    if (cur_img_pointer < 0) {
    cur_img_pointer = img_group.length - 1;
    }
    var img = document.myImg;
    img.src = "images/" + img_group[cur_img_pointer];
    }
    -->

    </script>

    </head>

  2. Enter the following HTML code in the <body> section:

<body>

<hl>My Slide Show</hl>

<p>
<input name="back" value="Back" type="button" onclick="goBack();"/>
<input name="next" value="Next" type="button" onclick="next();"/>
</p>
<p><img src="images/default.gif" width="450" height="338" name="myImg"/></p>

</body>

</html>

 

Examples:

www.js-examples.com

 

Tutorials:

Function: opening a new window