Last Updated:

JavaScript: Useful Functions

What is it for?

The mechanism of banners allows you to revive the page and visually create the impression that the site is constantly changing. This function will be most useful for content sites - it is very convenient to create banners for specific articles and place them in the local banner system. It is best, of course, to organize the mechanism for scrolling banners on the server side using Perl, PHP or ASP, but not everyone, unfortunately, has access to CGI scripts. And, in this case, we can use the built-in scripting languages to solve the problem.

Despite the fact that I will explain how to write a small banner system using JavaScript, the principles outlined are quite applicable to any other languages.

Task conditions and constraints

And now, let's formulate the conditions of the problem in more detail and introduce a number of restrictions that will simplify programming. The banner system should perform the following functions:

  • somewhere to store a database about banners;
  • randomly select, from the above-mentioned database, several non-repeating banners;
  • provide mechanisms for displaying banners and going to the desired page when clicked.

We impose some restrictions on these conditions:

  • banners will be of fixed size and stored in GIF or JPEG format;
  • on the page we will simultaneously show four banners.

Well, the conditions and restrictions are defined. Now let's take a closer look at how best to store banners. As a base for storing banner parameters, we will use the usual array. About each of the banners we will need to store the following information:

  • File name
  • alt text;
  • the address of the page to which the banner refers.

For the convenience of storing and updating the banner database, it is best to highlight its description in a separate file and connect it using the mechanism for inserting an external js file. This is done in the header section using the following construct:

<script language="JavaScript" src="banners.js"></script> 

And this is what the contents of the banners file will look like.js

var banners = new Array( "pic-01.gif", "Text #1", "http://www.link1.com/", "pic-02.gif", "Text #2", "http://www.link2.com/", "pic-03.gif", "Text #3", "http://www.link3.com/", "pic-04.gif", "Text #4", "http://www.link4.com/", "pic-05.gif", "Text #5", "http://www.link5.com/", "pic-06.gif", "Text #6", "http://www.link6.com/", "pic-07.gif", "Text #7", "http://www.link7.com/", "pic-08.gif", "Text #8", "http://www.link8.com/", "pic-09.gif", "Text #9", "http://www.link9.com/", "pic-10.gif", " Text #10", "http://www.link10.com/" ) 

As you can see, the structure of the array is not very complex. For each banner, three consecutive cells are allocated, in which they are stored: file name, alt text, link address.

Software part

So we got to programming. And, first, let's deal with some points.

Let's start with the generation of non-repeating banners. To select an arbitrary banner, we need to generate a random number ranging from zero to the number of banners minus one. This is not difficult and is done with the following code snippet:

n = Math.floor(Math.random()*(banners.length/3)); 

But, as I mentioned earlier, we agreed that four banners would be displayed on the page at the same time. And, therefore, after each generation of a random number, we need to check that this banner does not coincide with 3 others. In addition, we need to store the already generated numbers somewhere. To solve these problems, we will organize another array - random numbers and at each generation of a new number we will compare it with those found earlier. The complete code that solves these problems is shown below:

var i, j; var flag; The check box used to verify that var banners_show = 4 matches; Number of banners displayed on the page var rand = new Array(banners_show); for (i=0; i<banners_show; i++) { do { flag=0; n = Math.floor(Math.random()*(banners.length/3)); for (j=0; j<i; j++) { if (n == rand[j]) { flag=1; } } } while (flag); rand[i] = n; } 

Due to the fact that banners will be generated on the fly, in the process of loading the page, the above code fragment must be placed outside the function. At the moment when the browser proceeds to the drawing of the page, we will already have a ready array of random numbers.

To draw banners, we will write a simple function and pass to it as a parameter the serial number of the banner on the page. Using this number, we read from the rand[] array a random number for a particular banner, and already using it, we find all the data necessary for rendering:

function Show_Banner(number) {

n=rand[number-1];

document.write('<a href="' + 
banners[n*3+2] + '">
<img src="banners/' + banners[n*3] + 
'" border=0 width=' + banner_width + 
' height=' + banner_height + ' alt="' + 
banners[n*3+1] + '"></a>');

That's pretty much it, our local banner system is ready. It remains only four times to call the Show_Banner() function from the appropriate part of the page. Just do not forget that the JavaScript code is separated from html by tags

<script></script>: <script> <!-- Show_Banner(1); --> </script> ....... <script> <!-- Show_Banner(4); --> </script> 

To check the operability of the local banner system, click the Reload button in the browser several times and make sure that different and non-identical banners are generated each time.