《dreamweaver基础教程—使用dreamweaver开发javascript脚本》由会员分享，可在线阅读，更多相关《dreamweaver基础教程—使用dreamweaver开发javascript脚本（18页珍藏版）》请在金锄头文库上搜索。
1、使用 Dreamweaver 开发 JavaScript 脚本 569 使用Dreamweaver开发JavaScript脚本 我们已经介绍过 Web 前端设计的逻辑层概念，它主要集中在 JavaScript 技术上。相对于 HTML 和 CSS 技术的完美支持，Dreamweaver 对于 JavaScript 技术的支持可以说是姗姗来迟， 且比较有限。 早期的 Dreamweaver 使用“行为”概念打包常用的 JavaScript 功能块，而对于 JavaScript 语言 本身的支持基本上没有，仅能够分色显示 JavaScript 关键字。从 Dreamweaver CS3 版本开始，
2、 Adobe 把过多的精力集中在 Ajax 框架的开发上，忽略了基础性技术支持。而 Dreamweaver 所开 发的 Spry 框架虽然功能很强大，但是却无法与 jQuery、Prototype 等基础性 Ajax 框架相比较。 用 Adobe 官方解释，Spry技术是为 Web 设计师开发的 Ajax 框架，而不是为 Web 程序员开发的 基础性架构，但是它与 Ext JS 和 YUI 等框架相比，界面效果和交互性功能方面又显得比较粗糙 和弱小。升级到 Dreamweaver CS4 版本后，Adobe 开始把精力放在 JavaScript 核心技术支持上， 现在能够支持 JavaScri
3、pt 代码核心智能提示，并提供了几个实用工具。 坦率地讲，Dreamweaver 不是开发 JavaScript 的最佳工具，但是作为一款 Web 综合编辑环 境，对于广大初学者来说仍然是首选工具，如果结合 Dreamweaver 所附带的 Spry技术框架，相 信你能够轻松设计各种常用脚本功能。本章将详细讲解 Dreamweaver 如何支持 JavaScript 技术， 其中包括脚本服务、行为和 Spry技术框架。 1 1 Dreamweaver Dreamweaver 中的中的 JavaScriptJavaScript 在 Dreamweaver CS4 版本之前， Dreamweave
4、r 仅能够支持 JavaScript 代码的分色显示， 且功 能有限。升级到 Dreamweaver CS4 版本后，Adobe 开始意识到 JavaScript 在 Web 开发中的重要 性，并加大了对其基础性技术的支持，这主要包括三个方面的支持服务。 1.1 结构和逻辑的分离结构和逻辑的分离 在 Web 开发中，用户常常在页面内直接编写 JavaScript 脚本，有时甚至把 JavaScript 函数 以属性事件的形式绑到标签中，这样做不符合标准设计的规范（即倡导结构、表现和逻辑的分 离） ，同时也不便于 JavaScript 脚本管理和利用率，因此建议读者应养成在外部文件中开发 Jav
5、aScript 脚本并在外部文件中注册事件处理函数的习惯。 Dreamweaver 考虑到部分用户已经形成的习惯，提供了将 JavaScript 外置的工具。例如，在 下面这个简单文档中，我们在头部区域定义一个 JavaScript 函数，然后在超链接中绑定该函数 到 onclick 属性上，当单击超链接时，会自动触发函数，弹出一个提示信息对话框。 网页制作与网站开发从入门到精通 570 分离结构和逻辑 function hello() alert(“Hello,World!“) return false Hello World 这种把 HTML 和 JavaScript 混在一起编写的方法显
6、然不符合标准设计的原则。 Dreamweaver 提供了一个简单的工具， 它能够把HTML文档中的JavaScript代码自动放置在独立的JS文件中， 实现结构和逻辑的分离。例如，针对上面示例，在 Dreamweaver 中选择【命令】|【将 JavaScript 外置】命令，打开【将 JavaScript 外置】对话框，如图 1 所示。该对话框有两个选项：一个是 【仅将 JavaScript 外置】单选按钮，它能够把文档内包含的脚本放置到外部文件中，并引入该 文件。例如，在上面示例中，可以把标签包含的脚本转移到同名 js 文件中，并使用如下 标签导入外部 js 文件。 另一个是【将 Java
7、Script 外置并以非侵入方式进行附加】单选按钮，该单选按钮除了能够把文 档内包含的 JavaScript 脚本外置之外，还可以把标签内绑定的属性事件也移置到外部文件中，实现 真正意义上的结构和逻辑的分离。 这时Dreamweaver 会自动为绑定属性事件的标签定义一个ID 值， 你也可以修改该 ID 值，如图 2 所示。当然，使用这个单选按钮就无法再使用【行为】面板来查看 或编辑当前位于文档中的任何Dreamweaver 行为，不过它们在浏览器中仍会正常工作。 图 1 【将 JavaScript 外置】对话框 图 2 【将 JavaScript 外置】对话框 使用 Dreamweaver
8、开发 JavaScript 脚本 571 通过第二个单选按钮【将 JavaScript 外置并以非侵入方式进行附加】外置 JavaScript 逻辑之 后，Dreamweaver 会自动生成两个 js 文件，一个是基础性文件 SpryDOMUtils.js，它能够提供基 础的 DOM 操作方法，而另一个是文档内 JavaScript 脚本文件。在文档中导入这两个 js 文件， 代码如下： 在【将 JavaScript 外置】对话框内的列表框中显示了文档包含的所有 JavaScript 代码段（以 标签为分隔符） ，可以在该列表中选择要移置的代码段。经过完全分离的文档如下： 分离结构和逻辑 He
9、llo World 所生成的 2233.js 文件如下。而 SpryAssets/SpryDOMUtils.js 框架文件代码比较长，就不再 详细分析。 function hello()/原来的事件函数 alert(“Hello,World!“) return false Spry.Utils.addLoadListener(function() /注册事件函数 Spry.$(“#a1“).addEventListener(click, function(e) hello() , false) ) 1.2 JavaScript 智能化提示智能化提示 Dreamweaver 一直不重视对 Jav
10、aScript 技术的支持。如今作为一款比较成熟的 JavaScript 开 发 IDE（Integrated Development Environment，集成开发环境） ，Aptana 对 Dreamweaver 霸主地 位日益构成了威胁。从 CS4 版本开始，Dreamweaver 加快了对 JavaScript 核心功能的支持，提 供了如代码高亮和代码提示功能，虽然功能还比较弱，但是足以让用惯 Dreamweaver 的用户感 到满意。 例如，当在文档的标签中输入 window 时，会自动弹出如图 3 所示的提示列表框。 网页制作与网站开发从入门到精通 572 这与 HTML 和 C
11、SS 智能化提示一样，输入会感觉非常方便。 在提示列表框中，第一列表示成员的类型图标。例如， 表示方法， 表示关键字， 表 示属性， 表示事件属性， 表示框架类。第二列表示成员的名称。第三列表示成员所属对象。 第四列表示对象所属的接口模块。 图 3 JavaScript 智能提示列表 如果在输入代码时没有显示提示列表，可以选择【编辑】|【显示代码提示】命令，强制显 示代码提示，或者按快捷键（Ctrl+Space） ，由于在一般系统中默认使用 Ctrl+Space 组合键来切 换中英文输入状态，你可以在 Dreamweaver 中选择【编辑】|【快捷键】命令，来更改代码提示 的快捷键。 除此以外
12、，Dreamweaver 还提供了代码错误提示。当输入的代码出现错误时，则编辑窗口 顶端显示黄色的提示条，同时在代码左侧行号处标识显示，如图 4 所示。 图 4 JavaScript 错误提示 1.3 支持第三方支持第三方 Ajax 框架和技术库框架和技术库 借鉴 Aptana 经验，Dreamweaver 增加了对第三方 Ajax 框架和 JavaScript 技术库的支持 功能，如 Prototype、jQuery、YUI 和 ExtJS 等。例如，在文档中先导入 jQuery 框架，代码 如下： 然后在标签中调用 jQuery 的成员，此时 Dreamweaver 会自动弹出代码提示列表
13、， 使用 Dreamweaver 开发 JavaScript 脚本 573 如图 5 所示，这样就可以方便用户加快输入。不过 Dreamweaver 对第三方技术的支持还不是很 友好，存在很多不完善的地方。如果在输入中没有弹出提示，可以选择【编辑】|【显示代码提 示】命令或者按快捷键 Ctrl+Space，强制显示代码提示。 图 5 支持第三方 Ajax 框架和技术库 1.4 JavaScript 行为特效行为特效 早期的 JavaScript 技术并没有现在这么受重视，作为网页特效的一种开发工具，大家都认 为它是一种无足轻重的脚本语言， 所以 Dreamweaver 也仅把它视为一个小把戏，
14、 并提出了“行为” 概念，用来支持 JavaScript 开发的网页特效。 在 Dreamweaver 的【行为】面板中收集了十几个常用的网页控制效果，并通过一种可视化 操作的方法提供给用户进行快速应用。在菜单栏中选择【窗口】|【行为】命令，将打开【标签 检查器】面板， 【行为】仅作为该面板的一个选项卡而存在，如图 6 所示。在以前版本中， Dreamweaver 把【行为】作为独立的面板进行设计。而在 CS4 版本中，Dreamweaver 认为行为 和属性都应该属于标签的一部分（标签元素的成员） ，所以就把它们收容在一起。 在网页中选中一个标签对象（如） ，然后在【行为】选项卡中单击【增加
15、行为】图 标按钮（ ） ，从弹出的下拉菜单中选择一种行为（或者称为一种网页特效） ，如图 7 所示。 网页制作与网站开发从入门到精通 574 图 6 【行为】选项卡 图 7 增加行为 当选择一种行为之后，Dreamweaver 会自动打开一个对话框要求用户进行设置，如图 8 所 示。设置行为的详细参数之后，单击【确定】按钮，则在【行为】选项卡中就会列表显示已应 用到当前标签的行为名称，如图 9 所示。此时还可以设置行为的事件属性，在列表项左侧单击， 会弹出一个下拉列表，从中选择一个属性事件即可，如图 9 所示。 图 8 设置行为参数 图 9 设置事件属性 增加行为之后，我们可以在【代码】视图下
16、看到 Dreamweaver 自动增加的 JavaScript 特效 脚本： function MM_popupMsg(msg) /v1.0 alert(msg) Dreamweaver 所提供的行为其实就这么简单， 它原来是 JavaScript 网页特效的一种可视化操 作途径，其他行为的增加方式大同小异，这里就不再详细讲解。 1.5 JavaScript 代码片段代码片段 除了【行为】选项卡之外，Dreamweaver 还提供了一个比较实用的小工具，它就是【代码 片段】面板，如图 10 所示。如果简单了解 JavaScript，笔者个人认为【代码片段】面板的作用 要大于【行为】选项卡。因为它们都是 JavaScript 代码段，但是【代码片段】所包含的网页特 效更多，更为重要的是可以随时把自己使用的代码片段保存在【代码片段】中，其实用性要远 远大于【行为】选项卡所提供的几个固定的网页特效。当然，也可以借助插件扩展的方式从网 上获取更多的行为插件，但是行为显得复杂和僵硬。 例如，在【代码片段】面板中的 JavaScript
