Scribd
Upload
16 views15 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views15 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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