University of Computer Studies

Web Technology JavaScript programming

Object-Oriented Programming

JavaScript Group
Department of Information Technology Supporting and Maintenance
 University General
of Computer
lecture Plan Studies

• Section 1
What is JavaScript? • Section 4
JavaScript in HTML Document Object Model(DOM) and
DOM Extensions
Variables, Scope, and Memory
• Section 5
• Section 2
Events, Forms and Canvas
Language Basics
• Section 6
Reference Types
Client-side Storage
• Section 3
Understanding Objects
Window Object
 Object
University Creation Studies
of Computer

• Factory Pattern
• Parasitic Constructor Pattern
• Constructor Pattern
• Prototype Pattern
• Combination Constructor + Prototype Pattern
• Dynamic Prototype
• Durable Constructor pattern
 1. Factory
University PatternStudies
of Computer

function createPerson(name, age, job){

var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){ alert(this.name); };
return o; }
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
person1.sayName(); //"Nicholas"
 2. Parasitic
University Constructor
of Computer Studies

function Person(name, age, job){

var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){alert(this.name); };
return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"
 3. Constructor
University Pattern
of Computer Studies

function Person(name, age, job){

this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){alert(this.name); };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); //"Nicholas"
person2.sayName(); //"Greg"
 4. Prototype
University Pattern
of Computer Studies

function Person(){ }
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){ alert(this.name); };
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
 5. Combination Constructor
University + Prototype
of Computer Studies Pattern

function Person(name, age, job){ this.name = name;

this.age = age;
this.job = job; }
Person.prototype = {
constructor: Person,
sayName : function () {alert(this.name); }
};
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
 6. Dynamic
University of Prototype
ComputerPattern
Studies

function Person(name, age, job){

this.name = name;
this.age = age;
this.job = job;
Person.prototype.sayName = function(){alert(this.name); };
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();
 7. Durable of
University Constructor
Computer Pattern
Studies

• Similar to the parasitic constructor pattern in Slide no. 4

Exercise
• Create an object named Person with properties(name, age, job) and a method
named sayName which return the name of object with alert. Create an instance of
object with "Nicholas", 29,"Software Engineer". Call the method of object.
(Parasitic Constructor Pattern)
 Reference
University Book Studies
of Computer

• Professional JavaScript for Web Developers , Third Edition By Nicholas C. Zakas

 Next Lecture
University Content
of Computer Studies

• Function Expressions
University of Computer Studies

Thank you! 