CICS 515 a Internet Programming Week 3 Mike Feeley 1 JavaScript 2
JavaScript is not Java client-side scripting language • program that runs in browser at client two ways to include it in HTML document • embedded blah.html: <body> <script type="text/javascript"> document.write ("Hello from embedded JavaScript."); </script> </body> • in separate file blah.html: <head> <script language="JavaScript" src="blah.js"></script> </head> blah.js: document.write ("Hello from separate file JavaScript.<br>"); 3 JavaScript language constructs variables, objects and arrays functions conditionals loops exceptions Document Object Model (DOM) events 4
Variables in JavaScript dynamically typed • type determined at runtime when value assigned • any variable can store any value (of any type) types • primitive types - Number, String, Boolean, Undefined, Null (wrapper classes have same name) - stored by value, like Java • object references declaration • no static types, so declare with var scope and lifetime globals declared outside of any function lifetime of document locals declared with var inside of a function lifetime of function invocation instance variables assigned this. inside of a method lifetime of object class variables assigned in prototype declaration lifetime of document 5 Dynamically typed objects fundamentally, an object is • a collection of named properties • referenced by a variable • no class declaration --- classes are static types, Javascript has dynamic types creating an object • new creates a new object reference • add properties to object by assigning them values aStudent = new Object (); aStudent.sid = 10; aStudent.name = 'First Student'; • or using an initializer aStudent = { sid: 10, name: 'First Student' }; • you can add new properties to any object at any time document.myNewProperty = 48; 6
First-class functions one type of object property is a function • first-class means that functions are also data members • they can be assigned or re-assigned at runtime and/or passed as arguments to functions etc. declaring a function • assign a function implementation to an object property name • assigned or re-assigned dynamically, at runtime aStudent.getSID = function () { return this.sid; }; writing a function • use this. prefix to refer to object’s properties (unlike Java, this. is required) invoking a function on an object • invocation is just like Java anSID = aStudent.getSID (); 7 Shared object properties terminology • in Java an object is an instance of a class • in JavaScript an object is an instance of constructor function and a shared prototype common constructor function • name of function becomes name of the shared properties (like the class) function Student (anSID, aName) { this.SID = anSID; this.name = aName; this.getSID = function () { return this.sid; } } • create a new instance by applying new to function name aStudent = new Student (10,"First Student"); • creates a copy of each property in every instance aStudent = new Object(); aStudent.Student(10,”First Student”); 8
common prototype • property of constructor function • assigned to object implicitly when it is created • so, every object created by a particular constructor shares the same prototype object function A () {} A.prototype.x=1; prototype delegation • when JavaScript looks for a property when accessed • look in object, if not found look in prototype • updating a delegated property, creates a local copy in object based on prototype’s value function whenLoaded () { var a0 = new A (); var a1 = new A (); var a2 = new A (); A.prototype.x = 3; a2.x = 2; alert(a0.x+', '+a1.x+', '+a2.x); } • what are values of a0.x , a1.x and a2.x ? 9 Method declaration using prototypes share method among objects created same constructor function Student (anSID, aName) { this.SID = anSID; this.name = aName; } Student.prototype.getSID = function () { return this.SID; }; use static initializer to create multiple prototype properties function Student (anSID, aName) { this.SID = anSID; this.name = aName; } Student.prototype = { getSID: function () { return this.SID; }, getName: function () { return this.name; } } 10
Delegation using prototypes delegation is key feature object-oriented inheritance • in Java, subclass delegates to its superclass • in JavaScript, object delegates to its prototype setting up the objects for delegation function Person (aName) { this.name = aName || ""; } Person.prototype.show = function () { alert (this.name); }; function Student (anSID) { this.SID = anSID || ""; } Student.prototype = new Person (); Student.prototype.show = function () { alert(this.name+" "+this.SID); }; function Instructor () {} Instructor.prototype = new Person (); calling delegate’s constructor function Student (anSID, aName) { this.prototypeCtor = Person; this.prototypeCtor (aName); this.SID = anSID; } 11 or better ... function Person (aName) { this.personCtor = Person; this.name = aName || ""; } Person.prototype.show = function () { alert (this.name); }; function Student (aName, anSID) { this.studentCtor = Student; this.personCtor (aName); this.SID = anSID || ""; } Student.prototype = new Person (); Student.prototype.show = function () { alert(this.name+" "+this.SID); }; function Instructor () {} Instructor.prototype = new Person (); function Person (aName) { this.name = aName || ""; } Person.prototype.show = function () { alert (this.name); }; Person.prototype.personCtor = Person; function Student (aName, anSID) { this.studentCtor = Student; this.prototype.personCtor (aName); this.SID = anSID || ""; } Student.prototype = new Person (); Student.prototype.show = function () { alert(this.name+" "+this.SID); }; function Instructor () {} Instructor.prototype = new Person (); 12
Access-level modifiers in JavaScript key to modular design is encapsulation • hiding some details of the implementation of an abstraction • behind a public interface access-level modifiers • are langauge features that implement encapsulation • in Java: public , private , protected and package in JavaScript, support for access levels is poor • public - any property assigned to an object or its prototype directly is public • private - local variables created in object’s constructor - visible to functions assigned to object, but not to is prototype’s functions function Student (anSID, aName) { var refCount = 1; this.addReference = function () { refCount++; } this.remReference = function () { refCount--; } this.isReferenced = function () { refCount>0; } } 13 Inheritance and access limits don’t combine well why doesn’t this work? function RefObjectPrototype () { var refCount = 100; this.addReference = function () { refCount++; }; this.remReference = function () { refCount--; }; this.isReferenced = function () { return refCount; }; } function Student (anSID, aName) { this.SID = anSID; this.name = aName; } Student.prototype = new RefObjectPrototype (); Student.prototype.getSID = function () { return this.SID; }; Student.prototype.getName = function () { return this.name; }; • one copy per call to RefObjectPrototype() not one per instance prototype instance properties must be be public function RefObjectPrototype () { this.refCount = 100; this.addReference = function () { this.refCount++; }; this.remReference = function () { this.refCount--; }; this.isReferenced = function () { return this.refCount; }; } 14
Arrays in JavaScript declaring and initializing var c1 = new Array (3); var c2 = new Array ("red", "green", "blue"); var c3 = ["red", "green", "blue"]; var c4 = { 0: "red", 1: "blue", 2: "green"}; getting (and setting) length c1[3] = "black"; // c1.length == 4 c1.length = 10; sorting, converting to a string c1.sort (); // c1 == ["blue", "green", "red"] var cs = c1.join(", "); // cs == "blue, green, red" var c5 = c1.concat ("yellow", "orange"); var c5 = c1.slice (2,4); // c5 == ["blue", "yellow"] stacks and queues c1.push ("new"); var x = c1.pop (); c1.shift ("new"); var x = x1.unshift (); 15 Loops and conditionals in JavaScript mainly like Java • iterative with for (;;) {} • logical with while () {} and do {} while () • exiting current iteration with continue and entire look with break • conditionals with if () {} {} and switch () {} iterating over collection • for (variable in object) { ... object[variable] ... } for (aColour in c1) { document.write (c1[aColour]); } • does not work with DOM NodeLists (more shortly) var coll = document.getElementsByName ('x'); for (var item in coll) { ... } • regular for loops always work var coll = document.getElementsByName ('x'); for (var i=0; i<coll.length; i++) { ... } 16
Recommend
More recommend
