KEMBAR78
JavaScript Objects | PDF
JavaScript
OOP
Who I’m
● My name is Hazem Hagrass
● Lead Software Engineer @BADR, joined BADR @2010
● Contacts:
○ website
○ hazem.hagrass@badrit.com
○ Linkedin
Introduction
● JavaScript is object-oriented language.
● Not really object-oriented language.
● There are multiple ways to do OOP in JS.
● There are 5 primitives only in JS: Number, String,
Boolean, undefined, null.
● Everything else is an Object.
User Defined Objects
● All user-defined objects and built-in objects are
descendants of an object called Object.
var employee = new Object();
employee.name = “Hazem Hagrass”;
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");
User Defined Objects
● new Object() produces an empty container of
name/value pairs.
● Its nature like hash but no hash codes or rehash codes
are available.
Objects with a User-Defined Function
● Functions are first-class citizens in JS, they can
contain number of methods, so functions are objects
that can contain variables and methods.
● this keyword is used to refer to the object that has
been passed to a function.
function employee(name, departement){
this.name = name;
this.departement = departement;
}
var emp = new employee(“Hazem Hagrass”, “IT”);
Object Methods
function initSalary(amount){
this.salary = amount;
}
function employee(name, departement){
this.name = name;
this.departement = departement;
this.salary = 0;
this.doWork = function(){}
this.initSalary = initSalary;
}
Object Literal
● Object literals encapsulate data, enclosing it in a tidy
package.
● This minimizes the use of global variables which can
cause problems when combining code.
var Coor = {
x: 0,
y: 0
}
console.log(coor.x);
Object Literal
var BannerRotator = {
banners: ["smile.gif", "frown.gif", "bomb.gif"],
index: 0,
getNextBanner: function() {
BannerRotator.index ++;
BannerRotator.index = BannerRotator.index %
BannerRotator.banners.length;
var banner = BannerRotator.banners[BannerRotator.
index];
return banner;
}
};
Why Object Literal?
● Object literals enable us to write code that supports
lots of features yet still provide a relatively
straightforward process for implementers of our code.
● No need to invoke constructors directly or maintain
the correct order of arguments passed to functions.
● Object literals are also useful for unobtrusive event
handling; they can hold the data that would otherwise
be passed in function calls from HTML event handler
attributes.
Demo Time
Check this demo
Thank You
Any Questions?

JavaScript Objects

  • 2.
  • 3.
    Who I’m ● Myname is Hazem Hagrass ● Lead Software Engineer @BADR, joined BADR @2010 ● Contacts: ○ website ○ hazem.hagrass@badrit.com ○ Linkedin
  • 4.
    Introduction ● JavaScript isobject-oriented language. ● Not really object-oriented language. ● There are multiple ways to do OOP in JS. ● There are 5 primitives only in JS: Number, String, Boolean, undefined, null. ● Everything else is an Object.
  • 5.
    User Defined Objects ●All user-defined objects and built-in objects are descendants of an object called Object. var employee = new Object(); employee.name = “Hazem Hagrass”; var books = new Array("C++", "Perl", "Java"); var day = new Date("August 15, 1947");
  • 6.
    User Defined Objects ●new Object() produces an empty container of name/value pairs. ● Its nature like hash but no hash codes or rehash codes are available.
  • 7.
    Objects with aUser-Defined Function ● Functions are first-class citizens in JS, they can contain number of methods, so functions are objects that can contain variables and methods. ● this keyword is used to refer to the object that has been passed to a function. function employee(name, departement){ this.name = name; this.departement = departement; } var emp = new employee(“Hazem Hagrass”, “IT”);
  • 8.
    Object Methods function initSalary(amount){ this.salary= amount; } function employee(name, departement){ this.name = name; this.departement = departement; this.salary = 0; this.doWork = function(){} this.initSalary = initSalary; }
  • 9.
    Object Literal ● Objectliterals encapsulate data, enclosing it in a tidy package. ● This minimizes the use of global variables which can cause problems when combining code. var Coor = { x: 0, y: 0 } console.log(coor.x);
  • 10.
    Object Literal var BannerRotator= { banners: ["smile.gif", "frown.gif", "bomb.gif"], index: 0, getNextBanner: function() { BannerRotator.index ++; BannerRotator.index = BannerRotator.index % BannerRotator.banners.length; var banner = BannerRotator.banners[BannerRotator. index]; return banner; } };
  • 11.
    Why Object Literal? ●Object literals enable us to write code that supports lots of features yet still provide a relatively straightforward process for implementers of our code. ● No need to invoke constructors directly or maintain the correct order of arguments passed to functions. ● Object literals are also useful for unobtrusive event handling; they can hold the data that would otherwise be passed in function calls from HTML event handler attributes.
  • 12.
  • 13.