Math Object

Updated 07/18/14

Using the math Object in your JavaScripts

In this section we'll start with a few simple examples of a statement that uses the math object. In this example I am going to display the math objects PI propery. I'll write a simple function that will return the value of pie. Then I'll use the document.write() method to display the value that is returned by the getPi() function in the following script:

<html><head><title>Get Pie</title>
<script type="text/javascript">
<!--
var answer
function getPi()

{
return Math.PI
}
document.write(getPi());
//--></script></head><body></body></html

The above lines of code are displayed on a web browser like this:

Get Pie

The value of pie is displayed.

You can also use use the Math object with methods as shown in my next example, here is the code:

<html><head><title>Round numbers</title>
<script type="text/javascript">
</script></head><body></body></html>

This is a simple script that will round off a a number to the closest integer. For this example we use the number 7.8 which is rounded off. So if you used the above script your browser would display the number 8.

Now I'm going to demonstrate using a script that shows a random image along with its caption when the users web browser is refreshed. This was a script I wrote for my brothers website Black Entertainment Blogs. There are several items of inscribed poetry on this website and he wanted a random item to display every time the pages is entered. I created and array of the products and use the Math method random to select a random product and appropriate matching text each time the web page is accessed or the page is refreshed. Here is what the code looks like on a web brower the code and explanation will follow the script.

Black Entertainment Blog

Now here is the code:

* Note: in the above script there are 9 items in the array the extra items in the array are omitted for spacing purposes.

<html><head>
<title>Black Entertainment Blog</title>
<script type="text/javascript">
<!--
//Random Item display script here an array of items is created
var saleItem = new Array();
saleItem[0] = "<a href='http://www.cafepress.com/nova68.38268295'>

// Now the image is listed here
<img src='http://www.blackentertainmentblog.com/images/smalljournalpic.jpg' alt='What journal could be better as a gift from a husband/boyfriend to his Lady. 5x8, 160 pages, unlined'></a>

// Now here is the text to be displayed under the image.
<br><b>What journal could be better as a gift from a husband/boyfriend to his Lady. 5x8 inches, 160 pages, unlined</b><br>";

function randomItemDisplay()
{
// The randomItemDisplay() function uses the Math object methods floor and random.
// The floor method returns an integer, the random method randomly selects an item from the saleItem array.

var picture = Math.floor( 9 * Math.random());
document.getElementById('blackEntertainmentBlog').innerHTML = saleItem[picture];
}
// Below --- onload event triggers action when the page loads.
//--></script></head>
<body onload="randomItemDisplay()">
<div id="blackEntertainmentBlog"></div></body></html>

Go ahead and hit the refresh button on your browser's tool bar or by selecting refresh from the view menu, you should see a different item from the saleItem array every time.

Now you can try creating your own JavaScript using the Math object. If you need help with this or any other script contact me at webmaster@cayemay.com

This site was last updated 07/16/14