Post
Ask Question

Working with Banner Ads and Random Ads in JavaScript

Banners are images, which appears at the top and bottom of Web pages and are generally links to other sites. The size of a banner is generally 75X400 pixels. In the following code, will explore a script that changes these banner ads every day of the week.

Coding the Functionality

<html>
<head>
    <title>Displaying Ads</title>
    <script language="JavaScript">
    <!--
    var addresses = ["http://www.pqr.com", "https://www.c-sharpcorner.com", "https://www.abcd/", "https://www.xyz.com"];

    function displayAd() {
        var day = new Date();
        var ad = day.getDay(); // Get the current day (0 for Sunday, 1 for Monday, ..., 6 for Saturday)
        
        // Write HTML to display the ad
        document.write('<p align="center"><a href="' + addresses[ad] + '">');
        document.write('<img src="ab' + ad + '.gif" border="0">');
        document.writeln('</a></p>');
    }
    //-->
    </script>
</head>
<body bgcolor="#FFFFFF">
<script language="javascript">
<!--
displayAd();
//--></script>
<h1 align="center">Banner ads which change daily</h1>
</body>
</html>

Output

Banner ads in JavaScript

Code Description

This code dynamically generates an ad based on the current day of the week (day.getDay()) and displays it along with a hyperlink to the corresponding URL in the addresses array. The image source is determined by concatenating the day of the week with the string "ab" and the file extension "png" (e.g., "ab0.png", "ab1.png", etc.).

Make sure you have images named ab0.png, ab1.png, etc., in the same directory as your HTML file for this code to work properly. A script is used where we declare an array, named addresses, which holds the addresses that are linked to the ads. When the user clicks on these ads, the browser loads the linked document. 

Random Ads

In much the same way, we can display ads randomly. You would be using a random number generation to display random ads.  You have to modify the above code for this purpose.

Coding the Functionality

<html>
<head>
    <title>Displaying Random Ads</title>
    <script language="JavaScript">
    <!--
    var addresses = ["http://www.pqr.com", "https://www.c-sharpcorner.com", "https://www.abcd/", "https://www.xyz.com"];

    function displayAd() {
        var ad = Math.floor(Math.random() * addresses.length); // Generate a random index
        
        document.write('<p align="center"><a href="' + addresses[ad] + '">');
        document.write('<img src="cd' + ad + '.png" border="0">');
        document.writeln('</a></p>');
    }
    //-->
    </script>
</head>
<body bgcolor="#FFFFFF">
<script language="javascript">
<!--
displayAd();
//--></script>
</p><h1 align="center">Banner ads which change daily</h1>
</body>
</html>

Output 

Random ads in Javascript

Code Description

In the above code, a function displayAd() uses a statement

var ad = Math.floor(Math.random() * addresses.length)

here we assign a value to the variable ad, which is calculated using the product of Math.random() and the length of the addresses array. Now every time the user visits this page a banner ad would be displayed randomly. You can use the Reload command to reload the page in your browser and see the functioning of this script.

Summary

Random Ads which can be easily provided using JavaScript, change each time the document is loaded/reloaded by a browser.


Similar Articles