Scribd
Upload
6 views

Week3-Wednesday

The document outlines key learning goals for JavaScript II, focusing on object creation, manipulation, and inheritance. It explains object literals, constructors, and built-in objects, as well as prototype-based inheritance and the introduction of classes in ES6. The document emphasizes the importance of understanding these concepts for effective programming in JavaScript.

Uploaded by

menohax221
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Week3-Wednesday

The document outlines key learning goals for JavaScript II, focusing on object creation, manipulation, and inheritance. It explains object literals, constructors, and built-in objects, as well as prototype-based inheritance and the introduction of classes in ES6. The document emphasizes the importance of understanding these concepts for effective programming in JavaScript.

Uploaded by

menohax221
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Human-Computer Interaction

Track B: JavaScript II

Clemens Nylandsted Klokmose – September 15th 2021


Learning goals

• Know how to create and manipulate objects in JavaScript


• Understand the different ways objects can be created
• Understand the inheritance model in JavaScript
• Know how to use class declarations
What are objects?

• Collection of named properties


• Properties are other objects (or primitive values… that are also
objects…)
• Properties can hold functions, these are called methods

let aCard = {"color": "hearts", "number": 2}


aCard.color = "spades"
let cardValue = aCard.number;
;

let bellagio =
name: "Bellagio"
location: "Las Vegas"
rooms: 3950
occupiedRooms: 2593
availableRooms: function()
return this.rooms - this.occupiedRooms
}
}

Object literal notation

• Objects created with {


• Properties: Name followed by colon followed by value
• Methods: Name followed by colon followed by function
• Every property or method are separated by commas

let timberlineLodge =
name: "Timberline Lodge"
location: "Oregon"
rooms: 70
occupiedRooms: 35
availableRooms: function()
return this.rooms - this.occupiedRooms
}
}

Object constructor

• Objects created with a function called a constructor


• new keyword used to instantiate objects
• this refers to the created object

let Car = function(brand, name, year)


this.brand = brand
this.name = name
this.year = year
this.drive = function()
console.log("Wrooom")

let prius = new Car("Toyota", "Prius", 2018)


let volvo = new Car("Volvo", "240", 1987);
}

Everything are objects


Strings are objects

• Length of a string is a property str.length


• String to uppercase (a method) str.toUpperCase(
• Splitting a string (a method) str.split(",")
• Substring (a method) str.substring(12, 18
• ...

Built-in objects and constructors

• console: used to, e.g., write something in the log with console.lo
• document: the browser’s representation of an HTML page
• window: the browser window, has properties such as window.innerWidth
• Date: Constructor used to create a new date object
let now = new Date();
let day = now.getDay();

Inheritance in JavaScript

• Prototype-based
• Objects inherit methods and properties from other objects
• Inheritance follows a prototype chain

Object.getPrototypeOf({}) == Object.prototype); // tru


Object.getPrototypeOf(Object.prototype)); // null

Inheriting in JavaScript with constructors

• Can be done by calling another constructor function in a constructor


function
• Methods made inheritable by putting them on the prototype property
let Car = function(brand, name, year)
this.brand = brand let ElectricCar = function(brand, name,
this.name = name year, capacity)
this.year = year Car.call(this, brand, name, year);
this.capacity = capacity
Car.prototype.drive = function() }
console.log("Wrooom")
}
}

Inheriting in JavaScript with constructors


The nitty gritty details

ElectricCar.prototype = Object.create(Car.prototype)

Object.defineProperty(ElectricCar.prototype,
'constructor',
value: ElectricCar
enumerable: false, // so that it does not appear in
'for in' loo
writable: true });
p

Classes in JavaScript
• Introduced with ECMAScript 6 (ES6)
• (mostly) syntactic sugar for prototypical inheritance
• Generally safer to use than doing inheritance “by hand”

class Person
constructor(name, birthYear)
this.name = name
this.birthYear = birthYear

age()
return new Date().getFullYear() - this.birthYear

}
}

Inheritance with classes

• Uses the extend keyword

class Teacher extends Person


constructor(name, birthYear, subject)
super(name, birthYear)
this.subject = subject

}
}

You might also like