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.

NetBeans also proposes, via the “Source->Fix Code” menu, a number of “quick fixes” that let you apply simple fixes to simple problems, such as replacing “if (x=y)” with “if (x==y)” (see Figure 3). These very convenient features are actually useful around 80 percent of the time. One additional feature that is lacking, however, is the ability to access this functionality directly by clicking or right-clicking on the issue.

Refactoring
Refactoring your code is as important in JavaScript as it is in Java, so any tools that can make this process easier are certainly worth investigating. NetBeans 6.1 comes with a number of useful refactoring features.

For example, the JavaScript editor comes with a powerful refactoring tool that allows you to easily rename variables, parameters, and functions. Suppose you want to rename a variable. You simply would select the “Refactor -> Rename” menu, which lets you choose the new variable name, and then displays a list of all the occurrences of that variable. NetBeans is reasonably smart about this?if you rename a local variable, it won’t try to rename unrelated local variables of the same name in different functions, for example.

It also gives you a preview of what the script will look like after the changes (see Figure 5). If you do see any places where you don’t want NetBeans to intervene, you simply remove them from the list of occurrences.

This sort of code completion works for custom objects as well as for standard JavaScript libraries.

Navigation
It can be a hassle to navigate through large JavaScript files. The NetBeans JavaScript editor provides several features to make this task easier. First, whenever you are editing JavaScript code, a tree-like navigation view sums up the entire contents of the script (see Figure 8).

Second, you can move the code around quite easily from within the editor. For example, jumping to the declaration of a function is easy using the “Navigate ? Go to declaration” menu option. If several functions share the same name, NetBeans will propose a list and let you choose.

A JavaScript-Hating Java Guy’s Dream Come True
The latest NetBeans release has come up with something we’ve always dreamed of?a powerful, fully-featured, out-of-the-box JavaScript editor for us poor Java developers. Intelligent syntax coloring, real-time syntax error detection, code-quality checks, code completion, navigation?this editor has it all!

According to the documentation, some of the features, such as the code completion and the navigation, are still a bit shaky, but I didn’t encounter any particular problems. The overall impression I got was of a highly usable, well thought-out JavaScript editor that makes Java developers feel at home. Check it out!