$arr = array(1 => 10, 1 => 11);

What happens when the interpreter reaches this line of code? This is not a syntax error and it is completely valid. Very similar, but more interesting case is when we have an array of identical keys, where those identical keys are represented once as an integer and then as a string.

$arr = array(1 => 10, "1" => 11);

Now several questions arise. First of all, how many elements have this array? Two or one. This can be easily verified by checking what count() will return.

echo count($arr);

The correct answer is 1. This simply means, that there’s no difference between string keys and integer keys. What would happen if we had a “normal” array with different keys?

$arr = array(1 => 10, "2" => 11);
echo count($arr);

As expected this returns 2.

Next thing to check is what’s in the array after this initialization line.

$arr = array(1 => 10, "1" => 11);

Is there something in the first element $arr[0], or there’s something in the second element $arr[1]? What is the value of the single value?
As it appears the second element replaces the first one. We’ve seen that the array has only one value, but where’s that value? The only way to check this is to dump both elements:

var_dump($arr);

Here we can see that $arr[1] contains “11” and it is the only value, and $arr[0] is not set.

Do you rely on a previous similar tasks or simply by some intuition? It will be interesting to share your experience.

In my last post from the event driven programming with jQuery series, I simply will post a sample application. In my previous post I showed up the use case for a tab panel, which can be done typically with no custom events, and almost every developer would do it that way, but however just for the purpose of this series I’ll separate the logic into two modules. One for the tabs and one for the content. Thus you can separate the application into two simple apps into two different pages, and they will continue to work correctly.

In fact most of the large JavaScript applications use that technique and I was inspired to write these posts from one talk of Nicholas Zakas, a Yahoo! front end developer, where he uses YUI, of course. But anyway this technique can be done with everyone of the major JS libraries like jQuery.

You can see the demo and the source here.

If there are any questions about it, don’t hesitate to post your questions and I’ll be glad to help.

So a simple tab panel can be a single module and most often it is. But for this example let say the tab panel is composite of two modules. One for the UL > LI tabs and one for the DIV containing the dynamically loaded content.

And now comes the tricky part. What these two modules do, and what they are supposed to do. In one hand the main strategy is to think about them if they must work on a separate pages. If there is one page only with the UL and another with the DIV. They must continue to work correctly.

The one and only task of the UL is to change the style of the selected, currently clicked, LI item and to say to everybody “I was clicked”.

In jQuery the most simple way to say that is by adding some event listeners to the UL > LI part, like so:

$('ul > li').click(function() {
   $(this).addClass('active');
   LoadTheContent()
});

But that’s simply not so event driven for this example. If the DIV is not on the same page this will throw an error. And in a large application this is absolutely possible. There you may have huge modules, each of which make his own things, loads his on data and just sends messages.

So I’m about to change a bit the above code like this:

$('ul > li').click() {
   $(this).addClass('active');
   $(document).trigger('i-was-clicked', [idOfTheLi]);
});

Of course if not everything is clear up to now, don’t worry, this is only pseudo code. In my next post I’ll show the full working sample app with custom event listeners.

For now is OK just to mention that in jQuery there are functions like .bind and .trigger that do the work. The only developer part is to add some code like:

$(document).bind('tab-clicked', callback);
$(document).trigger('tab-clicked');

You can bind and trigger events from whatever DOM element you want, and they act just as if you attach a click or any mouse event.

To clear up things, let’s simulate the click event like so:

in plain jQuery:

$(document).click(callback);

That binds the click event on the document and of course it can be triggered with a simple mouse click, but to finish the example let’s say there’s a function, or AJAX call that after load triggers this callback:

$.ajax({
   success : function() {
       // on success simulate the document click
       $(document).trigger('click');
   }
});

That was all pseudo code and the real working example will be in my next post.

The jQuery as usual simplifies the usage of this events and their handling. If you’ve some DOM with id ‘a’, i.e.:

document.getElementById('a').onclick = func();

In jQuery this comes with no browser dependencies, like:

$('#a').click(func);

That normally means that on click of that element, with id ‘a’, calls the func() method.

The need of event driven programming with JavaScript and jQuery is because in large scale applications you don’t need only click events. You’d like to call some method to be called on array change, or on style change or whatever! Than you can start using custom events, where jQuery again helps you a lot.

I’ll demonstrate in my next post how this can be implemented in a short example application.

Actually the real power of JavaScript libraries and in particular in jQuery is the usage of custom events. There you have the full power to implement what is called event driven programming. This of course is not a must. You can simply make a small js application with no usage of custom events at all. The problem is that in large scale js applications the development becomes really hard and difficult to maintain.

In fact all the major JavaScript libraries come with built in mechanisms to develop apps with custom events. And if you plan to make very large website, i.e. entirely on AJAX, whatever js library you use, you better start with making your app event driven.

That in very breve means that the different modules of the page must interact between themselves only by firing and listening for events. So you can fully change your page layout with no need to rewrite the code again and again.

What is a module?

Well this is kind of difficult to decide. But however you must do this segmentation in the beginning of the project, and I’ll cover it later in this series.

“Native” events in JavaScript / jQuery

Just to start from somewhere, let’s say that almost every JS programmer is a bit familiar with event driven programming, because of the native events, such as “onclick”, “onmouseover” etc. However this is not enough in a large scale app and I’ll demonstrate within a simple app how to implement the basics of the event driven model.