Ad-Rotation in JavaScript

By Jonathan Fenocchi. January 14, 2004.

Ad-rotation is widespread and important for many sites, such as those that offer free services. With Ad-rotation, it’s important that your ads display properly, be easy to read, to understand and be interesting, but you don’t want the ads to annoy visitors and cause them to leave your site (which would result in loss of potential funds through advertisements). In this article, you'll learn how to generate random advertisements in JavaScript, and explore some other features along the way.

So Where Do We Start?

Since HTML is the basis for the Web, we'll go ahead and create a simple HTML page, to which you can add or replace code as necessary.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
https://www.w3.org/TR/html4/strict.dtd>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ad Rotation in JavaScript</title>
<script type="text/javascript"></script>
</head>
<body>

</body>
</html>

Now, let's start creating our script. We're going to use document.write() to write the HTML to the page, so that users who don't have JavaScript enabled won't see the ad. This means we'll need to use the <noscript> </noscript> tags to insert an image where the ad would be if the user had JavaScript. Let's set up an array of links and corresponding images...

/* The variable "links" is an array containing three strings (listed above). */

var imgs = new Array("yahoo.gif", "msn.gif", "cnn.gif");

/* The variable "imgs" is an array of images that MUST correspond with those in the "links" array. This way, yahoo.gif will be displayed when the link goes to https://yahoo.com/, msn.gif will be displayed when the link goes to https://msn.com/ and so on. */
</script>

As explained in the comments above, the first array contains three strings. We can shorten that a bit by using this:

var links = ["https://yahoo.com/","https://msn.com/","https://cnn.com/"];

We can refer to the first string as follows:

alert(links[0]);

This will alert, "https://yahoo.com/" in an alert box. Arrays begin at zero-index, so above there are three strings but you refer to them as links[0] ("https://yahoo.com"), links[1] ("https://msn.com/"), and links[2] ("https://cnn.com/"). The same applies with our imgs array.

Now let's get down to determining validation. Now what happens if you accidentally have an error in your script, say by some server-side script, and it doesn't display an image? Chances are, your page will look pretty mangled. To prevent that, we'll make sure that an image is displayed, in this case a blank one...

var len = (links.length + imgs.length) / 2;

/* Get the length of the amount of strings of both arrays and split it in half. In this case, the result will be three. */

if((len*2)%2 == 1)
{
/* If the length of both arrays added together is an odd number, we have a boo-boo... Set returnValue to false. */
returnValue=false;
}

Here, we have the variable len, which is short for "length," and it adds both the lengths of the arrays together; then divides them by two. The result should always be even, if it isn't, we have a problem--the images and links won't correspond. The solution is to display the blank image. When we call our function to write the HTML to the page, we check the value of the global variable, returnValue. But before we go any further, we have to initialize the global variable returnValue before anything else in the script. This is what we have so far...

var returnValue = true;
var links = ["https://yahoo.com/", "https://msn.com/", "https://cnn.com/"];
var imgs = ["yahoo.gif", "msn.gif", "cnn.gif"];
var len = (links.length + imgs.length) / 2;

if((len*2)%2 == 1)
{returnValue=false;}

//--></script>

Now then, let's review. First, we initialized the global variable, returnValue, and set its Boolean value to that of true. The variable is global because we defined it outside of a function. If we had started out with a function, the variable would not be global; it would be specific to that function only. Next, we initialized two arrays: links and imgs. These two arrays correspond with each other to display the right image and link on the page, rather than the wrong ones.

[next]

Created: June 5, 2003
Revised: January 14, 2004

URL: https://webreference.com/programming/javascript/jf/1

Ad-Rotation in JavaScript

Ad-Rotation in JavaScript

So Where Do We Start?

Find a programming school near you