1.1 - Numeric calculations

The first thing we are going to learn with programming is to do something very familiar to us all… simple mathematical calculations! While I promise I won’t get too mathy on you, I will say that mathematical calculations are an essential part of successful programming so being comfortable with the basics is a good idea.

Let’s use Javascript as a calculator! Try the following commands. Hopefully they are all quite intuitive as to what they will do.

Save as numbers-1.html:

<html>
    <body>
    </body>
    <script type="application/javascript">
    "use strict";

console.log( 2 + 2 );
console.log( 1.5 + 2.25 );
console.log( 7 - 2 );
console.log( 3 * 4 );
console.log( 10 / 2 );

    </script>
</html>

Open it in your web browser, and you’ll get just a blank screen. Where is your output? Don’t panic! Open the Chrome DevTools, and select the Console tab. You will see your output there. For most of this section of the book, this is where you will find the output of our programs. To make it appear in the main browser window properly will wait until we start digging into the HTML.

Screenshot

You will see I gave you the full content of the file in the previous example. To save space in the book, from here on I’ll only list the Javascript content but ensure you remember to include the HTML wrapping as shown. So, the above would now be provided as follows:

console.log( 2 + 2 );
console.log( 1.5 + 2.25 );
console.log( 7 - 2 );
console.log( 3 * 4 );
console.log( 10 / 2 );

Ok? We good to proceed?

Let’s move on to some more calculations. In addition to the simple arithmetic of the previous, we can also use powers (also known as exponents) through the use of a double star symbol. Try adding these to your previous file:

console.log( 4 ** 2 );          // What is 4 to the power of 2? (ie: 4 squared?)
console.log( 4 ** 3 );          // What is 4 to the power of 3? (ie: 4 cubed?)

Notice the // in the above lines? They tell Javascript that whatever follows is a comment for the programmers benefit and can be safely ignored. Good programmers quickly develop the habit of documenting their code with comments to make it easier to maintain later, so you’ll see the // scattered through many Javascript programs. It is also possible to write multi-line comments by starting the comment with /* and then terminating it with */. I’ve included an example of a multi-line comment in the next code block.

Add the following to your previous file:

/* 
Let's try some division and other tricks
Notice this is a multi-line comment by the way?
I hope you are practicing writing the comments as well!
*/
console.log( 13 / 5 );
console.log( Math.trunc( 13 / -5 ) );
console.log( 13 % 5 );

What are these doing?

Try changing up the numbers and test it works as you’d expect.

By the way, your HTML file should now look like this if you’ve been following along properly:

<html>
    <body>
    </body>
    <script type="application/javascript">
    "use strict";

console.log( 2 + 2 );
console.log( 1.5 + 2.25 );
console.log( 7 - 2 );
console.log( 3 * 4 );
console.log( 10 / 2 );
console.log( 4 ** 2 );          // What is 4 to the power of 2? (ie: 4 squared?)
console.log( 4 ** 3 );          // What is 4 to the power of 3? (ie: 4 cubed?)
/* 
Let's try some division and other tricks
Notice this is a multi-line comment by the way?
I hope you are practicing writing the comments as well!
*/
console.log( 13 / 5 );
console.log( Math.trunc( 13 / -5 ) );
console.log( 13 % 5 );

    </script>
</html>