Common Beginner Mistakes

There are a few mistakes that just about every JavaScript beginner makes in the way they try to write their JavaScript. Of course that they make these particular mistakes isn't entirely their fault as many of those teaching JavaScript make the bigger mistake of teaching the use of outdated code.

The statement that almost all beginners use and which should in fact almost never appear in JavaScript at all is document.write(). This statement was an essential part of how early JavaScript that was to run in Netscape 2 and 3 and Internet Explorer 3 interacted with the web page. The introduction of Netscape 4 and Internet Explorer 4 provided better (although proprietary) ways of interacting with the page and all browsers since Internet Explorer 5 have supplied a vast range of standard commands for interacting with web pages that are far more flexible than document.write. The only times where it is now appropriate to use document.write involve JavaScript that is not attached to a web page in situations that a JavaScript beginner probably doesn't even realise that JavaScript can be used.

The alternative that the beginners ought to be using in place of document.write is innerHTML. While this started as a proprietary command in Internet Explorer all the other browsers now support it as well effectively making it a standard even before it was added to the standards. This command is far more flexible in how it can be used than document.write and while there are a few situations where it can't be used, by the time that the beginner needs to worry about those situations they should have learnt at least some of the Document Object Model commands that are even more flexible.

The second mistake that JavaScript beginners make is to use the modal dialogs alert() confirm() and prompt() that have been built into JavaScript from the start. As with document.write, these commands were an essential part of being able to interact with Netscape 2 and 3 and Internet Explorer 3. One of the ways in which innerHTML is more flexible than document.write is that it allows you to use a regular HTML form in your web page as a superior replacement for almost all of the situations where it used to be necessary to use the modal dialogs.

The one situation where the modal dialogs can still be useful is as a quick way of debugging minor problems in a script (where using the full debugger built into most browsers would be overkill). Simply sticking one or more alerts into the script either to display values that allow you to trace the path followed through the script or to display the values held in specific variables at specific points in the script is just about the only place where the modal dialogs now serve any useful purpose. In recognition that these have been re-purposed as a debugging tool some browsers now provide an extra option in all the modal dialogs allowing either all future dialogs displayed by the script or the entire JavaScript to be disabled simply by selecting an option displayed in the alert. Even if there weren't better ways to collect information into JavaScript than using the modal dialogs, these extra options mean that they cannot be used in any finished script.

There are only two reasons I can think of as to why beginners are still being taught the above antiquated JavaScript commands. Either the teacher hasn't kept up to date with all the changes that have happened with JavaScript over the past few years and is effectively teaching a history class rather than a programming class or they show those commands are obsolete but have simply not cared enough to update their lesson plans to restructure the way they teach JavaScript to make teaching those outdated commands unnecessary.

The third mistake that JavaScript beginners make is more commonly made by those who try to learn JavaScript by themselves. I don't think anyone teaching JavaScript is teaching people to make this mistake. This particular mistake involves either attaching JavaScript to the web page in an incorrect manner or simply applying unnecessary labels to the code.

There are a number of people who mistakenly attach JavaScript into the href attribute of an <a> tag. To be able to do this at all requires that the content of the href attribute start with javascript: (just as an external link needs to start with http:// ). While JavaScript can be attached to a web page like that the way beginners use it so as to have the script run when someone clicks on the link is not the way such code is supposed to be used. That particular way of attaching JavaScript to a link in the page is intended as a way to provide scripts that can be downloaded and run later usually by attaching the script into the bookmarks menu of the browser. Writing such scripts is not something a beginner ought to be doing and so beginners should never attach JavaScript to a href attribute.

Having learnt that, beginners often move the code out of the href and into an onclick instead. It is easy to tell when they have done this because they make the mistake of keeping the javascript: which now instead of indicating the protocol as it did in the href attribute is now simply an unnecessary label as the onclick is already known to be JavaScript.

Even coding the onclick as if it were an attribute in the HTML is in itself a lesser mistake (one that is understandable for beginners to make) since it is just as easy to specify event handlers within the JavaScript itself rather than attaching them directly into the HTML and keeping all of the JavaScript together makes it far easier to attach the same script to multiple web pages than where parts of the script are jumbled in with the HTML. Even better than using event handlers would be to use the far more flexible event listeners. While event listeners require a bit more code to implement them than event handlers do they are more flexible because you can attach more than one to the same event on the same element without one overwriting the other and you can also detach them again when you no longer need them. For anyone planning to teach a JavaScript course in the future this is definitely something worth considering as at some point event handlers will become as outdated for general use as document.write statements.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate