Learn Math objects of JavaScript with a simple project
Tags: Projects, Beginners Guide, JavaScript, Math Function

Javascript provides optimized yet interactive math objects that allow you to manipulate numbers and accomplish arithmetic tasks with ease.

Before moving ahead, it is important to learn that unlike other javascript objects, math objects have no constructor. The properties and methods are static. The following are some of the most widely used math objects in javascript.

Math.round():

Math.round() method rounds(up/down) a number to a nearest integer. For example, 2.68 will be rounded up to 3, and 2.32 will be rounded down to 2.When using Math.round(), we cannot specify whether we want the number to be rounded up or down. Two more methods extend the functionality of Math.round():

Math.ceil(): This function takes a number and rounds it up to the nearest integer. For example, 15.6 will be rounded to 16, 5.3 will be rounded to 6, and 0.5 will be rounded to 1. If the passed number is an integer itself then the Math.ceil() will return the integer as it is.

Math.floor(): This method takes a number as an argument and rounds it down to the nearest integer. For example, 15.6 will be rounded down to 15, 5.3 will be rounded down to 5, and 0.5 will be rounded down to 0.

Tip: We can use Math.floor() to truncate the remainder in integer division. If we divide 20 by 3, then we will get 6.6666667. To omit the fractional part of the output we need to perform division using the Math.floor() function in this way: Math.floor(20/3). This will round down the output to 6.

The ECMAScript 6 version of Javascript provides a Math.trunc function that returns the integer part of the number, but the Math.floor technique is still widely used for the integer division. The integer division is very useful for tricky number manipulation in projects.

2.Math.random():

Math.random() outputs a number between 0(inclusive) and 1.The return type of Math.random is a floating-point. To get a larger random number, we need to customize the method by multiplying it with integers. We can also alter the starting limit of random numbers by adding integers to it. This method is handy when we want to generate random orders of anything like numbers, shades of colors, a deck of cards, etc. Here is how it works:

Tip: To get an integer value from Math.random(), we need to revamp the method with the help of Math.floor() in the following way: Math.floor(Math.random()*20)

3.Math Constants:

Javascript provides predefined mathematical constants to be used in arithmetic calculations Some of the most common constants are given below:

Math.PI // returns PI value i.e: 3.14159….

Math.SQRT2 // returns the square root of 2

Math.E //returns Euler’s number

Tip: It is a convention to use the upper case with constants. However, the functions will work fine with constants typed in lowercase too like Math.pi

Putting it All together:

A Beginner’s Project of JavaScript using Math Objects

Now let's play with these math objects to build a simple background color changing site. The site will use javascript math objects to randomly change the background color of the page every time the page loads.

There is no need for any CSS styling, but we do need a simple HTML document, as given below, to initiate the project.

To achieve the agenda of this project, we need to use math objects wisely in combination with basic arrays methods. The complete demonstration of the javascript code is given below:

Explanation:

We have made two functions to implement the project. I have used the arrow notation of the functions for ease, but the basic version of functions can be used as well. Starting with the first function of getRandNum() at line 3.

The geranium() method generates random numbers between 0 to 15. These numbers are floating points so we have to use Math.floor() to get an integer value. Next, we have used the toString method to convert the generated number into hexadecimal form. This method is very useful in generating numbers with different bases like a binary(2), octal(8) , Hexa(16), etc.

The second function is getColor() at line 7.This function generates a CSS color code in Hex format: #rrggbb and assigns it to the background color of the body element. The algorithm to generate the color code is very simple. All we need to do is to first create an array of size 6 using the from a method, then iterate over the array by calling the function getRandNum() on every element of the array using the map method. Finally, join the array with the ‘#’ symbol by the join method to transform it into a standardized CSS color code.

Lastly, associate this function with the event ‘load’ and add this event on the body element so every time the page loads, the body element fires this event. We will get to see a different color on every page load without explicitly specifying the color pattern in CSS styling.

For more information on Math objects and other methods of Javascript, you can browse through the given site. https://www.w3schools.com/js/js_math.asp

To get more ideas for beginner level project using vanilla javascript, visit this site: https://mikkegoes.com/javascript-projects-for-beginners/