1. Tech

Your suggestion is on its way!

An email with a link to:


was emailed to:

Thanks for sharing About.com with others!

Unobtrusive JavaScript

Part 1 : Introduction

Join the Discussion

Questions? Comments?

More of this Feature

DOM Access Move From Body

The ideal way of attaching your JavaScript to your web page is to just have one or more script tags in the head of the page that references the JavaScript which is completely separate from the HTML. There is no need for any script tags within the body of the page or any event handlers attached inside of any HTML tags. The entire JavaScript for the web page can be worked from these external files and the only code needed within the HTML itself will be the id and class attributes that are needed to identify the HTML tags that the JavaScript needs to interact with.

By coding your JavaScript this way you make it easier to make your page more accessible to people with javaScript disabled since commenting out the script tag(s) gives you the exact equivalent of what they will see. It also makes your page more search engine friendly because the content of your page is not diluted by the JavaScript code. A third advantage is that it makes adding and removing scripts to multiple pages of your site easier since you have only one line of code needed in each HTML file to link in as much JavaScript as you want on that page.

Of course many of the scripts that you have already obtained or written for your site have not been created to work in an unobtrusive ffashion and so we will need to work our way through the steps that you need to follow in converting a JavaScript that uses code in the body of the web page and within the HTML tags so as to be able to move that code into the external JavaScript file attached to the head of your page.

The very first thing you need to do to start extracting the JavaScript from a web page in order to make it less obtrusive is to identify all of the javaScript that is actually contained within the web page. The easiest way to start is to print out a copy of the HTML of your page and use a highlighting marker to mark all of the JavaScript code within the body of the page that we want to get rid of. There are two types of code we will want to move.

  • any script tags and the content within them
  • any JavaScript event handlers within HTML tags

The JavaScript event handlers can be easily recognised since they are the only attributes that appear within the HTML where the attribute names start with on.

In each of these cases we will next want to remove the JavaScript code from out HTML. You may want to take a copy of the web page to work on first so that we can grab the required JavaScript out of the copy when we are adding the necessary replacement code into the head script attached to the new copy of our page.

We will need to be able to reference each of the spots that we are removing the JavaScript from in order to reattach it from the external script so for those tags that we are removing event handlers from we will need to consider if there is an easy way to reference those tags from JavaScript. If the code that you are removing was on the body tag or a tag that already has an id attribute then there is an easy way to access the tag already. If not then you may want to give the tag a unique id so that we will be able to reference it from the JavaScript so as to reattach the removed code.

In the case of complete scripts being removed from the body of the page the simplest replacement is to insert an empty div tag with an id.

Having removed all of the JavaScript from the HTML the next step is to test that your web page still works without it. Remember that there will always be a small but significant percentage of your visitors who for one reason or another do not have JavaScript enabled and these visitors will need your page to work without the JavaScript. Of course it may not work as well without the JavaScript as it will with, but as long as it is still accessible to those visitors they will not complain and the page will work better for most of your visitors once we add the JavaScript back to the page.

Introduction | DOM Access | Move From Body

©2016 About.com. All rights reserved.