{}
Javascript (ECMA)
Sandeepan
Level: Advanced – Part 1
{}Topics
• Types
• Object
• JSON
• Defining Functions
• Inheritance
• Guidelines
{}Topics
• Types
• Object
• JSON
• Defining Functions
• Inheritance
• Guidelines
{}{ “topic” : “Types” }
• Primitive
– undefined
– null
– Boolean
– Number
– String
{}Topics
• Types
• Object
• JSON
• Defining Functions
• Inheritance
• Guidelines
{}{ “topic” : “Object” }
• Few important points:
– It is a collection of properties
– has single prototype object
– Protot...
{}{ “topic” : “Object” }
• constructor:
– function object that creates and initializes objects
– The value of constructors...
{}Topics
• Types
• Object
• JSON
• Defining Functions
• Inheritance
• Guidelines
{}{ “topic” : “JSON” }
Source: http://www.json.org/
{}{ “topic” : “JSON” }
Source: http://www.json.org/
{}{ “topic” : “JSON” }
Source: http://www.json.org/
{}Topics
• Types
• Object
• JSON
• Defining Functions
• Inheritance
• Guidelines
{}{ “topic” : “Defining Functions” }
• Using a function
• instantiate
Source: http://www.phpied.com/
{}{ “topic” : “Defining Functions” }
• Methods defined internally
• Methods added to the prototype
Source: http://www.phpi...
{}{ “topic” : “Defining Functions” }
• Using object literals
– For Object :
• var o = {};
• instead of the "normal" way va...
{}{ “topic” : “Defining Functions” }
• Singleton using a function
• usage
Source: http://www.phpied.com/
{}Topics
• Types
• Object
• JSON
• Defining Functions
• Inheritance
• Guidelines
{}{ “topic” : “inheritance” }
• Step 1: Create constructor function for Vehicle
• Step 2: Create constructor function Car
...
{}{ “topic” : “inheritance” }
• Step 1: Create constructor function for Vehicle
• Step 2: Create constructor function Car
...
{}{ “topic” : “inheritance” }
• Step 1: Create constructor function for Vehicle
• Step 2: Create constructor function Car
...
{}{ “topic” : “inheritance” }
• Step 1: Create constructor function for Vehicle
• Step 2: Create constructor function Car
...
{}{ “topic” : “inheritance” }
• Step 1: Create constructor function for Vehicle
• Step 2: Create constructor function Car
...
{}{ “topic” : “inheritance” }
• Step 1: Create constructor function for Vehicle
• Step 2: Create constructor function Car
...
{}{ “topic” : “inheritance” }
• Step 1: Create constructor function for Vehicle
• Step 2: Create constructor function Car
...
{}{ “topic” : “inheritance” }
• Step 1: Create constructor function for Vehicle
• Step 2: Create constructor function Car
...
{}{ “topic” : “inheritance” }
• Step 1: Create constructor function for Vehicle
• Step 2: Create constructor function Car
...
{}Topics
• Types
• Object
• JSON
• Defining Functions
• Inheritance
• Guidelines
{}{ “topic” : “Guidelines” }
• Namespace pollution – CAREFULL
• Declaration with var – ALWAYS
• Context/ scope – BEWARE
• ...
{}
Q & A
{}

Thank You
Upcoming SlideShare
Loading in …5
×

Javascript

788 views
711 views

Published on

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
788
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
1
Likes
0
Embeds 0
No embeds

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
  • Javascript

    1. 1. {} Javascript (ECMA) Sandeepan Level: Advanced – Part 1
    2. 2. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    3. 3. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    4. 4. {}{ “topic” : “Types” } • Primitive – undefined – null – Boolean – Number – String
    5. 5. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    6. 6. {}{ “topic” : “Object” } • Few important points: – It is a collection of properties – has single prototype object – Prototype may be the null value
    7. 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. 8. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    9. 9. {}{ “topic” : “JSON” } Source: http://www.json.org/
    10. 10. {}{ “topic” : “JSON” } Source: http://www.json.org/
    11. 11. {}{ “topic” : “JSON” } Source: http://www.json.org/
    12. 12. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    13. 13. {}{ “topic” : “Defining Functions” } • Using a function • instantiate Source: http://www.phpied.com/
    14. 14. {}{ “topic” : “Defining Functions” } • Methods defined internally • Methods added to the prototype Source: http://www.phpied.com/
    15. 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. 16. {}{ “topic” : “Defining Functions” } • Singleton using a function • usage Source: http://www.phpied.com/
    17. 17. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. {}Topics • Types • Object • JSON • Defining Functions • Inheritance • Guidelines
    28. 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. 29. {} Q & A
    30. 30. {}  Thank You

    ×