Brought to you by Will Crichton

and James Yang

JavaScript is:

• Interpreted
  
• Dynamically typed
• Object-oriented (sort of)
• Garbage-collected
• Functional (sort of)
• Semi-standard (at best)
• Your worst nightmare

• Numbers - 3.14
• Booleans - true
• Strings - "hello world"
• Undefined - undefined
• Objects - {foo: "bar"}
• Functions - function(){}

That's it! Most things are objects.

var a = "9";
console.log(a + "1");  // prints "91"
console.log(a + 1);    // prints ??
console.log(a - 1);    // prints ?? 

var b = "10";
console.log(1 + +b);  // prints 11
console.log(1++b);    // prints ??

console.log([] + []);                 // prints "" 
console.log(+["1"]/2 + (+[]) - []*2); // I quit

Usual naming conventions. [\w_$][\w\d_$]*

Declare variables with the var  or  function  keywords.

var a = 1;
a = "foo";

var b = function() {}

function c(arg) {
    console.log(arg);
} 

You can declare literals in a number of ways:

var a = 3.14,
    b = "hello",
    c = false,
    d = [1, 2, 3],
    e = {foo: "bar"}; 

console.log(e.foo, e["foo"]);
e.foo = "hello, world";
e[1] = true;

Declaring w/ var  always puts in scope.

Scope is defined by functions only!

if (true) {
    var a = true;
}
console.log(a); // prints true 

console.log(foo);      // prints undefined (but not error)
var foo = "bar";

(function(){
    console.log(foo);  // prints undefined (not "bar")    var foo;
})(); 

Functions are values!

function run5(f){ f(5); }

run5(function(n){
   console.log(n + 1);  
}); // prints 6 

function adder(increment){
    var num = 0;
    return function(){
        num += increment;
        return num;
    }
}

var add2 = adder(2);
console.log(add2());  // prints 2
console.log(add2());  // prints 4 

The arguments  variable comes in handy.

function logger() {
    console.log(arguments.length);
    console.log.apply(console, arguments);
}

logger(1, "2", [3]); // prints 3 and then the three values 

function increment(i, debug){
    if (debug) {
        console.log("increment called on " + i);
    }
    return i + 1;
}

console.log(increment(0)); // just prints 1
console.log(increment(1, true)) // prints "increment called on 1" then 2

JavaScript blocks look like most other languages.

var a = [1, 2, 3];

if (a[0] == 1){
    // something
} else {
    // something else
}

for (var i = 0; i < a.length; i++) {
    console.log(a[i]);
}

while(true) {
    a[0]++;
} 

Also: switch, try/catch, and for...in

As for the basics, anyway. Other semi-important topics:

• Regular expressions - str.match(/pattern/)
• Default libraries - strings, arrays, math
• Other operators - ===, && , ||, ?:
• Object parameters by reference

Can't forget about JavaScript classes...

Weird facts about JS classes:

1. There are no classes, really.
2. Each class is a function.
3. Each function is actually an object.
4. But these objects aren't instances.
5. Instantiation is just like function calling,
   but with new  in the front.
   
6. Instantiation returns an object.

Let's make all that clearer.

function Animal() {}
var Will = new Animal();
var James = new Animal(); 

function Animal(name) {
    this.name = name;
}
var Will = new Animal('Will');
console.log(Will.name);         // prints "Will" 

Methods show up in prototypes.

function Animal(name) {
    this.name = name;
}

Animal.prototype.talk = function() {
    console.log('My name is ' + this.name);
}

var Will = new Animal('Will');
Will.talk(); // prints "My name is Will" 
    
var func = Will.talk;
func(); // prints "My name is"

func.call({name: 'Slim Shady'}); // prints "My name is Slim Shady"

In Java/C++, classes are like templates for instances.

JavaScript is class-less (instance-based),  

i.e. lazy and uses objects as classes.

Hence, we get prototypes--objects that are

copied to all instances (with new ).

Prototypes make inheritance... interesting.

function Animal(name){ ... }
Animal.prototype = { ... }

function Dog(name) {
    Animal.call(this, name);    
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.woof = function() {
    console.log('MOO');
    this.talk();
}

var Will = new Dog('Will');
Will.woof(); // prints "MOO" and "My name is Will"

Library for making your code better.

Utilities include:

• arrays (mapreduce, findWhere, ...)
• functions (bind, defer, wrap)
• objects (keys, extend) 

Remember our this problem?

function talkThrice(f) {
    f(); f(); f();
}

talkThrice(_.bind(will.talk, this));  

Moving from the realm of code -> design.

How do you structure an efficient, maintainable app?

Common idiom in JavaScript is the 

modular pattern.

(function() {
    'use strict';
    var myLocalVariable = ...
})();console.log(myLocalVariable) // prints 'undefined'

Or for populating a namespace,

var Module = (function() {
    'use strict';
    return { foo: 'bar' }
})(); console.log(Module.foo) // prints 'bar'

Use RequireJS for easy modules and

simple dependency management.

define(function(require) {
    'use strict';

    var $ = require('jQuery');
    $('#yes').html('no');
}) 

Organize the files in a logical way.

myproject/
-> index.html
-> style.css
-> images/
    -> *.(png|jpg|...)
-> js/
    -> vendor/
        -> 3rd party libraries
    -> app.js
    -> constants.js
    -> MyClass.js
    -> other files... 

No inline CSS or JavaScript!

<!DOCTYPE html>
<html>
    <head>
        <title>My Project</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div id="container">
            <!-- body html here -->
        </div>
        <script data-main="js/app" src="js/vendor/require.js"></script>
    </body>
</html> 

Set up RequireJS and initialize app in app.js.

define(function(require) {
    'use strict';

    requirejs.config({
        urlArgs: 'bust=' + (new Date()).getTime(),
        shim: {
            'jQuery': { exports: '$' }
        },
        paths: {
            'jQuery': 'vendor/jquery-2.0.3.min',
        }
    });

    require(['Game'], function(Game) {
        var gameInstance = new Game();
        gameInstance.run();
    })
});

You're ready to venture out into the wild

and make solid JS applications.