//PROCESS: Basic math

True fact: Computers are good at math!

Regular
math		 Javascript
math		 On the keyboard Try it out in a button!
3+2 3 + 2 + is shift=
3−2 3 - 2 -
3×2 3 * 2 * is shift8
3•2 3 * 2 * is shift8
3⁄2 3 / 2 /
3÷2 3 / 2 /
3² Math.pow( 3, 2 )
2³ Math.pow( 2, 3 )
3√2 3 * Math.sqrt( 2 )
∛2 Math.pow( 2, ( 1 / 3 ) )
sin(3°) Math.sin( 3 * Math.PI / 180 )
cos(3°) Math.cos( 3 * Math.PI / 180 )
tan(3°) Math.tan( 3 * Math.PI / 180)
π Math.PI
parseInt( "35 degrees" )
parseFloat( "3.14159cm is a pithy measurement" )

Cleaning your data with parseInt()

Often the data that you read in your program is dirty — particularly when you are converting between datatypes, like converting strings to numbers.

This is where parseInt() comes in handy. parseInt() looks at a string, and extracts the first number that it sees.

For example, parseInt( "1855 Trollope Street" ) will return the number 1855. It is a real problem-solver!

If you need to get a floating decimal, use parseFloat() instead. For example, parseFloat( "100.3km/h" ) will return the number 100.3.

Common mistakes

Learn more

Code example

...is made with the following code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>drapak.ca - Area of a circle</title>
        <meta name="description" content="This script calculates the area of a circle">
        <meta name="author" content="Dave Drapak">
        <!--
            Change log:
                27. Sept 2015   - created
                3. March 2017   - reworked to move script to the end
                9. October 2018 - updated id styles and added parseInt  - Drapak
                11. Oct 2018    - fixed poor style in input line        - Drapak
                16. Oct 2018    - clarified example code                - Drapak
                21. Oct 2018    - clarified example code again          - Drapak
        -->
        <style>
            #outputId {
                font-weight:    bold;
            }
        </style>
    </head>

    <body>
        <h1>Calculate the area of a circle</h1>
        
        <p>
            What is radius of the circle?
            
            <input id="inputId" type="text" value="5">
                
            <button id="buttonId">
                Calculate the area!
            </button>
        </p>
        
        <p>The area is: <span id="outputId">Waiting for input...</span></p>

        <script>
            // read the input and output the 
            var mainProcedure = function () {
                console.log( 'in mainProcedure...' );
                
                //INPUT: get the radius from the input line
                var numberText      = document.querySelector( '#inputId' ).value;
                
                //PROCESS: clean up the input by converting the text to a number
                var parsedNumber    = parseInt( numberText );

                //PROCESS: calculate the answer
                var answer          = Math.PI * ( Math.pow( parsedNumber, 2 ) );
                
                //OUTPUT: display the answer
                document.querySelector( '#outputId' ).innerHTML = answer;
            }
            
            //INPUT: attach the change event to #inputId
            document.querySelector( '#inputId' ).onchange       = mainProcedure;

            //INPUT: attach the click event to #buttonId
            document.querySelector( '#buttonId' ).onclick       = mainProcedure;
        </script>
    </body>
</html>