JavaScript image rotation

Question

I hope this question is an appropriate one for Stack Overflow. I've hunted around on the web and checked a load of books but can't get an answer to this problem.

I want to use some JavaScript I've come across (see below). I've set up the script in a web page and it works fine ... but, not being an experienced programmer, I don't understand exactly how it works. I've done a bit of research but I still can't crack a couple of sections within the code.

I know it creates an array - but is this a multidimensional array?

Also, I don't understand why 'active' is written as ("+active+") (plus signs ??) in the setTimeout function:

setTimeout("image_rotate("+active+")", 5000);

Why the plus signs at either end of the word active? Also, shouldn't active be a number?

Thanks.

 <script type="text/javascript">

 var the_images = [];

 window.onload = function(){

 the_images.push(["http://www.adobe.com", "images/banner_1.jpg",      "Adobe"]);
 the_images.push(["http://www.microsoft.com", "images/banner_2.jpg", "Microsoft"]);
 the_images.push(["http://www.mozilla.org", "images/banner_3.jpg", "Mozilla"]);

 image_rotate(0);
 }

 function image_rotate(active){

 var image_container = document.getElementById("ad");


 image_container.innerHTML = "<a href=\""+the_images[active][0]+"\"><img    src=\""+the_images[active][1]+"\" alt=\""+the_images[active][2]+"\"   title=\""+the_images[active][2]+"\" /></a>";

 active++;

 if(active >= the_images.length){
 active = 0;
 }

 setTimeout("image_rotate("+active+")", 5000);

 }
 </script>

Answer 1

You should probably try reading some tutorials on JavaScript before you jump in and start modifying code. It's one of the things that's given JavaScript a really bad name. It's actually a quite deep and sophisticated language, and people just "cutting and pasting" functionality has created a lot of negative impressions.

That said, I'll help you out with your questions in hopes that you can grok this code a little better.

Yes, an array is being created (and no, it's not multidimensional) on this line:

var the_images = [];

The var says "I'm about to declare a variable", the_images is the name of the array, and [] is called an array literal or array initializer. It's initializing the_images to an empty array. (If you wrote instead var the_images = [1,'hello',false];, for example, it would initialize it with three elements, a number, string, and boolean.)

Arrays have a function called push that adds elements to the end of the array. So you'll see you're adding elements to the array in the following lines:

the_images.push(["http://www.adobe.com", "images/banner_1.jpg", "Adobe"]);
the_images.push(["http://www.microsoft.com", "images/banner_2.jpg", "Microsoft"]);
the_images.push(["http://www.mozilla.org", "images/banner_3.jpg", "Mozilla"]);

Note here that you're adding arrays to the array, which is probably where you got the impression that these arrays are multidimensional (arrays of arrays are technically different than multidimensional arrays).

Finally, this line:

setTimeout("image_rotate("+active+")", 5000);

setTimeout is a function that essentially defers something for future execution. In essense, this is saying "call the function image_roate in 5000 milliseconds (5 seconds)". I would like to point out that this use of setTimeout (specifying the code as a string) is strongly discouraged.

active is a variable, and yes, it happens to store a number. On the first iteration, it is 0, on the second it is 1, and so on and so forth. The plus signs that you're wondering about are performing string concatenation in this case. So the first time setTimeout is called, it's getting called with:

"image_rotate("+active+")"  =>   "image_rotate("+0+")"   =>  "image_rotate(0)"

And the second time with

"image_rotate("+active+")"  =>   "image_rotate("+1+")"   =>  "image_rotate(1)"

If you want to see what's going on, you can print out that value to the console. Change this line:

setTimeout("image_rotate("+active+")", 5000);

To this:

var debugString = "image_rotate("+active+")";
setTimeout( debugString );
console.log( debugString );

Then if you examine your console (Ctrl-Shift-J on Windows, Ctrl-Option-J on OSX), you'll see output from your program which should hopefully clarify what's going on.

Answer 2

the_images is a multidimensional array of the form:

[link, src, title]

The attributes are used when building the HTML, for example:

var image = the_images[0]
html = "<a href='" + image[0] + "'><img src='" + image[1] + "' title='" + image[2] + "'></a>"

The function setTimeout in JavaScript takes either a function or a string as its first argument. If it's passed a string it looks up the function from the string. It's generally considered better form to pass a function.

Here's an example slightly rewritten and using cat photos: http://jsfiddle.net/VsJ56/

Answer 3

the_images is a 2D array. You will be able to see the workings of the code if you use a debugging tool like chrome to step through each line and view the values in the console for each variable.

setTimeout("image_rotate("+active+")", 5000);

your image_rotate function is taking a number parameter. What you are doing in setTimeout function is calling it by passing the parameter. this is how it actually looks like after appending the active variable value.

setTimeout("image_rotoate(1)", 5000);

(+) sign is there for concatenating. javascript automatically converts the active number variable to a string. Hope this helps

Answer 4

It looks like the "images" are just a set of values in an array, and those arrays are pushed onto another array (the_images[]).

The image_rotate function takes an integer/index and pulls the image values from that index in the_images[] where appropriate to create a link and image tag (e.g., first element is the href, second is the image path, etc.).

The index active is then being incremented or set to 0 if it is larger than the number of image value arrays in the_images[] (bringing it back around to the beginning/first image).

setTimeout is what is being called every 5 seconds to keep it going. The + signs are there because the value/index is being concatenated to the string - this way setTimeout is calling image_rotate(0) or whatever the value of active is.

I might be missing something, but this function looks recursive - it's calling itself forever (or until the user leaves the page I guess).

Hope that helps a bit.