Your SlideShare is downloading. ×
0
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript

664

Published on

Content: Javascript, Class in javascript, prototyping …

Content: Javascript, Class in javascript, prototyping
Level: Intermediate - Advance

Published in: Technology, Self Improvement
1 Comment
0 Likes
Statistics
Notes
  • JavaScript is one the weirdest languages I know especially when dealing with objects or functions. But still I like it's simplicity.

    Nice presentation.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
664
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Same function using object literalIn this case you don't need to (and cannot) create an instance of the class, it already exists. So you simply start using this instance.
  • * Function to define singleton object
  • What JavaScript does when it reaches that statement is the following:-The new operator creates a generic object and assigns its __proto__ property to Vehicle.prototype-The new operator passes the object to the Vehicle constructor function as the this keyword.-The object gets the properties hasEngine and hasWheels assigned-Upon return from the constructor, the object gets assigned to Car.prototype
  • Transcript

    • 1. {} Javascript (ECMA) Sandeepan Level: Advanced – Part 1
    • 2. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    • 3. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    • 4. {}{ “topic” : “Types” } • Primitive – undefined – null – Boolean – Number – String
    • 5. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    • 6. {}{ “topic” : “Object” } • Few important points: – It is a collection of properties – has single prototype object – Prototype may be the null value
    • 7. {}{ “topic” : “Object” } • constructor: – function object that creates and initializes objects – The value of constructors “prototype” property is a prototype object that is used to implement inheritance and shared properties • prototype: – object that provides shared properties for other objects • native objects – object whose scemantics are fully defined by specification rather than host environment. – Eg: Object (constructor), Date, Math, parseInt, eval, string methods likeindexOf and replace, array methods, ... • built-in objects – independent of host environment • host objects – object supplied by host environment – Eg: (assuming browser environment): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll
    • 8. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    • 9. {}{ “topic” : “JSON” } Source: http://www.json.org/
    • 10. {}{ “topic” : “JSON” } Source: http://www.json.org/
    • 11. {}{ “topic” : “JSON” } Source: http://www.json.org/
    • 12. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    • 13. {}{ “topic” : “Defining Functions” } • Using a function • instantiate Source: http://www.phpied.com/
    • 14. {}{ “topic” : “Defining Functions” } • Methods defined internally • Methods added to the prototype Source: http://www.phpied.com/
    • 15. {}{ “topic” : “Defining Functions” } • Using object literals – For Object : • var o = {}; • instead of the "normal" way var o = new Object(); – For arrays you can do: • var a = []; • instead of the "normal" way var o = new Array(); – Usage Source: http://www.phpied.com/
    • 16. {}{ “topic” : “Defining Functions” } • Singleton using a function • usage Source: http://www.phpied.com/
    • 17. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    • 18. {}{ “topic” : “inheritance” } • Step 1: Create constructor function for Vehicle • Step 2: Create constructor function Car • Step 3: Set up dynamic inheritance • Step 4: Extending Car using prototype • Step 5: Creating a new Car • Step 6: Extend Vehicle using prototype Source: http://www.klauskomenda.com
    • 19. {}{ “topic” : “inheritance” } • Step 1: Create constructor function for Vehicle • Step 2: Create constructor function Car • Step 3: Set up dynamic inheritance • Step 4: Extending Car using prototype • Step 5: Creating a new Car • Step 6: Extend Vehicle using prototype Source: http://www.klauskomenda.com
    • 20. {}{ “topic” : “inheritance” } • Step 1: Create constructor function for Vehicle • Step 2: Create constructor function Car • Step 3: Set up dynamic inheritance • Step 4: Extending Car using prototype • Step 5: Creating a new Car • Step 6: Extend Vehicle using prototype Source: http://www.klauskomenda.com
    • 21. {}{ “topic” : “inheritance” } • Step 1: Create constructor function for Vehicle • Step 2: Create constructor function Car • Step 3: Set up dynamic inheritance • Step 4: Extending Car using prototype • Step 5: Creating a new Car • Step 6: Extend Vehicle using prototype Source: http://www.klauskomenda.com
    • 22. {}{ “topic” : “inheritance” } • Step 1: Create constructor function for Vehicle • Step 2: Create constructor function Car • Step 3: Set up dynamic inheritance • Step 4: Extending Car using prototype • Step 5: Creating a new Car • Step 6: Extend Vehicle using prototype Source: http://www.klauskomenda.com
    • 23. {}{ “topic” : “inheritance” } • Step 1: Create constructor function for Vehicle • Step 2: Create constructor function Car • Step 3: Set up dynamic inheritance • Step 4: Extending Car using prototype • Step 5: Creating a new Car • Step 6: Extend Vehicle using prototype Source: http://www.klauskomenda.com
    • 24. {}{ “topic” : “inheritance” } • Step 1: Create constructor function for Vehicle • Step 2: Create constructor function Car • Step 3: Set up dynamic inheritance • Step 4: Extending Car using prototype • Step 5: Creating a new Car • Step 6: Extend Vehicle using prototype Source: http://www.klauskomenda.com
    • 25. {}{ “topic” : “inheritance” } • Step 1: Create constructor function for Vehicle • Step 2: Create constructor function Car • Step 3: Set up dynamic inheritance • Step 4: Extending Car using prototype • Step 5: Creating a new Car • Step 6: Extend Vehicle using prototype Source: http://www.klauskomenda.com
    • 26. {}{ “topic” : “inheritance” } • Step 1: Create constructor function for Vehicle • Step 2: Create constructor function Car • Step 3: Set up dynamic inheritance • Step 4: Extending Car using prototype • Step 5: Creating a new Car • Step 6: Extend Vehicle using prototype Source: http://www.klauskomenda.com
    • 27. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    • 28. {}{ “topic” : “Guidelines” } • Namespace pollution – CAREFULL • Declaration with var – ALWAYS • Context/ scope – BEWARE • Separate JS file • No embedded JS code in HTML file – (unless specific to single session) • Use the scripts tag as late as possible in html file. • Coding – Avoid mixins : as they always complicate the rendering engine and browser performance – Function: declare before usage – Indentation : 4 space – Line length : avoid more than 80 chars – Comments : preferable for each variables and be generous with comments
    • 29. {} Q & A
    • 30. {}  Thank You

    ×