- basic
- JavaScript Cheat Sheet
- js-tools
- dev
- Javascript - Check if browser back button was clicked
- javascript add custom click event
- javascript add/remove class on click
- javascript delegate custom click event
- javascript DOM loaded
- javascript find an element in array
- JavaScript loop through object (keys and values)
- javascript reverse string
- javascript string to number
- javascript number to string
- javascript array length
- javascript substring
- javascript benchmark
- javascript function default value for parameter
- javascript toolbar example
- javascript url to link
- var funcName = function() {} vs function funcName() {}
- javascript string replace
- javascript find occurrence in string
- randomize (shuffle) an array
- tasks
- docs
- patterns
- JSON
- Test-driven development
Books on JavaScript:
- Stoyan Stefanov - JavaScript Patterns
- Douglas Crockford - JavaScript The Good Parts
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";
};*/
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'
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 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.
JavaScript callback pattern
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";
});
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"
JavaScript percents (percentage): var p = Math.round(Math.random() * 100);
Interview question:
const a = {
i: 1,
toString: function() {
return a.i++;
}
}
if(a == 1 && a == 2 && a == 3) {
console.log('hi');
}