Lab - Javascript

Random image each time page is loaded

Here are some random images:

https://humphrysfamilytree.com/Icons/logo.rotate.0.jpg
to
https://humphrysfamilytree.com/Icons/logo.rotate.9.jpg

We will make a page to display one of these images, a random one each time.
The page will contain a program in JavaScript to pick a random image.

Start code

Start with this code in your web page:

<script>  
 var i = Math.random();
 document.write ( "<p> Random number: " + i + " </p>"   );
</script>

Reference:
- Math
- Math.random
Math.random returns a real (floating point) number from 0 (inclusive) up to but not including 1 (exclusive).
The document.write line above combines outputting a fixed string with outputting a variable number. Try this to see what happens:
```
 document.write ( "<p> Random number: i </p>"   );
```

Recipe

"i" is from 0 to 1. How do you get a random number from 0 to 10? When you have worked out what to do to "i" to get that, document.write the new random number from 0 to 10.
The new "i" is a real number from 0 to 10 (excludes 10). How do you get a random integer from 0 to 9 (includes all of those in equal proportions)? OK, I will help. See Math.floor. Now document.write the new random integer from 0 to 9.
Q. Why was it important to exclude 10 itself?
The new "i" is a random integer from 0 to 9. Now construct the URL of the image corresponding to that.
Now document.write an img tag into the page with src equal to that URL.
Now every time you load the page it has a random image.

Change it to an Array

Re-code the above using an Array of image URL strings:

 var thearray = [ 
	"https://humphrysfamilytree.com/Icons/logo.rotate.2.jpg", 
	"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Gioconda.jpg/400px-Gioconda.jpg",
	"https://humphryscomputing.com/3d/Images/earth.1.big.jpg"
	];

 var i = Math.floor ( Math.random() * thearray.length );	// returns random 0 to (thearray.length - 1)	 

 // display i to check it 

 var url = ....   // get the ith element of the array (see Array docs)

 ....   // display the image inline

Can have any filenames. No need for careful naming.
Add/remove a line to the array and the rest of the program works.
Do not have to adjust filenames (as you would in first version).
Do not have to alter a fixed number in the code like "10" (as you do in first version).