没有合适的资源?快使用搜索试试~ 我知道了~
首页Dreamweaver基础教程—使用Dreamweaver开发JavaScript脚本.
资源详情
资源评论
资源推荐
使用 Dreamweaver 开发 JavaScript 脚本
569
使用Dreamweaver 开发JavaScript 脚本
我们已经介绍过 Web 前端设计的逻辑层概念,它主要集中在 JavaScript 技术上。相对于
HTML和CSS技术的完美支持,Dreamweaver对于JavaScript技术的支持可以说是姗姗来迟,
且比较有限。
早期的 Dreamweaver使用“行为”概念打包常用的 JavaScript 功能块,而对于 JavaScript 语言
本身的支持基本上没有,仅能够分色显示JavaScript 关键字。从Dreamweaver CS3版本开始,
Adobe 把过多的精力集中在 Ajax 框架的开发上,忽略了基础性技术支持。而 Dreamweaver所开
发的Spry 框架虽然功能很强大,但是却无法与jQuery、Pr ototype 等基础性Ajax框架相比较。
用 Adobe 官方解释,Spry 技术是为 Web 设计师开发的 Ajax 框架,而不是为 Web 程序员开发的
基础性架构,但是它与 ExtJS 和 YUI 等框架相比,界面效果和交互性功能方面又显得比较粗糙
和弱小。升级到 DreamweaverCS4 版本后,Adobe 开始把精力放在 JavaScript 核心技术支持上,
现在能够支持 JavaScript 代码核心智能提示,并提供了几个实用工具。
坦率地讲,Dreamweaver不是开发JavaScript的最佳工具,但是作为一款Web综合编辑环
境,对于广大初学者来说仍然是首选工具,如果结合 Dreamweaver所附带的 Spry 技术框架,相
信你能够轻松设计各种常用脚本功能。本章将详细讲解 Dreamweaver如何支持 JavaScript 技术,
其中包括脚本服务、行为和 Spry 技术框架。
1 Dreamweaver 中的 JavaScript
在 DreamweaverCS4 版本之前,Dreamweaver仅能够支持 JavaScript 代码的分色显示,且功
能有限。升级到 Dreamweaver CS4 版本后,Adobe 开始意识到 JavaScript 在 Web 开发中的重要
性,并加大了对其基础性技术的支持,这主要包括三个方面的支持服务。
1.1 结构和逻辑的分离
在Web开发中,用户常常在页面内直接编写JavaScript脚本,有时甚至把JavaScript函数
以属性事件的形式绑到标签中,这样做不符合标准设计的规范(即倡导结构、表现和逻辑的分
离),同时也不便于 JavaScript 脚本管理和利用率,因此建议读者应养成在外部文件中开发
JavaScript 脚本并在外部文件中注册事件处理函数的习惯。
Dreamweaver考虑到部分用户已经形成的习惯,提供了将 JavaScript 外置的工具。例如,在
下面这个简单文档中,我们在头部区域定义一个 JavaScript 函数,然后在超链接中绑定该函数
到 onclick 属性上,当单击超链接时,会自动触发函数,弹出一个提示信息对话框。
网页制作与网站开发从入门到精通
570
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttpequiv="ContentType"content="text/html;charset=utf8"/>
<title>分离结构和逻辑</title>
<scripttype="text/javascript"language="javascript">
functionhello(){
alert("Hello,World!");
returnfalse;
}
</script>
</head>
<body>
<ahref="#"onclick="hello();">HelloWorld</a>
</body>
</html>
这种把 HTML 和 JavaScript 混在一起编写的方法显然不符合标准设计的原则。Dreamweaver
提供了一个简单的工具, 它能够把 HTML 文档中的 JavaScript 代码自动放置在独立的 JS 文件中,
实现结构和逻辑的分离。例如,针对上面示例,在 Dreamweaver中选择【命令】|【将 JavaScript
外置】命令,打开【将JavaScript外置】对话框,如图1 所示。该对话框有两个选项:一个是
【仅将 JavaScript 外置】单选按钮,它能够把文档内包含的脚本放置到外部文件中,并引入该
文件。例如,在上面示例中,可以把<script>标签包含的脚本转移到同名 js 文件中,并使用如下
标签导入外部 js 文件。
<scriptsrc="222.js"type="text/javascript"></script>
另一个是【将JavaScript外置并以非侵入方式进行附加】单选按钮,该单选按钮除了能够把文
档内包含的JavaScript脚本外置之外,还可以把标签内绑定的属性事件也移置到外部文件中,实现
真正意义上的结构和逻辑的分离。 这时 Dreamweaver 会自动为绑定属性事件的标签定义一个 ID 值,
你也可以修改该ID值,如图2所示。当然,使用这个单选按钮就无法再使用【行为】面板来查看
或编辑当前位于文档中的任何 Dreamweaver 行为,不过它们在浏览器中仍会正常工作。
图 1 【将 JavaScript 外置】对话框 图 2 【将 JavaScript 外置】对话框
使用 Dreamweaver 开发 JavaScript 脚本
571
通过第二个单选按钮【将 JavaScript 外置并以非侵入方式进行附加】外置 JavaScript 逻辑之
后,Dreamweaver会自动生成两个 js 文件,一个是基础性文件 SpryDOMUtils.js,它能够提供基
础的DOM操作方法,而另一个是文档内JavaScript脚本文件。在文档中导入这两个js文件,
代码如下:
<scriptsrc="SpryAssets/SpryDOMUtils.js"type="text/javascript"></script>
<scriptsrc="223.js"type="text/javascript"></script>
在【将 JavaScript 外置】对话框内的列表框中显示了文档包含的所有 JavaScript 代码段(以
<script>标签为分隔符),可以在该列表中选择要移置的代码段。经过完全分离的文档如下:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttpequiv="ContentType"content="text/html;charset=utf8"/>
<title>分离结构和逻辑</title>
<scriptsrc="SpryAssets/SpryDOMUtils.js"type="text/javascript"></script>
<scriptsrc="223.js"type="text/javascript"></script>
</head>
<body>
<ahref="#"id="a1">HelloWorld</a>
</body>
</html>
所生成的 2233.js 文件如下。而 SpryAssets/SpryDOMUtils. js 框架文件代码比较长,就不再
详细分析。
functionhello(){//原来的事件函数
alert("Hello,World!");
returnfalse;
}
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 所示的提示列表框。
网页制作与网站开发从入门到精通
572
这与 HTML 和 CSS 智能化提示一样,输入会感觉非常方便。
在提示列表框中,第一列表示成员的类型图标。例如, 表示方法, 表示关键字, 表
示属性, 表示事件属性, 表示框架类。第二列表示成员的名称。第三列表示成员所属对象。
第四列表示对象所属的接口模块。
图 3 JavaScript 智能提示列表
如果在输入代码时没有显示提示列表,可以选择【编辑】|【显示代码提示】命令,强制显
示代码提示,或者按快捷键(Ctrl+Space),由于在一般系统中默认使用Ctrl+Space组合键来切
换中英文输入状态,你可以在 Dreamweaver中选择【编辑】|【快捷键】命令,来更改代码提示
的快捷键。
除此以外,Dreamweaver 还提供了代码错误提示。当输入的代码出现错误时,则编辑窗口
顶端显示黄色的提示条,同时在代码左侧行号处标识显示,如图 4 所示。
图 4 JavaScript 错误提示
1.3 支持第三方Ajax 框架和技术库
借鉴Apta na经验,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会自动弹出代码提示列表,
剩余17页未读,继续阅读
zhangdeqing555
- 粉丝: 31
- 资源: 64
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0