JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

Lesson 20 The Math() Method


JQuery Math methods are also known as functions, they are indeed the built-in functions of JavaScript. The term method implies that the function belongs to a particular object. In fact, the terms method and function can be used interchangeably. Below is a list of methods that are tied to the Math object.

Table 20.1 Math Methods
Methods Description
abs(x) Returns absolute value of x
acos(x) Returns arc cosine of x (i.e cos-1x)
asin(x) Returns arc sine of x (i.e sin-1x)
atan(x) Returns arc tangent of x (i.e tan-1x)
cos(x) Returns the value of cosine x
sin(x) Returns the value of sine x
tan(x) Returns the value of tangent x
exp(x) Returns the value of e to the power of x (i.e  ex)
log(x) Returns the natural logarithm of x
max(x,y) Returns the greater value of x and y
min(x,y) Returns the greater value of x and y
round(x) Rounds off a number x to the nearest integer
pow(x,y) Returns x to the power of y  (i.e  xy)
sqrt(x) Returns the square root of x
ceil(x) Returns the least integer greater than or equal to x
floor(x) Returns the greatest integer less than or equal to x

The JavaScript syntax for the Math method is  Math.Method, where math must begin with the capital M. Using small m just will not work. For example, if you wish to compute the value of log 100, you write the code as Math.log(100), the value must always enclose within a bracket. In order to display the value on the web page using jQuery, you can use the Document object together with the text() method such as $(selector).text(Math.log(100)).

Example 20.1

This example lets the user compute the logarithm of a number using the Math() method.

<!DOCTYPE html>
<html>
<head>
<script>
 $(document).ready(function(){
    $("btn1").click(function(){
      var myNum=$("#num").val();
      var ans=Math.log(myNum);
      $("#n").text(myNum);
      $('#log').text(ans);
      
    });
     });
</script>
</head>
<body>
<ul>
<h2>Computing Logarithm</h2>
<P>N=<input id="num" style="Text"></p>
<p>The value of log <span id="n"></span> is <span id="log"></span></p>
<button id="btn1">Click me to compute</button>
</body>
</html>

Computing Logarithm

Please enter a number

N=

The value of log is


Example 20.2

This example computes sine of an angle.

For trigonometric calculations, you need to convert the values between radian and degree. For example, to compute the value of cos(60), you need to convert 60 to radian first otherwise you will get the wrong answer. The conversion can be done using the formula (60xPI)/180, written in JavaScript will be something like Math.cos((60*Math.PI)/180).

We use the toFixed(n) to fix the number of decimal places.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
   $("#btn2").click(function(){
      var angle=$("#angle").val();
      var ans= Math.sin((angle*Math.PI)/180);
      $("#n").text(angle);
      $("#sin").text(ans.toFixed(4));
      
    });
});
</script>
</head>
<body>
<h2>Computing Sine</h2>
<P>Angle in degree=<input id="angle" style="Text"></p>
<p>The sine of angle <span id="agl"></span> is <span id="sin"></span></p>
<button id="btn2">Click me to compute</button>


</body>
</html>

Computing Sine

Angle in degree=

The sine of angle is


Example 20.3

This example computes the maximum and minimum values of two numbers. The syntaxes are Math.max(x,y) and Math.min(x,y).

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn3").click(function(){
      var x=$("#num1").val();
      var y=$("#num2").val();
      var maxN=Math.max(x,y);
      var minN=Math.min(x,y);
      
      $("#maxi").text(maxN);
      $("#mini").text(minN);
   
    });
});
</script>
</head>
<body>

<h2>Computing Sine</h2>
<P>First Number=<input id="num1" style="Text"></p>
<P>Second Number=<input id="num2" style="Text"></p>
<p>The greater value is <span id="maxi"></span></p>
<p>The smaller value is <span id="mini"></span></p>
<button id="btn3">Click me to compute</button>
</body>
</html>
</pre>
</div>

Maximum and Minimum

First Number=

Second Number=

The greater value is

The smaller value is





Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy