Source: SitePoint book – Cameron Adams, James Edwards, Christian Heilmann, Michael Mahemoff, Ara Pehlivanian, Dan Webb and Simon Willison: “The art and science of Java Script” Chapter 4 and 5.
To run these examples you need:
http://www.getfirefox.com/
and
http://www.getfirebug.com/
Blog: http://www.getfirebug.com/blog/
Discuss: http://groups.google.com/group/firebug
Example 1:
var myObj = {};
for (var i = 0; i < 5; i++) {
myObj['prop_' + i] = i;
}
myObj.prop_2
Run: ==>
2
Example 2:
var person = {
name: 'Bob',
email: 'bob@bob.com',
tel: '0258305964'
};
for (var key in person) {
console.log(key);
}
Run: ==>
name
email
tel
Example 3:
if ("tel" in person) alert(person.tel);
Run: ==>
0258305964
Example 4:
var a = 5;
console.log(typeof a);
var name = 'Sam';
console.log(typeof name);
console.log(typeof aVariableThatDosentExist);
function doSomething() {
console.log('yay!');
}
console.log(typeof doSomething);
var anObject = {};
console.log(typeof anObject);
var anArray = [1,2,3,4,5,6];
console.log(typeof anArray);
console.log(anArray instanceof Array);
console.log(anObject instanceof Array);
Run: ==>
number
string
undefined
function
object
object
true
false
Example 5:
function Coord(x,y) {
this.x = x;
this.y = y;
}
var home = new Coord(132,223);
console.log(home.x);
console.log(home.y);
console.log(home.constructor);
var myArray = [];
console.log(myArray.constructor);
Run: ==>
132
223
Coord(x, y)
Array()
Example 6:
function Coord(x,y) {
this.x = x;
this.y = y;
}
Coord.prototype.units = 'cm';
var a = new Coord, b = new Coord;
console.log(a.units);
console.log(b.units);
Run: ==>
cm
cm
Example 7:
function Coord(x,y) {
this.x = x;
this.y = y;
}
Coord.prototype.units = 'mm';
console.log(a.units);
console.log(b.units);
function Coord3D(x,y,z) {
this.x = x;
this.y = y;
this.z = z;
}
Coord3D.prototype = new Coord;
var home3D = new Coord3D(323,2323, 4435);
console.log(home3D.units);
Run: ==>
mm
mm
mm //inherited from Coord.
Example 8:
var a = {
counter : 5
};
var b = {
counter : 10
};
a.increment = function(amount) {
this.counter += amount;
}
a.increment(3);
console.log(a.counter);
b.increment = a.increment;
b.increment(15);
console.log(b.counter);
Run: ==>
8
25 // Note there is no binding between the increment function and the object it is bound to, b.
Example 9:
var a = {
counter : 5
};
var b = {
counter : 10
};
a.increment = function(amount) {
this.counter += amount;
}
a.increment(3);
console.log(a.counter);
// Execute a.increment in the context of b:
a.increment.call(b,15);
console.log(a.counter);
console.log(b.counter);
a.increment.apply(b,[15]); // Alternatively, pass the arguments
// as an array, rather than as a list.
console.log(a.counter);
console.log(b.counter);
Run: ==>
8
8
25 // Call increases b.counter with 15 from 10 to 25.
8
40 // Apply increases b.counter with 15 from 25 to 50.
Example 10:
//add up all the arguments sent to the function
//no matter how many there are
function sum() {
var total = 0;
for (var i = 0, length = arguments.length; i < length; i++)
total += arguments;
return total;
}
console.log(sum(2,5,90));
console.log(sum(100,200,50,18));
Run: ==>
97
368
Example 11:
//A closure is the combination of a function and the environment (the set of variables) in which it was defined.
function createFunc(){
var aValue = 15; //createFunction's scope.
//The following is assigned without var, so it's in the global
//scope (and therefore equivalent to window.returnAValue = ...)
returnAValue = function() {
return aValue; //Creates a closure:refer createFunc's variable.
}
}
createFunc(); //Creates returnAValue in the global scope.
console.log(returnAValue()); //15 because it was created in the scope of
//createFunc and still has access to that scope.
console.log(aValue); //Undefined because it is in the scope of createFunc
Run: ==>
15
undefined
Example 12: Creating a reference to the calling function.
function returnMe(){
return arguments.callee;
}
console.log(returnMe());
Run: ==>
returnMe()
Example 13: The importance of scope.
var uid = 0; //Global scope
function newId() {
return ++uid;
}
newId();
Run: ==>
1
Example 13a: The importance of scope continues.
var uid = 0;
function newId() {
return ++uid;
}
newId();
newId();
newId();
newId();
Run: ==>
4
Example 13b: The importance of scope continues.
function newId() {
var uid = 0; //Function scope
return ++uid;
}
newId();
newId();
newId();
newId();
Run: ==>
1
Example 14: Using callee to store properties between function calls.
function newId() {
var thisFunction = arguments.callee
//If the uid property is not there yeat, make it
if (!thisFunction.uid) thisFunction.uid = 0;
return ++thisFunction.uid;
}
console.log(newId());
console.log(newId.uid);
newId();
newId();
console.log(newId());
console.log(newId.uid);
Run ==>
1
1
4 //Since newId() called 4 times and keeps variable between calls.
4
Extending Firebug, Hello World! (Part I.):
http://www.softwareishard.com/blog/?p=3
http://www.softwareishard.com/blog/?p=4
Extending FireBug:
http://www.firephp.org/Reference/Develo ... irebug.htm
Firebug Extension for AJAX Development:
http://www.firephp.org/
Firebug internals:
http://developer.mozilla.org/en/docs/FirebugInternals
Java Script examples to use on the console tab in FireBug.
Java Script examples to use on the console tab in FireBug.
Kjell Gunnar Bleivik
Make it simple, as simple as possible but no simpler: | DigitalPunkt.no |
Make it simple, as simple as possible but no simpler: | DigitalPunkt.no |