| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <!-- Copyright (c) 2010, Oracle and/or its affiliates. All rights reserved. --> |
| <!-- Use is subject to license terms.--> |
| <head> |
| <title>Editing JavaScript - NetBeans IDE Tutorial</title> |
| <meta name="description" |
| content="A document describing improved JavaScript editing features in NetBeans IDE."> |
| <link rel="stylesheet" href="../../../netbeans.css"> |
| |
| </head> |
| |
| <body> |
| <h1>Editing JavaScript</h1> |
| |
| <p>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.</p> |
| |
| <div class="indent"> |
| <h3>Contents</h3> |
| <img src="../../../images_www/articles/73/netbeans-stamp.png" class="stamp" alt="Content on this page applies to NetBeans IDE 7.3" title="Content on this page applies to the NetBeans IDE 7.3" > |
| |
| <ul class="toc"> |
| <li><a href="#basic">Basic Features</a></li> |
| <li><a href="#mark_occurrences">Mark Occurrences and Instant Rename</a> </li> |
| <li><a href="#code_completion">Code Completion and Type Analysis </a></li> |
| <li><a href="#documentation">Documentation</a></li> |
| <li><a href="#open_type">Open Type </a></li> |
| <li><a href="#jsdoc_support">JSDoc Support </a></li> |
| <li><a href="#seealso">See Also</a></li> |
| </ul> |
| </div> |
| <h3 class="tutorial">Software Needed for the Tutorial</h3> |
| |
| <p><b>To complete this tutorial, you need the following software and resources.</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software or Resource</th> |
| <th class="tblheader" scope="col">Version Required</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">6 or 7</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2><a name="basic"></a>Basic Features</h2> |
| |
| <p>In this section we introduce the basic JavaScript editing features of the IDE.</p> |
| <div class="indent"> |
| <h3>Creating New Files</h3> |
| <p>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 <tt>public_html</tt> or <tt>src</tt>.</p> |
| <p>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.</p> |
| |
| <h3>Syntax and Semantic Highlighting</h3> |
| <p>The editor provides code highlighting for methods and variables, as well as global variables |
| and properties of literal objects.</p> |
| <img src="../../../images_www/articles/73/ide/js-editor/jseditor-highlighting.png" alt="navigator tab showing Javascript file structure" title="Navigator tab showing Javascript file structure" class="margin-around b-all"> |
| |
| <h3>Code Folding</h3> |
| <p>Method code, comments and code blocks between brackets can be folded or expanded. |
| Click the |
| <img src="../../../images_www/articles/73/ide/js-editor/collapse_node.png" alt="fold"> and |
| <img src="../../../images_www/articles/73/ide/js-editor/expand_node.png" alt="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.</p> |
| <img src="../../../images_www/articles/73/ide/js-editor/js-codefold.png" alt="code fold" title="Code folding" class="margin-around b-all"> |
| <p>You can also create custom folds with descriptions and specify the default state.</p> |
| <pre class="examplecode">// <editor-fold desc="This is my custom fold"> |
| Your code goes here... |
| // </editor-fold></pre> |
| |
| <h3>Navigation</h3> |
| <p>The Navigator window displays the structure of the JavaScript file. |
| and enables you to easily navigate to elements in the code.</p> |
| <img src="../../../images_www/articles/73/ide/js-editor/jseditor-nav.png" alt="navigator tab showing Javascript file structure" title="Navigator tab showing Javascript file structure" class="margin-around b-all"> |
| |
| <h3><a name="goto"></a>Go To Declaration</h3> |
| <p>Press Ctrl and hold the cursor over a line of code and then left-click the variable name |
| to go to the variable declaration. </p> |
| |
| <h3>Background parser</h3> |
| <p>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.</p> |
| <img src="../../../images_www/articles/73/ide/js-editor/jseditor-hints.png" alt="screenshot of JavaScript Hints tab in Options window" title="JavaScript Hints tab in Options window" class="margin-around b-all"> |
| |
| <h3>Bracket Matching</h3> |
| <p>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.</p> |
| |
| <h3>Formatting</h3> |
| <p>The Formatting tab in the Options window enables you to specify options for JavaScript files, |
| including indentation, spaces and line wrapping.</p> |
| <img src="../../../images_www/articles/73/ide/js-editor/jseditor-formatter.png" alt="screenshot of Formatting tab in Options window" title="Formatting tab in Options window" class="margin-around b-all"> |
| |
| <h3>JSON Support</h3> |
| <p>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.</p> |
| |
| <h3><a name="embedding"></a>Embedding</h2> |
| <p>JavaScript editing features also work for JavaScript code embedded in PHP, JSP and HTML files.</p> |
| </div> |
| |
| <h2><a name="mark_occurrences"></a>Mark Occurrences and Instant Rename</h2> |
| <p>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. <p> |
| <img src="../../../images_www/articles/73/ide/js-editor/jseditor-occur.png" alt="highlighted returns" title="Highlighted returns" class="margin-around b-all"> |
| <p>Press Ctrl-R/Command-R on a local variable and you can rename the symbol synchronously throughout the file. </p> |
| |
| <h2><a name="code_completion"></a>Code Completion and Type Analysis</h2> |
| <p>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:</p> |
| <pre> x = "foo"; y = x; y. </pre> |
| <p>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.</p> |
| <p> 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. </p> |
| <img src="../../../images_www/articles/73/ide/js-editor/jseditor-codecompletion.png" alt="screenshot of code completion in editor" title="Code completion in editor" class="margin-around b-all"> |
| <p> If you mark a method with <tt>@deprecated</tt>, 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.</p> |
| |
| <p>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:</p> |
| <pre>"foo".big().charCodeAt(50).toExponential(fractionDigits);</pre> |
| |
| <p>NetBeans first sees that <tt>foo</tt> is a String, so it looks in the String class for the <tt>big()</tt> method. |
| The <tt>charCodeAt(50)</tt> 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. |
| <p><strong>Note: </strong>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.</p> |
| |
| <h2><a name="documentation"></a>Documentation</h2> |
| <p>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).</p> |
| <img src="../../../images_www/articles/73/ide/js-editor/jseditor-doc.png" alt="screenshot of documentation tooltip" title="jQuery documentation in tooltip" class="margin-around b-all"> |
| <p>Code completion documentation for jQuery is also available in the editor.</p> |
| <img src="../../../images_www/articles/73/ide/js-editor/jseditor-jquerydoc.png" alt="screenshot of documentation tooltip" title="jQuery documentation in tooltip" class="margin-around b-all"> |
| |
| <h2><a name="open_type"></a>Open Type</h2> |
| <p>Press Ctrl-O/Command-O and quickly jump to any of your functions, across files. <p> |
| <img src="../../../images_www/articles/73/ide/js-editor/jseditor-gototype.png" alt="go to type dialog" title="Go to type dialog" class="margin-around b-all"> |
| |
| <h2><a name="jsdoc_support"></a>JSDoc Support</h2> |
| <p>The IDE now supports JSDoc in version 2, ScriptDoc and ExtDoc. |
| If you annotate a method with <tt>@private</tt> it shows up in the navigator with a lock icon. |
| If you annotate a function with <tt>@constructor</tt> it is shown as a constructor (and included in code completion |
| after the "new" keyword).</p> |
| |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20JavaScript%20Editing%20in%20NetBeans%20IDE%206.1">Send Feedback on This Tutorial</a></div> |
| <br style="clear:both;"> |
| <!-- ======================================================================================= --> |
| <h2><a name="seealso"></a>See Also</h2> |
| <p>For more information about working with the JavaScript editor in NetBeans IDE, see the following resources. </p> |
| <ul> |
| <li>Demo:<a href="../../docs/web/html5-javascript-screencast.html"> HTML5 - Part 3: Testing and Debugging JavaScript in HTML5 Applications</a></li> |
| <li><a href="../../docs/webclient/html5-js-support.html">Debugging and Testing JavaScript in HTML5 Applications</a></li> |
| <li><a href="https://blogs.oracle.com/netbeansphp/entry/javascript_code_folding">JavaScript: Code Folding</a> on the NetBeans for PHP blog.</li> |
| <li><a href="https://blogs.oracle.com/netbeansphp/entry/jquery_support">jQuery Support</a> on the NetBeans for PHP blog.</li> |
| <li>The JavaScript, Python, and Groovy sections of the <a href="../../trails/java-ee.html">JavaEE and Java Web Learning Trail</a> </li> |
| <li>The <a href="../../trails/php.html" >PHP Application learning trail</a>.</li> |
| </ul> |
| <p>To send comments and suggestions, get support, and keep informed on the latest |
| developments on the NetBeans IDE Java EE development features, <a href="../../../community/lists/top.html">join |
| the nbj2ee@netbeans.org mailing list</a>.</p> |
| </body> |
| </html> |
