Books on JavaScript:

Douglas Crockford - "JavaScript The Good Parts" on GoogleTechTalks
Creating an Object in js
var person = {
firstName : "John",
lastName : "Doe",
sayHi : function() {
return "Hi there";
}
};
console.log( person.firstName + person.lastName + person.sayHi ); // returns 'John Doe Hi there'
/*var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.sayHi = function() {
return "Hi there";
};*/ |
var person = {
firstName : "John",
lastName : "Doe",
sayHi : function() {
return "Hi there";
}
};
console.log( person.firstName + person.lastName + person.sayHi ); // returns 'John Doe Hi there'
/*var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.sayHi = function() {
return "Hi there";
};*/
Factory functions in js
var createPerson = function(firstName, lastName) {
return {
firstName : firstName,
lastName : lastName,
sayHi : function() {
return "Hi there";
}
};
};
var johnDoe = createPerson("John", "Doe");
console.log( johnDoe.firstName ); // returns 'John'
var janeDoe = createPerson("Jane", "Doe");
console.log( janeDoe.firstName ); // returns 'Jane' |
var createPerson = function(firstName, lastName) {
return {
firstName : firstName,
lastName : lastName,
sayHi : function() {
return "Hi there";
}
};
};
var johnDoe = createPerson("John", "Doe");
console.log( johnDoe.firstName ); // returns 'John'
var janeDoe = createPerson("Jane", "Doe");
console.log( janeDoe.firstName ); // returns 'Jane'
Create array of objects in js
var arr = [];
var img_list = $('.related-lots li');
$.each(img_list, function(index, item){
var obj = {
image_url: image_url_str,
href: href_url
};
arr.push(obj);
}); |
var arr = [];
var img_list = $('.related-lots li');
$.each(img_list, function(index, item){
var obj = {
image_url: image_url_str,
href: href_url
};
arr.push(obj);
});
var person = {
getName: function () { // public method
return this._getFirst() + ' ' + this._getLast();
},
_getFirst: function () { // private method
// code
},
_getLast: function () { // private method
// code
}
}; |
var person = {
getName: function () { // public method
return this._getFirst() + ' ' + this._getLast();
},
_getFirst: function () { // private method
// code
},
_getLast: function () { // private method
// code
}
};
var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
return{
create:createMember,
get:getMemberDetails
}
}();
//myApplication.get() and myApplication.create() now work. |
var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
return{
create:createMember,
get:getMemberDetails
}
}();
//myApplication.get() and myApplication.create() now work.
JavaScript callback pattern
function func1(callback) {
// some code
callback();
// some code
}
function func2() {
// some code
}
func1(func2); |
function func1(callback) {
// some code
callback();
// some code
}
function func2() {
// some code
}
func1(func2);
JavaScript callback example
// refactored findNodes() to accept a callback
var findNodes = function (callback) {
var i = 100000, // big, heavy loop
nodes = [], // stores the result
found; // the next node found
// check if callback is callable
if (typeof callback !== "function") {
callback = false;
}
while (i) {
i -= 1;
// complex logic here...
// now callback:
if (callback) {
callback(found);
}
nodes.push(found);
}
return nodes;
};
// a callback function
var hide = function (node) {
node.style.display = "none";
};
// find the nodes and hide them as you go
findNodes(hide);
// or you can pass an anonymous callback
findNodes(function (node) {
node.style.display = "block";
}); |
// refactored findNodes() to accept a callback
var findNodes = function (callback) {
var i = 100000, // big, heavy loop
nodes = [], // stores the result
found; // the next node found
// check if callback is callable
if (typeof callback !== "function") {
callback = false;
}
while (i) {
i -= 1;
// complex logic here...
// now callback:
if (callback) {
callback(found);
}
nodes.push(found);
}
return nodes;
};
// a callback function
var hide = function (node) {
node.style.display = "none";
};
// find the nodes and hide them as you go
findNodes(hide);
// or you can pass an anonymous callback
findNodes(function (node) {
node.style.display = "block";
});
Borrow and bind methods
var one = {
name: "object",
say: function (greet) {
return greet + ", " + this.name;
}
};
one.say('hi'); // "hi, object"
var two = {
name: "another object"
};
one.say.apply(two, ['hello']); // "hello, another object" |
var one = {
name: "object",
say: function (greet) {
return greet + ", " + this.name;
}
};
one.say('hi'); // "hi, object"
var two = {
name: "another object"
};
one.say.apply(two, ['hello']); // "hello, another object"
JavaScript percents (percentage): var p = Math.round(Math.random() * 100);