Agenda

• Disclaimer
• About
• Why javascript
• History
• Modern javascript
• The Good Parts

Disclaimer

• Not a JavaScript guru
• Needed after last presentation

About

• impress.js
• Creative Commons Attribution 3.0 Netherlands License
• source
• view

Why javascript

• Popularity
• The language of the web
• It's everywhere
• Dynamic & functional
• Fast scripting language

Popularity

Ubiquitous

• all internet browsers, desktop, mobile
• WinRT
• Windows Script Host
• PDF
• Node.js
• Gnome 3 extensions
• Qt: QML
• Beagleboard & Arduino, embedded programming using node.js

Performance

Performance

Performance

History

• Brendan Eich, CTO Mozilla Corporation

  

• 1995: Livescript Netscape Navigator
• name change to javascript
• make it look like java

History

• Main influences:
  • Scheme
    • minimalist LISP
    • functional
    • dynamically typed
  • Self
    • Object-Oriented
    • Prototypes
    • dialect of Smalltalk

ECMAScript

New in ECMAScript 5: Strict mode

(function() {
  'use strict';
  ...
}());

• Catches some common coding bloopers, throwing exceptions
• Prevents, or throws errors, when relatively “unsafe” actions are taken
• Disables features that are confusing or poorly thought out.

New in ECMAScript 5: Properties

var fred = {};
Object.defineProperty(fred, "name", {
        get: function() {
          console.log("Retrieving name: " + name);
          return name;
        },
        set: function(value) {
          console.log("Setting name to: " + value);
          name = value;
        }
    });

New in ECMAScript 5: JSON object

• JSON.parse
• JSON.stringify

New in ECMAScript 5: Object

• Object.create
• Object.seal
• Object.freeze
• Object.keys

New in ECMAScript 5: Function bind

var Button = function(content) { this.content = content; };
Button.prototype.click = function() { 
  console.log(this.content + ' clicked'); 
}
var fred = new Button('OK');
var boundClick = fred.click.bind(fred);
boundClick();

New in ECMAScript 5: Array

• every, some
• forEach
• map
• filter
• reduce
• reduceRight

JavaScript: The Good Parts

• Douglas Crockford
  • JavaScript architect at Yahoo!
  • creator of JSON
  • in ECMAScript committee
• JavaScript: The Good Parts

Object literals

var fred = {
  firstName: "Fred",
  lastName: "Flinstone",
  hometown: "Bedrock",
  wife: {
    firstName: "Wilma",
    lastName: "Flinstone"
  }
};

Functions

• Functions are objects
• arguments array
• Function scope NOT block scope

Closure

var myObject = (function () {
  var value = 0;

  return {
    increment: function (inc) {
        value += typeof inc === 'number' ? inc : 1;
    },
    getValue: function (  ) {
        return value;
    }
  };
}());

Inheritance

• Prototypal
• Obscured by use of new operator
• prefer Object.create

Prototypal Inheritance

var fred = {
  name : 'Fred Flinstone',
  saying : 'Yabadabadoo!',
  says : function() { return this.saying || ''; }
};
var barney = Object.create(fred);
barney.name = 'Barney Rubble';
barney.saying = 'Hi Fred';

Arrays

• Arrays are objects
• Array literals
• Different types
• Use for iso for in

Awful Parts

• Global variables
• Semicolon Insertion

  return
  {
    status: true
  };

  ↓

  return;
  {
    status: true
  };

Awful Parts

Falsy values:

Bad Parts

• ==

  '' == '0'          // false
  0 == ''            // true
  0 == '0'           // true
  
  false == 'false'   // false
  false == '0'       // true
  
  false == undefined // false
  false == null      // false
  null == undefined  // true
  
  ' \t\r\n ' == 0    // true

Bad Parts

• with
• eval
• new
• void

Questions?