Assignment A10: JavaScript images and randomness
Learning Objectives
- Gain additional practice using the JavaScript conditional (if-else) statement
- Learn about the JavaScript Math object
JavaScript Conditionals Revisited
From our last assignment, you will remember JS-if.html which uses the conditional to determine the entire structure of a web page. (Be sure that you try BOTH "Okay" and "Cancel".)
JavaScript Objects
Today, in addition to the conditional statement, I want to focus on a specific JavaScript object called the Math object, which is both really useful, and believe it or not, really FUN! Many modern programming languages are based on the notion of "objects", so you will hear programmer's talk about "object-oriented" programming, etc. An "object" is just a thing which has both properties (such as "color" or "size") as well as the methods for taking actions (such as to "write" in an html document). We will learn more about other objects later. Please check my coin-flipping page which uses the JavaScript Math object to create randomness. I hope you agree that page is fun! I had fun making it. Okay, so to make this page, I used mostly things we already know, plus some methods for making JavaScript do math with the Math object.
Let's look at some of the math we can do using Math object methods:
Of course, you can also use the Math object to take square roots, use trigonometric functions, and get get special values like Math.PI=3.141592..., but you probably don't to talk about those right now...
Instead, let's focus on how can can accomplish things like coin-flipping using Math.random().
Most of the time, we do not want a weird random number which is less than or equal 0 and less than 1. We want a random integer between some max and some min, like a random number between 1 and 10. Instead, we want a random integer between some max and some min, like a random number between 1 and 10.
If you would want a number between 0 and 2 many people might
think of writing something like this:
number = Math.round(Math.random() * 2);
which will randomly return 0, 1 or 2 but the distribution isn't uniform
because of the way Math.round() rounds the numbers. The number
1 will be returned twice as much as 0 and 2 because the range of
numbers which is rounded to 1 is twice as big as for 0 and 2:
0.0 to 0.5 is rounded to 0
0.5 to 1.5 is rounded to 1 and
1.5 to 2.0 is rounded to 2
This can be fixed using Math.floor() which will always round a number
to the lowest whole number as follows:
So, how can we make all this math useful or fun?
Let's look at the code used in the example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>An Example of Flipping a Coin with a JavaScript Conditional</title>
</head>
<body>
<br />
<script type="text/javascript" language="JavaScript">
//<![CDATA[
document.bgColor="white";
document.write("<div style='text-align:center'>");
document.write("<h2>Random Coin Flips and Quotes</h2>");
document.write("<h3>Please refresh to randomly flip the coins</h3>");
document.write("<hr /> <p>");
//Using the principle of number = Math.floor(Math.random() * (max - min + 1) + min);
var coin1side=Math.floor(Math.random()*2+1);//This makes a random number which is 1 or 2
var coin2side=Math.floor(Math.random()*2+1);//This makes a different random number which is 1 or 2
var coin3side=Math.floor(Math.random()*2+1);//This makes yet again a different random number which is 1 or 2
var phrase=Math.floor(Math.random()*4+1);//This makes a different random number which is 1, 2, 3, or 4
if (coin1side==1) //This is flipping coin 1
{
document.write("<img src='coinfront.jpg' width='200' height='198' />");
}
else
{
document.write("<img src='coinback.jpg' width='200' height='198' />");
}
if (coin2side==1) //This is flipping coin 2
{
document.write("<img src='coinfront.jpg' width='200' height='198' />");
}
else
{
document.write("<img src='coinback.jpg' width='200' height='198' />");
}
if (coin3side==1) //This is flipping coin 3
{
document.write("<img src='coinfront.jpg' width='200' height='198' />");
}
else
{
document.write("<img src='coinback.jpg' width='200' height='198' />");
}
document.write("</p><hr />");
if (phrase==1) //This entire structure randomizes the quotes
{
document.write("Money is better than poverty, if only for financial reasons. --Woody Allen");
}
else if (phrase==2)
{
document.write("It is better to be rich and healthy than poor and sick. --Robert Eugene Fairchild");
}
else if (phrase==3)
{
document.write("I cannot afford to waste my time making money. --Louis Agassiz");
}
else
{
document.write("Money often costs too much. --Ralph Waldo Emerson");
}
document.write("<br /><em>Page by Dr. Jan</em>");
document.write("</p></div>");
//]]>
</script>
</body>
</html>
See how the Math object is incorporated? The "if" conditional is used, with a few things to note:
The JavaScript conditional statements can do more than we have
already seen through "chaining" or additional branches to the
condition.
For example:
if (number > 0)
{
alert("Number is a positive integer");
}
else if (number < 0)
{
alert("Number is a negative integer");
}
else
{
alert("Number is 0");
}
The "else if" allows the final clause to be added. You can add as many
"else if" clauses into the middle as you need, and this is used in the
phrase-generation of the example page because we need do be able to
write four different quotes for each of the random numbers 1, 2, 3, and
4. Note also, that in the coin-flipping example, "=="
(rather than just "=") must be used to test
for equality.
If you have a page of pictures of friends, which friend's picture should be in the upper-left corner, which is visually the most important? How will your friends feel if their picture is in the lower right? Even if your friends are cool about this kind of thing, businesses are willing to pay additional money for advertising if their advertisement appears in the upper-left corner.
So, we can use JavaScript to "democratize" our page layout. In other words, we can use JavaScript to make certain that the following three layouts are equally likely. Suppose I have four close friends named Ann, Bob, Cat, and Don, then I could layout a page with their pictures in an of the following ways:
.
Of course, other layouts are possible such as:
If
you used all four of these layouts, this would provide each of your
friends the equal chance of having their image in each of the four
places on the page. Even so, many other layouts do exist,
such as the following three:
Gosh! How many possible layouts are there? With
just 4
images, their are actually 24 different possible layouts! Can
you believe it?
This assignment is to be completed individually. You will be creating a single page which contains text and 3 or more images. You are encouraged to use images which are meaning from you to create a page for your homepage for this assignment.
- The body of your page should be created entirely with correctly formed JavaScript and no html.
- The JavaScript should be hidden from older browsers.
- Include an appropriate page title.
- Include your name in the body of the page as the author.
- The placement of the images on the page must be equally likely as determined by the JavaScript Math.random() method as describe above. Note that this does not mean that you have to choose to do ALL possible layouts, just that each image must have equal likelihood of being placed in each position. Note that by focusing on randomly assignming the layouts, rather than on each image, you can make sure that each image appears exactly once.
- In general, you need to use document.write() to write all information on the screen in an understandable and coherent format.
- Save this file as yourusername-A10.html and put this file as well as all of the images used into a folder named yourusername-A10, zip and submit to Moodle.