Editing JavaScript

The NetBeans IDE provides enhanced JavaScript editing features that are modeled on support already provided for Java and other languages. This guide provides an overview of those features.

Software Needed for the Tutorial

To complete this tutorial, you need the following software and resources.

Software or Resource Version Required
NetBeans IDE 7.3
Java Development Kit (JDK) 6 or 7

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. Choose File > New File from the main menu and select JavaScript File in the HTML/JavaScript category in the wizard. If the HTML/JavaScript category is not available in your installation you can choose JavaScript File in the Other category in the New File wizard. If you want the JavaScript file to be visible in the Projects window, create the JavaScript file in an appropriate subfolder of the project, such as public_html or src.

The default template that is used for JavaScript files contains only licensing information. To add content to the template, choose Tools > Templates from the main menu to open the Template Manager. Select the JavaScript Files template in the HTML/JavaScript category and click Open in Editor to edit the JavaScript template.

Syntax and Semantic Highlighting

The editor provides code highlighting for methods and variables, as well as global variables and properties of literal objects.

navigator tab showing Javascript file structure

Code Folding

Method code, comments and code blocks between brackets can be folded or expanded. Click the fold and expand icons next to the left margin in the editor to fold and expand the code. An ellipsis box indicates folded code and you can place your cursor over the ellipsis box to view the collapsed code. You can quickly fold or expand all folds in the file by choosing View > Code Folds from the main menu.

code fold

You can also create custom folds with descriptions and specify the default state.

// <editor-fold desc="This is my custom fold">
   Your code goes here...
// </editor-fold>

Navigation

The Navigator window displays the structure of the JavaScript file. and enables you to easily navigate to elements in the code.

navigator tab showing Javascript file structure

Go To Declaration

Press Ctrl and hold the cursor over a line of code and then left-click the variable name to go to the variable declaration.

Background parser

A parser runs in the background and provides detailed warnings and hints to resolve potential problems. You can configure the JavaScript hints that are displayed in the Hints tab in the Options window.

screenshot of JavaScript Hints tab in Options window

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

The Formatting tab in the Options window enables you to specify options for JavaScript files, including indentation, spaces and line wrapping.

screenshot of Formatting tab in Options window

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.

Embedding

JavaScript editing features also work for JavaScript code embedded in PHP, JSP and HTML files.

Mark Occurrences and Instant Rename

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.

highlighted returns

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

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, if you write the following code:

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

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. Return types are also shown in the code completion dialog after the function name, separated by a colon.

screenshot of code completion in editor

If you mark a method with @deprecated, it is struck through in the Navigator window. 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.

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).

screenshot of documentation tooltip

Code completion documentation for jQuery is also available in the editor.

screenshot of documentation tooltip

Open Type

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

go to type dialog

JSDoc Support

The IDE now supports JSDoc in version 2, ScriptDoc and ExtDoc. 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).


See Also

For more information about working with the JavaScript editor in NetBeans IDE, see the following resources.

To send comments and suggestions, get support, and keep informed on the latest developments on the NetBeans IDE Java EE development features, join the mailing list.

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo