Home > ExtJS > Javascript Foundation

Javascript Foundation

February 26th, 2009

To get any use out of ExtJS you need to understand javascript. It’s inescapable. This is not a framework were you are going to be writing ruby code that generates javascript for you, like you may have experienced with Rails/Prototype. There may, someday, be that sort of integrated support… but not today, and quite frankly, it would be an abomination of the framework anyway. If you are an old pro at Javascript, chances are this isn’t going to be very informative, but if the last great Javascript trick you learned was how to change the browser’s status bar, you may learn a thing or two.

Firebug, the Indispensable Tool

The first central concept to cover is basic tools. Back in the day, javascript debugging involved peppering your code with alert() calls that would popup little messages… like print statements in a scripting language, but way more annoying because they would stop the process until you pressed the “okay” button. But now there is a better way. The better way is Firebug. It’s a Firefox extension that lets you peer into your webpage in ways never before possible. It is absolutely essential to doing ExtJS work, so if you don’t have it, you need to get it. If there is a similar tool for IE, I haven’t encountered it, so even if IE is your target browser, use Firefox for development purposes and just be sure to occasionally test in IE for cross-browser issues.

By now I’m assuming you have Firebug installed. You should have a little bug icon in the bottom right of your browser. If you click on it, a panel will expand showing some Firebug options. You want to enable the Console. Script and Net have their uses too, but for today’s lesson, we want the Console. Turn it on for this blog… the page will reload and then you will see four items printed out to the terminal.

The first is a string I sent to the console with the following Javascript code:

console.log('Hello Word');

By calling the log method on the console object I can send pretty much anything I want to the Console you now see below. Turns out you can send nearly anything to the console and Firebug will let you see all sort of internal data. But I’m getting ahead of myself. Before talking about the remaining items in the FireBug Console, I need to talk about some central features of Javascript.

If you were at all like me, you learned about the basic Javascript native types. Chances are that means you learned the following:

var n = 5; // is a Number
var s = 'Hello'; // is a String
var a = new Array('red','blue',green'); // is an Array

You may have even learned a little more advanced stuff, like:

var t = new Time(); // is a Time object
var a['key'] = 'value'; // is an associative array

And, of course, you learned about functions:

function do_stuff( argument ){
  // stuff gets done
}

That was probably good enough to do all sorts of stuff. But if that’s where you stopped you never really learned the fundamental attributes of Javascript that make it possible to do all the cool stuff that ExtJS does (to say nothing of JQuery or Prototype). There are two critical parts of your education that need reenforcement.

Hashes (actually, objects)

Basic computer science teaches us about arrays and hashes, one is ordered data and the other is keyed data. Each have strength and weaknesses. If all you learned was the above, then you probably came to believe — as I did — that Javascript used the Array type for both. Since it was possible to use both integers and strings as Array indexes, it’s not hard to see why.

addresses = new Array();
addresses['alice'] = '123 Fake Street';
addresses['bob'] = '1600 Pennsylvania Ave';

Sure looks like a hash to me. And in a way it is a hash, because it’s keyed data. But in Javascript there is another more powerful way to create a hash. Except, Javascript doesn’t call it a hash, it is called an object. Behold:

addresses = {
  alice: '123 Fake Street',
  bob: '1600 Pennsylvania Ave'
};

Looks like awfully familiar syntax, don’t it? Like, here’s the same object expressed in Ruby:

addresses = {
  :alice => '123 Fake Street',
  :bob => '1600 Pennsylvania Ave'
}

I honestly couldn’t tell you why it’s an object and not a hash, but there it is. The important part is that you can create arbitrarily complex data structures using this syntax in a single assignment. Oh, and for an additional syntactic win, instead of using new Array(), you can just use []. Which means we can do the following:

persona_data = {
  first_name: 'Alice',
  address: {
    street: '123 Fake Street',
    city: 'Springfield',
    zipcode: '12345'
  },
  favorite_colors: ['blue','green']
};

Now that you see how data structures in Javascript can be very sophisticated, let’s see how you can use the Firebug Console to peer inside. Open up the console again and click on the second row that reads Object first_name=Alice address=Object favorite_colors=[2]. In there you will see the different properties of the personal_data object we created above. You can expand the address property to discover it too is an object with its own properties, or expand the favorite_colors property to inspect an array.

Functions as Properties

It turns out that objects, like the ones above, can hold any type of Javascript native type in one of its properties. Arrays, strings, numbers, other objects… you’ve seen examples of all of that by now. The final piece of the puzzle then is to see that objects can also store functions. In Javascript, a function is just another piece of data that can be assigned to a variable, like this:

var my_method = function(){
  // do stuff
}

Now I can run around with the my_method variable, assign it to other variables, and even execute it. And here in lies the third and final lesson of the post. Consider an object like the following:

var refrigerator = {
  contents: ['milk','eggs','cheese'],
  grab_item: function(){
    return this.contents.pop();
  }
}

Here we’ve got our refrigerator object, it’s got some stuff in it, and we’ve got a grab_item method that returns the last item off the contents array. To call that method we have to use just the right syntactic sugar, which means putting parentheses at the end. Consider the following two lines of code:

  snack1 = refrigerator.grab_item // wrong, snack1 now equals the function
  snack2 = refrigerator.grab_item() // right, snack2 now equals 'cheese'

See, we have to tell javascript we want to actually execute the function, not just assign the data. Firebug confirms this in lines three and four on the console.

Okay, with the concepts of objects and methods down, and Firebug installed, we are ready to start diving into ExtJS. Next ExtJS post will have actual ExtJS examples, I promise… I think I’ve nearly got all the bugs worked out for demoing live ExtJS code.

probonogeek ExtJS

  1. Animal
    March 2nd, 2009 at 08:11 | #1

    Just a small small point.

    An Array is a specialized object.

    {} is an object. It may have items indexed by strings (But you MAY use integers)

    [] is an Array. It may have items indexed by integers. (But being an OO language it is also an object). You can “poke” named properties into it.

    This is important if you ever use for…in to traverse the properties of an object.

    If you based that object on an Array, you’ll get Array’s methods popping up!

  2. March 2nd, 2009 at 09:07 | #2

    @Animal
    Ah, that’s good to know. I hadn’t really thought of that before, but it makes sense that Array is a kind of object.

    I’ve never really tried to use for…in on an object with methods before, but I suppose you would have to deal with attached methods. Guess that’s yet another reason to have typeof handy.

    Thanks for the comment Animal… you will probably see some of your own suggestions and comments from the forums discussed here in coming posts on ExtJS.

  3. C
    December 14th, 2011 at 12:17 | #3

    Thank you for these introductions, they’re very helpful.

  1. No trackbacks yet.