JavaScript Primers #27

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

Let’s take it in two parts…

     <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"

Here’s something new! num=1 is not inside a function. In fact, none of the statements above are inside a function. num is a variable. By declaring the variable at the beginning of the JavaScript area, outside of a function, it becomes a global variable. This means it can be accessed by any function below it.
img1 = new Image() declares a new image object. img1.src= defines what picture is stored in this image object. That’s a very standard format. You should use it when you
set a number of images, like in this script. pic1.gif is stored in img1.src. pic2.gif is stored in img2.src.
The (parentheses) can contain the width and height of each picture. This is not required, but will make the download time faster. It’s up to you whether you use them or not.
The image objects are also available to any functions below them. See that? Just like the variable num, they are all outside of a function. They’re just listed there for any part to use. By placing all these image objects outside a function, the
program preloads the pictures. This will be even more important in our next example, an animation. With an animation,
the user does not want to wait for each picture to be downloaded from the server. Pre-load! Pre-load! Rah! Rah! Rah!

Now part number two…

function slideshow()
 {
 num=num+1
 if (num==4)
  {num=1}
 document.mypic.src=eval("img"+num+".src")
 }
</script>
</head>
<body>

num is initialized to 1. That was up in the first section, right at the top, remember? When the user clicks on the link text, Click for next picture, the function slideshow is run.
slideshow() adds one to num. If num is 4, num becomes 1. document.mypic.src is changed to img plus the value of num, plus .src. For example, if num is 1, document.mypic.src becomes img1.src.
Notice that eval() causes img1.src to be the contents of img1.src, not the literal string. If it was seen as a literal string it would not be seen as a command but rather as just a run of letters.
Finally, this gets it all to work: <a href=”JavaScript:slideshow()”>Click for the next picture</a>
That’s a little new, huh? See how the call is for the JavaScript rather than the function? That allows all parts to be used rather than just the function. If you use just the function
with this format, you’ll have no images because they will have been bypassed.

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

Joe Burns

Recommended for you...

Company

Categories