So if you draw something into the canvas, you don’t get to attach event listeners on the objects you create within the canvas, just on the canvas itself. This means that you have to build your own event system. This isn’t that difficult if you organize your entities you’re drawing and rely on isPointInPath to do the searching for you.

/**
 * Planet.
 *
 * A planet entity to draw on a canvas.
 */
Planet = function(image, opt_x, opt_y) {
  this.image_ = image;
  this.x_ = opt_x || 0;
  this.y_ = opt_y || 0;
};
/**
 * Draw the planet.
 */
Planet.prototype.draw = function(ctx) {
  ctx.drawImage(this.image_, this.x_, this.y_);
};
/**
 * Draw the hit detection path.
 */
Planet.prototype.drawDetectionPath = function(ctx) {
  ctx.beginPath();
  var radius = this.image_.width / 2;
  ctx.arc(this.x_+radius, this.y_+radius, radius, 0, Math.PI*2, true);
  ctx.closePath();
};

/**
 * Entities Manager.
 *
 * Manage a set of entities to draw them to the screen and to
 * detect mouse hits.
 */
EntitiesManager = function(entities, rendererCtx, detectionCtx) {
  this.entities_ = entities;
  this.rendererCtx_ = rendererCtx;
  this.detectionCtx_ = detectionCtx;
};
EntitiesManager.prototype.draw = function() {
  this.rendererCtx_.clearRect(0, 0, this.rendererCtx_.canvas.width,
                              this.rendererCtx_.canvas.height);
  for (var i = 0; i < this.entities_.length; i++) {
    this.entities_[i].draw(this.rendererCtx_);
  }
};
EntitiesManager.prototype.findEntity = function(x, y) {
  // Clear out the detection canvas.
  this.detectionCtx_.clearRect(0, 0, this.detectionCtx_.canvas.width,
                               this.detectionCtx_.canvas.height);
  // Loop backwards though each entity. After drawing it onto
  // the detection canvas, see if X,Y coordinates from the mouse are
  // within the path drawn onto the canvas.
  for (var i = this.entities_.length-1; i >= 0; i--) {
    var entity = this.entities_[i];
    entity.drawDetectionPath(this.detectionCtx_);
    if (this.detectionCtx_.isPointInPath(x, y)) {
      return entity;
    }
  }
  return null;
};

canvasElement.addEventListener('click', function(evt) {
  var rect = renderer.getBoundingClientRect();
  var x = evt.clientX - rect.left;
  var y = evt.clientY - rect.top;

  var entity = entitiesManager.findEntity(x, y);
  // ...
});

In order for variable renaming to work, you have to behave by closure’s rules. One rule closure has is: Let me do the optimization. One of the main reasons for this is that some shortcuts can make it hard to determine your intent.

One shortcut I like to use is to create alias to JavaScript objects that have long names or long namespaces.

(function() {
  var alias = a.very.long.namespace;
  /** @constructor */
  alias.NewClass = function() {};
})();

Now, to you are I, we can easily tell that I intend to use this self-calling anonymous function as a closure to store my alias; however, how can a compiler know that this was my intent.

Intent is a key concept when you work with the advanced compilation. In the above example, Closure knows that a.very.long.namespace.NewClass is even a class because of the constructor annotation. The way to tell Closure that you intend to make aliases is by using the goog.scope function¹.

goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');

goog.scope(function() {
  var dom = goog.dom;
  var events = goog.events;
  var EventType = goog.events.EventType;

  var elem = dom.getElement('myElement');
  events.addEventListener(elem, EventType.CLICK, function() {
    alert('I was clicked');
  });
});

So what are these array-like objects that I speak of? Well there are a few of them, one of which is arguments. arguments is a special variable that is available inside the body of every function. It is in fact, the list of arguments that were passed in.

arguments

If you inspect the arguments variable in a tool such as Firebug you will notice that it prints out like an array. It has elements in sequential order and it even has a length property.

var testFunction = function() {
  console.log(arguments);
  console.log(arguments.length);
};

So what am I griping about? Try doing arguments.shift(). Uh-oh, looks like arguments.shift isn’t a function; but that’s a function of an Array. Another bit of fun you can do is console.log(arguments.constructor). That will print to your console “Object()” while if you did [].constructor, that will print “Array()”. Having fun yet?

This also isn’t just limited to arguments. It seems that a lot of the DOM(document object model) collections are returned as these objects rather than arrays: document.getElementsByTagName(), document.images, document.childNodes. In some cases, these array-not-arrays would be better suited to become arrays.

Making the Array-like Objects become Arrays

Well, that heading is a misnomer. If we want those array-like objects to behave like arrays, we are going to need a new array.

var testFunction = function() {
  // Create a new array from the contents of arguments
  var args = Array.prototype.slice.call(arguments);

  var a = args.shift();
  console.log("The first argument is: %s", a);

  // send the remaining arguments to some other function
  someOtherFunction(args);
};

Clearly, the magic is all in Array.prototype.slice.call(arguments). So let me break it down per piece.

Array

this is the name of the base object that we want

prototype

this can be thought of as the namespace for the instance methods of an array

slice

this extracts a section of an array and returns a new array, and without a beginning and ending index, it simply returns a copy of the array

call

this is a very useful function, it allows you to call a function from one object and use it in the context of another

Tada! As a side note, if you are used to using the prototype framework then you can convert these array-like objects to arrays using $A(), even though Prototype does it’s array conversion differently.

Speaking of $A. Let’s say you don’t like typing that long string code above and *you’re not using Prototype*. Then you can create a shortcut just like the Prototype folks:

var $A = function(obj) {
  return Array.prototype.slice.call(obj);
};

// Example usage:
$A(document.getElementsByTagName("li"));

Creating an empty class

In keeping with the cat theme of Javascript Kata, I will create my own Cat class. This is very easy to do; you simply create a new class and assign it to a variable.

  var Cat = Class.create();

Creating the constructor

Unlike the Javascript Kata example, the constructor is not set inside of the function which created the class. Instead it is put into the prototype attribute of the class, under the special method name initialize.

  var Cat = Class.create();
  Cat.prototype = {
    initialize: function(name) {
      this.name = name;
    }
  };

Adding a instance method

To add an instance method to our Cat class, all one has to do is add another property to the prototype definition.

  var Cat = Class.create();
  Cat.prototype = {
    initialize: function(name) {
      this.name = name;
    },
    meow: function() {
      alert(this.name + " : meow!");
    }
  };

What I like about this is it keeps all references to this in one spot.

Making the cat meow

The way that the code is constructed is different; however, the way to instantiate our Cat class is exactly the same as it would be if you didn’t use prototype.

  var mistigri = new Cat('Mistigri');
  mistigri.meow();

Console API

alert('performing mouseover') or alert(myvalue) is the first approach I took in order to get input on what was going on in the midst of my code. Then I wised up a little and made an debugging area in the HTML(hypertext markup language) where I would send those messages . Well Firebug kicks that up a notch with the console object. You can call one of several types of messages to write messages to the Firebug console: log(), info(), debug(), warn(), and error().

function dummyFunction(number) {
  if((number % 2) == 0)
    console.debug('even');
  else
    console.debug('odd');

  try {
    var t = 1 / number;
  catch(e) {
    console.error(e.toString());
  }
}

Now you have a way of getting feedback about what you are doing without resorting to the dreaded alert() statement. The power doesn’t stop here. console. dir(myObj) will print out a metric-pony load’s worth of information about an object in your console for you. If the object has an attribute, this will let you see what it is, and what values are stored in that attribute. Absolutely fabulous when you’re not sure exactly what an object is, or what it does.

Units Tests NOT Be Damned

Along with writing messages to the Firebug console, you can also write tests. By using console.assert(), and a slew of other firebug assertions, you can start gaining a level of confidence in the code you write.

I just noticed the assertions today, so I haven’t used any of this just yet. I imaging that one would create an HTML file, separate from all other pages on the site, and create the tests in there. If someone has done any assertion files, I would love to know your approach and any tips you may have.

The Best Thing of All

What could make this even better than it is right now? Well, the answer is Firebug lite Without it, the downside to using Firebug is that other browsers, like Safari, Opera, and Internet Explorer, won’t know what do to with those commands and will just blow up in your face. Firebug lite adds that Console API functionality to the other browsers. By default, the Firebug lite console window stays hidden until you activate it. Once activated, all of you messages will be available to you. All the more reason to write assertions, since you can now check your code quickly against all of your browsers.

If you don’t have this extension and you do JavasSript programming, or any other HTML coding really, then you need to get it right away and discover the all the other awesome aspects of Firebug.

One of these tricks is to make IE pretend like it knows how to use the :hover pseudo-class on all tags.

If you have ever tried to do a suckerfish dropdown then you have gone through the same thing: excitement as you have learned how to use structural markup to create a dropdown and then frustration as your work has been nullified by IE. The fix involves creating duplicate selectors of those using :hover, but instead of using :hover, replace it with a class name .hover. Making what are essentially duplicates and managing more content doesn’t sit well with me. The other trick to getting suckerfish to work in IE is to use JavaScript. The script will add a class definition to the tag when a user’s mouse if over the element and then removes the class when the users mouse is no longer over it. Since this method uses JavaScript to solve one problem, why not make it solve both?

The Code

There is a requirement to using this code and that is you will need prototype 1.5

var HoverBehavior = Class.create();
HoverBehavior.prototype = {
  initialize: function() {
    $A(document.styleSheets).each( function(stylesheet) {
      $A(stylesheet.rules).each( function(rule) {
        if( rule.selectorText.match(/:hover/i) ) {
          stylesheet.addRule( rule.selectorText.replace(/:hover/ig, '.hover'), rule.style.cssText );
        }
      });
    });

    $A(arguments).each( function(arg) {
      $$(arg).each( function(tag) {
        Event.observe(tag, 'mouseover', function() { Element.addClassName(tag, 'hover'); });
        Event.observe(tag, 'mouseout', function() { Element.removeClassName(tag, 'hover'); });
      });
    });
  }
};

In summary, it loops through all of the stylesheets and for each stylesheet, it loops through all of the rules. The first part of the initialization will only work in IE. When looping through the rules, IE uses the rules attribute while others use cssRules. Since this is only meant for IE, I am not going to bother making it cross-browser.

While looping through all of the rules, it is checking the selector text to see if :hover is in that text. If so it will append a new CSS rule to the stylesheet. The selector text for that rule is just like text of the matched selector; however, all instances of :hover have been replaced with .hover. The new rule’s style is simply a copy of the matched selector.

That covers part 1 of the suckerfish fix, part 2 is to add the mouseover, mouseout states to the tags using :hover.

Usage

After the page has been loaded, then it is time to create a new instance of the HoverBehavior class. Since this is only for IE, it would be wise to use IE conditionals as that your other users, who are using complaint browsers, shouldn’t have to process any unnecessary code.

<!--[if lt IE 7]>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
  new HoverBehavior('li');
//]]>
</script>
<![endif]-->

The constructor can take any number of arguments that you would give to prototype’s $$ function, which are like CSS selectors themselves. I could have also done something like:

• new HoverBehavior('#nav li', '#footer li');
• new HoverBehavior('li', 'p', 'span');
• new HoverBehavior('*');

The reason I don’t assume the last one in that list is because I don’t want to kill the user’s browser. Instead of being lazy and choosing all of the elements, I only want to put the mouseover, mouseout functionality on the elements that need it.

function engrish(n) {
	if(n.nodeType == document.TEXT_NODE) {
		n.nodeValue = n.nodeValue.replace(/l/g, 'r').replace(/L/g, 'R');
	} else if(n.hasChildNodes()) {
		for(var i=0; i<n.childNodes.length; i++) {
			engrish(n.childNodes[i]);
		}
	}
}

To execute this code, simply call engrish(document.documentElement);. Using recursion this function goes through the DOM, finds text nodes and replaces the characters.

This is fine an dandy if you put this on your site so you can quickly convert your copy to engrish however there is something that you can do to turn any page into it’s engrish form. You can save this code as a bookmark

If you would like an example of what the bookmark URL would be, just engrish-ify this page and save the link as a bookmark (you can drag that link into your bookmark toolbar in Firefox