JavaScript Primers #27

By Joe Burns

http://www.htmlgoodies.com/primers/jsp/article.php/3478401/JavaScript-Primers-27.htm (Back to article)

Use these to jump around or read it all


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment


The Concept

The final three JavaScript primers are dedicated to helping you put it all together. The following are three popular JavaScripts that we'll partly deconstruct. We're now going to rely on you to start doing some of the work.

If you're not doing this already, look over the script, see what it does, and then try to deconstruct it yourself. Point out the parts that create certain events. But most of all, try to figure out how you can make the script a little different, a little better.

We're getting toward the end. It'll soon be up to you to create and alter your own JavaScripts. Here we go...

This example displays a slide show. The user clicks a link to display the next slide. We will use an If statement and a variable num. Nothing new here, right? Not quite!


The Script

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
  var num=1
  img1 = new Image ()
  img1.src = "pic1.gif"
  img2 = new Image ()
  img2.src = "pic2.gif"
  img3 = new Image ()
  img3.src = "pic3.gif"  
 function slideshow()
  {
   num=num+1
   if (num==4)
    {num=1}
 document.mypic.src=eval("img"+num+".src")
   }
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="pic1.gif" NAME="mypic" BORDER=0 alt="">
<p>

<A HREF="JavaScript:slideshow()">
   Click for next picture</A>

</CENTER>
</BODY>
</HTML>

The Script's Effect

Click for the next picture


Deconstructing the Script


What You Have Learned


Your Assignment

Rewrite the JavaScript above. Display pic1.gif first, as in the example above. However, in this program, num will become 3 and the program will display img3.src, then img2.src, then img1.src. When num becomes 0, change num to 3.

Basically, fix the script above so it goes backwards.

Here's a possible answer to this assignment
(this will open a new window)


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

On To JavaScript Primer #28