Unobtrusive JavaScript – Moving JavaScript From the Body to the Head


Unobtrusive JavaScript – Moving JavaScript From the Body to the Head

The final and most complex part of converting a web page to separate the HTML and the JavaScript into separate files is that of moving any actual scripts called from within the body of the page and attaching them to the head of the page instead so as to have no JavaScript whatever in the body of the web page. In place of the JavaScript in the body we have an empty div tag with an id that we can use to add in the content that we want to display there.

The main part of the code that will cause you a problem in moving it from the body to the head of the page are any document.write() statements that are either contained within that JavaScript or which are within functions called from that JavaScript.

The simplest way of replacing those statements is to use the innerHTML property that most browsers now support. (You could use the proper DOM commands to do it but that will involve a lot more work which could be done as a further change to your code at a later time). Using innertHTML is the easiest way of directly implementing the changes needed to move the code out of the body of the page. The way to carry out this conversion is to first create a variable to hold the content that was being written using document.write which we now intend to add using innerHTML. We then replace all of the document.write statements with assignment statements that concatenate what was being written onto the end of the variable. Finally once all of the content has been added to the variable we than add it to the web page by using the innerHTML property.

For this to work the tag with the id that we are going to add our content to must already exist in the HTML and so we need to use one of the same two methods of ensuring that our code doesn’t get run before the browser loads the tag as we discussed for adding event handlers.

Let’s look at an example to see more clearly how these changes work. Let’s say that we have the following in our original HTML page.

<script type=”text/javascript”>
var today = new Date();
document.write(‘Today is ‘+today.getDate()+’/’+today.getMonth());
document.write(‘/’+today.getFullYear());
</script>

We replace that in the HTML with:

<div id=”tday”></div>

In our JavaScript in the head of our page we create a new function that will be called once we know that the div tag with id=”tday” has loaded into the page.

function loadDate()
{
var today = new Date();
var t = ‘Today is ‘+today.getDate()+’/’+today.getMonth();
t += ‘/’+today.getFullYear();
document.getElementById(‘tday’).innerHTML = t;

}

With our faster DOM load code in place we would just need to call loaded(‘tday’,loadDate); in order to have the unobtrusive version of this code add the content into the body of our web page.

With all of these changes in place our web page now functions exactly the same way that it did before with the only difference being that the JavaScript that used to be embedded in the HTML is now limited to just one or two script tags in the head of the page. If you are using the exact same scripts in multiple pages you now have all of the code that those scripts need (apart from a few id attributes in the HTML) completely separated out of the page making it much easier to apply any changes to the script to all of the pages that use it instead of having to change each page separately. Your HTML file will also be smaller with thhe actual page content making up a much larger percentage of the file content with the resultant improvement in your search engine rankings that the more relevant content will give.

There are of course most likely to be a lot of further improvements that could be made to the way that your JavaScript is coded. These will be much easier to apply should you decide to do so now that you have completely separated the JavaScript out from the HTML.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s