SlideShare a Scribd company logo
JavaScript Object Model

      James S. Hsieh
JavaScript build-in datatype

Primitive
    Number (float), String, Boolean, undefined, null

And Object
    Array, Function, RegExp, Date .... 
Object 
● JavaScript Object is a hash of key and value.
● How to create a Object? {}
● How to assemble a Object?
  var myObject = {
     "!@. #%": "what is that?",
     value: 1,
     abc: { key: 2 },
     fun: function() {
       return myObject;
     }
  };

  myObject.value;       //   1
  myObject.abc;         //   { key: 2 }
  myObject.!@. #%       //   SyntaxError: Unexpected string
  myObject["!@. #%"];   //   "what is that?"
  myObject.fun;         //   function
  myObject.fun();       //   call function
  myObject.xxx;         //   undefined
Array
● JavaScript Array is a object
● How to create a Array? []
● How to assemble a Array?
 var myArray = [1, "x", function() { return myArray; }];

 myArray[2];       // return element of array
 myArray.length;      // 3
 myArray.abc = "xxx"; // add member to array
 typeof myArray;      // "object"
Function
● JavaScript Function is a object.
● How to create a Function function() {}
● Function object is a invokable.
● All Functions return a value.
● Default is undefined, it can return any object.

● this is execution context.
    ○ If function object is invoked by a.fun();
      execution context of fun is a (this == a)
    ○ If function object is invoked by fun();
      execution context of fun is DOMWindow
    ○ If function object is invoked by new fun();
      .....
Constructor - assemble an object
     ● when invoked with new, functions return an object known
       as this. You can return other object to replace this.
     ● You have a chance of modifying this before it's returned.

        var Engineer = function(name) {
            this.name = name;
            this.favoriteLanguage = "JavaScript";
            this.program = function() {
                return this.createBug();
            };
            this.createBug = function() {
                    /* .... */                           
            };
        };

          var james = new Engineer("James S. Hsieh");        // prototype an object
          james.name;                                                        // "James S. Hsieh"
          james.program();                                                 // call function
          james.constructor == Engineer;                            // true
Constructor - Questions
        var Engineer = function(name) {
            this.name = name;
            this.favoriteLanguage = "JavaScript";
            this.program = function() {
                return this.createBug();
            };
            this.createBug = function() {
                    /* .... */                           
            };
        };

        var james = new Engineer("James");
        var chacha = new Engineer("Chacha");

        chacha.program = // overwrite
            function() { /* new function */ };

        chacha.program();   // what?
        james.program();     // what?
        james.hasOwnProperty("program"); // true
Prototype
A prototype is an early sample or model built to test
a concept or process or to act as a thing to be
replicated or learned from.

   var Engineer = function(name) {
       this.name = name;
       this.favoriteLanguage = "JavaScript";
   };

     Engineer.prototype.program = function() {
         return this.createBug();
     };
     Engineer.prototype.createBug = function() {
         /* .... */                           
     };

   var james = new Engineer("James");
  
    ● All objects of Engineer refer one prototype
    ● object.__proto__ === Engineer.prototype
Prototype - Questions
   var Engineer = function(name) {
       this.name = name;
       this.favoriteLanguage = "JavaScript";
   };

     Engineer.prototype.program = function() {
         return this.createBug();
     };
     Engineer.prototype.createBug = function() {
         /* .... */                           
     };
     
    var james = new Engineer("James");
    var chacha = new Engineer("Chacha");

  Engineer.prototype.program = // overwrite
    function() { /* new function */ }; 

  chacha.program();   // what?
  james.program();     // what?
  james.hasOwnProperty("program"); // false
Prototype chain
Prototype can be a chain, and JavaScript
has a build-in mechanism to resolve
property by this chain. It and C++
inheritance are similar.

Employee <- Engineer

     var james = new Engineer();
     james.A();
     james.B();
     james.C();

   var someOne = new Employee();
   someOne.A();
   someOne.B();
Prototype chain
   var Employee = function() {
        this.aaa = "hellow"; 
   };
   Employee.prototype.A = function() { alert("1"); }; 
   Employee.prototype.B = function() { alert("2"); };  

   var Engineer = function() {         
   };

1. Engineer.prototype = Employee.prototype;
    Engineer.prototype.constructor = Engineer;

2. Engineer.prototype = new Employee();
    Engineer.prototype.constructor = Engineer;

3. var tmp = function() {};
    tmp.prototype = Employee.prototype;
    Engineer.prototype = new tmp();
    Engineer.prototype.constructor = Engineer;

   Engineer.prototype.B = function() { alert("3"); };   
   Engineer.prototype.C = function() { alert("4"); }; 
MooTools framework
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the
intermediate to advanced JavaScript developer. It allows you to write powerful, flexible,
and cross-browser code with its elegant, well documented, and coherent API.

http://mootools.net/docs/core/Class/Class
http://mootools.net/docs/core/Class/Class.Extras

var Animal = new Class({
  initialize: function(name){ 
    this.name = name;
  } 
}); 

var Cat = new Class({
  Extends: Animal, 
  talk: function(){ 
    return 'Meow!'; 
  } 
});

var james = new Animal('james');
var missy = new Cat('Missy');
Reference

Book: JavaScript Patterns

MooTools: http://mootools.net/

Advanced JavaScript: Closures, Prototypes and Inheritance:
http://www.slideshare.net/Sampetruda/advanced-javascript-
closures-prototypes-and-inheritance?
src=related_normal&rel=1188958

More Related Content

What's hot (20)

Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
Nascenia IT
 
Object Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptObject Oriented Programming in JavaScript
Object Oriented Programming in JavaScript
zand3rs
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
Fu Cheng
 
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
Yan Yankowski
 
Javascript basics for automation testing
Javascript  basics for automation testingJavascript  basics for automation testing
Javascript basics for automation testing
Vikas Thange
 
Javascript
JavascriptJavascript
Javascript
theacadian
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
Eyal Vardi
 
AngularJs
AngularJsAngularJs
AngularJs
syam kumar kk
 
Workshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScript
Visual Engineering
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
Nicolas Embleton
 
JavaScript Inheritance
JavaScript InheritanceJavaScript Inheritance
JavaScript Inheritance
Jussi Pohjolainen
 
JavaScript Basics and Best Practices - CC FE & UX
JavaScript Basics and Best Practices - CC FE & UXJavaScript Basics and Best Practices - CC FE & UX
JavaScript Basics and Best Practices - CC FE & UX
JWORKS powered by Ordina
 
AngularJS Services
AngularJS ServicesAngularJS Services
AngularJS Services
Eyal Vardi
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
Forziatech
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
Eyal Vardi
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS Animations
Eyal Vardi
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile Process
Eyal Vardi
 
JavaScript Core
JavaScript CoreJavaScript Core
JavaScript Core
François Sarradin
 
Anonymous functions in JavaScript
Anonymous functions in JavaScriptAnonymous functions in JavaScript
Anonymous functions in JavaScript
Mohammed Sazid Al Rashid
 
Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0
Eyal Vardi
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
Nascenia IT
 
Object Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptObject Oriented Programming in JavaScript
Object Oriented Programming in JavaScript
zand3rs
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
Fu Cheng
 
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
Yan Yankowski
 
Javascript basics for automation testing
Javascript  basics for automation testingJavascript  basics for automation testing
Javascript basics for automation testing
Vikas Thange
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
Eyal Vardi
 
Workshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScript
Visual Engineering
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
Nicolas Embleton
 
JavaScript Basics and Best Practices - CC FE & UX
JavaScript Basics and Best Practices - CC FE & UXJavaScript Basics and Best Practices - CC FE & UX
JavaScript Basics and Best Practices - CC FE & UX
JWORKS powered by Ordina
 
AngularJS Services
AngularJS ServicesAngularJS Services
AngularJS Services
Eyal Vardi
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
Forziatech
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
Eyal Vardi
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS Animations
Eyal Vardi
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile Process
Eyal Vardi
 
Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0
Eyal Vardi
 

Viewers also liked (15)

2008 07 31 Understanding and Using COM Threading Model - An Inconvenient Trut...
2008 07 31 Understanding and Using COM Threading Model - An Inconvenient Trut...2008 07 31 Understanding and Using COM Threading Model - An Inconvenient Trut...
2008 07 31 Understanding and Using COM Threading Model - An Inconvenient Trut...
James Hsieh
 
Crash dump analysis - experience sharing
Crash dump analysis - experience sharingCrash dump analysis - experience sharing
Crash dump analysis - experience sharing
James Hsieh
 
Slideshare 基本操作教學
Slideshare 基本操作教學Slideshare 基本操作教學
Slideshare 基本操作教學
Ying Huang
 
100個網站規劃必備的知識 整合:使用者體驗設計分享
100個網站規劃必備的知識 整合:使用者體驗設計分享100個網站規劃必備的知識 整合:使用者體驗設計分享
100個網站規劃必備的知識 整合:使用者體驗設計分享
William Lin
 
認識用戶體驗設計的價值與招募要點 - Recruit UX Talents For Your Team
認識用戶體驗設計的價值與招募要點 - Recruit UX Talents For Your Team認識用戶體驗設計的價值與招募要點 - Recruit UX Talents For Your Team
認識用戶體驗設計的價值與招募要點 - Recruit UX Talents For Your Team
Ivan Wei
 
User Interview Techniques
User Interview TechniquesUser Interview Techniques
User Interview Techniques
Liz Danzico
 
從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術
Will Huang
 
Js ppt
Js pptJs ppt
Js ppt
Rakhi Thota
 
產品設計的0到1,與1到1億
產品設計的0到1,與1到1億產品設計的0到1,與1到1億
產品設計的0到1,與1到1億
Ivan Wei
 
改變行為的設計:一些理論
改變行為的設計:一些理論改變行為的設計:一些理論
改變行為的設計:一些理論
Vivian Chen
 
用戶體驗設計,從需求到產品落地
用戶體驗設計,從需求到產品落地用戶體驗設計,從需求到產品落地
用戶體驗設計,從需求到產品落地
Ivan Wei
 
阿里巴巴只做沒說的秘密
阿里巴巴只做沒說的秘密阿里巴巴只做沒說的秘密
阿里巴巴只做沒說的秘密
Max Chang
 
Hooked Model
Hooked ModelHooked Model
Hooked Model
Nir Eyal
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
Seth Familian
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
Drift
 
2008 07 31 Understanding and Using COM Threading Model - An Inconvenient Trut...
2008 07 31 Understanding and Using COM Threading Model - An Inconvenient Trut...2008 07 31 Understanding and Using COM Threading Model - An Inconvenient Trut...
2008 07 31 Understanding and Using COM Threading Model - An Inconvenient Trut...
James Hsieh
 
Crash dump analysis - experience sharing
Crash dump analysis - experience sharingCrash dump analysis - experience sharing
Crash dump analysis - experience sharing
James Hsieh
 
Slideshare 基本操作教學
Slideshare 基本操作教學Slideshare 基本操作教學
Slideshare 基本操作教學
Ying Huang
 
100個網站規劃必備的知識 整合:使用者體驗設計分享
100個網站規劃必備的知識 整合:使用者體驗設計分享100個網站規劃必備的知識 整合:使用者體驗設計分享
100個網站規劃必備的知識 整合:使用者體驗設計分享
William Lin
 
認識用戶體驗設計的價值與招募要點 - Recruit UX Talents For Your Team
認識用戶體驗設計的價值與招募要點 - Recruit UX Talents For Your Team認識用戶體驗設計的價值與招募要點 - Recruit UX Talents For Your Team
認識用戶體驗設計的價值與招募要點 - Recruit UX Talents For Your Team
Ivan Wei
 
User Interview Techniques
User Interview TechniquesUser Interview Techniques
User Interview Techniques
Liz Danzico
 
從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術從開發人員角度十分鐘理解區塊鏈技術
從開發人員角度十分鐘理解區塊鏈技術
Will Huang
 
產品設計的0到1,與1到1億
產品設計的0到1,與1到1億產品設計的0到1,與1到1億
產品設計的0到1,與1到1億
Ivan Wei
 
改變行為的設計:一些理論
改變行為的設計:一些理論改變行為的設計:一些理論
改變行為的設計:一些理論
Vivian Chen
 
用戶體驗設計,從需求到產品落地
用戶體驗設計,從需求到產品落地用戶體驗設計,從需求到產品落地
用戶體驗設計,從需求到產品落地
Ivan Wei
 
阿里巴巴只做沒說的秘密
阿里巴巴只做沒說的秘密阿里巴巴只做沒說的秘密
阿里巴巴只做沒說的秘密
Max Chang
 
Hooked Model
Hooked ModelHooked Model
Hooked Model
Nir Eyal
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
Seth Familian
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
Drift
 
Ad

Similar to Java script object model (20)

Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScript
Stoyan Stefanov
 
Javascript tid-bits
Javascript tid-bitsJavascript tid-bits
Javascript tid-bits
David Atchley
 
Oojs 1.1
Oojs 1.1Oojs 1.1
Oojs 1.1
Rodica Dada
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
relay12
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Manikanda kumar
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Adieu
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
Santosh Wadghule
 
JavaScript - Programming Languages course
JavaScript - Programming Languages course JavaScript - Programming Languages course
JavaScript - Programming Languages course
yoavrubin
 
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascriptGetting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
Mohd Saeed
 
Javascript Object Oriented Programming
Javascript Object Oriented ProgrammingJavascript Object Oriented Programming
Javascript Object Oriented Programming
Bunlong Van
 
Prototype
PrototypePrototype
Prototype
Aditya Gaur
 
Ajaxworld
AjaxworldAjaxworld
Ajaxworld
deannalagason
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
Quinton Sheppard
 
ECMAScript 6 new features
ECMAScript 6 new featuresECMAScript 6 new features
ECMAScript 6 new features
GephenSG
 
All of Javascript
All of JavascriptAll of Javascript
All of Javascript
Togakangaroo
 
JavsScript OOP
JavsScript OOPJavsScript OOP
JavsScript OOP
LearningTech
 
All of javascript
All of javascriptAll of javascript
All of javascript
Togakangaroo
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
David Padbury
 
Javascript.ppt
Javascript.pptJavascript.ppt
Javascript.ppt
NoralieNicol
 
JavaScript In Object Oriented Way
JavaScript In Object Oriented WayJavaScript In Object Oriented Way
JavaScript In Object Oriented Way
Borey Lim
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScript
Stoyan Stefanov
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
relay12
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Adieu
 
JavaScript - Programming Languages course
JavaScript - Programming Languages course JavaScript - Programming Languages course
JavaScript - Programming Languages course
yoavrubin
 
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascriptGetting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
Mohd Saeed
 
Javascript Object Oriented Programming
Javascript Object Oriented ProgrammingJavascript Object Oriented Programming
Javascript Object Oriented Programming
Bunlong Van
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
Quinton Sheppard
 
ECMAScript 6 new features
ECMAScript 6 new featuresECMAScript 6 new features
ECMAScript 6 new features
GephenSG
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
David Padbury
 
JavaScript In Object Oriented Way
JavaScript In Object Oriented WayJavaScript In Object Oriented Way
JavaScript In Object Oriented Way
Borey Lim
 
Ad

Recently uploaded (20)

Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Dancing with AI - A Developer's Journey.pptx
Dancing with AI - A Developer's Journey.pptxDancing with AI - A Developer's Journey.pptx
Dancing with AI - A Developer's Journey.pptx
Elliott Richmond
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
soulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate reviewsoulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate review
Soulmaite
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdfTop 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
SOFTTECHHUB
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Dancing with AI - A Developer's Journey.pptx
Dancing with AI - A Developer's Journey.pptxDancing with AI - A Developer's Journey.pptx
Dancing with AI - A Developer's Journey.pptx
Elliott Richmond
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
soulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate reviewsoulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate review
Soulmaite
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdfTop 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
SOFTTECHHUB
 

Java script object model

  • 1. JavaScript Object Model James S. Hsieh
  • 2. JavaScript build-in datatype Primitive     Number (float), String, Boolean, undefined, null And Object     Array, Function, RegExp, Date .... 
  • 3. Object  ● JavaScript Object is a hash of key and value. ● How to create a Object? {} ● How to assemble a Object? var myObject = { "!@. #%": "what is that?", value: 1, abc: { key: 2 }, fun: function() { return myObject; } }; myObject.value; // 1 myObject.abc; // { key: 2 } myObject.!@. #% // SyntaxError: Unexpected string myObject["!@. #%"]; // "what is that?" myObject.fun; // function myObject.fun(); // call function myObject.xxx; // undefined
  • 4. Array ● JavaScript Array is a object ● How to create a Array? [] ● How to assemble a Array? var myArray = [1, "x", function() { return myArray; }]; myArray[2]; // return element of array myArray.length; // 3 myArray.abc = "xxx"; // add member to array typeof myArray; // "object"
  • 5. Function ● JavaScript Function is a object. ● How to create a Function function() {} ● Function object is a invokable. ● All Functions return a value. ● Default is undefined, it can return any object. ● this is execution context. ○ If function object is invoked by a.fun(); execution context of fun is a (this == a) ○ If function object is invoked by fun(); execution context of fun is DOMWindow ○ If function object is invoked by new fun(); .....
  • 6. Constructor - assemble an object ● when invoked with new, functions return an object known as this. You can return other object to replace this. ● You have a chance of modifying this before it's returned.         var Engineer = function(name) {             this.name = name;             this.favoriteLanguage = "JavaScript";             this.program = function() {                 return this.createBug();             };             this.createBug = function() {                     /* .... */                                        };         };         var james = new Engineer("James S. Hsieh");        // prototype an object         james.name;                                                        // "James S. Hsieh"         james.program();                                                 // call function         james.constructor == Engineer;                            // true
  • 7. Constructor - Questions         var Engineer = function(name) {             this.name = name;             this.favoriteLanguage = "JavaScript";             this.program = function() {                 return this.createBug();             };             this.createBug = function() {                     /* .... */                                        };         };         var james = new Engineer("James");         var chacha = new Engineer("Chacha");         chacha.program = // overwrite             function() { /* new function */ };         chacha.program();   // what?         james.program();     // what?         james.hasOwnProperty("program"); // true
  • 8. Prototype A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.    var Engineer = function(name) {        this.name = name;        this.favoriteLanguage = "JavaScript";    };    Engineer.prototype.program = function() {        return this.createBug();    };    Engineer.prototype.createBug = function() {        /* .... */                               };    var james = new Engineer("James");    ● All objects of Engineer refer one prototype ● object.__proto__ === Engineer.prototype
  • 9. Prototype - Questions    var Engineer = function(name) {        this.name = name;        this.favoriteLanguage = "JavaScript";    };    Engineer.prototype.program = function() {        return this.createBug();    };    Engineer.prototype.createBug = function() {        /* .... */                               };       var james = new Engineer("James");   var chacha = new Engineer("Chacha");   Engineer.prototype.program = // overwrite     function() { /* new function */ };    chacha.program();   // what?   james.program();     // what?   james.hasOwnProperty("program"); // false
  • 10. Prototype chain Prototype can be a chain, and JavaScript has a build-in mechanism to resolve property by this chain. It and C++ inheritance are similar. Employee <- Engineer    var james = new Engineer();    james.A();    james.B();    james.C();    var someOne = new Employee();    someOne.A();    someOne.B();
  • 11. Prototype chain    var Employee = function() {         this.aaa = "hellow";     };    Employee.prototype.A = function() { alert("1"); };     Employee.prototype.B = function() { alert("2"); };      var Engineer = function() {             }; 1. Engineer.prototype = Employee.prototype;     Engineer.prototype.constructor = Engineer; 2. Engineer.prototype = new Employee();     Engineer.prototype.constructor = Engineer; 3. var tmp = function() {};     tmp.prototype = Employee.prototype;     Engineer.prototype = new tmp();     Engineer.prototype.constructor = Engineer;    Engineer.prototype.B = function() { alert("3"); };       Engineer.prototype.C = function() { alert("4"); }; 
  • 12. MooTools framework MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. http://mootools.net/docs/core/Class/Class http://mootools.net/docs/core/Class/Class.Extras var Animal = new Class({   initialize: function(name){      this.name = name;   }  });  var Cat = new Class({   Extends: Animal,    talk: function(){      return 'Meow!';    }  }); var james = new Animal('james'); var missy = new Cat('Missy');
  • 13. Reference Book: JavaScript Patterns MooTools: http://mootools.net/ Advanced JavaScript: Closures, Prototypes and Inheritance: http://www.slideshare.net/Sampetruda/advanced-javascript- closures-prototypes-and-inheritance? src=related_normal&rel=1188958