http://proglit.com/

the javascriptlanguage

BY

SA

Javascriptis notJava

• Brendan Eich at Netscape in 1995• named in deal between Netscape and Sun

• ECMA standard calls it ECMAScript

• only language in all modern web browsers• currently focus of lots of optimization work

the DOM(Document Object Model, the hierarchy of objects

representing page content in web browsers)

AJAX(Asynchronous Javascript and XML, a technique to submit/request data without refreshing the page)

dynamic and (a little) functional

object-oriented programmingvia prototyping

numbersbooleansstringsarrays (lists)objects (dictionaries)functionsnull

http://proglit.com/

+ addition- subtraction/negation/ division* multiplication% modulus

x * 3 + 9((x * 3) + 9)

(+ (* x 3) 9)

foo(a, b, c)bar()

(foo a b c)(bar)

foo(foo)

((foo))

foo

foo()(foo())

(foo)

foo = bar / 2(foo = (bar / 2))

(= foo (/ bar 2))

lvalue rvalue

x = y = z = 4 + 2(x = (y = (z = (4 + 2))))(((x = y) = z) = (4 + 2))

the = operator is right-to-left associative

http://proglit.com/

x = 3;cow = 2 + x;foo(1);rat = bar();

free-form syntaxx = 3; x=3 ; x = 3 ;

foo(); // ignore this

/* ignore all this too */ bar();

/* apple /* banana orange */ lemon */

_foofoo_bar$foo

foo$bar

varvar name;

var name = expression;

var monkey;var zebra = 3;

var jeff;foo(jeff); // OKfoo(amanda); // error

undefined

function

function(parameters) {body}

var helen = function(apple, orange) {

return apple + orange;};

var dan = helen(3, 5);

! not=== equals!== not equals&& and|| or< less than> greater than<= less than or equal>= greater than or equal

!true // false!false // true!null // true!0 // true!“” // true!undefined // true

3 === 3 // true3 === -2 // false!true === false // true

(3 === 3) || (2 > 4) // true

http://proglit.com/

if / elseif (condition) {body}else if (condition) {body}else {body}

whilewhile (condition) {body}

if (x === 3) { foo();} else { bar();}

var i = 0;while (i < 5) { foo(); i = i + 1;}

var foo = function() {

return bar;};foo(); // errorvar bar = 3;foo(); // OK

var foo = function() {

bar = 6;return bar;var bar;

};foo(); // 6

nested functionsvar foo = function(a) {

var bar = function(b) {return b + 3;

};return bar(a);

};foo(5); // 8

Function A C

Function A D

Function B E

B

A D

CB

C

var foo = function(a) {var bar = function(a) {

return a + 3;};return bar(a);

};foo(5); // 8

var foo = function() {var a = 3;var bar = function(b) {

return a + b;};a = 5;return bar(6);

};foo(); // 11

http://proglit.com/

var foo = function(a) {var b = 4;return function(c) {

return a + b + c;};

};var bar = foo(2);var ack = foo(3);bar(6); // 12ack(6); // 13

closure

var foo = function(a) {return function() {

a = a + 2;return a;

};};var bar = foo(2);var ack = foo(3);bar(); // 4bar(); // 6ack(); // 5

closure

objects

{properties}

object[string]

var foo = {};var bar = {“bill”: 1 + 1, “diana”: 11};var ack = bar[“bill”]; // 2bar[“bill”] = 3; foo[“ned”] = 8; ack = foo[“ted”]; // undefined

var foo = {};var bar = {bill: 1 + 1, diana: 11};var ack = bar.bill; // 2bar.bill = 3;foo.ned = 8; ack = foo.ted; // undefined

methodsvar foo = {};foo.bar = function() {

this.ack = 3;};foo.bar();

var foo = {};foo.bar = function(x) {

x.ack = 3;};foo.bar(foo);

var foo = {};foo.bar = function() {

this = 3; //error};foo.bar();

var bar = function() {return this;

};bar(); // global object passed to this

http://proglit.com/

object linksobject A C

object A D

object B E

B

A D

CB

C

var foo = {a: 1, b: 2, c: 3};var bar = {a: 4, d: 5};var ack = {b: 6, e: 7};… // foo bar ackvar x = foo.c === bar.c === ack.c; // truebar.c = 8;x = ack.c; // 8x = foo.c; // 3

var foo = “hello”;var x = foo.length; // 5x = foo.charAt(1) ; // “e”x = “avast”.charAt(3) ; // “s”

object charAt

“avast” length charAt “hello” length charAt

var Tom = function(foo, bar) {

this.foo = foo;this.bar = bar;

};var jane = (new Tom(2, 3));var david = new Tom(7, 10);

var Tom = function(foo, bar) {this.foo = foo;this.bar = bar;

};Tom.prototype.ack = “hello”;var jane = new Tom(2, 3);var x = jane.ack; // “hello”

object ack object foo ackbar

http://proglit.com/

arrays

[items]

array[index]

var foo = [];var bar = [4, “hello”, 33];var ack = bar[2]; // 33bar[3] = “orange”;

var foo = [];var bar = [4, “hello”, 33];var ack = bar[“2”]; // 33bar[“3”] = “orange”;

var foo = [];var bar = [4, “hello”, 33];var ack = foo.length; // 0ack = bar.length; // 3bar[15] = true;ack = bar.length; // 16ack = bar[8]; // undefined

argumentsvar foo = function(a, b, c) {

// arguments[0] equals a// arguments[1] equals b// arguments[2] equals c…

};

var foo = function(a, b, c) { … };

foo(1, 7, 11, 2, 8); // OKfoo(6, 7); // OK

var sum = function() {var i = 0;var sum = 0;while (i < arguments.length) {

sum = sum + arguments[i];i = i + 1;

}return sum;

};

sum(2, 2, 3); // 7sum(5, 7); // 12sum(); // 0

http://proglit.com/

exceptions

foo(“hello” * true);

exceptionstry {

foo(“hello” * true);bar();

} catch (ex) {ack(ex);

}

try {throw “We’re

screwed.”;bar();

} catch (ex) {ack(ex);

}

var foo = function () { … // exception

};

foo(); // exception

try { foo(); // exceptionbar();

} catch (ex) {ack();

}

var bar = function() {try {

foo(); // exception} catch (ex) {

ack();}foo(); // exception

};

bar(); // exception

http://proglit.com/