JavaScript: Using Event Listeners, attaching handlers on page load, and DOMContentLoaded

For anybody who has ever coded any JavaScript at all, they are no doubt familiar with events such as “onclick”, “onmouseover”, “onmousemove”, and more. In old HTML web pages, it was very common to add these attributes to <a> tags to achieve some special effects.

Later on, browsers begin to support these attributes even in other tags like <div>, and pretty much anything else.

However, as web standards develop over the years and people’s coding practices for the web begin to standardize, it is generally considered bad practice to use them. There are many reasons for this, among others:

1. You cannot attach more than 1 action this way. If you want to do a lot of things in one event, you will need to put a lot of code either in this attribute, or in the function being called from this attribute; and these may very well be unrelated actions. This makes your code less organized and harder to develop.
2. No good separation of presentation (HTML) from functionality (JavaScript). Everything is mixed together. This makes collaboration development efforts difficult; and makes the code hard for you to manage even if you were the sole developer.

Fortunately, we have an alternative solution. They are Event Listeners.

Continue reading JavaScript: Using Event Listeners, attaching handlers on page load, and DOMContentLoaded…

Save in del.icio.us StumbleUpon this

JavaScript: jslint, data types, “null” and “undefined”

Straight to the point: If you want to get one thing out of this article, get this:

In JavaScript, “null” is not the same as “undefined”.

This was what costed me some debug time recently when working with JavaScript at my job.  I will talk about how I came across this issue, because there are various valuable aspects of this story that could be worth reading for those of you frontend developers.

Actually, scratch that, if you don’t know about jslint, do read the following section too. It is useful, and you won’t regret it.

Continue reading JavaScript: jslint, data types, “null” and “undefined”…

Save in del.icio.us StumbleUpon this