WDD 131: Dynamic Web Fundamentals

W04 Learning Activity: JavaScript Objects

Overview

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

Prepare

Instead of storing related data in complex parallel or multi-dimensional arrays, related data can be stored using 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 single course, WDD 131,

   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) objects with the following properties:
   • section
   • enrolled
   • instructor
2. Create a function to set the name and number of the course in HTML. Pass the course object into your function. Use dot notation to access the parts of the object that you need.
3. Create another function that will output the sections into a table with an id of sections.

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" }
  ]
};

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

function sectionTemplate(section) {
  return `<tr>
           <td>${section.sectionNumber}</td>
           <td>${section.enrolled}</td>
           <td>${section.instructor}</td>
          </tr>`;
}

function renderSections(course) {
  const html = sections.map(sectionTemplate);
  document.querySelector("#sections tbody").innerHTML = html.join("");
}