| <!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>编辑 JavaScript - NetBeans IDE 教程</title> |
| <meta name="description" |
| content="A document describing improved JavaScript editing features in NetBeans IDE."> |
| <link rel="stylesheet" href="../../../netbeans.css"> |
| |
| <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head> |
| |
| <body> |
| <h1>编辑 JavaScript</h1> |
| |
| <p>NetBeans IDE 提供了更强大的 JavaScript 编辑功能，旨在为 Java 和其他语言提供支持。下面的指南对这些功能进行了概述。</p> |
| |
| <div class="indent"> |
| <h3>目录</h3> |
| <img alt="此页上的内容适用于 NetBeans IDE 7.3" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="此页上的内容适用于 NetBeans IDE 7.3"> |
| |
| <ul class="toc"> |
| <li><a href="#basic">基本功能</a></li> |
| <li><a href="#mark_occurrences">标记实例和即时重命名</a> </li> |
| <li><a href="#code_completion">代码完成和类型分析功能</a></li> |
| <li><a href="#documentation">文档</a></li> |
| <li><a href="#open_type">打开类型</a></li> |
| <li><a href="#jsdoc_support">JSDoc 支持</a></li> |
| <li><a href="#seealso">另请参见</a></li> |
| </ul> |
| </div> |
| <h3 class="tutorial">本教程所需要的软件</h3> |
| |
| <p><b>要学完本教程，您需要具备以下软件和资源。</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">软件或资源</th> |
| <th class="tblheader" scope="col">要求的版本</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 开发工具包 (JDK)</a></td> |
| <td class="tbltd1">6 或 7</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2><a name="basic"></a>基本功能</h2> |
| |
| <p>在本部分中，我们将介绍 IDE 的基本 JavaScript 编辑功能。</p> |
| <div class="indent"> |
| <h3>创建新文件</h3> |
| <p>通过新建文件向导，您可以在任何项目中创建新的 JavaScript 文件。从主菜单中选择“文件”>“新建文件”，然后在向导的“HTML/JavaScript”类别中选择“JavaScript 文件”。如果安装中不提供“HTML/JavaScript”类别，您可以在“新建文件”向导的“其他”类别中选择“JavaScript 文件”。如果要使 JavaScript 文件在“项目”窗口中可见，请在项目的相应子文件夹中创建 JavaScript 文件，例如 <tt>public_html</tt> 或 <tt>src</tt>。</p> |
| <p>用于 JavaScript 文件的默认模板仅包含许可信息。要向模板中添加内容，请从主菜单中选择“工具”>“模板”以打开模板管理器。在“HTML/JavaScript”类别中选择“JavaScript 文件”模板，然后单击“在编辑器中打开”以编辑 JavaScript 模板。</p> |
| |
| <h3>语法和语义突出显示</h3> |
| <p>该编辑器为方法和变量以及文字对象的全局变量和属性提供代码突出显示。</p> |
| <img alt="显示 Javascript 文件结构的 "navigator"（导航器）标签" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-highlighting.png" title="显示 Javascript 文件结构的 "Navigator"（导航器）标签"> |
| |
| <h3>代码折叠</h3> |
| <p>可以折叠或展开括号之间的方法代码、注释和代码块。单击编辑器中左旁注旁的 <img alt="折叠" src="../../../images_www/articles/73/ide/js-editor/collapse_node.png"> 和 <img alt="展开" src="../../../images_www/articles/73/ide/js-editor/expand_node.png"> 图标可折叠和展开代码。省略号框指示折叠的代码，您可以将光标放在省略号框之上来查看折叠的代码。您可以通过从主菜单中选择“视图”>“代码折叠”来快速折叠或展开文件中的所有折叠。</p> |
| <img alt="代码折叠" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/js-codefold.png" title="代码折叠"> |
| <p>您还可以通过描述来创建定制折叠并指定默认状态。</p> |
| <pre class="examplecode">// <editor-fold desc="This is my custom fold"> |
| Your code goes here... |
| // </editor-fold></pre> |
| |
| <h3>导航</h3> |
| <p>"Navigator"（导航器）窗口显示 JavaScript 文件的结构，使您能够轻松导航至代码中的元素。</p> |
| <img alt="显示 Javascript 文件结构的 "navigator"（导航器）标签" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-nav.png" title="显示 Javascript 文件结构的 "Navigator"（导航器）标签"> |
| |
| <h3><a name="goto"></a>转至声明</h3> |
| <p>按下 Ctrl 并将光标放在一行代码之上，然后左键单击变量名称以转至变量声明。 </p> |
| |
| <h3>后台解析器</h3> |
| <p>解析器在后台运行，并提供详细的警告和提示以解决潜在问题。您可以配置显示在 "Options"（选项）窗口的 "Hints"（提示）标签中的 JavaScript 提示。</p> |
| <img alt=""Options"（选项）窗口中的 "JavaScript Hints"（JavaScript 提示）标签的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-hints.png" title=""Options"（选项）窗口中的 "JavaScript Hints"（JavaScript 提示）标签"> |
| |
| <h3>括号匹配</h3> |
| <p>自动添加右括号。键入 '、"、[、( 或 { 将自动插入匹配的右引号或右括号。键入右引号或右括号将直接使用插入的符号。删除左引号或左括号将删除匹配的符号。</p> |
| |
| <h3>格式设置</h3> |
| <p>使用 "Options"（选项）窗口中的 "Formatting"（格式设置）标签可以为 JavaScript 文件指定选项，包括缩进、空格和自动换行。</p> |
| <img alt=""Options"（选项）窗口中的 "Formatting"（格式设置）标签的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-formatter.png" title=""Options"（选项）窗口中的 "Formatting"（格式设置）标签"> |
| |
| <h3>JSON 支持</h3> |
| <p>JSON 文件被视为 JavaScript。后台解析器在特定的 JSON 模式下运行，在该模式下只允许不带函数的对象文字表达式等。</p> |
| |
| <h3><a name="embedding"></a>嵌入</h2> |
| <p>JavaScript 编辑功能还可用于嵌入在 PHP、JSP 和 HTML 文件中的 JavaScript 代码。</p> |
| </div> |
| |
| <h2><a name="mark_occurrences"></a>标记实例和即时重命名</h2> |
| <p>将脱字号放在某个符号上将突出显示同一变量或调用的其他用法。此外，将脱字号放在某个函数关键字上将突出显示方法 (return, throw) 的所有返回内容。将脱字号放在某个返回上时，情况也应该一样。 <p> |
| <img alt="突出显示的返回" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-occur.png" title="突出显示的返回"> |
| <p>在局部变量上按 Ctrl-R/Command-R 组合键，即可在整个文件中同步重命名该符号。 </p> |
| |
| <h2><a name="code_completion"></a>代码完成和类型分析功能</h2> |
| <p>JavaScript 代码完成使您可以选择要插入代码中的 IDE 内置 JavaScript 核心类。例如，如果您编写以下代码：</p> |
| <pre> x = "foo"; y = x; y. </pre> |
| <p>代码完成将向您显示可用于 JavaScript 字符串的方法。代码完成适用于 JavaScript 中的所有文字类型。类型分析和代码完成机制还知道原型样式类（仅常规函数）和用于构造这些类的新运算符。</p> |
| <p> NetBeans IDE 将参考函数参数的类型参数和返回类型 (@type, @param)。这些类型将显示在代码完成中，包括显示在列表、文档以及参数提示中。在代码完成对话框中，返回类型也会显示在函数名称后面，并用冒号分隔。 </p> |
| <img alt="编辑器中代码完成的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-codecompletion.png" title="编辑器中的代码完成"> |
| <p> 如果使用 <tt>@deprecated</tt> 标记某个方法，则此方法在 "Navigator"（导航器）窗口中将被划掉。附带的过时描述将在代码完成文档中作为单独的部分以背景突出显示的方式显示。</p> |
| |
| <p>NetBeans IDE 还可以确定许多函数的返回类型。此函数是 JSQuery 支持所必需的。例如，方法如果返回 true 或 false，则返回类型为 Boolean；方法如果返回文字数值，则返回类型为 Number，依此类推。IDE 通过注释来推断类型并明确跟踪已声明的类型。最重要的意义在于，IDE 通过调用来沿用相应类型。如果您的代码如下所示：</p> |
| <pre>"foo".big().charCodeAt(50).toExponential(fractionDigits);</pre> |
| |
| <p>NetBeans 首先看到 <tt>foo</tt> 是 String，因此，它将在 String 类中查找 <tt>big()</tt> 方法。该 String 中的 <tt>charCodeAt(50)</tt> 函数属于 Number 类型，因此，如果对此处的 "to" 应用代码完成，则只会看到用于 Number 的方法。 |
| <p><strong>注：</strong>查找返回类型涉及对索引的访问，这可能需要一段时间。因此，在类型分析期间，IDE 会查看时钟，过一到两秒后，它会中止类型计算。对大型函数、运行速度缓慢或运行速度快但不堪重负的计算机而言，这可能是很有意义的。</p> |
| |
| <h2><a name="documentation"></a>文档</h2> |
| <p>代码完成显示核心 JavaScript API 和 DOM API 的 API 文档。您还可以查看自己的函数的文档。在按住 Ctrl 键的同时指向调用也会显示文档（作为工具提示）。</p> |
| <img alt="文档工具提示的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-doc.png" title="工具提示中的 jQuery 文档"> |
| <p>编辑器中也提供 jQuery 的代码完成文档。</p> |
| <img alt="文档工具提示的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-jquerydoc.png" title="工具提示中的 jQuery 文档"> |
| |
| <h2><a name="open_type"></a>打开类型</h2> |
| <p>按 Ctrl-O/Command-O 组合键并快速跳转至文件中的任意函数。 <p> |
| <img alt=""Go to type"（转至类型）对话框" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-gototype.png" title=""Go to type"（转至类型）对话框"> |
| |
| <h2><a name="jsdoc_support"></a>JSDoc 支持</h2> |
| <p>IDE 现在支持版本 2 中的 JSDoc、ScriptDoc 和 ExtDoc。如果使用 <tt>@private</tt> 对某个方法进行标注，则该方法将显示在导航器中，并带有一个锁状图标。如果使用 <tt>@constructor</tt> 对某个函数进行标注，则该函数将显示为构造函数（并包括在代码完成中的 "new" 关键字之后）。</p> |
| |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20JavaScript%20Editing%20in%20NetBeans%20IDE%206.1">发送有关此教程的反馈意见</a></div> |
| <br style="clear:both;"> |
| <!-- ======================================================================================= --> |
| <h2><a name="seealso"></a>另请参见</h2> |
| <p>有关在 NetBeans IDE 中使用 JavaScript 编辑器的详细信息，请参阅以下资源。 </p> |
| <ul> |
| <li>演示：<a href="../../docs/web/html5-javascript-screencast.html">HTML5 - 第 3 部分：在 HTML5 应用程序中测试和调试 JavaScript</a></li> |
| <li><a href="../../docs/webclient/html5-js-support.html">在 HTML5 应用程序中调试和测试 JavaScript</a></li> |
| <li>适用于 PHP 的 NetBeans 博客上的 <a href="https://blogs.oracle.com/netbeansphp/entry/javascript_code_folding">JavaScript：代码折叠</a>。</li> |
| <li>适用于 PHP 的 NetBeans 博客上的 <a href="https://blogs.oracle.com/netbeansphp/entry/jquery_support">jQuery 支持</a>。</li> |
| <li><a href="../../trails/java-ee.html">JavaEE 和 Java Web 学习资源</a>的 JavaScript、Python 和 Groovy 部分 </li> |
| <li><a href="../../trails/php.html">PHP 应用程序学习资源</a>。</li> |
| </ul> |
| <p>要发送意见和建议、获得支持以及随时了解 NetBeans IDE Java EE 开发功能的最新开发情况，请<a href="../../../community/lists/top.html">加入 nbj2ee@netbeans.org 邮件列表</a>。</p> |
| </body> |
| </html> |
