Java Script examples to use on the console tab in FireBug.
Posted: Fri Mar 07, 2008 1:04 pm
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
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
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