RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


The JavaScript Hater's Guide to the NetBeans JavaScript Editor : Page 3

Writing and debugging JavaScript can be painful, but if you develop web applications, chances are that you'll be doing more and more of it. If this sounds like you, the latest version of NetBeans could be just what the doctor ordered.

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.

Click to enlarge

Figure 5. Refactoring JavaScript Code in NetBeans:
Refactoring your code is as important in JavaScript as it is in Java.

If you're in a hurry, another neat trick is to click on a variable and then press Control-R. This is a quick way of renaming a variable, which lets you modify all of the occurrences of this variable simultaneously. When you select a variable, NetBeans will highlight the occurrences of this variable so you can have a fairly good idea of what you are changing.

Code Completion
Code completion is probably the single most missed feature of any editor that doesn't have it. And until now, decent code completion has been rare in the world of JavaScript editing. Eclipse has no native support for JavaScript code completion, although the JSEclipse plugin does provide some good code-completion features. IntelliJ also provides code completion that is quite good, using the DOM model. However, none of them go quite as far as the latest version of NetBeans. Indeed, the NetBeans code completion is rich, innovative, and powerful. It leaves the other editors far behind in many regards.

Like most of the tools supporting JavaScript code completion, NetBeans 6.1 can use the DOM model for code completion. As usual, you activate code completion by typing “.” and pressing CTRL-SPACE. If you do this after an HTML object, NetBeans will display a list of all the DOM-model attributes and methods associated with the object (see Figure 6). NetBeans also displays the documentation for the selected method or object, and warns you if a function is not supported by your favorite browsers. You can configure which browsers you want to support in the Preferences screen.

But the NetBeans code completion can do much more. It is also aware of the built-in JavaScript core classes, as well as any classes you may have written yourself. And, using a clever system of type inference, it can do a decent job of keeping tabs on what type your variables are, based on the values you assign to them. For example, in the listing shown in Figure 7, NetBeans understands that b is a string and provides code completion for a string object.

Figure 6. JavaScript Code Completion in NetBeans: The NetBeans 6.1 JavaScript editor automatically checks your code for code-quality issues.
Figure 7. JavaScript Type Inference and Code Completion: NetBeans also proposes a number of "quick fixes" that let you apply simple fixes to simple problems.

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

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date