LearnNowOnline, profile picture
Uploaded byLearnNowOnline
676 views

Object-Oriented JavaScript

The document provides an overview of object-oriented programming in JavaScript, detailing methods for creating and utilizing custom objects and constructors. It emphasizes the use of prototypes for inheritance and object identity, as well as the dynamic nature of JavaScript's object model. Additionally, it introduces concepts such as using the instanceof operator and modifying prototypes for enhanced functionality.

Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Objectives Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Objectives • Learn about the various ways to create new objects with JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Objectives • Learn about the various ways to create new objects with JavaScript • Explore how you can create custom constructors to instantiate multiple objects of the same class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Introduction to Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Introduction to Object-Oriented JavaScript • Possible to build sophisticated frameworks Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Introduction to Object-Oriented JavaScript • Possible to build sophisticated frameworks • jQuery for general Web development Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Introduction to Object-Oriented JavaScript • Possible to build sophisticated frameworks • jQuery for general Web development • OOP uses abstraction to create models of real objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Introduction to Object-Oriented JavaScript • Possible to build sophisticated frameworks • jQuery for general Web development • OOP uses abstraction to create models of real objects • Store own data and state Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Introduction to Object-Oriented JavaScript • Possible to build sophisticated frameworks • jQuery for general Web development • OOP uses abstraction to create models of real objects • Store own data and state • Receive messages Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Introduction to Object-Oriented JavaScript • Possible to build sophisticated frameworks • jQuery for general Web development • OOP uses abstraction to create models of real objects • Store own data and state • Receive messages • Interact with other objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Agenda • Introduction to Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Agenda • Introduction to Object-Oriented JavaScript • Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Agenda • Introduction to Object-Oriented JavaScript • Creating JavaScript Objects • Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating JavaScript Objects • Number of ways to create custom objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating JavaScript Objects • Number of ways to create custom objects • Customer object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating JavaScript Objects • Number of ways to create custom objects • Customer object • Properties to record data like ID, name, location Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating JavaScript Objects • Number of ways to create custom objects • Customer object • Properties to record data like ID, name, location • Some direct properties, others getter/setters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating JavaScript Objects • Number of ways to create custom objects • Customer object • Properties to record data like ID, name, location • Some direct properties, others getter/setters • Override Object.toString Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating JavaScript Objects • Number of ways to create custom objects • Customer object • Properties to record data like ID, name, location • Some direct properties, others getter/setters • Override Object.toString • Method to record sales Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using the Object Constructor Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using the Object Constructor • Use Object constructor with new keyword Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using the Object Constructor • Use Object constructor with new keyword • Creates a new object that inherits from Object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using the Object Constructor • Use Object constructor with new keyword • Creates a new object that inherits from Object • No arguments: new object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using the Object Constructor • Use Object constructor with new keyword • Creates a new object that inherits from Object • No arguments: new object • Primitive type argument: create new Number, Boolean, or String object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using an Object Literal Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using an Object Literal • Notable differences from Object constructor technique: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using an Object Literal • Notable differences from Object constructor technique: • Single statement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using an Object Literal • Notable differences from Object constructor technique: • Single statement var customer = { }; Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using an Object Literal • Notable differences from Object constructor technique: • Single statement var customer = { }; • Adding properties Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Using an Object Literal • Notable differences from Object constructor technique: • Single statement var customer = { }; • Adding properties • Defining getters and setters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating an Object Hierarchy with Prototypes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating an Object Hierarchy with Prototypes • Can use customer as a prototype for other objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating an Object Hierarchy with Prototypes • Can use customer as a prototype for other objects • New objects inherit properties of the base object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating an Object Hierarchy with Prototypes • Can use customer as a prototype for other objects • New objects inherit properties of the base object • Called the prototype of the new objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating an Object Hierarchy with Prototypes • Can use customer as a prototype for other objects • New objects inherit properties of the base object • Called the prototype of the new objects • Set of objects with same prototype is a class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity • Can use the isPrototypeOf method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity • Can use the isPrototypeOf method • See whether one object has another as its prototype Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Agenda • Introduction to Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Agenda • Introduction to Object-Oriented JavaScript • Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Agenda • Introduction to Object-Oriented JavaScript • Creating JavaScript Objects • Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Custom Object Constructors • Constructor is a function that initializes an object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Custom Object Constructors • Constructor is a function that initializes an object • Used with the new keyword Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Custom Object Constructors • Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Custom Object Constructors • Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object • Constructor’s prototype object becomes prototype of new object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Custom Object Constructors • Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object • Constructor’s prototype object becomes prototype of new object • So all objects created with the constructor share prototypes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Custom Object Constructors • Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object • Constructor’s prototype object becomes prototype of new object • So all objects created with the constructor share prototypes • So all are members of the same class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating a New Constructor Prototype Object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating a New Constructor Prototype Object • Sample modified constructor’s default prototype object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating a New Constructor Prototype Object • Sample modified constructor’s default prototype object • Alternatively, can create a whole new object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating a New Constructor Prototype Object • Sample modified constructor’s default prototype object • Alternatively, can create a whole new object • Slightly cleaner code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating a New Constructor Prototype Object • Sample modified constructor’s default prototype object • Alternatively, can create a whole new object • Slightly cleaner code • Implement as single statement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Creating a New Constructor Prototype Object • Sample modified constructor’s default prototype object • Alternatively, can create a whole new object • Slightly cleaner code • Implement as single statement • Cleaner syntax Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Dynamically Changing the Prototype of a Class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Dynamically Changing the Prototype of a Class • Benefit of using a prototype is you can dynamically change it Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Dynamically Changing the Prototype of a Class • Benefit of using a prototype is you can dynamically change it • Automatically changes all objects in the class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Dynamically Changing the Prototype of a Class • Benefit of using a prototype is you can dynamically change it • Automatically changes all objects in the class • Object inherits from prototype even when prototype subsequently changes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Dynamically Changing the Prototype of a Class • Benefit of using a prototype is you can dynamically change it • Automatically changes all objects in the class • Object inherits from prototype even when prototype subsequently changes • Can even modify prototypes of built-in objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity with Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity with Constructors • instanceof operator Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test • Constructor object to test against Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test • Constructor object to test against • Pass anything as first operand, but second must be a function object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test • Constructor object to test against • Pass anything as first operand, but second must be a function object • Reinforce the idea that constructors are the public identity of a class of objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
Learn More! • This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

More Related Content

KEY
WPF Binding
byLearnNowOnline
 
KEY
Using The .NET Framework
byLearnNowOnline
 
KEY
Web API HTTP Pipeline
byLearnNowOnline
 
PPTX
React Native: Introduction
byInnerFood
 
PPT
Windows 8: Shapes and Geometries
byLearnNowOnline
 
PPTX
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
byAzilen Technologies Pvt. Ltd.
 
KEY
Asynchronous Programming
byLearnNowOnline
 
PDF
Behavior Driven Web UI Automation with Selenium and Cucumber/SpecFlow (Qualit...
byGáspár Nagy
 
WPF Binding
byLearnNowOnline
 
Using The .NET Framework
byLearnNowOnline
 
Web API HTTP Pipeline
byLearnNowOnline
 
React Native: Introduction
byInnerFood
 
Windows 8: Shapes and Geometries
byLearnNowOnline
 
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
byAzilen Technologies Pvt. Ltd.
 
Asynchronous Programming
byLearnNowOnline
 
Behavior Driven Web UI Automation with Selenium and Cucumber/SpecFlow (Qualit...
byGáspár Nagy
 

Similar to Object-Oriented JavaScript

KEY
SharePoint Document Management
byLearnNowOnline
 
KEY
The Entity Data Model
byLearnNowOnline
 
KEY
Managing site collections
byLearnNowOnline
 
KEY
Bring a Web Page Alive with jQuery
byLearnNowOnline
 
KEY
Web API Basics
byLearnNowOnline
 
KEY
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
byLearnNowOnline
 
KEY
Introducing the Entity Framework
byLearnNowOnline
 
KEY
What's new in Silverlight 5
byLearnNowOnline
 
KEY
WPF: Working with Data
byLearnNowOnline
 
KEY
Object oriented techniques
byLearnNowOnline
 
KEY
KnockOutJS with ASP.NET MVC
byLearnNowOnline
 
KEY
Attributes, reflection, and dynamic programming
byLearnNowOnline
 
PPT
New in the Visual Studio 2012 IDE
byLearnNowOnline
 
KEY
Generics
byLearnNowOnline
 
KEY
Introduction to ASP.NET MVC
byLearnNowOnline
 
PPT
SQL: Permissions and Data Protection
byLearnNowOnline
 
KEY
.NET Variables and Data Types
byLearnNowOnline
 
KEY
.Net branching and flow control
byLearnNowOnline
 
KEY
Getting Started with .NET
byLearnNowOnline
 
PPTX
slides.pptx
byxejoji6654
 
SharePoint Document Management
byLearnNowOnline
 
The Entity Data Model
byLearnNowOnline
 
Managing site collections
byLearnNowOnline
 
Bring a Web Page Alive with jQuery
byLearnNowOnline
 
Web API Basics
byLearnNowOnline
 
Building Windows 8 Metro Style Applications Using JavaScript and HTML5
byLearnNowOnline
 
Introducing the Entity Framework
byLearnNowOnline
 
What's new in Silverlight 5
byLearnNowOnline
 
WPF: Working with Data
byLearnNowOnline
 
Object oriented techniques
byLearnNowOnline
 
KnockOutJS with ASP.NET MVC
byLearnNowOnline
 
Attributes, reflection, and dynamic programming
byLearnNowOnline
 
New in the Visual Studio 2012 IDE
byLearnNowOnline
 
Generics
byLearnNowOnline
 
Introduction to ASP.NET MVC
byLearnNowOnline
 
SQL: Permissions and Data Protection
byLearnNowOnline
 
.NET Variables and Data Types
byLearnNowOnline
 
.Net branching and flow control
byLearnNowOnline
 
Getting Started with .NET
byLearnNowOnline
 
slides.pptx
byxejoji6654
 

More from LearnNowOnline

KEY
A tour of SQL Server
byLearnNowOnline
 
KEY
Introducing LINQ
byLearnNowOnline
 
KEY
SharePoint: Introduction to InfoPath
byLearnNowOnline
 
KEY
SQL Server: Security
byLearnNowOnline
 
KEY
Sql 2012 development and programming
byLearnNowOnline
 
KEY
Expression Blend Motion & Interaction Design
byLearnNowOnline
 
KEY
Working with Controllers and Actions in MVC
byLearnNowOnline
 
KEY
Creating a User Interface
byLearnNowOnline
 
A tour of SQL Server
byLearnNowOnline
 
Introducing LINQ
byLearnNowOnline
 
SharePoint: Introduction to InfoPath
byLearnNowOnline
 
SQL Server: Security
byLearnNowOnline
 
Sql 2012 development and programming
byLearnNowOnline
 
Expression Blend Motion & Interaction Design
byLearnNowOnline
 
Working with Controllers and Actions in MVC
byLearnNowOnline
 
Creating a User Interface
byLearnNowOnline
 

Recently uploaded

PDF
Manage VMs on Kubernetes - Introduction to KubeVirt - Meetup MUC 10.2025
byTobias Schneck
 
PDF
Meta and Apple close to settling EU cases.pdf
byLUMINATIVE MEDIA/PROJECT COUNSEL MEDIA GROUP
 
PDF
“Introduction to Depth Sensing: Technologies, Trade-offs and Applications,” a...
byEdge AI and Vision Alliance
 
PPTX
Open Source business is of strategic importance to the EUpptx
byMindtrek
 
PPTX
Momentum Developer Con 2025 - How To Better Developer Estimates
byBrian McKeiver
 
PDF
Dream Companion Reviews, Pricing, & Alternatives
byDream Companion
 
PDF
How to manage open source in a big company; efficient OSPO is a must.pdf
byMindtrek
 
PDF
Session 4 - Specialized AI Associate Series: UiPath Document Understanding O...
byDianaGray10
 
PPTX
WUG-DMV: Workfront Wizards: Tips & Tricks Exchange (Sept 2025)
byWUG-DC MARYLAND VIRGINIA
 
PDF
What's New? ThousandEyes Features and Highlights: October 2025
byThousandEyes
 
PPTX
This Could Have Been a Slack Message: Diagnosing and Treating Bad Meetings
byMike Clement
 
PDF
Master Deck: GraphSummit Bengaluru (Oct 7)
byNeo4j
 
PPTX
Google Cloud Quest : An introductory training session on how to solve Google ...
byrajashreeborah705
 
PDF
Towards efficient vision representation and coding standards for superior emb...
byTouradj Ebrahimi
 
PPTX
Building Europe with Open LLMs - Manu Setälä.pptx
byMindtrek
 
PDF
Cloud Infrastructure Security: Navigating Threats & Overcoming Challenges
byTeleglobal International
 
PDF
Ask Me Anything About AI Assist: Practical Answers for Real Workflows
bySafe Software
 
PDF
Session 3 - Specialized AI Associate Series: AI Powered Automation through sp...
byDianaGray10
 
PDF
Session 2 - Agentic Orchestration with UiPath Maestro
byDianaGray10
 
PDF
AI assisted software — Cathedral or Bazaar?.pdf
byMindtrek
 
Manage VMs on Kubernetes - Introduction to KubeVirt - Meetup MUC 10.2025
byTobias Schneck
 
Meta and Apple close to settling EU cases.pdf
byLUMINATIVE MEDIA/PROJECT COUNSEL MEDIA GROUP
 
“Introduction to Depth Sensing: Technologies, Trade-offs and Applications,” a...
byEdge AI and Vision Alliance
 
Open Source business is of strategic importance to the EUpptx
byMindtrek
 
Momentum Developer Con 2025 - How To Better Developer Estimates
byBrian McKeiver
 
Dream Companion Reviews, Pricing, & Alternatives
byDream Companion
 
How to manage open source in a big company; efficient OSPO is a must.pdf
byMindtrek
 
Session 4 - Specialized AI Associate Series: UiPath Document Understanding O...
byDianaGray10
 
WUG-DMV: Workfront Wizards: Tips & Tricks Exchange (Sept 2025)
byWUG-DC MARYLAND VIRGINIA
 
What's New? ThousandEyes Features and Highlights: October 2025
byThousandEyes
 
This Could Have Been a Slack Message: Diagnosing and Treating Bad Meetings
byMike Clement
 
Master Deck: GraphSummit Bengaluru (Oct 7)
byNeo4j
 
Google Cloud Quest : An introductory training session on how to solve Google ...
byrajashreeborah705
 
Towards efficient vision representation and coding standards for superior emb...
byTouradj Ebrahimi
 
Building Europe with Open LLMs - Manu Setälä.pptx
byMindtrek
 
Cloud Infrastructure Security: Navigating Threats & Overcoming Challenges
byTeleglobal International
 
Ask Me Anything About AI Assist: Practical Answers for Real Workflows
bySafe Software
 
Session 3 - Specialized AI Associate Series: AI Powered Automation through sp...
byDianaGray10
 
Session 2 - Agentic Orchestration with UiPath Maestro
byDianaGray10
 
AI assisted software — Cathedral or Bazaar?.pdf
byMindtrek
 

Object-Oriented JavaScript

  • 1.
    Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 2.
    Objectives Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 3.
    Objectives • Learn aboutthe various ways to create new objects with JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 4.
    Objectives • Learn aboutthe various ways to create new objects with JavaScript • Explore how you can create custom constructors to instantiate multiple objects of the same class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 5.
    Introduction to Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 6.
    Introduction to Object-Oriented JavaScript •Possible to build sophisticated frameworks Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 7.
    Introduction to Object-Oriented JavaScript •Possible to build sophisticated frameworks • jQuery for general Web development Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 8.
    Introduction to Object-Oriented JavaScript •Possible to build sophisticated frameworks • jQuery for general Web development • OOP uses abstraction to create models of real objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 9.
    Introduction to Object-Oriented JavaScript •Possible to build sophisticated frameworks • jQuery for general Web development • OOP uses abstraction to create models of real objects • Store own data and state Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 10.
    Introduction to Object-Oriented JavaScript •Possible to build sophisticated frameworks • jQuery for general Web development • OOP uses abstraction to create models of real objects • Store own data and state • Receive messages Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 11.
    Introduction to Object-Oriented JavaScript •Possible to build sophisticated frameworks • jQuery for general Web development • OOP uses abstraction to create models of real objects • Store own data and state • Receive messages • Interact with other objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 12.
    Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 13.
    Agenda • Introduction toObject-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 14.
    Agenda • Introduction toObject-Oriented JavaScript • Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 15.
    Agenda • Introduction toObject-Oriented JavaScript • Creating JavaScript Objects • Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 16.
    Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 17.
    Creating JavaScript Objects •Number of ways to create custom objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 18.
    Creating JavaScript Objects •Number of ways to create custom objects • Customer object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 19.
    Creating JavaScript Objects •Number of ways to create custom objects • Customer object • Properties to record data like ID, name, location Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 20.
    Creating JavaScript Objects •Number of ways to create custom objects • Customer object • Properties to record data like ID, name, location • Some direct properties, others getter/setters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 21.
    Creating JavaScript Objects •Number of ways to create custom objects • Customer object • Properties to record data like ID, name, location • Some direct properties, others getter/setters • Override Object.toString Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 22.
    Creating JavaScript Objects •Number of ways to create custom objects • Customer object • Properties to record data like ID, name, location • Some direct properties, others getter/setters • Override Object.toString • Method to record sales Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 23.
    Using the ObjectConstructor Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 24.
    Using the ObjectConstructor • Use Object constructor with new keyword Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 25.
    Using the ObjectConstructor • Use Object constructor with new keyword • Creates a new object that inherits from Object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 26.
    Using the ObjectConstructor • Use Object constructor with new keyword • Creates a new object that inherits from Object • No arguments: new object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 27.
    Using the ObjectConstructor • Use Object constructor with new keyword • Creates a new object that inherits from Object • No arguments: new object • Primitive type argument: create new Number, Boolean, or String object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 28.
    Using an ObjectLiteral Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 29.
    Using an ObjectLiteral • Notable differences from Object constructor technique: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 30.
    Using an ObjectLiteral • Notable differences from Object constructor technique: • Single statement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 31.
    Using an ObjectLiteral • Notable differences from Object constructor technique: • Single statement var customer = { }; Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 32.
    Using an ObjectLiteral • Notable differences from Object constructor technique: • Single statement var customer = { }; • Adding properties Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 33.
    Using an ObjectLiteral • Notable differences from Object constructor technique: • Single statement var customer = { }; • Adding properties • Defining getters and setters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 34.
    Creating an ObjectHierarchy with Prototypes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 35.
    Creating an ObjectHierarchy with Prototypes • Can use customer as a prototype for other objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 36.
    Creating an ObjectHierarchy with Prototypes • Can use customer as a prototype for other objects • New objects inherit properties of the base object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 37.
    Creating an ObjectHierarchy with Prototypes • Can use customer as a prototype for other objects • New objects inherit properties of the base object • Called the prototype of the new objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 38.
    Creating an ObjectHierarchy with Prototypes • Can use customer as a prototype for other objects • New objects inherit properties of the base object • Called the prototype of the new objects • Set of objects with same prototype is a class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 39.
    Object Identity Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 40.
    Object Identity • Canuse the isPrototypeOf method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 41.
    Object Identity • Canuse the isPrototypeOf method • See whether one object has another as its prototype Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 42.
    Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 43.
    Agenda • Introduction toObject-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 44.
    Agenda • Introduction toObject-Oriented JavaScript • Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 45.
    Agenda • Introduction toObject-Oriented JavaScript • Creating JavaScript Objects • Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 46.
    Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 47.
    Custom Object Constructors •Constructor is a function that initializes an object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 48.
    Custom Object Constructors •Constructor is a function that initializes an object • Used with the new keyword Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 49.
    Custom Object Constructors •Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 50.
    Custom Object Constructors •Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object • Constructor’s prototype object becomes prototype of new object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 51.
    Custom Object Constructors •Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object • Constructor’s prototype object becomes prototype of new object • So all objects created with the constructor share prototypes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 52.
    Custom Object Constructors •Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object • Constructor’s prototype object becomes prototype of new object • So all objects created with the constructor share prototypes • So all are members of the same class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 53.
    Creating a NewConstructor Prototype Object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 54.
    Creating a NewConstructor Prototype Object • Sample modified constructor’s default prototype object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 55.
    Creating a NewConstructor Prototype Object • Sample modified constructor’s default prototype object • Alternatively, can create a whole new object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 56.
    Creating a NewConstructor Prototype Object • Sample modified constructor’s default prototype object • Alternatively, can create a whole new object • Slightly cleaner code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 57.
    Creating a NewConstructor Prototype Object • Sample modified constructor’s default prototype object • Alternatively, can create a whole new object • Slightly cleaner code • Implement as single statement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 58.
    Creating a NewConstructor Prototype Object • Sample modified constructor’s default prototype object • Alternatively, can create a whole new object • Slightly cleaner code • Implement as single statement • Cleaner syntax Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 59.
    Dynamically Changing thePrototype of a Class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 60.
    Dynamically Changing thePrototype of a Class • Benefit of using a prototype is you can dynamically change it Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 61.
    Dynamically Changing thePrototype of a Class • Benefit of using a prototype is you can dynamically change it • Automatically changes all objects in the class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 62.
    Dynamically Changing thePrototype of a Class • Benefit of using a prototype is you can dynamically change it • Automatically changes all objects in the class • Object inherits from prototype even when prototype subsequently changes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 63.
    Dynamically Changing thePrototype of a Class • Benefit of using a prototype is you can dynamically change it • Automatically changes all objects in the class • Object inherits from prototype even when prototype subsequently changes • Can even modify prototypes of built-in objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 64.
    Object Identity with Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 65.
    Object Identity with Constructors • instanceof operator Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 66.
    Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 67.
    Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 68.
    Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 69.
    Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test • Constructor object to test against Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 70.
    Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test • Constructor object to test against • Pass anything as first operand, but second must be a function object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 71.
    Object Identity with Constructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test • Constructor object to test against • Pass anything as first operand, but second must be a function object • Reinforce the idea that constructors are the public identity of a class of objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 72.
    Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 73.
    Learn More! • Thisis an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Editor's Notes

  • #2 \n
  • #3 \n
  • #4 \n
  • #5 \n
  • #6 \n
  • #7 \n
  • #8 \n
  • #9 \n
  • #10 \n
  • #11 \n
  • #12 \n
  • #13 \n
  • #14 \n
  • #15 \n
  • #16 \n
  • #17 \n
  • #18 \n
  • #19 \n
  • #20 \n
  • #21 \n
  • #22 \n
  • #23 \n
  • #24 \n
  • #25 DEMO – rest of section\n
  • #26 DEMO – rest of section\n
  • #27 DEMO – rest of section\n
  • #28 DEMO – rest of section\n
  • #29 DEMO – rest of section\n
  • #30 DEMO – rest of section\n
  • #31 DEMO – rest of section\n
  • #32 DEMO – rest of section\n
  • #33 DEMO – rest of section\n
  • #34 DEMO – rest of section\n
  • #35 DEMO – rest of section\n
  • #36 DEMO – rest of section\n
  • #37 DEMO – rest of section\n
  • #38 \n
  • #39 \n
  • #40 \n
  • #41 \n
  • #42 \n
  • #43 DEMO – Creating an Object Constructor section\n
  • #44 DEMO – Creating an Object Constructor section\n
  • #45 DEMO – Creating an Object Constructor section\n
  • #46 DEMO – Creating an Object Constructor section\n
  • #47 DEMO – Creating an Object Constructor section\n
  • #48 DEMO – Creating an Object Constructor section\n
  • #49 DEMO – rest of section\n
  • #50 DEMO – rest of section\n
  • #51 DEMO – rest of section\n
  • #52 DEMO – rest of section\n
  • #53 DEMO – rest of section\n
  • #54 DEMO – rest of section\n
  • #55 DEMO – rest of section\n
  • #56 DEMO – rest of section\n
  • #57 DEMO – rest of section\n
  • #58 DEMO – rest of section\n
  • #59 DEMO – rest of section\n
  • #60 DEMO – rest of section\n
  • #61 DEMO – rest of section\n
  • #62 DEMO – rest of section\n
  • #63 DEMO – rest of section\n
  • #64 DEMO – rest of section\n
  • #65 DEMO: rest of section\n