Editing JavaScript NetBeans

Basic Features

In this section we introduce the basic JavaScript editing features of the IDE.

Creating New Files

You can create a new JavaScript file in any project through the New File wizard. Click New->Other to open the wizard. In the wizard, open the Other category and select JavaScript file. A new JavaScript file is created from a template.
If you want the JavaScript file to be visible in the Project Editor, create the JavaScript file in an appropriate subfolder of the project, such as src.
The default JavaScript template contains only licensing information. To add content to the template, go to Tools -> Templates and open the JavaScript template in the IDE.

Syntax highlighting

The IDE provides true semantic hightlighting to distinguish methods and variables.

Code Folding

Method code can be folded or expanded. Within the editor, click the icon next to a method and it folds. Click the icon next to a folded method and it expands. Folded code is denoted by an ellipsis box. Hold the cursor over the ellipsis box and the IDE displays the collapsed method.


You can fold or expand all methods in the View -> Code Folds menu.

Navigation

The IDE's Navigator tab displays the JavaScript file structure. The Navigator recognizes prototype-style class definitions and shows them as classes with methods.

Background parser

A parser runs in the background and provides detailed error messages.

Bracket matching

Brackets automatically close. Typing a ', ", [, ( or { inserts a matching closing symbol. Typing the closing symbol will type through the inserted one. Backspacing the opening symbol removes the matching symbol.

Formatting

Pressing newline indents the caret based on where the next line is expected to be. Pressing a } will outdent the line immediately. Reformatting a selection or the whole buffer reindents the whole file.

JSON support

JSON files are treated as JavaScript. The background parser runs in a special JSON mode where it allows only an object literal expression with no functions etc.

Semantic highlighting

Method declarations are shown in bold (including prototype style method declarations in object literals), global variables are shown in green, unused variables are shown in gray underline.

Mark Occurrences

Placing the caret on a symbol highlights other uses of the same variable or call. Furthermore, placing the caret on a function keyword will highlight all the returns from that method (return, throw). This should also happen if you place the caret on a return.

Instant Rename

Press Ctrl-R/Command-R on a local variable and you can rename the symbol synchronously throughout the file.

Refactoring

You can find all usages of a variable or operation within a product. After finding these usages, you can rename all occurrences of the variable or operation and refactor throughout the product. Before performing the refactoring, you can preview the changes in a split screen UI.
To find and rename all usages of a variable or operation:

1. Select an occurrance of the variable or operation in the editor.
2. Select Edit->Find Usages (Alt-F7). You have the option of searching the comments as well as the active code. The Usages view opens, showing a tree view of all usages of the variable or operation.
   
   
3. Select the variable in the editor again and select Refactor -> Rename (Ctrl-R/Command-R). A dialog box opens in which you type the new name.
4. Click Preview. The Refactoring view opens with a tree view of replacements on the left and a split screen of the original and refactored file on the right.
   
   
5. You can choose not to rename the variable or operation in indiviual places. Deselect the individual renaming in the tree view on the left.
   
   
6. After review, click Do Refactoring and the IDE refactors all files.

Quick Fixes and Semantic Checks

The IDE performs many semantic checks on the JavaScript code and offers quick fixes. To display quick fixes, select Source -> Fix Code (Alt-Enter). The semantic checks include:

• Reassigning a parameter
• Anonymous function does not always return a value
• Variable hides argument
• Code which has no side effects (no calls, no assignments)
  
• An assignment in a conditional (if x = y). This semantic error has several quickfixes associated with it, such as converting to an == expression, and adding double parentheses to turn off the warning.
  
  
• Inconsistent returns from a function (where some return expressions return a value, and some do not)
  

Tasklist

The background parser and the warning quick fixes are integrated with the tasklist. Open the tasklist (Window -> Tasklist) to view errors in any of your files that are associated with JavaScript. Double-click on a task in that list and the editor goes to the relevant line.

Code Completion and Type Analysis

JavaScript code completion gives you a choice of the IDE's built-in JavaScript core classes to insert into your code. For example, you can write

    x = "foo";      y = x;      y.  

and code completion will show you the methods available for JavaScript strings. Code completion works with all the literal types in JavaScript. The type analysis and code completion machinery also knows about prototype style classes (regular functions only) and the new operator for constructing them.
NetBeans IDE consults type parameters for function parameters and  return types (@type, @param). These types are shown  in code completion: in the list, in the documentation,  and in parameter hints (Ctrl-P). Return types are also shown in  the code completion dialog after the function name, separated by a colon.


If you mark a method with @deprecated, it is struck through in the navigator and in code completion calls to this method. The accompanying  deprecated description is shown in a separate section in the code completion documentation with a highlighted background.
NetBeans IDE can also determine the  return type for many functions. This function is essential for JSQuery support. For example, methods which return true or false have a Boolean return type, those returning literal numbers have a Number return  type, and so on. The IDE both infers types and explicitly tracks declared types via  comments. The most important implication is that the IDE follows types through calls.  If you have code like this:

"foo".big().charCodeAt(50).toExponential(fractionDigits);

NetBeans first sees that foo is a String, so it looks in the String  class for the big() method. The charCodeAt(50) function on that String is of the Number type, so if you apply code completion on "to" here, you will see only the methods available on Number. 
Note: Looking up return types involves a trip to the index, which can take time, so during type analysis the IDE  looks at the clock and after a second or two has elapsed it aborts  type computation. This can be relevant for large functions, or slow  computers, or fast computers under a heavy work load.

Go To Declaration

Press Ctrl and hold the cursor over a line of code. Left-click the variable name. When the IDE is not sure about the type of your variable (and therefore the target function) it offers you a popup menu of all declarations of the variable across your project:

Documentation

Code completion shows the API documentation for both the core javascript APIs and the DOM APIs. You can also view documentation for your own functions. Ctrl-pointing at calls also shows documentation (as a tooltip).

Embedded Completion

Code completion on element ids in the HTML works for the Prototype.js $("...") function. To see code completion on element ids, press Ctrl-Space within the quotation marks. For example, if you add variable = $("f|") and press Ctrl-Space with the cursor (|) immediately after the f, code completion shows all HTML element ids in the document that start with f.

Browser Compatibility

You can choose which browsers you want to support with your JavaScript. The IDE strikes through code completion options that are not supported in the selected browsers.
To select the browsers you want to support:

1. Open Tools -> Options/Preferences.
2. Click the Miscellaneous icon. A page of tabs opens.
3. Open the JavaScript tab.
4. Select and deselect browsers and versions.

Note also that the Documentation shows icons for every browser that supports the documented API element.


In the following code completiion dialog, the IDE has struck through several options because they are not supported in the chosen browser (Opera only).

Embedding

JavaScript editing features work for JavaScript embedded in RHTML, HTML, and JSP files.

Open Type

Press Ctrl-O/Command-O and quickly jump to any of your functions, across files.

JSDoc Support

If you annotate a method with @private, it shows up in the navigator with a lock icon. If you annotate a function with @constructor it is shown as a constructor (and included in code completion after the "new" keyword), and you can use @class and @namespace to explicitly assign functions to given classes (though the type analyzer can often assign these functions automatically). Functions marked @ignore does not show up in code completion but is included in the index and can be used in .

Basic File Inclusion Filtering

Code completion in HTML only includes code from referenced JavaScript files. Consider a project in which the file foo.js defines the function foo(), and the file bar.js defines the function bar(). If the file hello.html includes only <script src="bar.js"></script>, only the bar() function is shown in code completion for hello.html.