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

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