|
第十章 使用Microsoft脚本编辑器 脚本语言是一种简单的描述语言，能够被浏览器解释执行。前面曾经提到过，使用HTML语言存在诸多的局限，例如，它不能在屏幕上显示当前日期，不能进行简单的计算，不能弹出消息框，但是利用脚本语言却能够克服HTML语言中的这些不足，从而进行良好的人机交互。 10. 1 FrontPage2000中脚本语言的应用 FrontPage2000提供了良好的编制脚本程序的工具（Script Wizard），使用Script Wizard可以很容易地在一个HTML文档插入VBScript程序。Microsoft Script Editor用于在HTML文档和Active Server页（.asp）文本内查看和编辑HTML标记。还可以在文件中添加诸如Visual Basic Scripting Edition（VBScript）或JavaScript之类的脚本，并调试该脚本。 下面我们将详细说明如何在FrontPage2000中使用Script Wizard。 一、安装Scrip Wizard 我们需特别注意这一步的内容。因为FrontPage2000的HTML语言编辑器和以前的版本有着较大的区别。 首先，在安装Script Wizard的时候，我们必须安装“Office 工具”下的“HTML语言编辑器”，并将这一部分内容全部选定。只有安装了“Office 工具”下的“HTML语言编辑器”，我们才能在FrontPage2000中使用Script Wizard。 二、脚本编辑器的使用 当我们想在网页上插入一个按钮或其他控件的时候，可以先选中这个控件，然后在“工具”菜单中选择“宏…”命令，在“宏…”子菜单下选择“Microsoft脚本编辑器”。此时出现如图10-1所示的界面。 这个脚本编辑器的功能非常强大，是先前的版本所不能比拟的。首先在界面上方是菜单和工具栏。这里的菜单和工具栏都是一些标准格式的，用过Visual Basic和Visual C++的人对此都不会陌生。 在脚本编辑器中有好几个窗口，下面我们分别介绍这些窗口。 l 工具窗口 工具窗口由应用程序及其加载项定义，列于“视图”菜单中。可显示、隐藏、停靠或链接工具窗口，或将其移动到应用程序区域以外并在另一个监视器中查看它。 l 文档窗口 文档窗口是在打开或创建文件或其他项目时动态创建的。当文档窗口可见时，其中的文件被认为是打开的，我们可以对它进行编辑。关闭文档窗口也将关闭该文件。 l 链接窗口 我们可通过将一个工具窗口拖动到另一工具窗口上将各工具窗口链接到一起。
图10-1 “脚本编辑器”窗口 l 多监视器 在支持多监视器的平台上，可将一个窗口拖到其他的监视器上。我们可将不同的窗口放到希望放置它们的不同监视器上，窗口的位置将得以保存。 l 全屏模式 全屏模式使活动文档窗口成为全屏，隐藏掉主应用程序窗口的全部装饰，包括工具栏、任务栏、全部工具窗口、状态栏和Windows的任务栏。 1．工具栏窗口 左边的窗口是工具栏，一共有三个选项卡。下面我们分别加以介绍。 l 首先我们要介绍的是“工具箱”选项卡，如图10-2所示。 工具箱提供了很多现成控件给我们选择。和在Visual Basic中的使用方法一样，我们只要选中某个控件，并在这个控件图标上用鼠标左键双击，该按钮就会出现在中间的编辑窗口中。 我们要注意的是，只有当中间的编辑窗口处在“源代码”视图时，本工具箱中的控件才能被选择。 l 第二个是“脚本大纲”选项卡，如图10-3所示。
其中显示了我们的控件对应的事件和脚本程序。可以用鼠标左键单击前面有“+”的目录，在它们的下级文件夹中查找所对应的事件。 事件的概念我们在前面已经介绍过，我们只要在其中选择所需要的事件就可以了。例如我们选择了onclick的事件，则单击这个按钮时，就会触发所对应的事件 。 l “HTML大纲”选项卡
在图中，我们能清楚地看到该网页中采用了三个按钮控件以及在脚本中的各自位置。 “HTML大纲”提供了网页HTML元素的概述以及在这些元素之间进行导航的便捷方式。在“HTML大纲”窗口中，我们可以实现以下三项功能： （1）在页面的正文部分显示元素的树视图。
（3）单击“HTML大纲”窗口中的元素以在HTML编辑器中选择该元素。 “HTML大纲”窗口将显示文档中常用的大多数元素。为避免使视图过于复杂，并不是每个可能用到的元素都显示。如表10-1所示，完整地列出了可在“HTML大纲”窗口中出现的元素。
表10-1 HTML大纲的元素
仅当对象位于页面的<BODY>和</BODY>标记之间时，它们才在“HTML”大纲窗口中出现。树视图利用文档的分层结构来显示对象。例如，若表格在窗体中出现，则“HTML大纲”窗口在放置表格时将其处理为窗体节点下方的一个节点。 此外，当我们单击“HTML大纲”中的对象名称时，HTML编辑器中的插入点移动到该对象。若“属性”窗口可见，则显示该对象的属性。 2．编辑窗口 编辑窗口主要是用来编辑和设计各种控件的界面。该窗口也有三种视图。 （1）源代码视图 显示对应于每一个控件的HTML语句。当我们在设计界面上安排好了各个控件之后，单击该视图，就会显示出完成HTML源代码。 （2）设计视图 这个页面很类似于Visual Basic的窗体设计窗口。我们将选择的控件放到该窗口中，然后在该窗口中编辑这个控件的大小、外观和颜色，并且编辑这个控件的相关属性。在这个窗口中不仅显示了控件的外观，而且也显示了该控件的一些基本的属性。 （3）快速视图 这个视图类似于一个浏览器窗口，主要的作用是用来观察我们所选的控件的布局和属性是否符合要求。
和大部分的微软公司出品的编辑平台一样，如图10-5所示的该窗口是用来显示各级文件以及脚本编辑器正在编辑的文件的结构。通过此窗口我们可以轻松地了解工程的框架结构，并可以在该窗口中选择要加以修改的文件和控件。 工程资源管理器的窗口如图10-5所示。该窗口显示全部工程及每个工程中所包含的所有项目的列表。我们可以选择某个工程以使其处于活动状态。 图10-5 工程资源管理器 4．属性窗口
图10-6 属性窗口 三、脚本调试工具 当我们在脚本编辑器中设计和编辑完一个程序脚本之后，接下来要做的工作就是调试这个脚本程序。Microsoft 脚本编辑器作为一个成熟的脚本编辑器，为我们提供了完善的调试工具和调试手段。 1．调试工具的功能 我们将定位并排除应用程序中错误的过程称为“调试”。开发环境所支持的语言还包括断点、中断表达式、监视表达式以及显示变量和属性值的能力。许多开发环境所支持的语言还包括特殊的调试功能，如编辑并继续功能，设置下一条要执行的语句以及当应用程序处于中断模式时进行过程测试。 调试工具的主要作用在于： l 显示编译错误 l 显示运行时错误 l 显示逻辑错误 l 用户接口的外观 l 变量和表达式的值 l 活动过程调用 2．调试窗口 在调试应用程序时，我们将用到下面四个窗口： 1）“立即”窗口：用于输入要由开发语言计算或执行的表达式。 2）“监视”窗口：监视窗口显示当前的监视表达式。 3）“局部”窗口：显示当前过程范围内任何变量的值。 4）“输出”窗口：显示运行时的状态信息。 3．设置断点 我们要控制应用程序的执行，可设置断点，将断点放在应该暂停代码执行并调用调试器的位置。可在设计阶段或运行阶段设置或移除断点。 可以通过下面所介绍的方法设置或移除断点： l 在“文本编辑器”窗口中，将插入点放到我们要设置或移除断点的代码行并在所选内容页边距中单击。 l 从“调试”菜单中选择“插入断点”。 l 从“调试”菜单中选择“显示断点”，以显示“断点”对话框，在这里可以移除断点。 4．启动中断模式 中断模式会暂停应用程序的执行并给出应用程序操作条件，变量设置将得以保留，因此，我们可以分析应用程序的当前状态并输入影响应用程序运行方式的变量。当应用程序处于中断模式时，我们可以： l 修改应用程序的代码。 l 观察应用程序接口的条件。 l 确定调用了哪些活动过程。 l 监视变量的值及表达式。 l 更改变量的值。 l 查看或控制应用程序下一步将要执行的语句。 l 立即运行语句。 l 手动控制应用程序的执行流程。 我们要在运行时进入中断模式，可以从“调试”菜单中选择“中断”命令，此时可能需要在应用程序空闲（处理两个事件之间）时中断应用程序的执行。遇到这种情况时，应用程序将在运行下一代码时停止执行。 5．分步调试 若调试到代码中调用另一个过程的断点时，可以进入/跟踪该过程或运行/单步运行该过程，并在下一行停止。我们在任何点都可以跳转到当前过程的结尾（跳出）并继续执行该应用程序的其余部分。 我们可能需要分步执行代码并追踪代码执行，因为哪条语句先执行并不总是明确的。可以使用“调试”菜单中“跟踪”、“单步”、“跳出”和“运行到光标处”命令以跟踪代码执行。 6．调试工具栏 最后，让我们来看一看脚本编辑器调试工具栏，这是在调试程序时一个不可缺少的工具。调试工具栏包括在调试代码过程中经常使用的某些菜单命令的快捷按钮。表10-2是对调试工具栏上的按钮的说明。 表10-2 调试工具栏说明
7．结束调试 我们可以以下列方式之一来结束调试工作。 l 从“调试”菜单中选择“继续”以进入运行模式并从当前的代码行继续执行应用程序。 l 从“调试”菜单中选择“重新开始”以终止调试。 l 从“调试”菜单中选择“结束”命令以关闭应用程序，并返回到设计模式。 尽管我们可以输入改正信息，并在终止执行的同一行继续执行程序，但在终止调试工作期并重新开始之前，任何更改都将被忽略。 四、一个例子 下面我们来看一个实际的例子，看一看如何使用脚本编辑器来编辑一个网页。这个例子的功能是：先输入一行文本，当我们单击一个按钮时，再将这个文本显示出来。我们给这个程序起名VBS.HTM。 首先，在工具框中选择两个按钮控件放到设计视图中。 在编辑窗口中改变这两个按钮的标签，分别显示为“单击此处输入文本”和“单击此处显示文本”。 切换到源代码视图，在左边单击“脚本大纲”标签，选择这两个按钮的触发事件分别是botton1_click和botton2_click，对应于鼠标的单击事件。 可以看到在源代码中已经添加了两个子程序。在Sub button1_onclick子程序中的代码如下： Sub button1_onclick Inputstr=inputbox("请输入文本") End Sub 在Sub button2_onclick子程序中的代码如下： Sub button2_onclick MsgBox("我们输入文本是"&"inputstr&"!") End Sub 在“文件”菜单中选择“保存”命令，并在弹出的对话框中输入该文件的文件名vbs.html。 单击“运行”菜单，此时出现了如图10-7所示的界面。
图10-7 “vbs.htm”运行界面 此时，我们单击第一个按钮，出现一个文本输入对话框。我们在文本框中输入文本“this is a test program!”，如图10-8所示。
图10-8 输入文本
文本输入完毕之后，单击对话框的“确定”按钮，此时该对话框消失。我们单击第二个按钮，将会弹出一个消息来显示刚才输入的文本。如图10-9所示。
图10-9 “vbs.htm”运行结果
下面所列出的是该程序的源代码，我们可以在编辑窗口中的“源代码”页面中看到该代码。
<HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft FrontPage 4.0"> <TITLE></TITLE> <SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript> <!-- inputstr="" Sub button1_onclick inputstr=inputbox("请输入文本") End Sub Sub button2_onclick MsgBox("我们输入的文本是 "&inputstr&" !") End Sub --> </SCRIPT> </HEAD> <BODY> <INPUT type="button" value="单击此处输入文本" id=button1 name=button1> <P><INPUT id=button2 name=button2 type=button value=单击此处显示文本></P> </BODY> </HTML> 我们介绍的这个例子比较简单，但是我们可以通过这个例子了解和掌握脚本编辑器的使用方法。 小 结 本章介绍了Microsoft脚本编辑器的使用，我们在使用脚本语言时，要用脚本编辑器来进行编辑，因此我们要求掌握脚本编辑器的窗口的组成、工具的使用、脚本的调试等。 习 题 1．如何在FrontPage2000中安装脚本编辑器？ 2．脚本编辑器中包含哪些窗口？各窗口的作用是什么？ 3．在编辑窗口中包含有哪几种视图？ 4．如何进行脚本的调试？
|
|
|
