thoughtsatsix.com

I found something interesting with the NaN property in javascript. The NaN property in javascript indicates that a value is "Not a Number". Take a look at the example below:

var value = Number('one');
>>> NaN

isNaN(value);
>>> true

typeof value == 'number'
>>> true

// prototype's isNumber function
Object.isNumber(value)
>>> true

// yui's isNumber function
YAHOO.lang.isNumber(value)
>>> false

So is the 'value' variable a number or not a number?

This is probably a known fact to most people, but I decided to blog about it for those who aren't aware. Two new comparison operators have been introduced since JavaScript 1.3, strict equal (===) and strict not equal (!==). Strict equal (===) returns true if the operands are equal and of the same type. Sounds pretty straightforward, then what's the difference between (==) and (===) ?. Well, when you use the normal equality (==), JavaScript tries to convert both operands to be of the same type, before doing the comparison.

Let's look at some examples:

var one = 1;
one == '1';
>>> true
one === '1';
>>> false

var two;
two === undefined;
>>> true
two == undefined;
>>> true
two === null;
>>> false
two == null;
>>> true

 

I developed a simple Adobe AIR app that allows you to generate customized versions of Blueprint's grid.css. This app is just a desktop version of the online tool: Blueprint Grid CSS Generator.

One of the nice things about javascript is that there are now so many libraries that make our lives easier. I've especially come to love some of the rubyesque string, enumerable helpers that prototype.js has to offer for javascript.
When recently started to program in ActionScript 3, it brought me back to the pre-prototype, pre-jquery, pre-dojo, etc, days of javascript. So, at least for my benefit I started to port many of the prototype.js string/enumerable functions for actionscript 3. The result can be found here.

Array helpers:

import com.as3extensions.helpers.EnumerableHelper;

var array:Array = ['foo', 'bar'];

// Calls the method 'toUpperCase()' on each element 
// of the array
EnumerableHelper.invoke(array, 'toUpperCase');
>>> ['FOO', 'BAR']

String helpers:

import com.as3extensions.helpers.StringHelper;

StringHelper.interpolate('My name is #{firstname} #{lastname}', 
                         {firstname: 'Foo', lastname: 'Bar'})
>>> My name is Foo Bar

Let's say you have a list of elements, and you want to apply some javascript behaviors to each element.

<ul id="parent">
  <li class="child-1">One</li>
  <li class="child-2">Two</li>
  <li class="child-3">Three</li>
</ul>

One way of doing this is to use prototype's built-in DOM selector to retrieve the list of elements and apply the appropriate function to each element.

var children = $('parent').getElementsBySelector('li');

  children.invoke('observe', 'click', function(e){
 e.observe('click', function(event) { alert(e.innerHTML); }
});

This is ok if you have one, two or maybe three elements in the list, but what if there are 20, or even 200 elements. And better yet, what if the list was dynamic. You would have to constantly add an observer for new elements, and cleanup observers for deleted elements.

A better approach is to add a single behavior to the parent. By observing the parent, you're able to capture events triggered by all of it's children as well. Then we can add conditional logic to apply a function to only the child elements we care about.

$('parent').observe('click', function(event) {
  var e = Event.element(event);
  if(e.tagName != 'LI') return;
  alert(e.innerHTML);
});

We can also call differentiate function calls based on the child.

$('parent').observe('click', function(event) {
  var e = Event.element(event);
  if(e.tagName != 'LI') return;

  switch(e.className) {
    case 'child-1':
      alert("it's a boy!");
      break;
    case 'child-2':
      alert("it's a girl!");
      break;
    case 'child-3'
      alert("this one's a mistake!");
      break;
   }
});