Intro.js

Getting Started With Javascript

Lance Ball / @lanceball / http://lanceball.com

Who Am I?

Senior Software Engineer

Red Hat, JBoss, Project Odd

Project Odd

TorqueBox, Immutant, Nodyn

JRuby, DynJS

Ruby, Javascript, Clojure, Java

Why Javascript?

It's Fun!

Low Ceremony

It's really easy to get started. Just open a browser.

Ubiquitous

Laptops, Phones, Tablets

Node.js A large community of server side JavaScript developers.

A Description (Courtesy of MDN)

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

https://developer.mozilla.org/en-US/docs/Web/JavaScript

Features

First-class Functions

Functional Scope

Prototypical Inheritance

Data Types

DOM (Browser builtin JS)

First-class Functions

var add5 = function(x) {
  return x + 5;
}

add5(10); // 15

First-class Functions

function add2(x) {
  return x + 2;
}

function calculate(x, f) {
  return f(x);
}

calculate(10, add5); // 15
calculate(10, add2); // 12

First-class Functions

function calculator(f) {
  return function(x) {
    f(x);
  }
}

var incrementFive = calculator(add5); // function
var incrementTwo  = calculator(add2); // function

incrementFive(10);                    // 15
incrementTwo(10);                     // 12

Functional Scope

function addSquares(a,b) {
   function square(x) {
      return x * x;
   }
   return square(a) + square(b);
}
a = addSquares(2,3); // returns 13
b = addSquares(3,4); // returns 25
c = addSquares(4,5); // returns 41

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope

Functional Scope

function welcomer(salutation) {
   return function(name) {
      return [salutation, name].join(', ');
   }
}

var frenchHello  = welcomer('Bonjour');
var englishHello = welcomer('Hello');
var spanishHello = welcomer('Hola');

frenchHello('Pierre');    // Bonjour, Pierre
englishHello('James');    // Hello, James
spanishHello('Rodrigo');  // Hola, Rodrigo

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope

Prototypical Inheritance

var Chip = function() {
  this.flavor = 'Plain';
};

Chip.prototype.crunch = function() {
  console.log(this.flavor + ' crunch!');
};

var chip = new Chip();
chip.crunch(); // "Plain crunch!"

Prototypical Inheritance

var Dorito = function() {
  this.flavor = 'Nacho cheese';
};
Dorito.prototype = new Chip();

var dorito = new Dorito();
dorito.crunch(); // "Nacho cheese crunch!"

Data Types

Undefined, Null

Boolean, String

Number, Object

Builtins

Array, Date

RegExp, Error (and friends)

Math, JSON

DOM/Browser Example

function popupAlert() {
  var msg;
  var response = confirm("Press a button!");
  if (response === true) {
    msg = "You pressed OK!";
  }
  else {
    msg = "You pressed Cancel!";
  }
  document.getElementById("demo").innerHTML=msg;
}

Lots and Lots of Tools

DOM Manipulation: JQuery http://jquery.com

Functional Utilities: Underscore, Lodash

Model/View: Angular.js, Backbone.js

Package Management: NPM

Project Packaging and Build: Bower, Grunt

BaaS: Meteor.js, Derby

Resources

• JSFiddle - http://jsfiddle.net
• MDN - https://developer.mozilla.org/
• Douglas Crockford - http://javascript.crockford.com/
• Annotated ECMAScript 5.1 - http://es5.github.io/

Thanks & Questions