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.
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 a 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.
<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
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.
<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
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
<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.
Check on digital Dice to view the digital dice in action.
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.
Check on Animated Graphical Dice to see dice in action.
Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy