The Return of The JavaScript Critic

by Dori Smith
October 5, 2000

Several years ago, I noticed that there were lots of articles being published claiming to teach the reader how to write JavaScript. I'd read them in amazement--how on earth could anyone take this crud seriously? Unfortunately, a lot of people did, because that's all that existed. So, as a public service, I started writing the JavaScript Critic columns, to clean up the code in other people's articles and explain how both the script and explanation could have been written better.

I haven't written a JavaScript Critic column in 3 years. In fact, I figured that enough good scripts were out on the web that I didn't need to do it any more. Why settle for borrowing crappy scripts when you could borrow a good script from any one of several script repositories? And why would anyone, online or print, hire a writer who doesn't understand JavaScript to write about it when, well, I'm available?

And then I just read The Web Wizard: Creating Quick and Easy JavaScript Animations by Luisa Simone. Big sigh. Let me count just a few of the things that this article got wrong. Quotes from her article are in bold.

First off, I'm not even going to get into web standards. Her pages don't even attempt to be standards compliant (no alt tags? no doctype?) but that's another, separate issue. My issues here are just about JavaScript.

Create the object -- called an array -- that collects the images and places them in a specific order.

Actually, her array doesn't collect any images. It just collects image names. I may have just typed the name "Bill Gates" into this article, but that didn't make him suddenly appear in front of me. A name of a thing isn't the thing itself.

One of the reasons why her resulting animation is so slow is that it forces the script to download every image every time you want to display it on the screen. If the script actually did what she describes above, it'd work much better.

danceSeries = new Array('dance00.jpg', 'dance01.jpg', 'dance02.jpg', 'dance03.jpg');

Translated into English this bit of code would read, "Create a new array, called danceSeries, and include the following images in the array." Also note that we have surrounded the filenames with parenthesis, and separated each name with a comma.

One of the major advantages of creating an image array is that it forces all of the images to be cached. This means that they will be downloaded immediately, and available for the animation to play back smoothly.

Bzzt. The array above is just little strings: pieces of text. Nope, no caching is done. And if you're going to give your images non-meaningful names like these, you don't even need an array-- you could just calculate the names on the fly.

The function "document.images" handles this for us.

The object document.images isn't a function. It's, well, an object. A function is something else entirely. Another correct way to describe this is to refer to the images property of the document object.

document.images['dance'].src = danceSeries[theCount];

This is a much more complex way of writing this than is necessary. Instead, it's better to just say

Or even

because then, as described above, you don't need the array at all.

The end result: As the script is executed, one frame of the animation will be displayed, there will be a 300 millesecond pause, and then the next frame of the animation will be displayed.

Actually, no. When the script is executed, one frame of the animation will start to be downloaded. It'll display at some later point.

Notice that we have specified the width and height of the image. This is always a good idea, given that it will help your HTML page load faster, but in the case of JavaScript animations it's a necessity: If you don't specify the size (in pixels) of the images, the JavaScript won't run.

Not true. It'll run just fine, it'll just be based on the size of the image that you've put in the image tag. Image sizes should be given because it makes the page render more quickly (and because it's the standard, but that's that other issue again).

Here's how to do it correctly:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>JavaScript Animation</title> 
	<script language="JavaScript" type="text/javascript"> 
	<!--
	// create the image arrays
	if(document.images) {
		danceSeries = new Array("dance00.jpg", "dance01.jpg", "dance02.jpg", "dance03.jpg")
		danceImages = new Array()
		
		for (i=0;i<danceSeries.length;i++) {	// Cache the images here
			danceImages[i] = new Image
			danceImages[i].src = danceSeries[i]
		}

		// theCount will keep track of the current image 
		theCount = 0
	}

	// advance to the next image 
	function turnPage() {
		theCount++
		if (theCount == danceImages.length) 
			theCount = 0

		// (display a frame of the animation) 
		document.dance.src = danceImages[theCount].src

		// repeat the turnPage function
		setTimeout("turnPage()", 300)
	}

	// -->
	</script> 
</head>
<body bgcolor="#FFFFFF" onload="turnPage()">
	<p align="center">
		<img name="dance" src="dance00.jpg" width="150" height="233" border="0" alt="dance images"> 
	</p>
</body>
</html>

By the way, no, I didn't go through this with a fine tooth comb. There may well be more problems with the article and the code than are listed above; these are just the ones I found most glaring.

All entries © 1999-2010 Backup Brain, LLC