• User Interface - address Bar, Back, Forward, Bookmark, etc
• Browser Engine - Intermediary between UI & Rendering Engine
• Rendering Engine - Parse & Display Content
• Networking - abstract interface for network requests (like HTTP)
• UI Backend - Generic interface for basic widgets
• Javascript Interpreter - Parse & Execute Javascript code
• Data Storgage - Cookies/LocalStorage/IndexedDB/WebSQL/FileSystems

• Internet Explorer => Trident
• Firefox => Gecko
• Safari => WebKit
• Chrome => Blink (WebKit)
• Opera => Blink (WebKit)

• True
  
• False
  

1. Browser Declaration
2. User Normal Declaration
3. Author Normal Declaration
4. Author Important Declaration
5. User Important Declaration

• Normal [Static & Relative]
  

• As per box type

• First as normal
• Moved as far left/right as possible

• Different position in render tree than the DOM tree

1. Box Type
2. Box Dimension
3. Positioning Scheme
4. External Info. (img size, screen size, etc)
5. Layered representation (third dimension)

1. BG Color
2. BG Image
3. Border
4. Children
5. Outline

• Change in element color 
• Only repaint the element
• Change in element position
• Layout and repaint on the element, its children and its affected siblings
• Adding a new DOM element
• Layout and repaint of the Node
• Increase in Font Size
• Invalidation of cache, relayout & repaint of entire tree

1. Tim Berners-Lee [1991]
2. CSS + JS - [1996]
3. HTML4 - CSS2 [1997 - 2000]
4. Tableless + AJAX [2002 - 2005]
5. HTML5 + CSS3 [2009]

• Local Storage
  

• Key/Value
• Easy API - localStorage.
• setItem()
• getItem()
• removeItem()
• clear()

• Only Session scope
• Best for One-time-temp-download

• True
• False

var player = {"name":"Messi", "jersey":10, skill:"ok"};

var player = new Object();
player.name = "Messi";
player.jersey = 10;
player.skill = "ok";

var myFoo = new foo();
myFoo.bar(); 
=> call the bar function of the prototype of foo with this = myFoo 

var myFoo = new foo();
=> myFoo.prototype is assigned the foo.prototype  

if(typeof callback === "function"){...} 

• true
• false

xhr = new XMLHttpRequest();
xhr.open(method, serviceUri, isAsyncBoolean);
xhr.setRequestHeader(param,value);
xhr.send(requestCotent);

xhr.responseText(); //synch
xhr.onReadyStateChange = callback(); //Asynch

console.log(typeof myFunc);
var myFunc = function(){...} Function Expressions are declaration or assignment?

Function howMany(greatPeople){
   var i;
   var count = 0;
   for(i=0;i<greatPeople.length;i++){
      greatPeople[i]["count"] = function(){
         return count + i;
      }
   }
   return greatPeople;
}
var listOfGreatPeople = [{name:"Buddha",count:0},
                         {name:"Kabir",count:0},
                         {name:"Rajnikanth",count:0}];var howManyForGreatPeople = howMany(listOfGreatPeople);
console.log(howManyForGreatPeople[0]["count"]);

Function howMany(greatPeople){
   var i;
   var count = 0;
   for(i=0;i<greatPeople.length;i++){
      greatPeople[i]["count"] = function(index){
         return function(){
            count + index;
         }()
      }(i);
   }
   return greatPeople;
}
var listOfGreatPeople = [{name:"Buddha",count:0},
                         {name:"Kabir",count:0},
                         {name:"Rajnikanth",count:0}];var howManyForGreatPeople = howMany(listOfGreatPeople);
console.log(howManyForGreatPeople[0]["count"]);

• Frequents W3C School
• Select + Manipulate + screw up
• Event Handlers for each and every item
• Loop everything twice - "just like that"
• Love the ease of jQuery & forgets Javascript
• Compare with favorite Java/C++

• Frequents Stackexchange
• Understands Object, Prototype, Closure
• Accepts that errors can occur 
• Moreover, tries to handle exceptions
• Starts appreciating how browsers work
• Still secretly loves his programming lang

• Frequents and Answers on stackexchange 
• Understand real difference in devices
• Writes for reuse and extensibility
• Compares frameworks and libraries
• Dreams of writing own framework someday

• Looks to code in Javascript everywhere
• Node.js is first priority
• Understands real differences in browser engine
• Obsessed with performance & security

• Frequents Quora to answer philosophical queries
• Feels part of a political movement for Javascript
• Talks about ES6 - Harmony like it is Bible
• Deep down understands that its a long way to go