Whirlwind Tour of JavaScript

<html>
  <head>
    <script type="text/javascript" 
            src="my_scripts.js"></script>
  </head>
  <body></body>
</html>

Truthy and Falsey

Falsey

Truthy

Type Coersion

Types

Numbers

Strings

Arrays

Objects

Functions

doStuff();

function doStuff(arg1, arg2) {}

eatIt();

var eatIt = function(){}

Inside Functions

var module = {
  eatIt: function(){
    //arguements
    //this == module
  }
};

module.eatIt("chicken", 3);

/* */

var Person = function(name){
  this.name = name;
};

var dude = new Person('Sean');

Function Scope

if (1===1) {
  var name = 'Sean';
}

//Same scope; redefines name
var name = 'Sean';

/* */

var name = 'Sean';
var action = function(){
  //Closures!
  var fullName = name + ' Massa';
  return fullName;
}

//Different scope!
typeof fullName === 'undefined';

Async Functions

setTimeout(function(){
  console.log('anonymous function');
}, 1000);

function timeoutHandler(){
  console.log('named function');
}

setTimeout(timeoutHandler, 1000);

function myTimeout(callback, timeout) {
  callback("some param");
}

Prototypes

var Person = function(){
  this.speak = function(msg){
    console.log(msg);
  };
}

/* */

var EfficientPerson = function(){};

EfficientPerson.prototype.speak = 
  function(msg) {
    console.log(msg);
};

Inheritence with Prototypes

var Person = function(){};
Person.prototype.speak = function(){...};

var Employee = function(){};
Employee.prototype = new Person();

var emp = new Employee();
emp.speak();

jQuery

//gather data, do stuff

jQuery === $
$.noConflict()
jQuery !== $

var $cards = $('.card');
var card = $cards[0];
$cards.hide();

$(function(){
  //onload, do stuff!
});

var $container = $('#container')
var $newCard = $(
  '
some card
');
$container.append($newCard);

jQuery Plugins

(function( $ ){

  $.fn.myPlugin = function() {
    //this == a jQuery object

    this.fadeIn('normal', function(){
      // this == a DOM element
    });
  };

})( jQuery );

$('#element').myPlugin();

jQuery Events

function removeMyself(){
  $(this).remove();
}

$('.card').bind('click', removeMyself);

$('input.select').bind('change', function(){
  recalculateTotals();
});

$('.card').live('click', removeMyself);

Browser Compatibility

if ( target.addEventListener )
  target.addEventListener(
    eventName, 
    handlerName, 
    false);

else if ( target.attachEvent )
  target.attachEvent(
    "on" + eventName, 
    handlerName);

else
  target["on" + eventName] = handlerName;

//jQuery will save you!
$(selector).bind(eventName, handler);

//newer syntax
$(selector).on(eventName, handler);

CoffeeScript!

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
    square: square
      cube:   (x) -> x * square x

CoffeeScript!

# Splats:
race = (winner, runners...) ->
print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

Node.js

var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, 
    {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, "127.0.0.1");

console.log(
  'Running at http://localhost:1337/');

Resources

# ← →

/