Page 1 of 1

Java Script examples to use on the console tab in FireBug.

Posted: Fri Mar 07, 2008 1:04 pm
by KBleivik
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