HTML5 应用程序入门

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

从 Chrome Web Store 安装扩展

如果您从 IDE 运行 NetBeans HTML5 应用程序项目，并选择了 "Chrome with NetBeans Integration"（带有 NetBeans 集成的 Chrome），则系统将自动提示您安装 NetBeans Connector 扩展。本练习说明如何通过创建和运行伪 HTML5 项目来安装扩展。您可以跳过此练习，然后在 IDE 提示时安装扩展，或者直接从 Chrome Web Store 安装 NetBeans Connector 扩展。

*注：*IDE 将在默认浏览器中打开 Chrome Web Store。如果 Chrome 未设置为 IDE 的默认浏览器，则需要打开 "Options"（选项）窗口并在 "General"（常规）类别的 "Web Browser"（Web 浏览器）下拉列表中选择 Chrome，然后再执行以下步骤。

单击 "Go to Chrome Web Store"（转到 Chrome Web Store）时，Chrome 浏览器中将打开 Chrome Web Store 的 NetBeans Connector 页面。

注： "Install Chrome Extension"（安装 Chrome 扩展）将显示一个按钮，安装扩展之后单击该按钮。

开发应用程序时，建议在安装了 NetBeans Connector 扩展的 Chrome 浏览器中运行 HTML5 应用程序。创建 HTML5 应用程序时，默认情况下将选择*带有 NetBeans 集成的 Chrome* 选项作为运行目标。不过，也可以在 IDE 所绑定的嵌入式 WebKit 浏览器中运行 HTML5 应用程序。

在嵌入式 WebKit 浏览器中运行 HTML5 应用程序时，IDE 将在 IDE 中打开 Web 浏览器窗口。嵌入式 WebKit 浏览器支持 Chrome 浏览器中安装了 NetBeans Connector 扩展时启用的多种功能，包括检查模式、不同屏幕大小选项和 JavaScript 调试。

*注：*在 IDE 的主菜单中选择 "Window"（窗口）> "Web" > "Web Browser"（Web 浏览器）将打开在“选项”窗口中指定作为 Web 浏览器的浏览器。

执行以下步骤可在嵌入式 WebKit 浏览器中运行 HTML5 应用程序。

从主菜单中选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键；在 Mac 上为 ⌘-Shift-N 组合键），以打开新建项目向导。

选择 HTML5 类别，然后选择 HTML5 Application （HTML5 应用程序）。单击 "Next"（下一步）。

选择 "No Site Template"（无站点模板）选项时，向导将生成基本的空 NetBeans HTML5 项目。如果立即单击 "Finish"（完成），则现在项目将仅包含站点根文件夹，该文件夹中有一个 index.html 文件。

使用向导的 "Site Template"（站点模板）页可以从 HTML5 项目的常用联机模板列表中进行选择，也可以指定站点模板的 .zip 归档文件的位置。可以键入 .zip 归档文件的 URL 或者单击 "Browse"（浏览）以指定本地系统上的位置。当您基于某个站点模板创建项目时，项目的文件、库和结构由该模板确定。

*注：*要根据列表中的一个联机模板创建项目，您必须处于联机状态。

Figure 14. "New HTML5 Application"（新建 HTML5 应用程序）向导中的 "JavaScript Libraries"（JavaScript 库）面板

Figure 15. "New HTML5 Application"（新建 HTML5 应用程序）向导中的 "JavaScript Libraries"（JavaScript 库）面板

如果在 "Projects"（项目）窗口中展开 js/libs 文件夹，则可以看到在新建项目向导中指定的 JavaScript 库已自动添加到项目。右键单击 JavaScript 文件并在弹出菜单中选择 "Delete"（删除）可以从项目中删除 JavaScript 库。

要将 JavaScript 库添加到项目，请右键单击项目节点，然后选择 "Properties"（属性）以打开 "Project Properties"（项目属性）窗口。在 "Project Properties"（项目属性）窗口的 "JavaScript Libraries"（JavaScript 库）面板中可以添加库。此外，您可以将本地系统上的 JavaScript 文件直接复制到 js 文件夹中。

现在，您可以测试项目在 Chrome 浏览器中是否正确显示。

您可以看到，浏览器标签中有一个黄色的栏，通知您 NetBeans Connector 正在调试标签。在黄色栏可见时，IDE 和浏览器已连接，能够彼此通信。从 IDE 启动 HTML5 应用程序时，JavaScript 调试器将自动启用。将对文件所做的更改保存到 CSS 样式表时，您无需重新加载页，因为浏览器窗口将自动更新以显示更改。

如果选择关闭黄色栏或者单击 "Cancel"（取消），您将断开 IDE 与浏览器之间的连接。如果断开了连接，则需要重新从 IDE 运行 HTML5 应用程序。

您还可以看到，NetBeans 图标在浏览器的 URL 位置字段中可见。您可以单击图标以打开提供了各种选项的菜单，用于更改浏览器的显示大小和启用在 NetBeans 中检查模式。

您可以在编辑器中使用代码完成功能来获取帮助。

<li><b>phone:</b> x8234</li> <li><b>office:</b> 102 Bldg 1</li> <li><b>email:</b> [email protected]</li> <br clear="all"> <h3><a href="#">John Matthews</a></h3> <img src="pix/johnmatthews.jpg" alt="John Matthews"> <li><h4>Middle Manager</h4></li> <li><b>phone:</b> x3082</li> <li><b>office:</b> 307 Bldg 1</li> <li><b>email:</b> [email protected]</li> <br clear="all"> <h3><a href="#">Sam Jackson</a></h3> <img src="pix/samjackson.jpg" alt="Sam Jackson"> <li><h4>Deputy Assistant</h4></li> <li><b>phone:</b> x3494</li> <li><b>office:</b> 457 Bldg 2</li> <li><b>email:</b> [email protected]</li> <br clear="all"> <h3><a href="#">Jennifer Brooks</a></h3> <img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite"> <li><h4>Senior Technician</h4></li> <li><b>phone:</b> x9430</li> <li><b>office:</b> 327 Bldg 2</li> <li><b>email:</b> [email protected]</li> <br clear="all"> </body> <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script> *<link type="text/css" rel="stylesheet" href="css/basecss.css">* </head>

jQuery 的原理是将动态应用的 JavaScript 属性和行为与 DOM（文档对象模型）元素连接在一起。本例中使用的 jQuery 指令必须在浏览器加载所有 DOM 元素之后才能执行。这点很重要，因为 jQuery 行为与 DOM 元素连接在一起，jQuery 必须可以使用这些元素，以便得到预期结果。jQuery 通过其内置的 (document).ready 函数帮助实现此目的，该函数在 jQuery 对象之后，由 $ 表示。

还可以使用此函数的以下缩写版。

$(function(){
jQuery 指令采用 JavaScript 方法的形式，通过一个可选的对象字面值来表示参数数组，且必须置于 (document).ready 函数内的花括号 {} 之间，从而只在合适的时间执行，也就是在 DOM 完全加载后。
此代码将调用包含在 jQuery UI 库中的 jQuery 折叠窗口部件脚本。折叠脚本将修改标识为  infolist  的 DOM 对象中的元素。在此代码中，#infolist 是一个 CSS 选择器，连接到一个唯一的 DOM 元素中，该元素有一个值为 infolist 的 id 属性。它使用典型的 JavaScript 点表示法 (“.”) 连接到使用 accordion() 方法的 jQuery 指令，以显示此元素。
在下一步中，将页中的元素标识为  infolist 。
*注：*您还在上面的代码片段中指定了 autoHeight: false。这样可以防止可折叠面板窗口部件根据标记内包含的最高内容部分设置每个面板的高度。有关详细信息，请参见可折叠面板 API 文档。
index.html 文件的  <head>  部分应该类似于以下内容。
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>
        <link type="text/css" rel="stylesheet" href="css/basecss.css">
        <style type="text/css">
            ul {list-style-type: none}
            img {
                margin-right: 20px;
                float:left;
                border: 1px solid;
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#infolist").accordion({
                    autoHeight: false
        </script>
    </head>

通过在编辑器中单击右键并选择 "Format"（格式化代码）可以清理代码。

在本教程中，您已学习了如何创建使用多个 jQuery JavaScript 库的空 HTML5 项目。您还学习了如何为 Chrome 浏览器安装 NetBeans Connector 扩展以及在浏览器中运行 HTML5 项目。编辑 index.html 文件时，可以看到 IDE 提供了一些工具，可以帮助您编辑 HTML 和 CSS 文件。

发送有关此教程的反馈意见

在 HTML5 应用程序中使用 CSS 样式表。该文档继续使用在本教程中创建的应用程序，说明如何在 IDE 中使用部分 CSS 向导和窗口，以及如何在 Chrome 浏览器中使用检测模式以直观地在项目源代码中查找元素。

在 HTML5 应用程序中调试和测试 JavaScript 。此文档说明 IDE 如何提供工具来帮助您在 IDE 中调试和测试 JavaScript 文件。

Licensed under the Apache license , version 2.0

Apache, Apache NetBeans, NetBeans, the Apache feather logo and the Apache NetBeans logo are trademarks of The Apache Software Foundation .

Oracle and Java are registered trademarks of Oracle and/or its affiliates.

The Apache NetBeans website conforms to the Apache Software Foundation Privacy Policy