WDD 131: Dynamic Web Fundamentals

W04 Learning Activity: JavaScript Objects

Overview

JavaScript objects group related data and functions together. They are a core concept in JavaScript and used extensively throughout the language. In this activity, you will learn how to create and use objects effectively.

Prepare

Rather than storing related data in complex parallel or multi-dimensional arrays, you can use objects, which are more readable, stable, and maintainable.

This is an example of a JavaScript object literal (a collection of key-value pairs) representing a person in a concise and readable format.

let person = {
  name: "Antonia Francesca",
  age: 30,
  profession: "Software Engineer",
  hobbies: ["reading", "playing guitar", "hiking"],
  address: {
    street: "123 Camino Real",
    city: "Santa Rosa",
    country: "Honduras"
  },
  isEmployed: true,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

• The person object includes properties name, age, profession, hobbies, address, and isEmployed.
• It also includes a greet method that logs a greeting message to the console using the person's name.
• The address property is an object itself, containing nested properties: street, city, and country.
• You can access and modify the properties and invoke the methods of the person object using bracket [] or dot notation.

✓ Determine the output of the following statements given the person object defined above.

1. console.log(person['isEmployed']);   // bracket notation

2. console.log(person.hobbies[0]);   // dot notation

3. console.log(person.age);   // dot notation

4. console.log(person['address'].city);   // combined notation

Updating a value works like you expect.

person.age = 31;

Activity Instructions

Use objects and encapsulation to create a representation of a typical college course schedule.

1. Given the following object literal for a course,

   let aCourse = {
     code: "WDD131",
     title: "Dynamic Web Fundamentals",
     credits: 2,
   };

   add a sections property to the object. Since the course may have more than one section, make this sections an array of at least two (2) items with the following properties:
   • section
   • enrolled
   • instructor
   Check Your Understanding

   let aCourse = {
     code: "WDD131",
     title: "Dynamic Web Fundamentals",
     credits: 2,
     sections : [
       { section: "001", enrolled: 95, instructor: "Roberto Diaz Rodriguez" },
       { section: "002", enrolled: 80, instructor: "Sarah Gobble" }
     ]
   };

2. Create a function named setCourseInformation() to display the course code and title in HTML. Pass the course object as a parameter. Use dot notation to access the properties you need and update the element with id courseName.
   Check Your Understanding

   function setCourseInformation(course) {
     document.querySelector("#courseName").innerHTML = `${course.code} – ${course.title}`;
   }

3. Create a function named renderSections() that displays the course sections as rows in a table with id sections.
   Check Your Understanding

   function renderSections(course) {
     const tbody = document.querySelector("#sections tbody");
     let rows = "";
     for (const section of course.sections) {
       rows += `<tr>
         <td>${section.section}</td>
         <td>${section.enrolled}</td>
         <td>${section.instructor}</td>
       </tr>`;
     }
     tbody.innerHTML = rows;
   }