Tutorial 01

1. Find out how you can open the Developer Tools on your browser.

2. Open up some of your favorite webpages and using your Developer Tools, disable JavaScript and see what happens to the page. Make sure to interact with the page before that. e.g. open up navigation bars, click on buttons, etc.

3. Add JavaScript to an HTML document using your favorite editor, log Hello World! to the console and verify (using your Developer Tools).

4. Declare a constant and a variable in JavaScript, named PI and firstName, put the values 3.14 and "Alice" in them, then log them separately to the console and verify.

   Solution

   const PI = 3.14
   let firstName = "Alice"
   console.log(PI)
   console.log(firstName)
   

5. Using the constant and variable in the previous step, create a new constant named message with the value The value of PI is 3.14 and my first name is Alice. Use template strings to inject the value of PI and firstName. Log the message to the console and verify.

   Solution

   const PI = 3.14
   let firstName = "Alice"
   const message = `The value of PI is ${PI} and my first name is ${firstName}`
   console.log(message)
   

6. Declare a function (using Function Declaration, Function Expression, and Arrow Function) named add that takes 2 parameters a and b and returns the addition. Verify the function by calling it and logging the result to the console.

   Solution

   Function Declaration:

   function add(a, b) {
       return a + b
   }
   console.log(add(5, 6))
   

   Function Expression:

   const add = function(a, b) {
       return a + b
   }
   console.log(add(5, 6))
   

   Arrow Function:

   const add = (a, b) => {
       return a + b
   }
   console.log(add(5, 6))
   

7. Create an array named fruits that contains the following elements: "apple", "banana", and "cherry". Log the second item to the console and verify.

   Solution

   const fruits = ["apple", "banana", "cherry"]
   console.log("second item is:", fruits[1])
   

8. Create an object named me using your own information with these keys: name, age, major, number_of_courses_left, and favorite_course. Log the values of each key to the console and verify. Use both the Dot Notation object.key and Bracket Notation object["key"].

   Solution

   const me = {
       name: "Masoud",
       age: 101,
       major: "Software Engineering",
       number_of_courses_left: 0, // thank god
       favorite_course: "comp3512"
   }
   // using both dot and bracket notation
   console.log(me.name, me["name"])
   console.log(me.age, me["age"])
   console.log(me.major, me["major"])
   console.log(me.number_of_courses_left, me["number_of_courses_left"])
   console.log(me.favorite_course, me["favorite_course"])
   

9. Read about what JSON is.