JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Math Object
The Math Object
Unlike other objects, the Math object does not consist of a constructor
The Math object is static.
All methods and properties are used without creating a math object first.
Math Properties (Constants)
The syntax to use any Math property is: Math. property
JavaScript provides 8 mathematical constants that can be used as Math properties:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math Constants</h2>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML =
“<p><b>Math.E:</b> ” + Math.E + “</p>” +
“<p><b>Math.PI:</b> ” + Math.PI + “</p>” +
“<p><b>Math.SQRT2:</b> ” + Math.SQRT2 + “</p>” +
“<p><b>Math.SQRT1_2:</b> ” + Math.SQRT1_2 + “</p>” +
“<p><b>Math.LN2:</b> ” + Math.LN2 + “</p>” +
“<p><b>Math.LN10:</b> ” + Math.LN10 + “</p>” +
“<p><b>Math.LOG2E:</b> ” + Math.LOG2E + “</p>” +
“<p><b>Math.Log10E:</b> ” + Math.LOG10E + “</p>”;
</script>
</body>
</html>
Output
JavaScript Math Constants
Math.round()
Math.round(x) is used to return the nearest integer:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.round()</h2>
<p>Math.round(x) returns the value of x rounded to its nearest integer:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.round(4.6);
</script>
</body>
</html>
Output
JavaScript Math.round()
Math.round(x) returns the value of x rounded to its nearest integer:
Math.ceil()
Math.ceil(x) is used to return the value of x rounded up to its nearest integer:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.ceil()</h2>
<p>Math.ceil() rounds a number <strong>up</strong> to its nearest integer:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.ceil(4.4);
</script>
</body>
</html>
Output
JavaScript Math.ceil()
Math.ceil() rounds a number up to its nearest integer:
Math.floor()
Math.floor(x) is used to return the value of x rounded down to its nearest integer:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.floor()</h2>
<p>Math.floor(x) returns the value of x rounded <strong>down</strong> to its nearest integer:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.floor(4.7);
</script>
</body>
</html>
Output
JavaScript Math.floor()
Math.floor(x) returns the value of x rounded down to its nearest integer:
Math.trunc()
Math.trunc(x) is used to return the integer part of x:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.trunc()</h2>
<p>Math.trunc(x) returns the integer part of x:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.trunc(4.7);
</script>
</body>
</html>
Output
JavaScript Math.trunc()
Math.trunc(x) returns the integer part of x:
Math.sign()
Math.sign(x) is used to return the value, if x is negative, null or positive:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.sign()</h2>
<p>Math.sign(x) returns if x is negative, null or positive:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.sign(4);
</script>
</body>
</html>
Output
JavaScript Math.sign()
Math.sign(x) returns if x is negative, null or positive:
Math.pow()
Math.pow(x, y) is used to return the value of x to the power of y:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.pow()</h2>
<p>Math.pow(x,y) returns the value of x to the power of y:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.pow(8,2);
</script>
</body>
</html>
Output
JavaScript Math.pow()
Math.pow(x,y) returns the value of x to the power of y:
Math.sqrt()
Math.sqrt(x) is use to return the square root of x:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.sqrt()</h2>
<p>Math.sqrt(x) returns the square root of x:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.sqrt(64);
</script>
</body>
</html>
Output
JavaScript Math.sqrt()
Math.sqrt(x) returns the square root of x:
Math.abs()
Math.abs(x) returns the absolute (positive) value of x:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.abs()</h2>
<p>Math.abs(x) returns the absolute (positive) value of x:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.abs(-4.7);
</script>
</body>
</html>
Output
JavaScript Math.abs()
Math.abs(x) returns the absolute (positive) value of x:
Math.sin()
Math.sin(x) returns the sine (a value between -1 and 1) of the angle x (given in radians).
To use degrees instead of radians, degrees needs to be converted into radians:
Angle in radians = Angle in degrees x PI / 180.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.sin()</h2>
<p>Math.sin(x) returns the sin of x (given in radians):</p>
<p>Angle in radians = (angle in degrees) * PI / 180.</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML =
“The sine value of 90 degrees is ” + Math.sin(90 * Math.PI / 180);
</script>
</body>
</html>
Output
JavaScript Math.sin()
Math.sin(x) returns the sin of x (given in radians):
Angle in radians = (angle in degrees) * PI / 180.
Math.cos()
Math.cos(x) returns the cosine (a value between -1 and 1) of the angle x (given in radians).
To use degrees instead of radians, convert degrees to radians:
Angle in radians = Angle in degrees x PI / 180.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.cos()</h2>
<p>Math.cos(x) returns the cosine of x (given in radians):</p>
<p>Angle in radians = (angle in degrees) * PI / 180.</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML =
“The cosine value of 0 degrees is ” + Math.cos(0 * Math.PI / 180);
</script>
</body>
</html>
Output
JavaScript Math.cos()
Math.cos(x) returns the cosine of x (given in radians):
Angle in radians = (angle in degrees) * PI / 180.
Math.min() and Math.max()
Math.min() and Math.max() finds the lowest or highest value in a list of arguments:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.min()</h2>
<p>Math.min() returns the lowest value in a list of arguments:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML =
Math.min(0, 150, 30, 20, -8, -200);
</script>
</body>
</html>
Output
JavaScript Math.min()
Math.min() returns the lowest value in a list of arguments:
Math.random()
Math.random() returns a random number between 0 (inclusive), and 1 (exclusive):
Example
<!DOCTYPE html>
<html>
<body
<h2>JavaScript Math.random()</h2>
<p>Math.random() returns a random number between 0 and 1:</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.random();
</script>
</body>
</html>
Output
JavaScript Math.random()
Math.random() returns a random number between 0 and 1:
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.log2()</h2>
<p>Math.log2() returns the base 2 logarithm of a number.</p>
<p>How many times must we multiply 2 to get 8?</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.log2(8);
</script>
</body>
</html>
Output
JavaScript Math.log2()
Math.log2() returns the base 2 logarithm of a number.
How many times must we multiply 2 to get 8?
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.log10()</h2>
<p>Math.log10() returns the base 10 logarithm of a number.</p>
<p>How many times must we multiply 10 to get 1000?</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = Math.log10(1000);
</script>
</body>
</html>
Output
JavaScript Math.log10()
Math.log10() returns the base 10 logarithm of a number.
How many times must we multiply 10 to get 1000?