JavaScriptProgramming.pdf - JavaScript Programming Mendel Rosenblum CS142 Lecture Notes JavaScript Programming 1 How do you program in JavaScript From

JavaScriptProgramming.pdf - JavaScript Programming Mendel...

This preview shows page 1 - 9 out of 34 pages.

))CS°±² Lecture Notes ³ JavaScript Programming JavaScript Programming Mendel Rosenblum °
Image of page 1
))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µ¸ ²
Image of page 2
))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 ¹
Image of page 3
))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 ±
Image of page 4
))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 »
Image of page 5
))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
Image of page 6
))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 ½
Image of page 7
))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 ¾
Image of page 8
Image of page 9

You've reached the end of your free preview.

Want to read all 34 pages?

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture