Javascript Event Bubbling with Prototype

Update: After I wrote this post I remembered that change events don't bubble in IE6 for select elements and thus likely don't bubble for check boxes either. After an investigation I found out that no - they don't bubble. So this code won't work correctly for IE 6 which still commands a 20% + share of the market. Please STOP IE6 NOW...and on with the post.

Bubbling is a good thing...and no I'm not talking about the fact that it might help you to locate a turtle. Javascript events bubble from the source element outward. This gives you a couple of important benefits when attaching event handlers to elements:

• reduced resource usage - one global handler instead of a handler on each element
• simpler wiring with dynamic content - instead of adding handlers to new elements inserted into the page, the parent element already has the lone handler

The following example shows some code where a div element with an id of "overlay-entries" contains a number of, well, overlay entries in which each overlay entry has an checkbox element that allows that overlay to be shown or hidden. Instead of wiring up a handler for the "change" event for each checkbox we can merely catch the events as they bubble to the containing div with the id "overlay-entries." With prototype Event objects are normalized to make sure that the .element() method returns the element that the event actually originated on. In my situation it is enough to check that the event fired on a checkbox to allow the corresponding event to fire:

Generating Combinations in Ruby and Javascript

Hey, time to dust off your discrete math text! (The one I used is Discrete Mathematics and Its Applications by Kenneth H. Rosen). The number of combinations of r items that can be selected from n items is given by the formula = n!/r!(n - r)! (note to self, render this with MathML). The following three code blocks show how to return those combinations in Ruby, Javascript, and Javascript with Prototype. Note that these functions yield (in Ruby) or do a callback with (Javascript) each combination. These could easily be modified to return an array of the combinations. After the three code snippets is a live example of the Javascript code. First the Ruby: Now the Javascript: And finally Javascript with Prototype (wow, now like Ruby): Wow, if that doesn't make you want to learn Prototype using Prototype and script.aculo.us: You Never Knew JavaScript Could Do This! then nothing will.

items: choose:

[ combinations ]

Flickr Photo Demo the new Hello World of Web Client Frameworks

Hello World

It looks like the "Flickr Photo Demo" might become the "hello world" of web client frameworks. First the 280 North team released the Cappuccino framework and published their Flickr Photo Demo. Then the broken digits blog released a version written with the help of jQuery.

I've been wanting to improve my Prototype and Scriptaculous skills so I took the broken digits example and replaced the jQuery code with Prototype and Scripty code (yes, I borrowed all heavy lifting on the HTML and CSS work from broken digits). My version can be found here.

If you are interested in learning Prototype and Scripty I strongly recommend the book Prototype and script.aculo.us: You Never Knew JavaScript Could Do This!. It is very well written and will help you understand not only the frameworks but will also give you a deeper understanding of the Javascript language as well.

If you are interested in arguing the future of these frameworks...bah, I'm going to sleep.