Experimenting With JavaScript Support in NetBeans 6.1

NetBeans 6.1 includes new and improved JavaScript support. The NetBeans New and Noteworthy page on the NetBeans Wiki lists the following new and updated features :

  • Semantic Highlighting
  • Mark occurrences
  • Instant Rename
  • Refactoring
  • Quick Fixes and Semantic Checks
  • Tasklist
  • Code Completion and Type Analysis
  • Go To Declaration
  • Documentation
  • Embedded Completion
  • Browser Compatibility Info
  • Embedding
  • Open Type
  • 6.0 Java Script Information

I’ve been busy the last few weeks field testing it in some code and have found pros and cons. This article discusses some of these issues and features using some sample code.

I started with the following code to practice with the JavaScript features :

<html>
<head>
<script type=”text/javascript”>

function doSomething(y) {
var x = 4;

if(x > y) {
alert(‘x is greater’);
}
}

</script>
</head>

<body onload=”doSomething(2)”>
<h2>Hello World!</h2>
</body>

</html>

This code defines a doSomething function which is called by the page’s onload attribute. If you paste the code into an HTML page you will notice the IDE’s syntax highlighting and coloring. Reserved words like var, function, if, else, and so on are highlighted.

You will also notice in the left margin a code fold block for the doSomething function. This allows you to use regular code folding features normally available to Java source code. One interesting aspect of this is when code folding is enabled for new code.

Edit the JavaScript block, add two new function definitions, and save the file. Notice that the doSomething function has code folding enabled in the margin, but the two new functions do not (potential bug?), as shown in Figure 1.

JavaScript in NetBeans

Figure 1. New function with no code folding in Source Editor

If you close the file and re-open it, code folding will then be enabled for the two new functions. As I type JavaScript functions, I would expect the code folding to be enabled in the margin, similar to how code folding works for Java source code.

Next, I wanted to test code completion in the JavaScript blocks. Suppose I had a script block in the body of the page like this:

<body onload=”doSomething(2)”>

<h2>Hello World!</h2>

<script type=”text/javascript”>

</script>

</body>

Inside the script block, if I type “document.” and pause for a second, the code completion window will appear. If I type “wr” the code completion window will display the filtered results, as shown in Figure 2.

JavaScript in NetBeans

Figure 2. Filtered results for “document.wr” in the code completion window

So far, this works as expected. Next, define a top-level page variable such as this :

var xyz = ‘string var’;

On the next line of the script block, type “.” and pause for a second for the code completion window to appear. Then type “x” to partially filter the results. For some reason, the code completion window displays two listings that appear identical for the xyz variable (potential bug?), as shown in Figure 3.

JavaScript in NetBeans

Figure 3. XYZ variable in the code completion window

I’m not sure if this is a bug or is intended.

Next, I wanted to test the refactoring. I started with this code again :

<html>
<head>
<script type=”text/javascript”>

function doSomething(y) {
var x = 4;

if(x > y) {
alert(‘x is greater’);
}

}

</script>
</head>

<body onload=”doSomething(2)”>
<h2>Hello World!</h2>
</body>
</html>

The doSomething function is defined and called by the body’s onload attribute. I click inside the name of the doSomething method definition and on the main menu select Refactor >> Rename. The “Rename Method XXX” window will appear, as shown in Figure 4.

JavaScript in NetBeans

Figure 4. The Rename Method XXX refactoring window

The window will allow you to enter a new name for the JavaScript method name. One interesting thing to note is that the actual Refactor button is disabled, preventing you from immediately activating the refactoring, as you can do with Java source refactoring. A warning message is displayed stating that JavaScript refactoring is approximate and should “always” be previewed. This can be argued, but can’t hurt. Click the Preview button.

A standard Refactoring Preview window will open in the lower left of the IDE, as shown in Figure 5. The lower right of the IDE will display a Diff window showing the existing versus new code.

JavaScript in NetBeans

Figure 5. The JavaScript Refactoring Preview window

The Refactoring Preview window lets you see a line-by-line listing of exactly what will be changed.

The Diff window, as shown in Figure 6, display a very nice comparison between existing and proposed code. This is a standard Diff window in NetBeans, but I think it is great that it works well with JavaScript refactoring as well.

JavaScript in NetBeans

Figure 6. The Refactoring Preview Diff window

There are plenty more use cases to cover. Overall, I have had an excellent experience with the JavaScript support as I do a lot of work with web applications. If you have not already tried it, I recommend experimenting with it.

Check out the NetBeans 6.1 Blog Contest.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>