This document provides an overview of various JavaScript topics including types, objects, JSON, defining functions, inheritance, and guidelines. It discusses primitive types, objects and their properties, the JSON format, different ways to define functions including methods and object literals, the steps to implement inheritance between functions, and best practices for JavaScript coding including namespace usage and code organization.

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