Is Your JavaScript showing its Age?

Since JavaScript was first created it has undergone a series of changes. In some cases these have simply been a matter of people having discovered a better way to attach the JavaScript in a less obtrusive manner and in other cases the language itself has undergone changes to introduce new commands that provide better ways of doing things.

As a result of these changes I have written four separate series of tutorials for people wanting to learn JavaScript - in 2004, 2006, 2009 and 2011/12. The big change between the 2004 and 2006 versions of the tutorials was that the old Netscape 4 browser had finally died out and as that browser was the last of the browser versions to not properly support the standard JavaScript Object Model just what you could do with JavaScript dramatically changed. Over the following few years it became obvious that JavaScript no longer needed to be embedded into the HTML and that it could be kept completely separate in its own file. It was also discovered that instead of having to include the script at the point in the page where it needed to run or in the head of the page so that the functions would be available when needed that almost all JavaScript could be moved to the bottom of the page where it can almost always run straight away without needing to wait for the rest of the files the page uses to load. Finally in 2011 a new version of JavaScript added a lot of new commands and much simpler ways of performing quite complex processing.

Each of the tutorial series that I wrote starts with a series of basic tutorials that run through the basics of how JavaScript works. Much of this hasn't changed since JavaScript was created as the language still has if statements, loops, functions etc. So each tutorial series has basically the same tutorials in the introductory series with only the content of some of those tutorials having changed.

The original tutorials that I wrote used document.write() for outputting content into the web page. With the early browsers this was the only way that JavaScript could write content into the actual web page. The final code you would be creating in 2004 (and earlier) needed to use that statement and so introducing it in the first tutorial made sense. Other ways to interact with visitors using JavaScript at that time involved modal dialogs such as alert(), confirm() and prompt() and so these were introduced in subsequent tutorials where it made sense to do so. In this series the JavaScript needed to be jumbled with the HTML and scripts inserted at the point where they needed to run.

The death of Netscape 4 made all of these commands obsolete. There were now much better ways to interact with the web page. These better ways were somewhat complex though and so in my second tutorial series I left these until a lot later and used alert() in the introductory tutorial. While this command was obsolete for live web pages, it had been re-purposed for debugging and so was still a reasonable choice for providing a way for beginners to see the result of running code. That the modal dialogs had extra checkboxes added in some browsers asking if you wanted to turn off JavaScript for the page (so as to terminate infinite loops once you had seen enough debugging values to work out the reason) the call would need to be replaced in finished scripts but it served its purpose as a learning tool. In this series I recommended including all the scripts in the head of the page.

Many people found the new document object model to be too difficult and so Internet Explorer introduced innerHTML as a simpler alternative and the other browsers soon copied this making it a defacto standard. My third series of introductory tutorials started off using this new command and made it clear that alert() was only supposed to be used for debugging. In this series. These tutorials also showed all of the scripts being attached at the bottom of the page and an extra tutorial was added to cover the rare case where a script still needs to be in the head.

The most recent series of tutorials hasn't changed greatly from the third version at least so far as the early introductory tutorials are concerned. What has changed here is that I added several extra tutorials covering how to identify your code as running the latest version of JavaScript (where some commands have slightly different meanings and some obsolete commands no longer exist) and how to make your code completely unobtrusive by wrapping it in an anonymous function. The other change is that a number of the tutorials illustrating how to create loops while still demonstrating how those commands worked no longer were demonstrating the best way of performing what the example code needed to achieve. Finding real world examples of where you need to use an actual loop in JavaScript that doesn't involve other more advanced commands is now quite difficult. This latest series was also had the more advanced tutorials significantly expanded to cover many of the new commands introduced into JavaScript and this process is ongoing with yet another new version of JavaScript to be released in 2015 there will be still more tutorials to add and yet more of the introductory ones while still demonstrating how to use the basic commands will no longer be demonstrating the best way to do things. Also all modern browsers now support using console.log() for debugging making the modal dialogs unnecessary even for debugging.

So to return to the question that forms the heading for this article - "is your JavaScript showing its age?".

If your live scripts still include document.write() statements or any of the modal dialog commands then your script is really showing its age. There are far better ways of achieving the same end result with a script that is far less obtrusive and which is therefore far easier to maintain - particularly if you are using the same script on multiple pages. If that's the only type of JavaScript you know how to write then it is time to consider JavaScript as a brand new language that you will find well worth learning.

If your JavaScript includes any code embedded in the HTML itself then your code may not be quite as dated as if you use document.write() but it still makes maintaining your JavaScript a far bigger chore than it needs to be. With all of the JavaScript in a separate file it becomes much easier to apply the same script to multiple pages simply by adding a script tag to each page.

If your JavaScript is not wrapped in anonymous functions then it is not as unobtrusive as it could be. You are still leaving yourself open to clashes between scripts if you add two or more scripts to the same page and they try to use the same variable for different things. Ideally you should not have more than one global variable per library that you are using and no other global variables at all. The script should be as unobtrusive as possible with only those things that absolutely need to be global (such as ids or classes that the script references) presenting the possibility of clashes.

Modern JavaScript also uses the "use strict"; command which enforces the more modern way of writing JavaScript. This means that you can no longer accidentally create global variables by accidentally making a typo in a variable name and also makes sure that your code avoids some of the worst JavaScript commands (those that experience has shown should never have been a part of the language in the first place).

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate