have always hated working with JavaScript. It's not a particularly difficult language, but it's just too easy to make silly mistakes. Things like syntax errors and mistyped variable names remain hidden until you deploy your code. When you are used to your compiler catching this sort of error as you type, using a compiler that lacks this feature can be a real productivity drag. In addition, isolating and debugging your script is a painful process. And to top it all off, JavaScript has no code completion, so you have to know the APIs by heart. Code completion is one of those things you never really appreciate until you no longer have it.

Nevertheless, with the increasing demand for rich user experiences, JavaScript is probably here to stay. It seems that every new web site worth its salt wants its share of dynamic behavior, eye candy, and AJAX sugar. While some tools can hide the nastier bits of JavaScript code when you are working with AJAX components, you still often have to get your hands dirty and work with the JavaScript code yourself. So the pain remains.

However, the latest version of NetBeans (NetBeans 6.1) attempts to change all this. This new version comes with a brand spanking new JavaScript editor with all the mod cons of a modern Java editor, including real-time syntax checking, code completion, and more. In this article, I take the new NetBeans JavaScript features for a test drive.

Semantic Highlighting

The most obvious feature of the JavaScript editor is the new syntax highlighting. Actually, the documentation calls this semantic highlighting, and it is more than simply putting the JavaScript keywords in a particular color. JavaScript keywords and variables are displayed in different colors, depending on their nature and context. Method declarations are in bold, keywords in blue, strings in orange, and so on. And, more interestingly, variables vary in color depending on their scope. Global variables are in green, whereas local variables are in black. And any unused variables are underlined in grey.

This last feature has the potential to be a great timesaver. Since JavaScript is a typeless language, you get little warning if you misspell variable names. Consider the listing in Figure 1. There are no syntax errors in this code, and the script will execute without any runtime errors. However, the code contains several potential errors and bugs that the NetBeans semantic highlighting can help you avoid.

Figure 1. NetBean's Semantic Highlighting in Action: This code contains potential errors that the NetBeans semantic highlighting can help you avoid.

First of all, notice the way the "x" variable in the bar() function is underlined. This means it has been declared, but is never used. This should immediately be treated with suspiciondid I mean "return x" rather than "return xx" in the next line?

Another, more subtle error can be gleaned from the code in the foo() function. The two variables "xx" and "b" are greenindeed, they are global variables, because they are not declared with the "var" keywords. In JavaScript, local variables inside a function need to be declared using "var", otherwise they will be assumed to be global. So all this green within a function should also be viewed as a warning sign.

This is a simple example of NetBean's semantic highlighting in action. Don't underestimate the utility of this featurefar from being simple eye candy, it can actively help you find potential bugs in your code.