jQuery in action notes.

 

jQuery in action notes.

-------------------------------------
ch0. JavaScript Object fundamentals

functions are first-class objects in JavaScript

the primary purpose of an Object instance is to serve as a container for a named collection of other objects. like Map or dictionary in Java.

var shinyAndNew = new Object();
shinyAndNew.year = 2005;
need to add properties, dynamically as needed.
property access can be 2 forms:
dot operator: bith = shinyAndNew.year;
square op: birth = shinyAndNew["year"]; // shinyAndNew['year']

object literal
var shinyAndNew = {
     year: 2005,
     owner: {
          name: 'Spike Spiegel',
          occupation: 'bounty hunter'
     }
};

var shinyAndNew = {};
the same as
window.shinyAndNew = {};

an overview of the JavaScript Object:
A JavaScript object is an unordered collection of properties.
Properties consist of a name and a value.
Objects can be declared using object literals.
Top-level variables are properties of window.

Functions in JavaScript are considered objects like any of the other object types that are defined in JavaScript, such as Strings, Numbers, or Dates.
Function object can be: so it is the first-class object.
Assigned to variables
Assigned as a property of an object
Passed as a parameter
Returned as a function result
Created using literals

When we declare a top-level named function, a Function instance is created and assigned to a property of window.
the following statements are all equivalent:
function hello(){ alert('Hi there!'); }
hello = function(){ alert('Hi there!'); }
window.hello = function(){ alert('Hi there!'); }

passing functions as parameters, Functions as callbacks

the object referenced by keyword "this" — termed the function context — is determined not by how the function is declared but by how it’s invoked.

call() or apply()
We can set the function context to whatever we want by invoking a function via the Function methods call() or apply().
A function f acts as a method of object o when o serves as the function context of the invocation of f.

Closures

$(function(){
     var local = 1;
     window.setInterval(function(){
          $('#now').html('#' + local + ', ' + new Date());
          local++;
     },1000);
});
Although it is true that the block in which local is declared goes out of scope when the ready handler exits, the closure created by the declaration of the function, which includes local, stays in scope for the lifetime of the function.

Another important feature of closures is that a [function context](this object) is never included as part of the closure. but can use [outer object] to access.

a function declaration and its environment form a closure allowing the function, when later invoked, to access those local variables that become part of the closure.

-------------------------------------

ch1 Introducing jQuery

Unobtrusive JavaScript: segregate style(css), behavior(js) from structure within an HTML document.

window.onload = function() { /* do something */ };
basically equivalent to
jQuery(document).ready(function() { /* do something */ });

the same as

$(function() { /* do something */ });

but 1st one is on all resources loaded, while 2nd one only after DOM tree has loaded

In contrast, the window’s onload technique allows for only a single function.

Extending jQuery
$.fn.yourExtendedFunctionName = function() {
     //return the original set
}