crashcourse:

javascript

Brought to you by Will Crichton

WHAT is javascript?

JavaScript is:

The language of the web
Python-like language
C-like syntax
Your worst nightmare

getting started

Download this file:
http://willcrichton.net/crashcourse.tgz
Put it in your favorite directory and untar
Open crashcourse.html in your browser
Open the console
Chrome: ctrl+shift+i OR cmd+option+i
Firefox: f12 OR option+cmd+i

TYPES

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

That's it! Most things are objects.

TYPES - OHGODWHY

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

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

VARIABLES

Usual naming conventions: combinations of
characters, numbers, $, and _.

Declare variables with the var or function keywords.

var a = 1;
a = "foo";

var b = function() {}

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

LITERALS

You can declare literals in a number of ways:

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

Objects are just key/value pairs.

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

BUILDING BLOCKs

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]);
}

for (var key in a) {
    console.log(a[key]);
}

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

Also: switch, try/catch

exercises

Write a function max(a, b) that returns the
maximum of two numbers.
Write a recursive function fibonacci(n)
which returns the nth fibonacci number.
Write a function charFreq(str) that returns
an object containing the frequency of characters
in the string, so charFreq("bob") returns
{"b":2, "o":1}.

You can access characters in a string with array
index access notation, i.e. str[n].

SCOPING

Declaring w/ var always puts in scope.

Scope is defined by functions only!

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

Variables are also hoisted.

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

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

150 strikes back

Functions are values!

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

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

Functions are also closures.

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

this/that

When you call a function contained in an object,

you can reference the calling object with this.

var obj = {
    someProperty: 'Hello, World!',
    someMethod: function() {
        console.log(this.someProperty);
    }
}

obj.someMethod(); // prints "Hello, World!"

Javascript classes?

That's the basics!

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

exercises, part 2

Write a function memoize which takes a function f
and returns a function g such that the input/output
of every call to g is saved in a dictionary and used
if possible.
Write a function map which takes an object obj and
a function f, and applies f to every value in obj.

dom

How can we use JavaScript?

var author = document.getElementById('author');
author.addEventListener('click', function(event) {
    author.style.backgroundColor = 'green'; 
});

But 90% of web dev doesn't do this.

Use frameworks instead!

$('#author').click(function() {
    $(this).css('color', 'green');
});