Math object

• The Math object is a built-in object with mathematical constants (properties) and methods
  • Unlike many other built-in objects, Math is a static object which has no constructor, so every property/method starts with Math.

Frequently used (static) properties

property	description
Math.PI (opens new window)	a constant that approximately equals 3.14159

Frequently used (static) methods

methode	description
Math.ceil(<x>) (opens new window)	round <x> up to the nearest integer
Math.floor(<x>) (opens new window)	round <x> down to the nearest integer
Math.round(<x>) (opens new window)	round <x> to the nearest integer (>= .5 round up, < .5 round down)
Math.random() (opens new window)	generate a random number between 0 (included) and 1 (excluded)
Math.abs(<x>) (opens new window)	returns the absolute value of <x>

Examples

Cylinder volume

• Open es6/math/cylinder.html and es6/math/cylinder.js
• Calculate the volume of a cylinder (and round it to 2 decimal points)

<div class="border-gray">
    <p>
        <label for="radius">radius</label>
        <input type="number" name="radius" id="radius" step=".5" value="5" /> cm *
        <label for="height">height</label>
        <input type="number" name="height" id="height" step=".5" value="2" /> cm
    </p>

    <p id="volume1">Volume = <b></b></p>
    <p id="volume2">Volume (rounded) = <b></b></p>
    <p id="volume3">Volume (rounded to 2 decimal points)= <b></b></p>
</div>

document.querySelectorAll('[type=number]').forEach(function (input) {
    input.addEventListener('blur', function (e) {
        const radius = document.getElementById('radius').value;
        const height = document.getElementById('height').value;
        const volume = radius * radius * Math.PI * height;

        document.querySelector('#volume1 b').innerHTML = `${volume} cm<sup>3</sup>`;
        
        // rounded
        document.querySelector('#volume2 b').innerHTML = `${Math.round(volume)} cm<sup>3</sup>`;
        
        // rounded to 2 decimal points
        // document.querySelector('#volume3 b').innerHTML = `${Math.round(volume * 100) / 100} cm<sup>3</sup>`;
        document.querySelector('#volume3 b').innerHTML = `${volume.toFixed(2)} cm<sup>3</sup>`;
    });
});

// dispatch (trigger) blur event
document.getElementById('radius').dispatchEvent(new Event('blur'));

Roll the dice

• Open es6/math/dice.html and es6/math/dice.js

<div class="border-gray">
    <p><button type="button" class="primary">roll the dice</button></p>
    <figure></figure>
</div>

• Line 8: Use the formula Math.floor(Math.random() * (max-min+1) + min) to calculate a random integer number between min and max (both boundaries included)
• Line 14: we use the slice() (opens new window) method to remove the 2 last characters (+ and a space) from the string caption

const diceButton = document.querySelector('main button');

diceButton.addEventListener('click', function (e) {
    let dices = '';
    let caption = '';
    let sum = 0;
    for (let i = 0; i < 3; i++) {
        const roll = Math.floor(Math.random() * 6 + 1);
        sum += roll;
        caption += `${roll} + `;
        dices += `<img src="/assets/dices/dice${roll}.svg" alt="dice ${roll}">`;
    }
    // remove last 2 characters from the string and add the sum
    caption = `${caption.slice(0, -2)} = ${sum}`;
    document.querySelector('main figure').innerHTML = `${dices}<figcaption><h4>${caption}</h4></figcaption>`;
});

// dispatch (trigger) click event
diceButton.dispatchEvent(new Event('click'));

READING TIPS

• Math object@Mozilla (opens new window)
• Math object@W3Schools (opens new window)

Exercises

• Open exercises/index.html and make the exercises under the tab ES6 > Math object