2.2 - Maths & Variables in JS

Review

Web browsers can run a scripting language called JavaScript. The syntax is very similar to C, C++, C#, Java, etc...

Yesterday we very briefly learned about something called the console.

  • The console or "output screen" provides visual output to the user.

    • Important note - when using JavaScript in a website, the user cannot see the console.

  • We can print output "on the console" with console.log();

    • For example: console.log("This is a string of text");
      Will output This is a string of text

Today's Lesson: 2.2 - Maths & Variables in JavaScript

Part 1 - Maths

JavaScript is a scripting language. This is like a programming language, but instead of converting the code to "machine language", it is translated by a "middle-man" piece of software. This makes a tiny bit slower, but that's ok.

Code is read and executed line-by-line, in the order you see/type it.

  1. Do this first

  2. Now do this

  3. And now this

Code typically has numbers on each line so that we can easily talk-about and move-to specific areas more easily. If there is an error, the interpreter will give you the line number it thinks is the problem.

Computers were designed to do mathematics quickly. Let's try!

  • + and - for add and subtract

  • * and / for multiply and divide

  • == "is it equal" (that is important)

  • != "is it not equal"

  • < > <= >=

  • ** for exponent: 4**2 -> 16

  • Cannot assume BEDMAS - it is important to utilize brackets (or parentheses) ( ) properly!

JavaScript also has a Math object to perform more complex operations.

  • Math.PI

  • Math.sqrt(number)

  • Math.pow(base, exponent) // same as **

  • Math.random()

  • So much more...

Task (Part 1)

  • Let's compute and output some math to the console. You can use this pretend JavaScript console for now.

  • Each math statement should be a new "console.log". For Example:
    console.log(2 + 2); // will output 4
    console.log(5 * 7.1);
    // will output 35.5

  • Practice some math. Have the computer calculate and output the correct answers to the following:
    6 + 5
    7 - 3
    3 + 4 * 2
    (4 / 2) + 3
    5 + 2**3
    Math.round(6.4854)
    Math.PI

  • Maybe spend some time researching the Math object and do more complicated maths in JavaScript.

Part 2 - Variables

Doing a quick calculation is easy. But what if we wanted to hold on to a value to be used later? Perhaps we want to hold a lot of values like a quadratic equation, the locations of items in a 3D space, a list of colours, phone numbers, or financials.

Variables talk directly to the memory in the computer. We reserve a block of space by asking for one, just like in math class:

Let w represent the number of watermelons
Let
apple represent the number of apples
w = 2
apples = 7
Let
shoppingList = w + apples

Q. In the example above, what is the value of "shoppingList"?


Variables in JavaScript are very similar:

let w = 2;

let apples = 7;

let myList = w + apples; // sets the variable 'myList' to 9

console.log(myList); // output the value of 'myList'

Please note - if you look online, you might see the keyword var being used instead of let. It is very important that, for the duration of this course, you always use let when creating a variable.

After the variable has been declared, you can use it as much as you want. Think of it like a box, bucket, or envelope.
For example, if we want to
change the value of w to 4:
w = 4;

We did not use the keyword let again.

Note: You can declare a variable without giving it a value and set the value later.

Quadratic Formula Example:

Let's say you want to calculate the quadratic formula for 3x² + 7x - 9

let a, b, c; // declare three variables

a = 3;

b = 7;

c = -9;


// positive outcome

let x = (-1*b + Math.sqrt(b**2 - 4*a*c))/(2*a);

console.log(x);


// negative outcome

x = (-1*b - Math.sqrt(b**2 - 4*a*c))/(2*a);

console.log(x);


Variables can be different types of data:

let myNumber = -45;
let myString = "Some text, in quotes";
let myBoolean = true; // or false

Strings

  • Can be combined (concatenated) using the '+' operator
    myString = "This " + "that"; // the value is now 'This that'

  • Strings cannot be subtracted
    myString = "This that" - "that"; // not possible

Booleans

  • Anything with value is considered 'true'
    let sample1 = 5; // considered true
    let sample2 = 0; // considered false
    let sample3; // considered false


(Tutorial on variables) (w3schools reference)


Task (Part 2)

  • This task is described in Replit (look for 2.2), along with many more examples of using maths & variables.