使用Javascript创建Behavior动作
在这个教程中,您将建立一个 Behavior 动作来检查访问者所使用的浏览器程序并且根据访问者的浏览器是 Netscape Navigator 或是 Microsoft Internet Explorer 自动跳转到一个相应的 URL。 您将建立这个新的 Behavior 动作并安装到 Dreamweaver 中。
Dreamweaver 内建了一些 JavaScript 解释程序和一些特殊的 API 函数,来创建 Behaviors 和其他的可扩展部分。要获得更多的关于 Javascript 解释程序以及必须的函数的信息可参照 Extending Dreamweaver 文档。
写一个确实可用的 JavaScript 程序
创建这个动作并加入 Behavior 函数
使用 HTML 表单创建一个界面
applyBehavior() 函数
inspectBehavior() 函数
在 Dreamweaver 中测试这个 Behavior 动作
这个动作的源代码
调试时的技巧
2.写一个确实可用的JavaScript
--------------------------------------------------------------------------------
每一个 Dreamweaver 动作,当用户选择了它的时候,就会插入一个和几个 JavaScript 函数到用户的 HTML 文档的 HEAD 部分。同时也加入了一个在用户文档的 BODY 部分选定元素调用这个主函数的事件句柄。
在创建一个 Behavior 动作的时候,从希望得到的结果倒推的工作方法时非常有用的。大多数情况下,您已经有了一个准备要转换为 Behavioe 动作的 Javascript 函数,首先确认您的函数已经具备了可接受用户输入的变量,如果可以的话,您还需在不同的浏览器或不同的工作平台上来测试它是否能正常的工作。
在这个教程中,您将写一个函数来根据用户使用的浏览器是 Netscape Navigator 还是 Microsoft Internet Explorer 来发送到一个不同的页面。
1 使用文本编辑器或者是 Dreamweaver,建立一个新文件并命名为 testBrowser.htm.
2 输入下列 HTML 以及 JavaScript:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function checkBrowserBrand(netscapeURL,explorerURL) {
if (navigator.appName == "Netscape") {
if (netscapeURL) location.href = netscapeURL;
}else if (navigator.appName == "Microsoft Internet Explorer") {
if (explorerURL) location.href = explorerURL;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Browser homepage..."
onClick= "checkBrowserBrand('http://home.netscape.com/download/prodinfonfs_1.html',
'http://www.microsoft.com/windows/ie/default.htm')">
</FORM>
</BODY>
</HTML>
注意这个 checkBrowserBrand() 函数接受两个参数: netscapeURL 和 explorerURL。这两个参数就是由用户来设置的值,它允许用户可以为每一次调用这个函数时设置不同的值,以使这个函数更具有通用性以及可适应性,而不是每次都指向同一个地址。
3 保存这个文件,在一个浏览器中打开它,例如 Netscape Navigator 或是 Microsoft Internet Explorer。
当您点击这个网页上的按钮时,浏览器将根据您使用的浏览器自动跳转到 或 Internet Explorer 的主页(因为我们在上面的例子中将 netscapeURL 和 explorerURL 两个参数的值设定的就是各自的主页) 。如果您使用的既不是 Navigator 也不是 Internet Explorer那么什么也不会发生。
3.创建这个动作文件并加入Behavior函数
--------------------------------------------------------------------------------
一旦您对这个函数在不同的浏览器的工作状况感到满意了并且决定了使用什么样的参数的时候,您就可以准备创建这个 Behavior 动作了。每一个 Behavior 动作并需拥有下列函数并且必须进行恰当的声明:
canAcceptBehavior()
behaviorFunction()
applyBehavior()
inspectBehavior()
As a shortcut, you'll work from a skeleton sample file and add to it to create a new action. The canAcceptBehavior() function in the sample file is already defined correctly, so you need not make any changes to it.
用这个例子来建立一个新的动作文件:
1 在浏览器中打开这个文件并选择文件〉另存为。将这个文件命名为 Check Browser Brand.htm 并保存在 Dreamweaver 文件夹下的 Configuration/Behaviors/Actions 文件夹中。
2 在文本编辑器中打开 Check Browser Brand.htm
3 从您早先建立的 textBrowser.htm 中复制 checkBrowserBrand() 函数, 并粘贴到这样的注释下 //Your behavior function goes here.
4 建立 behaviorFunction() 函数以返回函数的名称 - checkBrowserBrand,如下所示:
function behaviorFunction(){
//Return the name of your function here
return "checkBrowserBrand";
}
5 保存这个文件。
4.使用HTML表单建立动作的界面
--------------------------------------------------------------------------------
接下来,您将使用 HTML 表单为这个动作创建一个界面,当用户应用或修改这个动作时 Dreamweaver 将用一个对话框的形式显示这个界面。
这个 checkBrowserBrand() 函数接收两个参数以确定当访问者的浏览器是 Netscape Navigator 或是 Microsoft Internet Explorer 时自动跳装的地址,因此您的界面必须拥有两个文字域(Text Fields )来接收用户的输入。
创建动作的界面并将光标放在第一个文字域中
1 在 Dreamweaver 中打开 Check Browser Brand.htm
2 选择 Window > Objects 菜单打开 Objects 面板,从 Objects 面板顶部弹出的菜单中选择 Forms。
3 单击 Insert Form 按钮插入一个表单,在属性检查器(Property inspector)最左边的文字栏中输入 theForm (给表单命名为 theForm)。
4 在您刚才插入的表单中输入:Go to this URL if the browser is Netscape Navigator。然后插入一个文字域。
5 将这个文字域命名为 nsURL,将它的宽度(Char Width )设置为 50 。
6 按下 Shift + 回车键,输入:Go to this URL if the browser is Microsoft Internet Explorer
7 插入一个命名为 ieURL 的文字域,将它的宽度(Char Width )设置为 50 。
8 在文档窗口的左下方的标签选择器中选择 <body>,然后选择 Window > Behaviors 菜单打开 Behavior 检查器。
9 在 Behavior 检查器中单击 “+” 按钮,在弹出的菜单中选择 Call Javascript
10 在弹出的对话框中输入 initializeUI() 然后单击 OK。
11 选择 Window > HTML 菜单打开 HTML 检查器,卷动滚动条到 initializeUI() 处,输入下列内容:
//将光标放置在第一个文字域内并选定其中的内容
document.theForm.nsURL.focus();
document.theForm.nsURL.select();
12 保存这个文档.
5.applyBehavior()函数
--------------------------------------------------------------------------------
接下来,您将使用 HTML 表单为这个动作创建一个界面,当用户应用或修改这个动作时 Dreamweaver 将用一个对话框的形式显示这个界面。
这个 checkBrowserBrand() 函数接收两个参数以确定当访问者的浏览器是 Netscape Navigator 或是 Microsoft Internet Explorer 时自动跳装的地址,因此您的界面必须拥有两个文字域(Text Fields )来接收用户的输入。
创建动作的界面并将光标放在第一个文字域中
1 在 Dreamweaver 中打开 Check Browser Brand.htm
2 选择 Window > Objects 菜单打开 Objects 面板,从 Objects 面板顶部弹出的菜单中选择 Forms。
3 单击 Insert Form 按钮插入一个表单,在属性检查器(Property inspector)最左边的文字栏中输入 theForm (给表单命名为 theForm)。
4 在您刚才插入的表单中输入:Go to this URL if the browser is Netscape Navigator。然后插入一个文字域。
5 将这个文字域命名为 nsURL,将它的宽度(Char Width )设置为 50 。
6 按下 Shift + 回车键,输入:Go to this URL if the browser is Microsoft Internet Explorer
7 插入一个命名为 ieURL 的文字域,将它的宽度(Char Width )设置为 50 。
8 在文档窗口的左下方的标签选择器中选择 <body>,然后选择 Window > Behaviors 菜单打开 Behavior 检查器。
9 在 Behavior 检查器中单击 “+” 按钮,在弹出的菜单中选择 Call Javascript
10 在弹出的对话框中输入 initializeUI() 然后单击 OK。
11 选择 Window > HTML 菜单打开 HTML 检查器,卷动滚动条到 initializeUI() 处,输入下列内容:
//将光标放置在第一个文字域内并选定其中的内容
document.theForm.nsURL.focus();
document.theForm.nsURL.select();
12 保存这个文档.
6.inspectBehavior()函数
--------------------------------------------------------------------------------
当用户重新打开这个动作来查看或修改设置时,表单内将显示以前所设定的值。inspectBehavior() 函数就是负责从 applyBehavior() 函数返回的字串中提取参数,并将这些参数重新填入表单域。只要用户重新打开一个已使用的动作,Dreamweaver 都会自动调用 inspectBehavior() 函数。
我们有很多种方法来从 applyBehavior() 函数返回的字串中提取参数;最简单的方法是利用 Dreamweaver 内建的 Javascript API 函数 dreamweaver.getTokens()。这个函数接收两个参数:applyBehavior() 字串和一个分割符列表。它返回一个“标记”数组--字串中不包括分割符的部分。
从 applyBehavior() 函数返回的字串中提取参数并重新填入表单域
1 使用 dreamweaver.getTokens() 函数解析函数调用的字串中有意义的部分
例如 applyBehavior() 返回的字串如下:
checkBrowserBrand('http://home.netscape.com/','http://www.microsoft.com/')
其中的左右括号、单引号和逗点没有实际意义,所以将它们作为分割符。
var argArray = getTokens(fnCall,"()',");
现在,这个变量 argArray 就是一个含有三个元素的数组了,它们是:: checkBrowserBrand、 http://home.netscape.com/、 和 http://www.microsoft.com/.
2 将这两个 URL 地址分配给两个不同的变量。因为我们已经使用了 escape() 函数对这两个 URL 地址进行了编码,因此我们需要再使用 unescape() 函数对这两个 URL 地址进行解码。
var nsURL = unescape(argArray[1]);
var ieURL = unescape(argArray[2]);
这个数组中的第一个元素 argArray[0] 包含的是函数名称 checkBrowserBrand,而它已不需要填充到表单中了。
3 设置表单域的值等于这两个 URL 地址。如下:
document.theForm.nsURL.value = nsURL;
document.theForm.ieURL.value = ieURL;
完整的 inspectBehavior() 函数如下:
function inspectBehavior(msgStr){
var argArray = getTokens(msgStr,"()',");
var nsURL = unescape(argArray[1]);
var ieURL = unescape(argArray[2]);
document.theForm.nsURL.value = nsURL;
document.theForm.ieURL.value = ieURL;
}
7.在Dremweaver中测试这个Behavior
--------------------------------------------------------------------------------
先别急着发布这个 Behavior ,我们还需要进一步的测试这个动作,以确认它能正常的工作,并且不存在一些排版或逻辑上的错误。
测试
1 启动 Dreamweaver
2 创建一个新文档,然后插入一个表单以及一个按钮
3 在属性检查器中将这个按钮的标签该为“浏览器转向”
4 选定这个按钮,打开 Behavior 检查器
5 从 Action 弹出菜单中选择 Check Browser Brand
6 在每一个文字域中都输入一个不同的 URL 地址
这时在 Behavior 检查器窗口的右边应该显示 Check Browser Brand ,左边则应该是 onClick,如果此时显示的不是 onClick,在 Events 下拉菜单中选择 onClick。
7 在 Behavior 检查器中双击动作的名称,您先前输入的 URL 地址应该出现在正确的位置上。
如果此时没有显示这两个 URL 地址或显示不正确,那么就是 inspectBehavior() 函数中存在着错误,用文本编辑器打开并修改其中的代码。
8 单击 OK
9 按下 F12 和 Ctrl+F12 分别在您的主、从浏览器中打开这个网页。单击“浏览器转向”按钮,看看它是否会转向正确的页面。
8.源代码
--------------------------------------------------------------------------------
下面就是这个动作的完整源代码:
复制内容到剪贴板
代码:
9.调试Behavior动作的技巧
--------------------------------------------------------------------------------
如果在启动 Dreamweaver 或者在准备应用一个 Behavior 动作时显示一个错误消息,那么您的 Behavior 可能含有 Javascript 错误。
如果错误非常严重(例如:没有正确的声明 behaviorFunction() 或 applyBehavior() 函数,或者两个文件使用了同一个动作名称),Dreamweaver 在启动时就会显示一个错误消息并且在动作(Action)下拉菜单中也不会显示这个动作的菜单项。这时您就需要修正这个错误并重新启动 Dreamweaver 以重新装入这个动作。
如果不是 behaviorFunction() 和 applyBehavior() 函数出错,那么在动作菜单中将会显示这个动作的菜单项,但您在动作菜单中选择它或者在对话框中输入参数时 Dreamweaver 显示一个错误消息。这时您就可以修改这个脚本文件然后重新选择它,并且不需要重新启动 Dreamweaver。
不需要重新启动 Dreamweaver 调试脚本的方法
1、 在文本编辑器中打开您的动作文件,保存所作的修改。
2、 在 Behavior 检查器中加入这个动作,输入一些值,单击 OK。然后单击(-)按钮马上删除您刚才添加的动作。
3、 再次加入这个动作,这时将装入最新的版本。
您同样也会发现 alert() 方法对于帮助我们找到错误所在非常有用。例如:如果 inspectBehavior() 函数可能有错,我们可以添加几个 alert 来显示变量的值: