Client-side Web Programming
Christophe Soares
[email protected]
2020 / 2021
JS – Javascript
(cont.)
Objects
(cont.)
§Properties can also be removed and
enumerated
var foo = {name: “Fred”}
delete foo.name // foo is now an empty object Objects –
Remove /
§Enumerate objects use .keys() Enumerate
Object.keys({name: ”alice”, age:23}) //
[“name”,”age”]
§Javascript function has an internal
prototype property
§It is initialized as a nearly empty
object.
Prototypes
§When the new operator is used on a
constructor function, a new object
derived from its prototype is
created.
§The function is then executed having
the new object as its context.
§We can change the prototype of a Prototypes
function by changing the prototype
property directly.
function Person(name) {
this.name = name
}
let john = new Person("John Doe")
Person.age = 45 // Only changes the
Person function/object
// not its prototype.
let jane = new Person("Jane Doe")
console.log(jane.age)
Person.prototype.age = 45
// undefined
// Changes the
Prototypes
prototype.
let mary = new Person("Mary Doe") // All
objects constructed using the
console.log(mary.age) //45 // person
constructor now have an age.
console.log(jane.age) //45 // Even if
created before the change.
§You can inspect the prototype of a
function easily in the console.
function Person(name) {
this.name = name
}
Person.prototype // Object {...}
Person.prototype.saySomething = function
(){console.log("Something")}
Person.prototype // Object { saySomething: Prototypes
Person.prototype.saySomething(), ... }
let john = new Person()
john.saySomething() // Something
john.constructor // function Person(name) {
this.name = name; }
john.constructor.prototype // Object { saySomething:
Person.prototype.saySomething(), ... }
§ When a object is created using new, a
__proto__ property is initialized with
the prototype of the function that
created it.
function Person(name) {
this.name = name
}
let john = new Person("John")
Person.prototype.saySomething = function (){console.log("Something")}
john.prototype // undefined
john.__proto__ // Object { saySomething: Person.prototype.saySomething(), ... }
__proto__
john.saySomething() // Something
§ When we read a property from an
object, and it’s missing, JavaScript will
automatically take it from the
prototype using __proto__
§ The class keyword.
§ Classes can only have methods and getters/setters.
erson {
uctor(fullName) {
llName = fullName
stName() {
Names = this.fullName.split(" ")
listNames[0]
tName() {
Names = this.fullName.split(" ")
listNames[listNames.length - 1]
e.log(this.fullName)
Classes
Worker extends Person {
uctor(fullName, job) {
fullName)
b = job
e.log(this.fullName + ' is a ' + this.job)
ry = new Person("Mary Smith")
print()
e.log(mary.lastName)
n = new Worker("John Mc Doe", "Builder")
rint()
e.log(john.firstName)
Arrays
§Special Objects
var anArr = [1,2,3]
console.log(typeof anArr) // object
console.log(anArr[0]) // 1
§Indexed by non-negative integers Arrays
§First element in index 0
§Can be sparse and polymorphic
anArr[5]=‘FooBar’
console.log(anArr) //[1,2,3, , , ‘FooBar’]
§Like Strings, have methods:
console.log(anArr.length) // 6 Arrays
§More methods: push, pop, shift,
unshift, sort, reverse, splice
let years = [1990, 1991, 1992, 1993]
years.push(1994)
console.log(years.length) // 5
years.reverse()
console.log(years) // [1994, 1993, 1992, 1991, 1990]
let sum = 0
years.forEach(function (element, index, array) {sum += element})
Arrays
console.log(sum) //9960
years.every(function (element, index, array) {return element >=
1990}) //true
years.some(function (element, index, array) {return element % 2 ==
0}) //true
§You can use a for loop to iterate over array
elements:
let years = [1990, 1991, 1992, 1993]
for (let i = 0; i < years.length; i++)
console.log(years[i]) Arrays
Looping
§ Or:
let years = [1990, 1991, 1992, 1993]
for (const year of years)
console.log(year)
§By changing the Array prototype, we
can add methods and properties to all
arrays.
Arrays
let years = [1990, 1991, 1992, 1993] Prototype
Array.prototype.print = function() {
console.log("This array has length " + this.length)
}
years.print() // This array has length 4
Dates
§The number of milliseconds since
midnight January 1, 1970 UTC
§Many methods for returning and
setting the data object:
Arrays
var date = new Date() Prototype
console.log(date.valueOf()) // 1616502935210
console.log(date.toISOString()) // 2021-03-
23T12:35:35.210Z
console.log(date.toLocaleString()) //
23/03/2021, 12:35:35
References:
1. MDN Javascript Reference
2. EcmaScript Reference
Ressources 3. MDN DOM Reference
Ressources:
1. MDN Javascript Resources
2. The Modern Javascript Tutorial
3. Javascript Style Guide
1. JavaScript: The Good Parts by Douglas
Crockford (O'Reilly Media).
2. JavaScript Patterns by Stoyan Stefanov
(O'Reilly Media).
3. JavaScript: The Definitive Guide, 6th
Bibliography Edition by David Flanagan (O'Reilly
Media).
4. Eloquent JavaScript: A Modern
Introduction to Programming, 2nd
Edition by Marijn Haverbeke.
5. ECMAScript® 2016 Language
Specification The JavaScript standard
document.
6. A. Restivo. Lecture Notes FEUP.
