Random picture on a web page

July 8th 2007

My friend was improving his web page and he asked me: How to make the page display a random picture?

There are a few choices. Browsing web pages works like this: A web browser (client) asks a page on a given address from a web server. The web server may have this page stored on hard disk; so it reads the page and sends it. Or it can have on hard disk a program, which creates the page text; so it runs the program, and sends the created text. The client will display the received text on a screen.

So there are fundamentally two places where we can put a random picture into the page text: either on the server while creating of the page, or on the client after it receives it. The first option is called "server-side scripting" and the second one is called "client-side scripting".

Server-side programs require on server installed programming language, for example Ruby, Perl, PHP, or JSP. No every web provider supports these languages. And if we want to display such page on a home computer, we also need installed a web server, for example Apache. So this solution puts some demands on the server, but it works with any web client, that means it will appear correctly to every visitor.

Client-side programs are written inside of the web page, usually in programming language JavaScript. They work on any server, and we can run them on a home computer by opening in a web browser. But they will appear correctly to a visitor only if his/her web browser supports JavaScript. (Some users turn off JavaScript to prevent displaying of annoying advertisements.) It is possible to specify an alternative page content, which is displayed only if JavaScript is not available.

My friend has a web page at Google Pages, where he cannot use server-side programming languages. So we will use a client-side program, that is JavaScript. Although some users will not see it correctly. The page will look like this:

<html>
<head>
<title>A page with random picture</title>
</head>
<body>

<h1>Title</h1>

<p><script language="JavaScript"><!--

var pictures = ['first.png', 'second.png', 'third.png'];

var picture = pictures[Math.floor(Math.random() * pictures.length)];

document.write('<img src="' + picture + '"/>');

// --></script><noscript><img src="standard.png"/></noscript></p>

</body>
</html>

Between tags <script> and </script> there is a program in a language JavaScript; outside them is an ordinary HTML code. Inside these tags there are comment marks , which make older browsers not aware of JavaScript skip this program (instead of for example displaying the code on a screen). The part between tags <noscript> and </noscript> is displayed only to those users who do not use JavaScript. We will show them a picture "standard.png".

The word "var" specifies a variable definition. (This is similar to a Pascal programming language. Unlike in Pascal we do not specify variable type; in JavaScript we can put any value in any variable.) Into variable "pictures" we assign an array of strings -- addresses of pictures. Into variable "picture" we assign a randomly selected picture from the array.

Property "pictures.length" returns the number of items in array "pictures", in given situation this means 3. Function "Math.random" returns a random number in interval from 0 to 1 (the random number is always less than 1). After multiplying the random number by three we receive a random number from 0 to 3 (but never 3). Function "Math.floor" truncates the number; the result is an integer 0, 1, or 2; these are all possible indices into array "pictures". So into variable "picture" a random string from array "pictures" will be assigned.

Function "document.write" inserts into page body (where the current script is located) another HTML code. This is constructed by inserting a randomly selected picture addres into a tag <img>. Note two different types of quotation marks; one surrounds a JavaScript string, other is the part of the created HTML code and surrounds the value of "src" attribute; in both languages it is possible to use both types of quotation marks.

And this is all.