Introduction to JavaScript: Rotating Banners on your web page

What is this Article about?
This tutorial is meant for a beginners to web development to introduce the reader to scripting techniques. I will cover a method with which a programmer can create rotating advertisements.

What is JavaScript?
JavaScript is a scripting language developed by Netscape.
JavaScript works in all major browsers that are version 3.0 or higher.
JavaScript is a scripting language. A scripting language is a lightweight programming language. A JavaScript program is lines of executable computer code. It can be inserted into an HTML page. It is an open scripting language that anyone can use without purchasing a license. JavaScript is supported by all major browsers like Netscape and Internet Explorer. When a JavaScript is inserted into an HTML document, the Internet browser will read the HTML and interpret the JavaScript. The JavaScript can be executed immediately or at a later event.

Programming JavaScript
We use the <script> tag to insert a JavaScript in an HTML document.

Example

<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>

You can even use variables in your JavaScript code.
You assign a value to a variable like this:

var strname = "Hello World!"

Or like this:

strname = "Hello World!"

Additionally, a programmer might use arithmetic operators. A good example is the string concatenation operation using the '+' operator.

txt1="Hello "
txt2="World!"
txt3=txt1+txt2

Additionally your code can contain functions and calls to functions. I give examples of this in the "Rotating Banners code below"

<html>
<head>
<title>Banner Demo</title>
<script type="text/javascript">

if (document.images)
{
    // First create an array with links to the images you want to
    // display as banners. I chose 3 image locations.
    adImages = new Array("http://www.devhood.com/images/DH-banner-whitebg.gif",
                         "http://us.i1.yimg.com/us.yimg.com/i/ww/m6v3.gif",                                                   
                         "http://www.google.com/images/logo.gif");

    // When the user clicks on a banner it should take the user to
    // the website of that company. Therefore we create another
    // array with a list of URLs. Keep the order the same as images.
    adURLs = new Array("www.devhood.com",
                       "www.yahoo.com",
                       "www.google.com");
    thisAd = 0;
}

// The following function cycles through each banner image.
// Notice the use of the variable thisAd to go from 0 to 2 and then
// back to 0. JavaScript has an object called document whose
// member adBanner can be set to the current banner to display.

function cycleAds()
{
    if (document.images)
    {
        if (document.adBanner.complete)
        {
            if (++thisAd == adImages.length)
                thisAd = 0;

            document.adBanner.src = adImages[thisAd];
        }
    }

    // change to next banner every 15 seconds
    setTimeout("cycleAds()", 4300);
}

// This function is used to direct the user to the website when
// the user clicks on a particular banner image.

function gotoAd()
{
    document.location.href = "http://" + adURLs[thisAd];
}
</script>

<body bgcolor=ffffff onload="cycleAds()">
<a href="javascript:gotoAd()">
<img name="adBanner" src="http://www.devhood.com/images/DH-banner-whitebg.gif" border="0" alt="Click here to visit these links"></a>
</body>
</html>

Return to Browsing Tutorials

Email this Tutorial to a Friend


Rate this Content:
low quality	1	2	3	4	5	high quality

Reader's Comments	Post a Comment

Don't know why it may have been given low; again, it is a tutorial for beginers. Anyway, the tutorial contain some things that don't seem original to my view ("Hello world" for example; sorry, I am flooded with that example). The issue on the tutorial is something useful, which I am thinking adding to my website (besides I may not use javascript (maybe Java applets), but have an idea about it at least). But, a tutorial for beginers like that, it was too simple. Anyway I give 4 points (not 3, 1 point out from originality, and 1 from lenght) just to balance a bit the points ;). But keep going. This site is to learn from everything, anything new, from anyone.
-- Rafael Ufret, November 12, 2002

Thanks Rafael, I remember the time when I was a beginner - sometimes because everyone around me seemed to know it all - I was too afraid to ask. I guess that's why I like to write out these tutorials. Hopefully some readers will learn from this.
-- Mujtaba Khambatti, November 13, 2002

I think some additional comments or other explanation of your code would have been helpful.
-- Frank DeRosa, November 14, 2002

Why not just use an ASP.Net <asp:adrotator /> control?
-- Aaron Brethorst, November 14, 2002

pretty straight forward, not bad.. for banners.. even though i'm totally against banners(cause they suck) but it can totally be used for other stuff thanks again@!
-- John Woo, November 15, 2002

I really like your tutorials. I am having fun reading all of them. They are simple and straight forward. :)
-- Jan Bayer, December 10, 2002

I am gonna try this on my web site right away - thanks
-- Y M Marie, December 10, 2002

A good read. Nice Job!
-- Stanley W, December 27, 2002