使用Dreamweaver开发JavaScript脚本
我们已经介绍过 Web 前端设计的逻辑层概念，它主要集中在 JavaScript 技术上。相对于 HTML 和 CSS 技术的完美支持，Dreamweaver 对于 JavaScript 技术的支持可以说是姗姗来迟， 且比较有限。
早期的Dreamweaver 使用“行为”概念打包常用的JavaScript功能块，而对于JavaScript语言 本身的支持基本上没有，仅能够分显示 JavaScript 关键字。从 Dreamweaver CS3 版本开始， Adobe把过多的精力集中在Ajax框架的开发上，忽略了基础性技术支持。而Dreamweaver 所开 发的 Spry框架虽然功能很强大，但是却无法与 jQuery、Prototype等基础性 Ajax 框架相比较。 用Adobe官方解释，Spry技术是为Web设计师开发的Ajax框架，而不是为Web程序员开发的 基础性架构，但是它与Ext JS和YUI等框架相比，界面效果和交互性功能方面又显得比较粗糙 和弱小。升级到Dreamweaver CS4版本后，Adobe开始把精力放在JavaScript核心技术支持上， 现在能够支持JavaScript代码核心智能提示，并提供了几个实用工具。
坦率地讲，Dreamweaver 不是开发 JavaScript 的最佳工具，但是作为一款 Web 综合编辑环 境，对于广大初学者来说仍然是首选工具，如果结合Dreamweaver 所附带的Spry技术框架，相 信你能够轻松设计各种常用脚本功能。本章将详细讲解Dreamweaver 如何支持JavaScript技术， 其中包括脚本服务、行为和Spry技术框架。
1 Dreamweaver 中的 JavaScript
在Dreamweaver CS4版本之前，Dreamweaver 仅能够支持JavaScript代码的分显示，且功 能有限。升级到Dreamweaver CS4版本后，Adobe开始意识到JavaScript在Web开发中的重要 性，并加大了对其基础性技术的支持，这主要包括三个方面的支持服务。
1.1 结构和逻辑的分离
在 Web 开发中，用户常常在页面内直接编写 JavaScript 脚本，有时甚至把 JavaScript 函数 以属性事件的形式绑到标签中，这样做不符合标准设计的规范（即倡导结构、表现和逻辑的分 离），同时也不便于 JavaScript 脚本管理和利用率，因此建议读者应养成在外部文件中开发 JavaScript脚本并在外部文件中注册事件处理函数的习惯。
Dreamweaver 考虑到部分用户已经形成的习惯，提供了将JavaScript外置的工具。例如，在 下面这个简单文档中，我们在头部区域定义一个 JavaScript 函数，然后在超链接中绑定该函数 到onclick属性上，当单击超链接时，会自动触发函数，弹出一个提示信息对话框。
569
570 <html xmlns="/1999/xhtml">
<head>
<meta http­equiv="Content­Type" content="text/html; charset=utf­8" /> <title>分离结构和逻辑</title>
<script type="text/javascript" language="javascript">
function hello(){
alert("Hello,World!");
return false;
}
</script>
</head>
<body>
jquery在线教程交流
<a href="#" onclick="hello();">Hello World</a>
</body>
</html>
这种把HTML 和JavaScript 混在一起编写的方法显然不符合标准设计的原则。
Dreamweaver 提供了一个简单的工具， 它能够把HTML 文档中的JavaScript 代码自动放置在独立的JS 文件中， 实现结构和逻辑的分离。例如，针对上面示例，在Dreamweaver 中选择【命令】|【将JavaScript 外置】命令，打开【将 JavaScript 外置】对话框，如图 1 所示。该对话框有两个选项：一个是
【仅将
JavaScript 外置】单选按钮，它能够把文档内包含的脚本放置到外部文件中，并引入该
文件。例如，在上面示例中，可以把<script>标签包含的脚本转移到同名js 文件中，并使用如下 标签导入外部js 文件。
<script src="22­2.js" type="text/javascript"></script>
另一个是【将 JavaScript 外置并以非侵入方式进行附加】单选按钮，该单选按钮除了能够把文 档内包含的 JavaScript 脚本外置之外，还可以把标签内绑定的属性事件也移置到外部文件中，实现 真正意义上的结构和逻辑的分离。 这时Dreamweaver 会自动为绑定属性事件的标签定义一个ID 值， 你也可以修改该 ID 值，如图 2 所示。当然，使用这个单选按钮就无法再使用【行为】面板来查看 或编辑当前位于文档中的任何Dreamweaver 行为，不过它们在浏览器中仍会正常工作。
图1 【将JavaScript 外置】对话框 图2 【将JavaScript 外置】对话框
通过第二个单选按钮【将JavaScript外置并以非侵入方式进行附加】外置JavaScript逻辑之 后，Dreamweaver 会自动生成两个js文件，一个是基础性文件SpryDOMUtils.js，它能够提供基 础的 DOM 操作方法，而另一个是文档内 JavaScript 脚本文件。在文档中导入这两个 js 文件， 代码如下：
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script> <script src="22­3.js" type="text/javascript"></script>
在【将JavaScript外置】对话框内的列表框中显示了文档包含的所有JavaScript代码段（以 <script>标签为分隔符），可以在该列表中选择要移置的代码段。经过完全分离的文档如下： <html xmlns="/1999/xhtml">
<head>
<meta http­equiv="Content­Type" content="text/html; charset=utf­8" /> <title>分离结构和逻辑</title>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script> <script src="22­3.js" type="text/javascript"></script>
</head>
<body>
<a href="#" id="a1">Hello World</a>
</body>
</html>
所生成的22­33.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 一直不重视对JavaScript技术的支持。如今作为一款比较成熟的JavaScript开 发IDE（Integrated Development Environment，集成开发环境），Aptana对Dreamweaver 霸主地 位日益构成了威胁。从 CS4 版本开始，Dreamweaver 加快了对 JavaScript 核心功能的支持，提 供了如代码高亮和代码提示功能，虽然功能还比较弱，但是足以让用惯Dreamweaver 的用户感 到满意。
例如，当在文档的<script>标签中输入 window时，会自动弹出如图 3所示的提示列表框。
571
572
这与HTML 和CSS 智能化提示一样，输入会感觉非常方便。 在提示列表框中，第一列表示成员的类型图标。例如， 表示方法， 表示关键字， 表 示属性， 表示事件属性， 表示框架类。第二列表示成员的名称。第三列表示成员所属对象。
第四列表示对象所属的接口模块。 图3  JavaScript 智能提示列表
如果在输入代码时没有显示提示列表，可以选择【编辑】|【显示代码提示】命令，强制显 示代码提示，或者按快捷键（Ctrl+Space ），由于在一般系统中默认使用 Ctrl+Space 组合键来切 换中英文输
入状态，你可以在Dreamweaver 中选择【编辑】|【快捷键】命令，来更改代码提示 的快捷键。
除此以外，Dreamweaver 还提供了代码错误提示。当输入的代码出现错误时，则编辑窗口 顶端显示黄的提示条，同时在代码左侧行号处标识显示，如图4
所示。
图4  JavaScript 错误提示
1.3 支持第三方 Ajax 框架和技术库
借鉴 Aptana 经验，Dreamweaver 增加了对第三方 Ajax 框架和 JavaScript 技术库的支持 功能，如 Prototype 、jQuery 、YUI 和 ExtJS 等。例如，在文档中先导入 jQuery 框架，代码 如下：<script type="text/javascript" language="javascript" src="images/jquery­
1.2.6.js"></script>
然后在<script>标签中调用 jQuery 的成员，此时 Dreamweaver 会自动弹出代码提示列表，
573 如图5所示，这样就可以方便用户加快输入。不过Dreamweaver 对第三方技术的支持还不是很
友好，存在很多不完善的地方。如果在输入中没有弹出提示，可以选择【编辑】
|【显示代码提 示】命令或者按快捷键
Ctrl+Space ，强制显示代码提示。
图5 支持第三方 Ajax 框架和技术库
1.4 JavaScript 行为特效
早期的 JavaScript 技术并没有现在这么受重视，作为网页特效的一种开发工具，大家都认 为它是一种无足轻重的脚本语言， 所以Dreamweaver 也仅把它视为一个小把戏， 并提出了“行为” 概念，用来支持JavaScript 开发的网页特效。
在Dreamweaver 的【行为】面板中收集了十几个常用的网页控制效果，并通过一种可视化 操作的方法提供给用户进行快速应用。在菜单栏中选择【窗口】|【行为】命令，将打开【标签 检查器】面板，【行为】仅作为该面板的一个选项卡而存在，如图 6 所示。在以前版本中， Dreamweaver 把【行为】作为独立的面板进行设计。而在 CS4 版本中，Dreamweaver 认为行为 和属性都应该属于标签的一部分（标签元素的成员），所以就把它们收容在一起。 在网页中选中一个标签对象（如<body>），
然后在【行为】选项卡中单击【增加行为】图
标按钮（ ）
，从弹出的下拉菜单中选择一种行为（或者称为一种网页特效），如图7所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。