Working with User-Defined Objects

Introduction

Welcome to the Working with User-Defined Objects Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Exam Objectives

The following exam objective is covered in this lab:

• 2.3 Complete and debug code that uses objects

Lab Duration

It will take approximately 30 minutes to complete this lab.

Exercise 1 - Creating User-Defined Objects

You deal with various kinds of objects in day-to-day situations. For example, your computer is an object. It has its own set of common characteristics such as the type, model number, memory capacity, processor speed, etc. However, the values for these characteristics do not remain the same for all computers. Each computer will have different values for the common characteristics. You can call the common characteristics as properties. The computer can have certain functions of its own such as booting, processing, etc. You can call these functions as methods. To sum up, an object (computer) can have its own set of properties (model number, processor speed) and methods (booting, processing).

Similarly, in JavaScript programming, each entity is considered as an object. For example, arrays, functions, etc. are all objects in JavaScript. Each object has its own set of properties and methods. Properties are the named values. You can add, modify, and delete the properties that are not read-only. You need to use the “.” (dot) operator along with the object name to access the property.

Methods are the actions or set of statements that will be executed on the objects. A method will have a name and a set of parameters that are optional. You need to use the “.” (dot) operator along with the object name to access the method. Thus, an object acts as a container to store various properties and methods.

You can create your own objects in JavaScript. The following are the three ways to create an object in JavaScript:

• Using the new keyword: You can use the new keyword to create an object.
• Using the object literal: You can use the object literal to create an object. The properties with their values are listed within the curly braces.
• Using the object constructor function: You can define an object constructor function to create an object. You need to call the object constructor function with the new keyword to create a new object.

In this exercise, you will learn to create user-defined objects, assign properties and methods to the created objects, and access the objects. You will perform the following tasks:

• Task 1 - You will download the Visual Studio Code workspace (ComputeGrade) from the Intranet and create a new HTML page named Grade_Object.html in the ComputeGrade workspace.
• Task 2 - You will learn to write JavaScript code to create the user-defined objects using the new keyword in Grade_Object.html.
• Task 3 - You will learn to write JavaScript code to create the user-defined objects using the object literal in Grade_Object.html.
• Task 4 - You will learn to write JavaScript code to create the user-defined objects using the object constructor function in Grade_Object.html.

Learning Outcomes

After completing this exercise, you will be able to:

• Create and access user-defined objects in JavaScript