Introduction to JavaScript: How to be a Good Scripter

Introduction to JavaScript: How to Learn JavaScript

The absolute single most important skill you can have as a Web Developer is trouble-shooting. This is especially true with JavaScript as it can be unbelievably unforgiving. JavaScript demands that syntax be absolutely perfect. If it isn't, you'll get some very odd results, if not crash your browser.

While we can talk about and study syntax until we are blue in the face, you won't be able to execute a script if you don't have good trouble-shooting skills. Why? Because we are human. We make mistakes. Period. Very minor mistakes such as forgetting a period, using a double quote instead of a single quote or misspelling words are all examples of mistakes that will cost you a properly executing script. Since JavaScript is case sensitive, the chance of making a mistake even with a simple statement is quite good. Get used to it, you will make these mistakes.

So what are we to do then? Forget about scripting altogether? I've known many who've thrown in the towel because they were convinced that JavaScript is just too hard when in reality, they simply lacked basic trouble-shooting skills required to use JavaScript. However, since you will most certainly be expected to at least use JavaScript, if not produce your own scripts, ignoring JavaScript is not an option in today's competitive job market.

Instead, the key is being able to find your mistakes, otherwise known as trouble-shooting your scripts. My goal is to not only teach you syntax and concepts, but to teach you how to find your mistakes. Here a few trouble-shooting techniques, tools and tips.

Trouble Shooting Tips:

Netscape's JavaScript Console (type "javascript:" into the location field of a Netscape Browser)
Using the alert() method
Using the typeof operator
Syntax checking
Take A Break
Look at similar scripts
2nd set of eyes

If you do not have a Netscape Browser installed, I suggest you download and install a version, probably two. For trouble shooting purposes, I suggest you download version 4.78 for two reasons: the JavaScript console that comes with the browser is by far the best debugger I have ever used. Whenever you are executing a script and happen to notice, "javascript error" in the status bar, or realize your script is not executing properly, just type "javascript:" into the location field to launch the console and view the error message. Many syntax errors are pointed to blatantly, which is very helpful whether you're a beginner or expert. Some of the messages will by cryptic to you at first, but you will get better and better at understanding what they mean as time goes on.

I suggest you place a console bookmark on the personal toolbar of the browser since you should be using it often. To do this, click on "bookmarks", then "edit bookmarks". Find "Personal Toolbar Folder" and right click it to add a new bookmark. In the location field of the bookmark properties dialog, enter, "javascript:" (the word javascript followed by a colon). Name it whatever you want, and wa-la the console is available with only a click.

Another very handy behavior of version 4 Netscape browsers is how they display the source of a page. NN 4.x browsers display page source as rendered code rather than raw code. This is such a handy tool for trouble shooting when writing both advanced and simple scripts that generate HTML. The browser will display the output of the HTML generated by your JavaScript. Internet Explorer browsers on the other hand, display the raw, un-rendered code. For a good example of this, view the source of this page in a NN4.x browser, then an MSIE browser. In NN4.x, you will see the HTML links for the navigation at the top of the page. In MSIE, you will see only a call to a JavaScript function called, "Solo()" which is used to generate those links.

To be sure you are viewing the latest version of your code rather than a cached version, highlight the URL in the location field and click enter/return.

The alert method is used throughout these tutorials so you will see by example how to use it in trouble shooting. The typeof operator is covered in depth in tutorial 2 under, "If/Else Statements and Operators". The other trouble shooting tips are self explanatory.

Good Reading

Mandatory Bookmarks