JavaScript Lesson 14: More JavaScript Functions

<Lesson 13> [Contents] <Lesson 15>

In this lesson, we will show you more examples of user-defined JavaScript functions. In the following example, we will show you how to create a function that can find and return the maximum number out of three numbers entered by the users.

14.1 Maximum Number function

In this example, we will prompt the user to enter three numbers using the window.prompt method that produces three subsequent input boxes when the web page is loaded. We also use the parseFloat function to convert the string input into floating point or numeric values so that they can be computed mathematically.




The function max comprises three parameters x,y,z. To find the maximum number, we used the conditional operators if and else if as well the logical operators &&. For example, the program will check for the values of x, y, z and if x>y and x>z, the maximum number is x. However, if y>x and y>z, then y is the maximum number. Finally, if the first two cases are not true, then z is the maximum number.

Example 14.1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Maximum Number</title>
</head>
<body>
<script>
number1=window.prompt("First Number","");
number2=window.prompt("Second Number","");
number3=window.prompt("Third Number","");
value1=parseFloat(number1);
value2=parseFloat(number2);
value3=parseFloat(number3);
MaximumVal=max(value1, value2,value3);
document.write("The Maximum Number is :"+MaximumVal);

function max(x,y,z)
{if ((x>y)&&(x>z))
return x
else if ((y>x)&&(y>z))
return y;
else if ((z>y)&&(z>x))
return z;
}
</script>
</body>

</html>

Click on Example 14.1 to test the function

14.2 Creating a  Dice function

Rolling a six-sided dice (or die) is essential to many board games and other games, whether it is a physical game or a computer game. To creates a dice function in JavaScript, we need to use the random( ) function that is tied to the Math object. Using Math.random( ) function will generate a random number between 0 and 1.

For example, you can write the following code to check out the random numbers.

Example 14.2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Click Refresh to run the script</title>
</head>
<body>

<script>
document.write (Math.random());
</script>

<hr>
<p>Click Refresh to run the script again</p>

</body>

</html>

Running the script will generate a random number with 16 decimal places, like the number below:

0.4495186499923613

Click on this example to generate random numbers.

In order to generate a random integer from 1 to 6, you can use the following formula:

Math.floor( 1 + Math.random() * 6 )

Math.random()*6 produces a number between 0 and 6. After adding 1, you get a number between 1 and 7, but less than 7. Using the floor function will produce an integer that is less than or equal to the number generated by Math.random()*6. For example, Math.floor(6.9) will round the number to 6.

Let’s examine Example14.3

Example 14.3: A digital dice

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dice Function</title>
</head>
<body>
<script>
function rolldice()
{ document.write ("<font size=+2 >"+Math.floor( 1 + Math.random() * 6 )+"</font>");

document.writeln("<br><hr>Click on the refresh button to reload the page"); }
</script>
<form><input value="Roll Dice" onclick="rolldice()"></form>
</body>.

</html>

In this example, we created a rolldice function. The task is to generate a random integer between 1 and 6(inclusive of 1 and 6) and then displays the output on the webpage. A button is created so that the function rolldice( ) is called when the user clicks on the roll dice button. The event that triggers the calling of the function is onclick.

Click on Example 14.3 to view the output.

Example 14.4: Graphical Dice

In the previous example, we only created a digital dice, which does not look very cool. In order to create a visually more appealing dice, we thus create a graphical dice, which resembles a real dice. In this example, first of all, we have to draw six dice using any graphics processing program as shown below. Name each image as 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg and 6.jpg respectively. Put all these image files in the same directory as the web page that is running your rolldice( ) function.

Next, you need to load the images randomly using the Math.random function. You also need to display the image using the IMG SRC tag. The code to load random images is shown below:

document.write ( “<img src = \”” +Math.floor( 1 + Math.random() * 6 ) +”.jpg\” width = \”50\” height = \”50\” />”)

The function Math.floor( 1 + Math.random() * 6 ) generates integers from 1 to 6, and Math.floor( 1 + Math.random() * 6 ) +”.jpg\”  loads the picture 1.jpg to 6.jpg randomly. The whole code looks like this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dice Function</title>
</head>
<body>
<script>
function rolldice()
{ document.write ( "<img src = \"" +
Math.floor( 1 + Math.random() * 6 ) +
".jpg\" width = \"50\" height = \"50\" />");document.writeln("<br><hr>Click on the refresh button to reload the page"); }
</script>
<form><input value="Roll Dice" onclick="rolldice()"></form>
</body></html>

Loading the web page and then click on the Roll Dice button will generate random images that show the six faces of the graphical dice.

Click on Example 14.4 to roll the dice.


<Lesson 13> [Contents] <Lesson 15>