Loopage Scene 6. JavaScript Loops SchemeSelfJava JavaScript.
Javascript
30
{ } Javascript (ECMA) Sandeepan Level: Advanced – Part 1
-
Upload
sandeepan-kundu -
Category
Technology
-
view
656 -
download
0
description
Content: Javascript, Class in javascript, prototyping Level: Intermediate - Advance
Transcript of Javascript
{ }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– Prototype may be the null value
{ }{ “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
{ }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.phpied.com/
{ }{ “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/
{ }{ “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• 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
{ }{ “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
{ }{ “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
{ }{ “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
{ }{ “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
{ }{ “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
{ }{ “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
{ }{ “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
{ }{ “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
{ }Topics
• Types• Object• JSON• Defining Functions• Inheritance• Guidelines
{ }{ “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
{ }Q & A
{ }
Thank You
