CP476 Internet Computing

Week 7 – 2: JavaScript – Objects and OOP

Shaun Gao, Ph.D., P.Eng.

Agenda
• Introduction to JavaScript
• JavaScript Objects
• Definition
• Properties
• Methods
• Accessors, setter and getter
• Class
• Inheritance, encapsulation
• Keywords: extends, super, private, public
• Prototypes
• Object Map()
• Tutorial: install node.js and setup VS code for JS
Introduction
• What is JavaScript?
• Language developed by Netscape
• Primary purpose is for "client-end" processing of HTML documents
• Originally, JavaScript code is embedded within the html of a document
• An interpreter in the browser interprets the JavaScript code when appropriate
• JavaScript library or packages, example: Jquery: HTML, DOM, CSS, and Ajax.
• Note that, unlike PHP scripts, JavaScripts are visible in the client browser
• Since they are typically acting only on the client, this is not a problem
• Becoming both client-side and server-side programming language
• JavaScript is an object-based language.
JavaScript Objects
• A JavaScript object is a standalone entity with properties and type
• Almost "everything" is an object in JavaScript except primitive data
type (number, string, Boolean, undefined).
• Note: objects are created with classes in C++, C#, PHP…
• JavaScript variables could be Objects
• Object values are written as name : value pairs (or key:value pairs)
let person = {firstName:"John", lastName:"Doe", age:25, eyeColor:"blue"};
• A JavaScript object is a collection of named values
• Object Properties: the named values are called properties
• JavaScript is an object-based language.
JavaScript Objects – cont.
• What are not objects in JavaScript?
• Primitive values or primitive data types are not objects in JavaScript.
• Undefined
• strings
• numbers
• Boolean
• Symbols which returns from Symbol()
• Symbol() is a built-in function, returns a symbol primitive
• A Symbol value represents a unique identifier.
• Every Symbol() call is guaranteed to return a unique Symbol.
• Primitive data type is a basic data type provided by a programming
language as a basic building block.
• Demo01
JavaScript Objects – cont.
• In JavaScript, an object can be created in three ways:
• 1) using Object Literal/Initializer Syntax
• 2) using new operator
• 3) using the Object() Constructor function with the new keyword or create().
• Examples:
• 1) var p1 = { name:“John" }; // object literal syntax
• 2) var p2 = new Car(‘BMW’, ‘red’); //Car can be either a function or a class
such that an object
• 3) var p2 = Object.create(car); // Object() constructor function
• p2.name = “John"; // property
• Demo02
JavaScript Objects – cont.
• Create JavaScript Object using Object Literal Syntax
• Syntax:
• var object-name = { key1: value1, key2: value2,...};
• Note: the values can be string, number(integer, float), Boolean etc.
• Create JavaScript Objects using Objects() Constructor
• Syntax:
• var ObjectName = new Object(); //this is a variant of new operator
• Three difference ways to create an object.
• Demo03
JavaScript - Creating an Object
• Note on creating JavaScript objects
• An object property name can be any valid JavaScript string, or anything that
can be converted to a string, including the empty string.
• However, any property name that is not a valid JavaScript identifier (for
example, a property name that has a space or a hyphen, or that starts with a
number) can only be accessed using the square bracket notation.
• Example:
const myObj = new object();
myObj.type = 'Dot syntax';
myObj['date created'] = 'String with space’;
myObj.date created = 'String with space’;
• Demo04
JavaScript - Object Properties
• A JavaScript object property is a characteristic of an object, often
describing attributes associated with a data structure.
• There are two kinds of properties:
• instance properties hold data that are specific to a given object instance.
• static properties hold data that are shared among all object instances.
• static key word defines a static method or a static property.
• Question? How does static key word work in PHP?
• A property has a name (a string, or symbol) and a value (primitive,
method, or object reference).
JavaScript - Object Properties
• How to access JavaScript Properties
• Syntax

person.firstname + " is " + person.age + " years old.";

• Demo05
JavaScript - Object Methods
• JavaScript Methods – it can be located at value location in key : value
• JavaScript methods are actions that can be performed on objects.
• A JavaScript method is a property containing a function definition.
const person = {
firstName: “Mike”, lastName: “Jiang", age: 24,
fullName: function() {
return this.firstName + " " + this.lastName; }
};
• How to access Object Methods
• Syntax: objectName.methodName();
example: let name = person.fullName();
• Demo06
JavaScript - Object Accessors
• JavaScript Accessors (Getters and Setters)
• The get Keyword
• Syntax
get function_name(){ … return something; }
• Example
const person = { firstName: “Melia", lastName: “Hay", language: "en",
get lang() { return this.language; }
};
person.lang;  not person.lang();
• The set Keyword
• Syntax
set function_name(){ … set something; }
JavaScript - Object Accessors
• The set Keyword
• Example
const person = { firstName: “Lily", lastName: “Hua", language: "",
set lang(lang) {
this.language = lang;
}
};
// Set an object property using a setter:
person.lang = “jp"; not like person.lang(“jp”);
• Demo07 – getter and setter
JavaScript – Class introduction
• A JavaScript Class is a program-code-template for creating objects.
• Syntax
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
...
}
//"constructor“ is a special method
// constructor does not have a name
// there is no destructor() in JavaScript
• Example
• Demo08
• Getter/setter can be inside of class
JavaScript – Class Inheritance
• class inheritance uses the extends keyword.
• A child class inherits all the methods from its parent class.

• the super() method in the constructor method means the parent’s

property is called.
• Demo09
JavaScript – encapsulation
• Public and private
• By default, all methods and variables in
a class are public in JavaScript.
• but private members in a class can be
created by using a hash # prefix.
• Private instance fields are declared with #
names (pronounced "hash names"),
which are identifiers prefixed with #. The
# is a part of the name itself.
• Demo10
JavaScript (The get and set Keyword)
• Syntax
• {get prop() { ...; return property; }}
• Syntax:
• {set prop(val) { . . . }}
• Example.

• Demo11

• Note: (1) even if the getter is a method, do not use parentheses when
calling them; (2) get and set keywords can be used outside of classes
JavaScript - Object Prototypes
• We cannot add a new property to an existing object constructor from
outside of the object constructor.
function Person(first, last, age, eyeColor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyeColor;
}
Person.nationality = "English";
• Demo12
JavaScript - Map Objects
• A Map object holds key-value pairs where the keys can be any
datatype.
• Essential Map() Methods:

• Demo13 (nested object)

Summary
• JavaScript Objects
• Definition
• Properties
• Methods
• Accessors, setter and getter
• Class
• Inheritance, encapsulation
• Keywords: extends, super, private, public
• Prototypes
• Object Map()
• Question? Key word this is used in both PHP and JS, any difference?
Announcement
• Please start your group project
• The data files for the project are in myls

• Tutorial: install node.js and setup VS code for JS