Console

To proceed with your JavaScript lessons on a web browser, you will first need an updated web browser. Edge, Chrome or Firefox will do just fine. These screenshots were made in Chrome.

On a Windows/Linux machine, press Ctrl-Shift-J.
On a MacOS machine, press Cmd-Shift-J.

Below is what you should see.

(Click to enlarge)

The encircled button is the tab you should be at. If you find yourself in any position where the display is unfamiliar to you, click on that button to bring you back to the console.

(Click to enlarge)

Test your console. Type x into the console.

(Click to enlarge)

You may see that the browser automatically tries to guess what you are typing. Normally it would be a great help, but in this case, it is an obstacle. Click anywhere else to get rid of it.

(Click to enlarge)

Press the Enter key. This means that you have effectively entered x into your browser console. What do you see?

(Click to enlarge)

You are seeing this error message because x has not yet been defined.

(Click to enlarge)

Click on the indicated button. This will clear the console.

Congratulations! You have learned how to use your browser console.

Exercise 1: Variable Assignment (numerical)

We are going to learn how to assign variables. Think of variables as placeholders for values that can be assigned right away, or later.

(Click to enlarge)

Enter x1. You should see this error message. This is because x1 has not yet been declared.

(Click to enlarge)

Enter x1 = 5. Here, you have declared the variable x1 and assigned the numeric value of 5 to it.

(Click to enlarge)

Enter x2 = 8. Here, you have declared the variable x2 and assigned the numeric value of 8 to it.

(Click to enlarge)

Now if you enter x1, the value will be returned to you because there is an assigned value.

(Click to enlarge)

Same for x2.

(Click to enlarge)

Now enter X1. You should see an error message. This is because JavaScript is case-sensitive. x1 and X1 are therefore not the same thing. We have not yet declared X1.

(Click to enlarge)

Now enter X1 = 100, and enter X1. You should now see a value.

Exercise 2: Arithmetic Operators

It's time to do some math! JavaScript arithmetic operators are as follows:

• + addition
• - subtraction
• * multiplication
• / division
• % modulo

For those unfamiliar with the term "modulo", it basically means "remainder".

(Click to enlarge)

Enter these formulas. Get creative by using your own values. You should see results returned.

(Click to enlarge)

Note that any value divided by zero (0) will give you some kind of error.

(Click to enlarge)

Clear the console. Then enter x = 5 and y = 10. Then enter x + y. You should get 15.

Try using other arithmetic operators on x and y.

Exercise 3: Use of parentheses in arithmetic

If you have done any kind of arithmetic before, this shouldn't be a problem. Sometimes in code, our numerical formulas are not as straightforward as x + y. This is where parentheses come in.

(Click to enlarge)

Declare variables x, y and z. Assign whatever values you wish, or use the ones provided as an example.

(Click to enlarge)

Enter (x - y) * z and x - (y * z). You should see the correct results displayed. Operations within parentheses will always be executed first.

Exercise 4 (Optional): Variable swop.

This exercise is a classic beginners' programming puzzle, and is designed to help cement your understanding of variable value assignment and arithmetic operation.

Given that x is 10 and y is 20, swop their values (x is 20 and y is 10) without resorting to direct variable assignment or a temporary holding variable.

Direct assignment

x = 20
y = 10

Temporary holding variable

z = x
x = y
y = z

The answer is as follows:

(Click to enlarge)

First enter x = 10 and y = 20.

(Click to enlarge)

Enter x = x + y. Now the value of x is (10 + 20 = 30).

(Click to enlarge)

Enter y = x - y. Now the value of y is (30 - 20 = 10).

(Click to enlarge)

Enter x = x - y. Now the value of x is (30 - 10 = 20).

Finally, x is now 20 and y is 10.

Review Question: Can this answer be replicated using multiplication and division? What are the considerations?

Take the TTL Lesson 1 Quiz