Page 1 of 1

Object oriented programming with JavaScript and Firebug.

Posted: Mon Mar 03, 2008 10:41 am
by KBleivik
Firebug, http://www.getfirebug.com/, is an excellent development tool and plugin for the firefox browser. Download and install FireFox and FireBug and load a site like digg.com into FireFox. Then load firebug, either from the tools menu, the icon in the lower right corner or from the firebug icon that you must first install on your browsers navigation toolbar. In the main window, click the HTML tab and expand the view by clicking the small + sign at the left of the tag. Then you can see that there is an element:

<script type="text/javascript" src="/js/63/jquery.js">

That element shows that digg used the jQuery JavaScript library that can be downloaded free from http://jquery.com/. If you expand the above element, you will notice that jQuery 1.2.2 is used. The latest version is 1.2.3. In that way it is easy to look at a site / page and see how JavaScript, HTML, CSS and DOM is used.

The console tap is important, since that can be used like an editor where you can write JavaScript code in real time and see the result immediately.

Write the following code in the right window in the console tab:

Code: Select all

var myObj = new Object;
myObj['myProperty'] = 454;
myObj[45435] = true;
myObj[true] = 'hello';
console.log(myObj['myProperty']);
console.log(myObj['true']);
var myDate = new Date;
myDate['a'] = 'You can use any type of object as a hash';
location['bingo'] = 'Yes, I mean _any_object';
console.log(location['bingo']);
and click run.

Your output in the left window should be:

454
hello
Yes, I mean _any_object

In this way, you can get a flying start in object oriented programming if you learn to look at code and use FireBug efficiently.

Another related source is of course the W3 Schools, http://www.w3schools.com/js/js_examples_2.asp JavaScript Objects Examples.

For more information see:

http://www.webproworld.com/web-programm ... post226176

http://www.oopschool.com/

Recommended book:
The Art & Science of JavaScript from sitepoint:
http://www.sitepoint.com/books/jsdesign1/

Chapter 4 has an excellent introduction to FireBug, and in the very important Chapter 5 "Metaprogramming with JavaScript" you learn more how to use the console tab as an online JavaScript editor.

There are some examples here:
http://www.kjellbleivik.com/Books/

Some of them do not function for obvious reasons. Some are in PHP where you are not able to see the code. The jQuery examples http://www.kjellbleivik.com/Books/jquery/content.htm should be fairly accurate though.

Load the examples in FireBug, and you can easily modify and view the HTML, CSS and JavaScript source etc.