jQuery basics


This is the summary of "Fundamentals of Great jQuery Development", which is available at http://vimeo.com/18511621.

javascript is a functional language, not in a useful way, but because it treats function as its first-class citizen. It is also Object-oriented language, as it treats everything as object.

function declaration
This is what people use most of the time.
[sourcecode language="javascript"]
function foo(p1) {
p1();
}
[/sourcecode]

function expression
This doesn't have name and is anonymous.
[sourcecode language="javascript"]
foo(function () {});
[/sourcecode]

function expression with name
[sourcecode language="javascript"]
foo(function f1(), "test" {});
[/sourcecode]

json literals
[sourcecode language="javascript"]
var o = {
foo: 1,
bar: "test",
alpha: {
damian: function () { }
}
};

[/sourcecode]
Here o is an object.

constructor
"new" means you create a new object based on its protytype.
If you mean a class, capitalise the first letter as convention.

[sourcecode language="javascript"]
function Animal() {
this.breed = "domestic tabby";
this.smellsLike = "candy";
}
Animal.prototype = {
member1: function() { },
member2: ""
};

var f = new Animal(); // create a new animal based on the prototype.
f.member1
var f = Animal(); // this makes breed and smellsLike global scope, possibly overriding other breed.
[/sourcecode]

Scope
In javascript, a variable's scope is function-level. A variable is accessible within a function, even though it is declared within a block

[sourcecode language="javascript"]
function () {
var i = 0;
for (var j = 0; j <= 10; j++) {
var x = 'test';
}
x = 20; //this x is visible outside of the for block
}
x = 20: // x is not visible outside of function
[/sourcecode]

Global variable or function is bad, because you cannot guarantee that only your javascript would run in the browser. You have multiple javascript from 3rd party, grease-monkey plugins, ...

So, don't declare a function in the global scope. Instead, create anonymous function and immediately execute it.

[sourcecode language="javascript"]
(function() {
var i = 'test'; //as long as you use 'var', it is safe.
this.alert('hi'); // this is global window

}())

//If you want to pass window object
(function (w) {
var i = 'test';
}(window))

[/sourcecode]

this

[sourcecode language="javascript"]
function foo() {
this //this is an global object
}

function Foo() {
this // not an global object, but this function.
}
var f = new Foo();

//this can be resued depending on the context.
function foo() {
alert(this.hi); //In this case, this becomes the function, not global.
}
foo.call({ hi: 'test' });
foo.call({ hi: 123 });
[/sourcecode]

Closure
A closure is a function that references a variable that isn't contained within its own immediate scope.

[sourcecode language="javascript"]
// this variable is out of the scope;
function foo() {
var myVar = 1;

return function() {
return myVar.toString();
};
}

var myFunc = foo();
myFunc(); //This access myVar, which is outside of the function boundary. This looks trivial, but event handler takes advantage of closure.
[/sourcecode]