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

Thanks & Questions

The end