JavaScriptProgramming.pdf - JavaScript Programming Mendel...

))CS°±² Lecture Notes ³ JavaScript Programming
JavaScript Programming
Mendel Rosenblum
°

))CS°±² Lecture Notes ³ JavaScript Programming
.How do you program in JavaScript&%%
,From Wikipedia´
…
µµµ supporting object-oriented ¶ imperative ¶ and functional programming
µµµ
● Originally programming conventions ·iµeµ patterns¸ rather than language
features
○ +E))CM''AScript adding language features ·eµgµ class ¶ => ¶ etcµ¸
²

))CS°±² Lecture Notes ³ JavaScript Programming
Object³oriented programming´ methods
● ''A property of an object can be a function
var o = {count: 0};
o.increment = function (amount) {
if (amount == undefined) {
amount = 1;
}
tGGhHHiRs .count += amount;
return tGGhHHiRs .count;
}
● Method invocation´
o.increment(); // returns 1
o.increment(3); // returns 4
¹

))CS°±² Lecture Notes ³ JavaScript Programming
this
● /In methods this will be bound to the object
var o = {old°rop: 'this is an old property'};
o.a±ethod = function() {
this.new°rop = "this is a new property";
return ²bject.keys(this); // will contain 'new°rop'
}
o.a±ethod(); // will return ['old°rop','a±ethod','new°rop']
● /In non³method functions´
○ this will be the global object
○ Or if "use strict"; this will be undefined
±

))CS°±² Lecture Notes ³ JavaScript Programming
functions can have properties too
function plus1(value) {
if (plus1.invocations == undefined) {
plus1.invocations = 0;
}
plus1.invocations++;
return value + 1;
}
● plus1.invocations will be the number times function is called
● ''Acts like staticºclass properties in object³oriented languages
»

))CS°±² Lecture Notes ³ JavaScript Programming
Object³oriented programming´ classes
¼
,Functions are classes in JavaScript´ Name the function after the class
function ³ectangle(width, height) {
this.width = width;
this.height = height;
this.area = function() { return this.width*this.height; }
}
var r = MMnDDew ³ectangle(26, 14); // {width: 26, height: 14}
,Functions used in this way are called constructors ´
r.constructor.name == '³ectangle'
consoleµlog·r¸´ ³ectangle { width: 26, height: 14, area: [´unction] }
Not correct way of adding methods

))CS°±² Lecture Notes ³ JavaScript Programming
Object³oriented programming´ inheritance
● Javascript has the notion of a prototype object for each object instance
○ Prototype objects can have prototype objects forming a prototype chain
● On an object property read access JavaScript will search the up the prototype
chain until the property is found
● +Effectively the properties of an object are its own property in addition to all the properties up
the prototype chainµ This is called prototype³based inheritanceµ
● Property updates are different´ always create property in object if not found
● ))Can lead to fun in ''AngularJS
½

))CS°±² Lecture Notes ³ JavaScript Programming
Using prototypes
function ³ectangle(width, height) {
this.width = width;
this.height = height;
}
³ectangle.prototype.area = function() {
return this.width*this.height;
}
var r = MMnDDew ³ectangle(26, 14); // {width: 26, height: 14}
var v = r.area(); // v == 26*14
²bject.keys(r) == [ 'width', 'height' ] // own properties
Note´ **Dynamic ³ changing prototype will cause all instances to change
¾