Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Random Image Generator Using Arrays - JavaScript(JS)

Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Arrays

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Random Image Generator Using Arrays - JavaScript(JS)

we create a more elegant random im-age generator that does not require the image filenames to be integers.

Random Image Generator Using Arrays

 

In Chapter 9, we created a random image generator that required image files to be named 1.gif, 2.gif, …, 7.gif. In this example (Fig. 10.7), we create a more elegant random im-age generator that does not require the image filenames to be integers. This version of the random image generator uses an array pictures to store the names of the image files as strings. The script generates a random integer and uses it as a subscript into the pictures array. The script outputs an XHTML img element whose src attribute contains the image filename located in the randomly selected position in the pictures array.

 

    <?xml version = "1.0" encoding = "utf-8"?>

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

    <!-- Fig. 10.7: RandomPicture2.html -->

 

    <!-- Random image generation using arrays. -->

 

    <html xmlns = "http://www.w3.org/1999/xhtml">

 

    <head>

 

    <title>Random Image Generator</title>

 

      <style type = "text/css">

 

      table { width: 15em }

              th   { text-align: left }

      </style>

 

      <script type = "text/javascript">

      <!--

 

var pictures = [ "CPE", "EPT", "GPP", "GUI", "PERF", "PORT", "SEO" ];

      // pick a random image from the pictures array and displays by

 

      // creating an img tag and appending the src attribute to the

 

// filename

      document.write ( "<img src = \"" + pictures[ Math.floor( Math.random() * 7 ) ] + ".gif\" />" );

      // -->

 

      </script>

 

      </head>

 

      <body>

 

      <p>Click Refresh (or Reload) to run the script again</p>

 

      </body>

 

      </html>

 


Fig. 10.7 | Random image generation using arrays.

The script declares the array pictures in lines 16–17 and initializes it with the names of seven image files. Lines 22–23 create the img tag that displays the random image on the web page. Line 22 opens the img tag and begins the src attribute. Line 23 generates a random integer from 0 to 6 as an index into the pictures array, the result of which is a randomly selected image filename. The expression

 

pictures[ Math.floor( Math.random() * 7 ) ]

 

evaluates to a string from the pictures array, which then is written to the document (line 23). Line 23 completes the img tag with the extension of the image file (.gif).

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.