Category Archives: JavaScript

Mouse Clicks for HTML5 Cavas Entities via Paths

2 Replies

The canvas element in HTML5 is exciting because it really opens the doors to games, drawing, and animation. This is especially exciting as browsers hardware accelerate canvas and improve its performance. What isn’t so exciting though is that you do have to do a lot more for yourself.

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.

Overview

When you use path methods, like arc, bezierCurveTo, or lineTo, the 2D context keeps track of things really nicely for you. After you add your path, you can ask the context whether or not a point is within the area of said path via the isPointInPath method.

The way to find the object is to render each entity in reverse order, draw the path, and then check to see isPointInPath. The reason to go in reverse order is because the most visible, unobstructed object is at the last index in the rendering order.

Paths are great because they are fast, but they are pretty plain. What you if you want to draw images? Well there’s no rule that you can only use one canvas. This means that you can use one canvas to draw your main stage with images, and then use the light-weight paths to draw the hit detection area.

The demo will draw the earth and the moon and will print a the name of the selected planet.

Continue reading →

Aliases with Google Closure

2 Replies

I’m starting to use the closure library and all of it. The closure compiler is nice because it can compress your JS code down, a LOT. In order to get the biggest bang for your buck. you want to use the advanced optimization settings. It can eliminate unused code, inline functions, and rename variables.

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 function1.

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');
  });
});

Continue reading →

Array-like Objects in JavaScript

12 Replies

It may look like an Array, hell, it even has a length attribute; however, it may not actually be an Array. JavaScript is sometimes a quirky language to say the least and the notion of what is an Array is no exception.

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.

Continue reading →

Firebug and the Console API

3 Replies

Among the many Firefox extensions out there, there exists Firebug and it is good. It is truly an amazing piece of software. There is a CSS(cascading style sheets) viewer, so that when you inspect an element in the DOM(document object model), you can view all of the CSS attributes that apply to that element. Not only does it show you the applicable CSS rules, it breaks it down to the styles being used and to the styles which have been overwritten. Very nice. There are many other things it does, but one feature in particular that I don’t think I would want to live witout is the console API(application programming interface).

Continue reading →

Mimicking the :hover Pseudo-class in IE

16 Replies

Internet Explorer frustrates the living hell out of me. Event though IE 7 is finally out, it doesn’t mean that IE 6 can be ignored. I really look forward to the day when my CSS(cascading style sheet) files aren’t full of unnecessary classes and hacks because the major browser vendors got it right and because everyone has casted away the garbage. Until then, I am still in search of tricks to simplifying my life.

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?

Continue reading →

Engrish Javascript

3 Replies

In what I can think of as the most important JavaScript that I have ever written, I have made something which will parse the DOM(Document Object Model) and replace all of the ‘l’s with ‘r’s. This idea came about after watching Team America: World Police about 1,000 times and after Kim Jong Il gave his apology for doing some nuke testing. Back to the script:

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.

Continue reading →