Event Driven Javascript

event-driven-programming.md

#Event Driven Programming

#Overview

• First-class nature of functions
• Callbacks and The JavaScript Event Loop
• Tools
  • jsbin
  • Chrome Dev Tools

#First-class nature of functions

• Functions are Objects
• May be Anonymous
• Assignable
• Passable
• Callable

• http://jsbin.com/wiyof/1/edit?js,console

// Function Declration
function bar(x){
  console.log('bar be done with ' + x + '!');
}
bar(7);
//=> bar be done with 7!

// Anonymous Function Expression Assigned to a variable
var foo = function(x){
  console.log('foo be done with ' + x + '!');
};
foo(8);
//=> foo be done with 8!

// Assign Function to Variable
var zee = bar;
zee(9);
//=> bar be done with 9!

function callMeBackLater(callback){
    callback(5);
}

callMeBackLater(foo);
//=> foo be done with 5!

#Callbacks and The JavaScript Event Loop

• JavaScript is Single Threaded
• Write short functions which execute quickly
• Blocking operations are handled asynchronously and the results are processed by the callbacks we provide
  • mouse click
  • mouse move
  • key up
  • page loaded
  • ajax request response
  • timers - setTimeout and setInterval
• clicker demo
  • onload
  • onclick
• JavaScript handles this with an Event Loop
• http://vimeo.com/96425312
• Optional:
  • clock demo
• Optional:
  • clock with closure demo

#Review

• Functions are Objects
• Functions can be anonymous
• Callbacks are
  • assigned to events
  • passed to blocking operations
• JavaScript is Single Threaded
• JavaScript has an Event Loop
• jsbin and devtools