Submit Search
Upload
Object-Oriented Javascript
•
Download as ODP, PDF
•
0 likes
•
801 views
Iban Martinez
Follow
A simple introduction to Object-Oriented programming, using Javascript.
Read less
Read more
Software
Report
Share
Report
Share
1 of 29
Download now
Recommended
javascript prototype
javascript prototype
Hika Maeng
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
Deepu S Nath
Prototyping user interactions in web apps
Prototyping user interactions in web apps
Patrick NDJIENTCHEU
Introduction to Object Oriented Javascript
Introduction to Object Oriented Javascript
nodeninjas
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
Forziatech
JavaScript: Events Handling
JavaScript: Events Handling
Yuriy Bezgachnyuk
Prototype-based Programming with JavaScript
Prototype-based Programming with JavaScript
lienhard
JavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
Recommended
javascript prototype
javascript prototype
Hika Maeng
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
Deepu S Nath
Prototyping user interactions in web apps
Prototyping user interactions in web apps
Patrick NDJIENTCHEU
Introduction to Object Oriented Javascript
Introduction to Object Oriented Javascript
nodeninjas
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
Forziatech
JavaScript: Events Handling
JavaScript: Events Handling
Yuriy Bezgachnyuk
Prototype-based Programming with JavaScript
Prototype-based Programming with JavaScript
lienhard
JavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
Selection
Selection
kitturashmikittu
Dom 20160427 extra
Dom 20160427 extra
terezinhaneta
Jarvis Pain Assessment
Jarvis Pain Assessment
JoanVNAF
Prototype
Prototype
Wander Marcos
Coach's guide to effective simulation facilitation preview
Coach's guide to effective simulation facilitation preview
Suekennnedy
Backupify CloudInno Presentation by Rob May
Backupify CloudInno Presentation by Rob May
Datto
C re ate-cirma-def-060611
C re ate-cirma-def-060611
CSP Scarl
D:\Ring O 2nd Grade
D:\Ring O 2nd Grade
guest5ac3f31
I4 school qrpark_promoey_piazza
I4 school qrpark_promoey_piazza
CSP Scarl
Vượt lên nỗi đau
Vượt lên nỗi đau
bita89
Forum PA challenge: HALADIN's
Forum PA challenge: HALADIN's
CSP Scarl
Agenda digitale piemonte
Agenda digitale piemonte
CSP Scarl
alternatives to hysterectomy
alternatives to hysterectomy
Karl Daniel, M.D.
How to design for the web
How to design for the web
Cyber-Duck
Buduj Wartość i Reinwestuj
Buduj Wartość i Reinwestuj
GetResponse Email Marketing
Requisitos oo-para-projetos-oo-transicao-facil
Requisitos oo-para-projetos-oo-transicao-facil
Sandra Rocha
Expeditie mont blanc
Expeditie mont blanc
Elisabeth
Handout 3 er año libertador 3er lapso
Handout 3 er año libertador 3er lapso
U.E.N. Libertador
Rajeev_CV
Rajeev_CV
rajeevps
Object oriented programming
Object oriented programming
msneha
Object oriented javascript
Object oriented javascript
Usman Mehmood
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
Sopheak Sem
More Related Content
Viewers also liked
Selection
Selection
kitturashmikittu
Dom 20160427 extra
Dom 20160427 extra
terezinhaneta
Jarvis Pain Assessment
Jarvis Pain Assessment
JoanVNAF
Prototype
Prototype
Wander Marcos
Coach's guide to effective simulation facilitation preview
Coach's guide to effective simulation facilitation preview
Suekennnedy
Backupify CloudInno Presentation by Rob May
Backupify CloudInno Presentation by Rob May
Datto
C re ate-cirma-def-060611
C re ate-cirma-def-060611
CSP Scarl
D:\Ring O 2nd Grade
D:\Ring O 2nd Grade
guest5ac3f31
I4 school qrpark_promoey_piazza
I4 school qrpark_promoey_piazza
CSP Scarl
Vượt lên nỗi đau
Vượt lên nỗi đau
bita89
Forum PA challenge: HALADIN's
Forum PA challenge: HALADIN's
CSP Scarl
Agenda digitale piemonte
Agenda digitale piemonte
CSP Scarl
alternatives to hysterectomy
alternatives to hysterectomy
Karl Daniel, M.D.
How to design for the web
How to design for the web
Cyber-Duck
Buduj Wartość i Reinwestuj
Buduj Wartość i Reinwestuj
GetResponse Email Marketing
Requisitos oo-para-projetos-oo-transicao-facil
Requisitos oo-para-projetos-oo-transicao-facil
Sandra Rocha
Expeditie mont blanc
Expeditie mont blanc
Elisabeth
Handout 3 er año libertador 3er lapso
Handout 3 er año libertador 3er lapso
U.E.N. Libertador
Rajeev_CV
Rajeev_CV
rajeevps
Viewers also liked
(19)
Selection
Selection
Dom 20160427 extra
Dom 20160427 extra
Jarvis Pain Assessment
Jarvis Pain Assessment
Prototype
Prototype
Coach's guide to effective simulation facilitation preview
Coach's guide to effective simulation facilitation preview
Backupify CloudInno Presentation by Rob May
Backupify CloudInno Presentation by Rob May
C re ate-cirma-def-060611
C re ate-cirma-def-060611
D:\Ring O 2nd Grade
D:\Ring O 2nd Grade
I4 school qrpark_promoey_piazza
I4 school qrpark_promoey_piazza
Vượt lên nỗi đau
Vượt lên nỗi đau
Forum PA challenge: HALADIN's
Forum PA challenge: HALADIN's
Agenda digitale piemonte
Agenda digitale piemonte
alternatives to hysterectomy
alternatives to hysterectomy
How to design for the web
How to design for the web
Buduj Wartość i Reinwestuj
Buduj Wartość i Reinwestuj
Requisitos oo-para-projetos-oo-transicao-facil
Requisitos oo-para-projetos-oo-transicao-facil
Expeditie mont blanc
Expeditie mont blanc
Handout 3 er año libertador 3er lapso
Handout 3 er año libertador 3er lapso
Rajeev_CV
Rajeev_CV
Similar to Object-Oriented Javascript
Object oriented programming
Object oriented programming
msneha
Object oriented javascript
Object oriented javascript
Usman Mehmood
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
Sopheak Sem
JavaScript OOPS Implimentation
JavaScript OOPS Implimentation
Usman Mehmood
Python Object Oriented Programming
Python Object Oriented Programming
Burasakorn Sabyeying
JavaScript Programming
JavaScript Programming
Sehwan Noh
Understanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptx
MariaTrinidadTumanga
Object oriented approach in python programming
Object oriented approach in python programming
Srinivas Narasegouda
JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
WebStackAcademy
Chapter 1- Introduction.ppt
Chapter 1- Introduction.ppt
TigistTilahun1
Prototype Object.pptx
Prototype Object.pptx
Steins18
Java Programming.pdf
Java Programming.pdf
IthagoniShirisha
JavaScript Interview Questions with Answers
JavaScript Interview Questions with Answers
AK Deep Knowledge
Js ppt
Js ppt
Rakhi Thota
Design patterns
Design patterns
F(x) Data Labs Pvt Ltd
Java interview questions and answers
Java interview questions and answers
Krishnaov
COMP111-Week-1_138439.pptx
COMP111-Week-1_138439.pptx
FarooqTariq8
FAL(2022-23)_CSE0206_ETH_AP2022232000455_Reference_Material_I_16-Aug-2022_Mod...
FAL(2022-23)_CSE0206_ETH_AP2022232000455_Reference_Material_I_16-Aug-2022_Mod...
AnkurSingh340457
Unit No 2 Objects and Classes.pptx
Unit No 2 Objects and Classes.pptx
DrYogeshDeshmukh1
PHP OOP Lecture - 01.pptx
PHP OOP Lecture - 01.pptx
Atikur Rahman
Similar to Object-Oriented Javascript
(20)
Object oriented programming
Object oriented programming
Object oriented javascript
Object oriented javascript
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
JavaScript OOPS Implimentation
JavaScript OOPS Implimentation
Python Object Oriented Programming
Python Object Oriented Programming
JavaScript Programming
JavaScript Programming
Understanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptx
Object oriented approach in python programming
Object oriented approach in python programming
JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
Chapter 1- Introduction.ppt
Chapter 1- Introduction.ppt
Prototype Object.pptx
Prototype Object.pptx
Java Programming.pdf
Java Programming.pdf
JavaScript Interview Questions with Answers
JavaScript Interview Questions with Answers
Js ppt
Js ppt
Design patterns
Design patterns
Java interview questions and answers
Java interview questions and answers
COMP111-Week-1_138439.pptx
COMP111-Week-1_138439.pptx
FAL(2022-23)_CSE0206_ETH_AP2022232000455_Reference_Material_I_16-Aug-2022_Mod...
FAL(2022-23)_CSE0206_ETH_AP2022232000455_Reference_Material_I_16-Aug-2022_Mod...
Unit No 2 Objects and Classes.pptx
Unit No 2 Objects and Classes.pptx
PHP OOP Lecture - 01.pptx
PHP OOP Lecture - 01.pptx
Recently uploaded
Exploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the Process
Evangelist Apps https://twitter.com/EvangelistSW/
Active Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdf
Cionsystems
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
ICS
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
aagamshah0812
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
bodapatigopi8531
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
Fatema Valibhai
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
kellynguyen01
why an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdf
joe51371421
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and Backend
Arshad QA
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
shikhaohhpro
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
SolGuruz
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
Andolasoft Inc
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽❤️🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽❤️🧑🏻 89...
gurkirankumar98700
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
VICTOR MAESTRE RAMIREZ
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Christina Lin
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
anilsa9823
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
mohitmore19
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
MyIntelliSource, Inc.
A Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docx
ComplianceQuest1
Recently uploaded
(20)
Exploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the Process
Active Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdf
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
why an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdf
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and Backend
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽❤️🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽❤️🧑🏻 89...
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
A Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docx
Object-Oriented Javascript
1.
Object Oriented Javascript A pragmatic introduction March 2015 Ibán Martínez iban@nnset.com www.openshopen.com
2.
We will take a look to : Objectoriented programming basic concepts. Javascript Object creation.
3.
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Introduction_to_ObjectOriented_JavaScript Object oriented essentials (no javascript specific) Objectoriented programming is a programming paradigm that uses abstraction to create models based on the real world. It uses several techniques from previously established paradigms, including modularity, polymorphism, and encapsulation.
4.
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Introduction_to_ObjectOriented_JavaScript Object oriented essentials (no javascript specific) ClassClass : Defines the characteristics of the object. It is a template definition of properties and methods of an object. ObjectObject : An Instance of a class. PropertyProperty : An object characteristic, such as color. MethodMethod : An object capability, such as walk. It is a subroutine or function associated with a class.
5.
Object oriented essentials (no javascript specific) ClassClass class ShoppingCart { [...] } ObjectObject $myCart = new ShoppingCart(); PropertyProperty class ShoppingCart { public $ownerName = 'Mike'; } MethodMethod classclass ShoppingCart { ShoppingCart { public $ownerName = 'Mike'; public function addProduct(Product $product){ $this>appendProductToShoppingList($product); $this>updateTotalPrice(); } }
6.
Object oriented essentials (javascript specifics) Prototypebased programming is a style of objectoriented programming that doesn't make use of classes. Instead, behavior reuse (known as inheritance in classbased languages) is accomplished through a process of decorating (or expanding upon) existing objects which serve as prototypes. This model is also known as classless, prototypeoriented, or instance based programming.
7.
Object oriented essentials (javascript specifics) Prototypebased programming is a style of objectoriented programming that doesn't make use of classes. Instead, behavior reuse (known as inheritance in classbased languages) is accomplished through a process of decorating (or expanding upon) existing objects which serve as prototypes. This model is also known as classless, prototypeoriented, or instance based programming. JavaScript is a prototypebased language which contains no class statement.
8.
Object oriented essentials (javascript specifics) What is an 'object' for Javascript? typeof({}); => 'object' typeof([]); => 'object' typeof(null); => 'object' typeof(new String()); => 'object' typeof(new Number()); => 'object' typeof(new Boolean()); => 'object' typeof(new Object()); => 'object' In JavaScript, almost everything is an object.
9.
Object creation in Javascript
10.
Objects creation new & Object.create() Two common ways to create objects are using “new”“new” or “Object.create()”“Object.create()” directives.
11.
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide/Working_with_Objects https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Object/create Objects creation new & Object.create() new var myCar = new Car(); Requires a constructor method to be defined : function Car(){ this.plate = 'My Plate'; } Object.create() var myCar = Object.create(Car); Requires a prototype to be defined : var Car = { plate: 'My Plate' } Two common ways to create objects are using “new” or “Object.create()” directives.
12.
Define your object propertiesproperties in a constructor method named as the “Class” you want to create. You may add some default values. function Car(){ this.plate = '4787 BCN'; this.manufacturer = 'Tesla'; this.topSpeed = 80; } You can pass arguments to the constructor aswell. function Car(plate, manufacturer, topSpeed){ this.plate = plate||'4787 BCN'; this.manufacturer = manufacturer||'Tesla'; this.topSpeed = parseInt(topSpeed)||80; } new
13.
function Car(plate, manufacturer, topSpeed){ this.plate = plate||'4787 BCN'; this.manufacturer = manufacturer||'Tesla'; this.topSpeed = parseInt(topSpeed)||80; } var myFirstCar = new Car(); var mySecondCar = new Car('123 SF','Ford',120); myFirstCar.plate; => '4787 BCN' mySecondCar.plate; => '123 SF' new
14.
Now define your object's methods. function Car(plate, manufacturer, topSpeed){ this.plate = plate||'4787 BCN'; this.manufacturer = manufacturer||'Tesla'; this.topSpeed = parseInt(topSpeed)||80; this.currentSpeed = 0; this.setCurrentSpeed = function(newSpeed){ this.currentSpeed = parseInt(newSpeed); } this.accelerate = function(newSpeed){ if(parseInt(newSpeed) <= this.topSpeed){ this.setCurrentSpeed(newSpeed); } else{
throw 'Your car will break.'; } } } new
15.
var myFirstCar = new Car(); myFirstCar.accelerate(15); myFirstCar.currentSpeed; => 15 myFirstCar.accelerate(95); => Your car will break. myFirstCar.currentSpeed; => 15 new
16.
Let's do the same example but using object prototypes instead of constructor methods. Object.create()
17.
Object prototypesprototypes are defined as a Hash : var Car = { plate: '4787 BCN', manufacturer : 'Tesla', topSpeed : 80, currentSpeed : 0, setCurrentSpeed : function(newSpeed){ this.currentSpeed = parseInt(newSpeed); }, accelerate : function(newSpeed){ if(parseInt(newSpeed) <= this.topSpeed){ this.setCurrentSpeed(newSpeed);
} else{ throw 'Your car will break.'; } } } Object.create()
18.
var myFirstCar = Object.create(Car); myFirstCar.accelerate(15); myFirstCar.currentSpeed; => 15 myFirstCar.accelerate(95); => Your car will break. myFirstCar.currentSpeed; => 15 Object.create()
19.
What if I want to modify Object prototype's default values at creation time? Object.create()
20.
It requires some extra code lines than using a constructor method, but it has some cool features. Object.create()
21.
var newValues = { plate: { value: 'my Car Plate' }, manufacturer: { value: 'Ford' }, topSpeed: { value: 120 }, currentSpeed: { value: 5 } }; var myNewCar = Object.create(Car, newValues); myNewCar.plate; => 'my Car Plate' '4787 BCN' Car's prototype default values: 'Tesla' 80 0 Object.create()
22.
Additional features. Immutable properties. This features is available because Object.create() uses Object.defineProperties() check : https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties Object.create()
23.
var myNewCar = Object.create(Car, { plate: { writable: false, value: 'my Car Plate' }, [...] }); WriteableWriteable : true if and only if the valuevalue associated with the property may be changed with an assignment operator. Defaults to false. Object.create()
24.
var myNewCar = Object.create(Car, { plate: { writable: false, value: 'my Car Plate' }, [...] }); myNewCar.plate = 'Hello'; myNewCar.plate; => 'my Car Plate' Object.create()
25.
Additional features. Accessors (getters and setters) This features is available because Object.create() uses Object.defineProperties() check : https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties Object.create()
26.
var myNewCar = Object.create(Car, { plate: { writable: true, value: 'my Car Plate', get: function(){ return this._plate.toUpperCase(); }, set: function(value){ this._plate = value; } }, [...] }); Object.create()
27.
var myNewCar = Object.create(Car, { plate: { writable: true, value: 'my Car Plate', get: function(){ return this._plate.toUpperCase(); }, set: function(value){ this._plate = value; } }, [...] }); => TypeError: Invalid property. A property cannot both have accessors and be writable or have a value, #<Object> Accessors and properties have to be defined separately. Object.create()
28.
var myNewCar = Object.create(Car, { _plate: { writable: true, value: 'my Car Plate' }, plate: { get: function(){ return this._plate.toUpperCase(); }, set: function(value){ this._plate = value; } }, [...] }); myNewCar.plate; => 'MY CAR PLATE' Object.create()
29.
Object Oriented Javascript A pragmatic introduction March 2015 Ibán Martínez iban@nnset.com www.openshopen.com
Download now