客户端脚本编程.ppt
《客户端脚本编程.ppt》由会员分享,可在线阅读,更多相关《客户端脚本编程.ppt(116页珍藏版)》请在三一办公上搜索。
1、第5章 客户端脚本编程,关于客户端脚本,在网页中嵌入的脚本有两种类型:一种是在服务器端执行的,由服务器将脚本执行的结果传递给浏览器,称为服务器端脚本。例如,要读取服务器上某个数据库中的一部分内容,这样的程序代码需要在服务器上执行。另外一种是在客户端浏览器上执行的,它是由服务器将脚本的内容传送给浏览器,再由浏览器执行,称为客户端脚本。例如,让一幅图片窗口中不断移动。,不同脚本处理方式示意,html文档,服务器端脚本,客户端脚本,html文档,服务器端,浏览器端,客户端脚本,本章内容,浏览器支持的对象模型 窗口对象的使用 文档对象的使用 常用事件的处理 表单元素的使用,本章目录,5.3 控制浏览器
2、窗口,5.2 浏览器对象模型,5.3.1 与用户交互,5.3.2 查阅当前URL,5.3.3 使用定时器,5.4 控制Web页,5.5 常见事件处理,5.3.5 打开一个新窗口,5.3.4 使用窗口的History列表,5.3.6 窗口的事件控制,5.1 客户端脚本,5.6 表单处理,5.7 应用举例,本章小结,习题,5.1 客户端脚本,由于客户端提供的都是以对象的形式出现的,所以在这里先介绍以下几个概念。1对象 2事件 3事件过程,1对象,浏览器上显示的每个文档都可以看作一个对象,显示该文档的窗口也可以看作一个对象,组成每一个网页的各种元素也可以看成是一个对象。,1对象,每个对象都有一些属性
3、、事件和方法。对象的属性用于体现对象的表现形式和操作特性。在浏览器所支持的对象模型中,各种对象中往往包含一些子对象,对于子对象的使用是通过对它的相应属性的操作来实现。每个对象可以接受一些事件,如鼠标的单击、聚焦等。每个对象也有一些方法,用于操作该对象或其中的子对象。,2事件,对于网页中的各种对象,能响应一些事件,编写网页时通过编写事件过程就可以控制用户的操作。如当用户单击表单中的按钮时,引发该按钮的单击事件。,3事件过程,当某一事件发送时,系统能自动执行事先编写好的程序过程,这样的程序过程称为事件过程可以使用以下三种方式来为某个对象指出当某一事件发生时该执行的程序指定名称的事件过程 在对象标签
4、中直接嵌入执行代码 指定脚本所对应的事件过程,指定名称的事件过程,即定义一个具有特殊名称的过程,它与对象相联系,形式为:对象名称_事件名称例如:B1_onClick表示对于对象B1,当单击事件(Click)发生时执行该过程。,指定名称的事件过程,网页内容,显示按钮,指定名称的事件过程,浏览结果双击网页文件时首先显示如左图单击其中按钮时,显示如右图提示,单击这里测试一下,在对象标签中直接嵌入执行代码,当执行的代码较短时,可以不定义单独的过程,而直接把要执行的语句嵌入作为事件名称的属性。网页改为如下形式:,单击这里测试一下,指定脚本所对应的事件过程,指使用标签的for属性指出脚本所面向的对象,而用
5、event属性指出引用脚本的事件。网页形式如下:MsgBox 你单击了这个按钮。,单击这里测试一下,返回本章目录,5.2 浏览器对象模型,VBScript和其它脚本语言一样,可以方便地访问浏览器所支持的对象模型中的各种对象。,窗口(WINDOW),超链接(LINK),框架(FRAME),历史(HISTORY),文档(DOCUMENT,脚本(script),导航器(NAVIGATOR,位置(LOCATION),表单(form),元素(ELEMENT,页内链接(ANCHOR),5.2 浏览器对象模型,浏览器所支持的对象包括:1窗口 2框架 3历史 4文档 5事件(Event)6导航器 7位置对象,
6、1窗口,窗口对象(WINDOW)是最外层的对象,可以看到在窗口对象中有一个文档对象(DOCUMENT),文档中又有一些表单(form),表单中又有一些表单元素(ELEMENT)等等。窗口对象包含有许多属性、方法和事件。,2框架,窗口可以包含一个或多个框架(Frame),这取决于你是否在Web页中使用了标签。在Frames数组中包含了一个你所定义的框架元素(从0开始编号)。例如,下面的语句获取窗口中每个框架的名字。For intI=0 to frames.length-1 Strname=frames(intI).nameNext由于以上语句总是用在某个框架中,实际使用时在frames前加“pa
7、rent.”,请看例子。,单击这里测试一下,3历史,每个窗口都有一个历史对象(History),它包含着在这个窗口中显示过的每个Web页的列表。,4文档,模型中的另一个主要对象是文档,它代表了在实际窗口所看到的Web页,包括在该页上所看到的文本、链接、表单等等。一个文档对象包含大量的属性和方法。对此将在第4小节中作一讨论。,5事件(Event),一个Event对象会在每次事件发生时自动产生,它提供了关于事件的有价值的信息,并且可以作为window对象的一个属性进行访问。,6导航器,每个窗口都有一个导航器(Navigator)对象,它包含了Web浏览器的信息。包括浏览器程序名称(AppName)
8、,浏览器版本号(AppVersion),所有用户信息(userAgent)等属性。,7位置对象,每个窗口都有一个位置对象,定义了它所包含Web页的URL(网页地址)。当使用框架将一个窗口分成几个部分时,每一个部分可以看成是一个窗口对象。因为,在每个部分中可以装入一个网页文件。,返回本章目录,5.3 控制浏览器窗口,在脚本语言中,使用浏览器所支持的各种对象的有关属性、事件和方法,可以实现许多实际的应用,本节主要讨论WINDOW对象中除文档对象外的其它对象的使用。文档对象的使用将在下一节中讨论。一个窗口对象包含有许多属性、方法和事件,通过使用窗口对象的属性、方法和事件,可以实现各种实际的应用。,窗
9、口对象的属性、方法和事件,属性:Name parent self top location defaultstatus status frames history navigator document screen 方法:Alert confirm prompt open close setTimeout clearTimeout navigator 事件 OnLoad onUnload onbeforeunload onblur onerror onfocus onhelp onresize onscroll,5.3 控制浏览器窗口,以下分别讨论5.3.1 与用户交互 5.3.2 查阅当前U
10、RL 5.3.3 使用定时器 5.3.4 使用窗口的History列表 5.3.5 打开一个新窗口 5.3.6 窗口的事件控制,5.3.1 与用户交互,可以用窗口对象的alert和confirm方法来代替MsgBox函数,或者用窗口对象的prompt方法代替InputBox函数,来实现和用户的直接交互。1Alert 方法 2Confirm 方法 3Prompt 方法,1 Alert 方法,窗口对象的alert 方法用于向用户显示一个消息框,其使用格式如下:alert 提示字符串例:,单击这里测试一下,2 Confirm 方法,窗口对象的Confirm方法用于向用户提出一个回答为“是”或“否”的
11、问题。其使用形式为:Result=confirm 提示字符串当执行到这一行时,如果用户选择确定,返回TRUE,如果用户选择取消,则返回FALSE。,Confirm 方法举例,网页内容 if confirm(你希望继续吗?)then alert 你选择了继续 else alert 你选择了结束 end if,Confirm 方法举例,浏览结果本例浏览时将首先显示如左图所示的提示框。当单击确定时,显示如右图所示的提示框。,单击这里测试一下,3Prompt 方法,窗口对象的prompt方法允许用户输入一个字符串。使用格式如下:result=prompt 提示字符串,初始值用result 存放用户输入
12、的字符串,当用户单击取消时返回空。,Prompt 方法举例,网页内容,Prompt 方法举例,浏览结果本例浏览时首先显示如左图所示的输入框,若此时单击取消,则显示如右图所示的提示框。,单击这里测试一下,5.3.2 查阅当前URL,窗口对象中location对象包含许多属性,通过这些属性,可以获得有关当前窗口的URL(统一资源定位器)信息。如下例所示。,5.3.2 查阅当前URL,网页内容 strOutput=location:&location&vbCrLf stroutput=stroutput&协议:&location.protocol&vbCrLf stroutput=stroutput
13、&主机地址:&location.host&vbCrLf stroutput=stroutput&主机名称:&location.hostname&vbCrLf stroutput=stroutput&端口号:&location.port&vbCrLf stroutput=stroutput&路径名:&location.pathname MsgBox stroutput,协议名,5.3.2 查阅当前URL,浏览结果其中:protocol表示协议,hostname表示主机名,port表示端口,pathname表示路径名。左图是双击网页文件时的显示,右图是浏览器中输入地址后的显示。,单击这里测试一下,
14、5.3.3 使用定时器,通过窗口对象的setTimeOut和ClearTimeout方法,可以使用定时器来控制某些对象的动作。如让状态行上显示当前时间、显示滚动的文字,让某一图片按一定的速度移动等等。,5.3.3 使用定时器,SetTimeOut的使用格式如下:创建的时钟标识=settimeout(“过程名”,间隔时间,“脚本语言名称”)其中,间隔时间以毫秒为单位,即1000毫秒为1秒。作用是当指定的时间间隔到来时,自动调用指定的过程。,5.3.3 使用定时器,ClearTimeout的作用是清除设置的时钟,其使用格式为:ClearTimeout 时钟标识,使用定时器举例,网页内容 dim T
15、imerID sub updatestatus cleartimeout TimerID status=time TimerID=settimeout(updatestatus,100,”VBScript”)end sub TimerID=settimeout(updatestatus,100,”VBScript”),使用定时器举例,浏览结果本例中采用每100毫秒更新一次状态行的内容,即将新的时间值显示在状态行上。浏览结果如图。,单击这里测试一下,5.3.4 使用窗口的History列表,窗口对象中的History对象有forward、back和go等三个方法,分别可以在历史的列表中进行向前,
16、向后和定位到某一页。可以通过length求得历史列表的长度。当使用框架时,使用History对象非常有效。,5.3.5 打开一个新窗口,窗口对象的open方法用以打开一个新的窗口,并同时装入一个Web页,使用形式如下:open 网页地址,新窗口名称,窗口参数窗口参数用于指出新打开的窗口具有的特性,包括:是否有工具条(toolbar),是否有地址栏(location),是否有目录(directories),是否有状态行(status),是否有菜单行(menubar),是否有滚动条(scrollbars),及窗口是否可以改变大小(resizeable)窗口宽度和高度(width,height)等。
17、,5.3.5 打开一个新窗口,例如:window.open L5_8.html,MyWindow,toolbar=no,status=yes,width=250,height=100将打开一个没有工具条和地址栏的新窗口,显示网页L5_8.html。,5.3.5 打开一个新窗口,打开的新窗口如图所示。它没有工具条也没有地址栏。,5.3.6 窗口的事件控制,使用窗口的事件,可以实现一些功能。以下代码实现当用户关闭窗口或从本网页转到另一网页时显示再见信息:sub window_onbeforeunload()alert(再见!)end sub,返回本章目录,单击这里测试一下,5.4 控制Web页,文
18、档对象有许多属性和方法,通过这些属性和方法的使用,可以控制Web页的显示。文档对象的主要属性有:LinkColor aLinkColor vLinkColor bgColor fgColor anchors links forms location lastModified title cookie referrer,5.4 控制Web页,文档对象的主要事件有:Onafterupdate onbeforeupdate onclick ondblclickondragstart onerrorupdateerror onhelp onkeydown onkeypress onkeyup onmo
19、usedown onmousemove onmouseout onmouseup onreadystatechange onrowenter onrowexit onselectstart,5.4 控制Web页,文档对象的主要方法有:Write writeln close clear open 以下通过一些例子来说明这些属性和方法的使用。,1 显示页内链接目标的名称,网页内容 第一个Anchor第一章内容 第二个anchor第二章内容 第三个anchor第三章内容,定义了三个页内链接目标,逐个显示三个页内链接目标的名称,1 显示页内链接目标的名称,浏览结果,单击这里测试一下,1 显示页内链接目
20、标的名称,用类似的方法可以获得网页中定义的各超链接的有关信息。如第一个链接的地址可写成如下形式:document.links(0).href其中:href 为地址,其它的还有protocol、hostname、Port和Pathname,分别表示协议、主机名、端口和路径名等。,2改变文档的背景色,网页内容 document.bgcolor=,2改变文档的背景色,浏览结果浏览时窗口中将出现一个文本框和命令按钮,当输入表示颜色的值“00ff00”,并单击“改变颜色”按钮后,显示如图所示,其中背景为绿色。,单击这里测试一下,2改变文档的背景色,浏览结果如在文本框中输入“YELLOW”,并单击“改变颜
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 客户端 脚本 编程
链接地址:https://www.31ppt.com/p-6272192.html