Tag Archives: event driven

Event driven programming with jQuery – (part 4). Simple event driven app.

javascript, micro tutorial, , , ,

The sample app

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.

Event driven programming with jQuery – (part 3). What is a module?

javascript, micro tutorial, , ,

What is a module in one web page is may be not the correct question. Everything depends on how you understand the module. Let’s assume there is a tab panel on the page. This can be implemented simply by one UL and one DIV. In a sample app just clicking on a LI the the DIV content changes with appropriate content. Such tab panels can be seen almost on every site. See the homepage of Yahoo!. There are at least two tab panels, and to be exact every simple menu is like that, right? You click on an item and something on the page changes.

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. Continue reading Event driven programming with jQuery – (part 3). What is a module? →

Event driven programming with jQuery – (part 2). Events in jQuery.

javascript, micro tutorial, , ,

Well the “native” events in JavaScript are ‘onlick’, ‘onmouseover’, etc. I’m pretty sure that the term ‘native’ is not quite descriptive. OK. However even this can be called event driven programming.

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.

Event driven programming with jQuery – (part 1). What is event driven?

javascript, micro tutorial, , ,

What is event driven?

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. Continue reading Event driven programming with jQuery – (part 1). What is event driven? →