Welcome to another article on Building Better Web Pages. This article series comprehensively covers building an HTML document: easily learned, but rarely perfected.

Today’s article covers Unobtrusive JavaScript . While we await the day that content is properly separated from presentation and behavior, we will still no doubt come across many remnants of the old way of working with markup. One of these remnants is JavaScript events inline with HTML markup. This includes onsubmit, onclick, onmouseover, etc. The purpose of this article is to show you that, while technically allowed by the current HTML spec, inline JavaScript is a bad idea.

Solid Statement: Do not include JavaScript events inside your HTML tags. Put all scripting inside a separate file where it can easily be maintained or exchanged.

What is Unobtrusive JavaScript?

While not an official term, Unobtrusive JavaScript’s de facto principles are to separate your HTML from your JavaScript behavior and to provide users with progressive enhancement. The latter mean providing the basic form of a page (plain HTML) and then enhancing it via external files. Older methods relied on “graceful degradation” in case the user agent (browser) didn’t support all the script features. Progressive enhancement is better because it doesn’t attempt to use enhancements that would fail. Separating the content and behavior is the most important part of the concept. Now we’ll explain why.

Why is it Important?

The future of the web is modular. Proper web development will mean accessibility, ease of maintenance, and scalability. These practices are hindered by mixing different components together. This was not a problem in the old days, when a web page was shown on a computer monitor and nowhere else. Today, a website must accommodate hand-held devices like the iPad, all sorts of mobile phones/devices, and video game consoles. Every medium has its own requirements and capabilities. If you have JavaScript directly coded into some HTML markup, you have created a dependency between a certain JavaScript behavior and the content itself. If either the behavior or the content is changed (as much of the web does now, on a regular basis), you have a problem.

Modularity Problems

Consider the following simple example of an onclick event, improperly handled. After clicking the button, a JavaScript function from a separate file is called.

JAVASCRIPTview code
<input type="text" name="somename" onclick="dosomething();" />

Say I copy the HTML content from this page and want to display it elsewhere, such as a social network. You paste in your code and are all excited to have your visitors see it appear in a widget on your network. However, as soon as a visitor comes along and clicks that input, whatever was supposed to happen doesn’t, a JavaScript error occurs because dosomething() is undefined, and JavaScript might no longer work at all on that page. The average user won’t even know what happened and they surely won’t be enjoying that content you were so excited about.

Maintenance Problems

Consider the previous code example. This time, however, we will be passing the input element in the form of some variable “x.”

JAVASCRIPTview code
<input type="text" name="somename" onclick="dosomething(x);" />

We like using our function, so it appears numerous times across numerous files. This presents a huge maintenance problem. One day we need to make some changes to the method and now require a different variable or use a new function name. The only way to handle the situation now is to search through all the files and make changes in every one.

Solution

The proper way to handle either problem above is to simply use JavaScript unobtrusively by ONLY including it in a separate file. Does this mean more work for you? Not particularly. In the above example, it would mean a lot less work. Additionally, with today’s available JavaScript frameworks, it is easy to set up these events. Not only that, but you can also organize all your events next to each other in the JS file instead of having them dispersed throughout the HTML.

Solid Reading

For building better web pages, any of the following books are a great! “Web Design For Dummies” introduces pretty much every aspect of design, including planning and research. If you are interested more in the concepts and ideas of proper markup, go with “HTML and CSS Web Standards Solutions”. Finally, for a more conversational tone, “Designing with Web Standards” is reading geared toward the practical application, rather than the concepts themselves.