6/17/24, 9:51 PM about:blank

Hands-on Lab: JavaScript - Browser Console

The purpose of this lab is to practice using JavaScript in the browser console, to reinforce your understanding of certain concepts.

Estimated Time: 25 minutes

Objectives

After completing this lab, you will be able to:

1. Write and run JavaScript on the browser console

2. Create variables, work with conditional statements, create loops, and define methods in JavaScript.

Task 1 - Open the browser console

In this task, we are going to run JavaScript code in the browser console. The Chrome browser uses V8, which is Google’s open source high-performance JavaScript
engine.

1. Open a new, blank tab in your browser. You can do this by clicking on Ctrl + T (Windows) or Command + T (Mac).

2. Right-click anywhere on the new blank browser tab and choose Inspect or Inspect Element, depending on the browser you are using. The image below is for
the Chrome Broswer.

3. A developer window should open on your screen. Go to the Console tab, as shown below. You will see a command prompt. You can run the rest of the tasks
there.

4. If your console has any logs printed, clear it by running the following command. This is not mandatory, but will you help have a fresh start.

1. 1

1. clear()

Copied!

If your browser does not support this, use the console.clear() command instead.

about:blank 1/8
6/17/24, 9:51 PM about:blank

Task 2 - Running JavaScript commands

NOTE: At any point of time, when you want to clear the console run the clear(), or console.clear() command.

To run the commands we will use the command prompt on the browser control. Type or paste each command and press enter to run the command.

1. Let’s start with some simple code to print Hello World! to the console. Run the following command.

1. 1

1. console.log("Hello World!")

Copied!

The output should be the same as below.

The undefined value means that your command doesn’t return any value.

2. Let’s create some variables and print them. Run the following commands.

1. 1
2. 2
3. 3
4. 4

1. let num = 5
2. var mystr = "John"
3. console.log(num)
4. console.log(mystr)

Copied!

Both let and var can be used to create variables. var is used when you want the variable to have global scope and let is used when you want the
variable to have scope within the block where it is created.

3. Let’s create a constant and print it. Run the following command.

1. 1
2. 2

1. const pi_val = 3.147

2. console.log(pi_val)

Copied!

const is used to declare variables whose values can never change.

4. Let’s create function which prints any value that is input to it.
1. 1
2. 2
3. 3

1. function printMyInput(user_input) {
2. console.log("The parameter passed is " + user_input)
3. }

Copied!

5. Call the function you created in the previous step, once with a number and once with a string.

Note: 9 & John are the 2 input parameters passed to the printMyInput function.

1. 1
2. 2

1. printMyInput(9)
2. printMyInput("John")

Copied!

6. Let us see another approach of writing the printMyInput function according to the ES6 standard. This syntax is also called arrow functions and provide a
shorthand to write functions.
1. 1
2. 2
3. 3

1. let printMyInputES6 = (user_input) => {

2. console.log(user_input)
3. }

Copied!

7. Call the function you created in the previous step once with a number and once with a string.
1. 1
2. 2

about:blank 2/8
6/17/24, 9:51 PM about:blank
1. printMyInputES6(9)
2. printMyInputES6("John")

Copied!

Since the function is passed a single value and the body of the function is a single line, the brackets can be omitted. The code can also be written as
below.
1. 1

1. let printMyInputES6Short = user_input => console.log(user_input)

Copied!

Now when we call it, the output should remain the same.
1. 1
2. 2

1. printMyInputES6Short(9)
2. printMyInputES6Short("John")

Copied!

Task 3 - Operators, Conditions, Loops

In this task, you will be running some JavaScript from which you can learn how to use operators, controls, and loops.

Ensure that you understand the code in each file. These are primitive and foundational for your understanding of JavaScript.

1. Arithmetic operators are operators that we use to perform arithmetic operations.

+ (plus) operator is used to add
- (minus) operator is used to subtract
* (star or asterisk) operator is used to multiply
/ (slash) operator is used to divide
** (double star) operator is used for exponentiation/power
% (percentage) operator is used for modulus operation (the remainder left over after division)
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

1. console.log("5 + 3 = ", 5 + 3)
2. console.log("7 - 3 = ", 7 - 3)
3. console.log("8 * 2 = ", 8 * 2)
4. console.log("27 / 3 = ", 27 / 3)
5. console.log("4 to the power of 3 = ", 4 ** 3)
6. console.log("19 mod 4 = ", 19 % 4)

Copied!

The plus (+) operator is also used for string concatenation. When using a + with both a number and a string, they both get treated as a string, and get concatenated
rather than added.
Expressions are read left to write, so adding two numbers and then a string will interpret the first + as addition, and the second + as concatenation.
1. 1
2. 2
3. 3
4. 4
5. 5

1. console.log("5 + 3 = ", 5 + 3)
2. console.log("5 + \"3\" = ", 5 + "3")
3. console.log("5 + 5 + \"3\" = ", 5 + 5 + "3")
4. console.log("\"3\" + 5 + 5 = ", "3" + 5 + 5)
5. console.log("5 + 5 + \"3\" + 5 = ", 5 + 5 + "3" + 5)

Copied!

2. Assignment operators are operators that are used to assign values to variables

= operator is used to assign value on the right to the variable on left

+= operator is used to increment the value stored in the left operand by the value of the right operand and store it back to the left operand (the same as
writing tmp = tmp + val where tmp is a variable and val is some arbitrary value)
-= operator is used to decrement the value stored in the left operand by the value of the right operand and store it back to the left operand (the same as
writing tmp = tmp - val where tmp is a variable and val is some arbitrary value)
*= operator is used to multiply the value stored in the left operand by the value of the right operand and store it back to the left operand (the same as
writing tmp = tmp * val where tmp is a variable and val is some arbitrary value)
/= operator is used to divide the value stored in the left operand by the value of the right operand and store it back to the left operand (the same as writing
tmp = tmp / val where tmp is a variable and val is some arbitrary value)
**= operator is used to raise the value stored in the left operand to the power value of the right operand and store it back to the left operand (the same as
writing tmp = tmp ** val where tmp is a variable and val is some arbitrary value)
%= operator is used to get modulus of the value stored in the left operand by value of the right operand and store it back to the left operand (the same as
writing tmp = tmp % val where tmp is a variable and val is some arbitrary value)
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7

about:blank 3/8
6/17/24, 9:51 PM about:blank
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29

1. x = 5
2. console.log("Old value of x: ", x)
3. x += 3
4. console.log("New value of x: ", x)
5.
6. y = 5
7. console.log("Old value of y: ", y)
8. y -= 3
9. console.log("New value of y: ", y)
10.
11. a = 6
12. console.log("Old value of a: ", a)
13. a *= 3
14. console.log("New value of a: ", a)
15.
16. b = 6
17. console.log("Old value of b: ", b)
18. b /= 3
19. console.log("New value of b: ", b)
20.
21. c = 6
22. console.log("Old value of c: ", c)
23. c %= 3
24. console.log("New value of c: ", c)
25.
26. d = 6
27. console.log("Old value of d: ", d)
28. d **= 3
29. console.log("New value of d: ", d)

Copied!

3. Comparison Operators are used to compare values or variables against other values or variables

== operator checks if the operand on the left is of equal value to the operand on right
=== operator checks if the operand on the left is of equal value and equal type to the operand on right
!= operator checks if the operand on the left is not of equal value to the operand on right
> operator checks if the operand on the left is greater than that on the right
< operator checks if the operand on the left is lesser than that on the right
>= operator checks if the operand on the left is greater than or equal to that on the right
<= operator checks if the operand on the left is lesser than or equal to that on the right
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19

1. //Checking equality of 5 (number type) and 5 (string type)

2. console.log("5=='5' ", 5=='5')
3. console.log("5==='5' ", 5==='5')
4. console.log("5===5 ", 5===5)
5.
6. console.log("5 != 5 ", 5 !== 5)
7. console.log("5 != 6 ", 5 != 6)
8. console.log("5 != '5' ", 5 !== '5')
9.
10. console.log("5 > 2 ", 5 > 2)
11. console.log("5 > 7 ", 5 > 7)
12. console.log("5 > 5 ", 5 > 5)
13.
14. console.log("5 < 7 ", 5 < 7)
15. console.log("5 < 2 ", 5 < 2)
16. console.log("5 < 5 ", 5 < 5)
17.

about:blank 4/8
6/17/24, 9:51 PM about:blank
18. console.log("5 >= 5 ", 5 >= 5 )
19. console.log("5 <= 5 ", 5 <= 5 )

Copied!

4. Logical Operators are used to combine more than one conditions.

&& operator checks if the condition on left and right are true. Returns true only of both conditions are true. Else returns false.
|| operators checked if either the condition on the left is true or right is true. Returns true even if one of the two conditions is true.
! operator checks if the condition is not met.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10

1. var raining = false

2. var cloudy = true
3.
4. console.log("It is raining: ", raining)
5. console.log("It is cloudy: ", cloudy)
6.
7. console.log("It is raining AND cloudy: ", raining && cloudy)
8. console.log("It is raining OR cloudy: ", raining || cloudy)
9. console.log("It is not raining: ", !raining)
10. console.log("It is not cloudy: ", !cloudy)

Copied!

Short-Circuit Evaluation

Short-circuit evaluation is a concept in which the compiler will skip checking sub-expressions in a compound statement (a statement with logical operators) once the
value is determined.

exp1 && exp2 will not evaluate exp2 if exp1 is false because if even one expression is false with an &&, the entire expression is false
exp1 || exp2 will not evaluate exp2 if exp1 is true because if even one expression is true with an ||, the entire expression is true

This can be very useful when evaluating certain expressions, and should be taken advantage of where needed.

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8

1. var chocolate = true

2. var candy = false
3.
4. console.log("There is chocolate: ", chocolate)
5. console.log("There is candy: ", candy)
6.
7. console.log("There is candy AND chocolate: ", chocolate && candy, " -- Only candy is evaluated")
8. console.log("There is chocolate OR candy: ", chocolate || candy, " -- Only chocolate is evaluated")

Copied!

5. if - else if - else Conditional statements are very useful to control the flow of your code.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24

1. //Accept a input from the user. If it is a number, print the multiplication table for the number. Else print the input and the length of the inp
2. let user_input = prompt('Enter a value');
3. //Check if the user did not input anything
4. if (!user_input) {
5. console.log("You did not input anything")
6. }
7. //Check if the user input is not a number
8. else if (isNaN(user_input)) {
9. console.log("Your input is ", user_input)

about:blank 5/8
6/17/24, 9:51 PM about:blank
10. console.log("The length of your input is ", user_input.length)
11. }
12. //The only option remaining is that the input is a number
13. else {
14. console.log(user_input, " X 1 = ", user_input*1)
15. console.log(user_input, " X 2 = ", user_input*2)
16. console.log(user_input, " X 3 = ", user_input*3)
17. console.log(user_input, " X 4 = ", user_input*4)
18. console.log(user_input, " X 5 = ", user_input*5)
19. console.log(user_input, " X 6 = ", user_input*6)
20. console.log(user_input, " X 7 = ", user_input*7)
21. console.log(user_input, " X 8 = ", user_input*8)
22. console.log(user_input, " X 9 = ", user_input*9)
23. console.log(user_input, " X 10 = ", user_input*10)
24. }

Copied!

6. switch-case statements are used to replace multiple if - else if conditions which check the same variable. After one of the conditions is satisfied and the block
of code is executed, the control should explicitly break out of the switch block. Otherwise, all other conditions will be executed until either a break statement
is found, or until there is no more code.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18

1. let user_input = prompt('Enter a number between 1 to 7');

2.
3. //Using logical OR operator to check if the input is a number and it is between 1 to 7
4. if(isNaN(user_input) || user_input< 1 || user_input>7) {
5. console.log("Invalid input")
6. } else {
7. user_input = parseInt(user_input)
8. switch(user_input){
9. case 1: console.log("Sunday"); break;
10. case 2: console.log("Monday"); break;
11. case 3: console.log("Tuesday"); break;
12. case 4: console.log("Wednesday"); break;
13. case 5: console.log("Thursday"); break;
14. case 6: console.log("Friday"); break;
15. case 7: console.log("Saturday"); break;
16. default: console.log("Invalid entry");
17. }
18. }

Copied!

7. Loops can be used when the same block of code needs to be executed many times.

for loops have an initial value, condition based on which the loop is executed, and an incremental value.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

1. //Accept a input from the user. If it is a number print the multiplication table for the number.
2. let user_input = prompt('Enter a number');
3. //Check if the user input is a number
4. if(!isNaN(user_input)) {
5. //Using for loop for the repetitive statement
6. for (let i=0; i<10; i++) {
7. console.log(user_input, " X ", i, " = ", user_input*i)
8. }
9. }

Copied!

while loops have only expression: a condition based on which a block of code is executed. This is the same type of expression as the second one in a for loop
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12

about:blank 6/8
6/17/24, 9:51 PM about:blank
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19

1. //The code below is to find the length of the words the user is entering. The loop will go on and on until the user chooses not to continue by p
2.
3. let do_more = true
4.
5. while(do_more) {
6. //Accept a input from the user.
7. let user_input = prompt('Enter a word');
8. //Check if the user input is not a number and then print the length of the input
9. if(isNaN(user_input)) {
10. console.log("Length of the word you entered is " + user_input.length)
11. } else {
12. console.log("You entered a number. Only words are allowed")
13. }
14. let should_continue = prompt("Do you want to continue. Press n to stop")
15.
16. if(should_continue === "n") {
17. do_more = false
18. }
19. }

Copied!

Task 4 - Collections
1. Array is an indexed collection. The index positions start from 0. The element in first position is at index 0, the second element is at position 1, and so on. The
index of the last position will always be one less than the length of the array.
1. 1
2. 2
3. 3
4. 4

1. let myArray = ["Jack","Jill",4,5,true,"John"]

2.
3. console.log(myArray[0]);
4. console.log(myArray[5]);

Copied!

2. To iterate through arrays, there is a special type of for loop, forEach, which gets executed for each value in the given array.
1. 1
2. 2
3. 3
4. 4
5. 5

1. let myArray = ["Jack","Jill",4,5,true,"John"]

2.
3. myArray.forEach(element => {
4. console.log(element)
5. })

Copied!

3. To find the index position and the value, we can use the generic Object.entries method, which can be used with all collection objects. This maps each index
position to the value.
1. 1
2. 2
3. 3
4. 4

1. let myArray = ["Jack","Jill",4,5,true,"John"]

2. for (const [index, value] of Object.entries(myArray)) {
3. console.log(index, " - ", value);
4. }

Copied!

4. Map object maps a key to a value. The keys have to be unique. The values can be string, int, float, or any other valid JavaScript datatype. An empty Map
object can be create with the new keyword.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11

1. let myMap = new Map();

2.
3. //Add a key-value pair to the map, with a key of "name" and a value of "John".
4. myMap.set("name", "John")
5.
6. //Add another key-value pair to the map, with a key of "age" and a value of 22.
7. myMap.set("age", 22)
8.

about:blank 7/8
6/17/24, 9:51 PM about:blank
9. myMap.forEach((val,key) => {
10. console.log(key, " - ", val)
11. })

Copied!

Author(s)
Lavanya

Other Contributor(s)
Michelle Saltoun

about:blank 8/8