WebCh06B(HaoXW)客户端编程

1、高等教育高等教育“十一五十一五”国家级规划教材计算机技术基础国家级规划教材计算机技术基础计算机网络原理、技术及应用计算机网络原理、技术及应用计算机网络原理、技术及应用计算机网络原理、技术及应用 第第 1 章章 Web技术基础技术基础 第第 2 章章 标记语言与网页制作标记语言与网页制作 第第 3 章章 图像处理技术图像处理技术 第第 4 章章 音频与视频处理音频与视频处理 第第 5 章章 Flash动画设计动画设计 第第 6 章章 客户端编程客户端编程 第第 7 章章 服务端编程服务端编程目 录计算机网络原理、技术及应用计算机网络原理、技术及应用第 6 章 客户端编程n浏览器与客户端脚本程序浏

2、览器与客户端脚本程序nJavaScript程序设计基础程序设计基础n事件驱动及事件处理事件驱动及事件处理n对象及其操作对象及其操作n常用内部对象及函数常用内部对象及函数nJavaScript浏览器对象模型浏览器对象模型BOMnHTML文档对象模型文档对象模型DOMnWeb交互交互n使用使用AJAX技术技术 n综合举例综合举例计算机网络原理、技术及应用计算机网络原理、技术及应用JavaScriptJavaScript浏览器对象模型浏览器对象模型BOMBOMn脚本程序设计语言脚本程序设计语言lECMAScript规范规范l浏览器对象模型（浏览器对象模型（Browser Object Model，B

3、OM）l文档对象模型（文档对象模型（Document Object Model，DOM） n浏览器对象模型浏览器对象模型BOMl就是指当用户打开浏览器时，浏览器中的就是指当用户打开浏览器时，浏览器中的JavaScript runtime engine将在内存中将在内存中自动创建一组对象，用于对浏览器及自动创建一组对象，用于对浏览器及HTML文档对象模型中数据的访问和操作。文档对象模型中数据的访问和操作。 window对象 frames对象 document对象 location对象 history对象 navigator对象 screen对象 event对象 计算机网络原理、技术及应用计算机网

4、络原理、技术及应用windowwindow对象对象nwindow对象对象l即客户的浏览器窗口，即客户的浏览器窗口，window对象用于描述窗口的特征，它是对象用于描述窗口的特征，它是document、location、history等对象的父对象函数等对象的父对象函数isNaN()用于判用于判断一个字符串是否为数字（断一个字符串是否为数字（Not a Number）nwindow对象的常用属性对象的常用属性lwindow，self，parent和和top lopener属性属性 lscreenLeft和和screenTop属性属性 ldefaultStatus和和status属性属性l成员对象

5、成员对象unavigator对象、对象、 document对象、对象、frames对象、对象、history对象、对象、location对象、对象、screen对象等对象等 计算机网络原理、技术及应用计算机网络原理、技术及应用windowwindow对象（对象（Cont1.Cont1.）nwindow对象常用方法对象常用方法lopen()方法方法uopen(URL,WindowName,Window Features);u例如：例如：if （userrole=）window.open( other.htm , _self );lclose()方法方法unewWin.close()；u例如：例如

6、：关闭窗口关闭窗口 lmoveBy（x,y）方法）方法lresizeBy(x,y)方法方法lscroll(x,y)方法方法lfocus()和和blur()方法方法l系统提示相关方法系统提示相关方法ualert(字符串字符串) 方法方法uconfirm(字符串字符串) 方法方法 uprompt(message,initial input);lsetTimeout()和和clearTimeout()方法方法 计算机网络原理、技术及应用计算机网络原理、技术及应用windowwindow对象应用举例对象应用举例 n定义四个按钮定义四个按钮“打开新窗口打开新窗口”、“关闭关闭新窗口新窗口”、“查看源码查

7、看源码”和和“测试测试window对象属性及方法对象属性及方法”。l点击点击“打开新窗口打开新窗口”按钮，则打按钮，则打开一个新窗口，开一个新窗口，l点击点击“查看源码查看源码”窗口则显示当窗口则显示当前前Web页的页的html源代码。假设窗源代码。假设窗口的特征是没有工具栏、菜单、口的特征是没有工具栏、菜单、状态栏、定位栏，高状态栏、定位栏，高200个像素，个像素，宽宽200个像素。个像素。l按钮按钮“测试测试window对象属性及对象属性及方法方法”对应一个对应一个test函数，通过函数，通过修改该函数内容，可以分别测试修改该函数内容，可以分别测试window对象的其他属性和方法。对象的其

8、他属性和方法。 计算机网络原理、技术及应用计算机网络原理、技术及应用HTMLHTML代码代码testwin.htmnnnnfunction newone(url)nn newWin=open(url,subWindow, width=200,height=200,toolbar=0,status=0,location=0,menubar=0);n return newWin;nnfunction closeone(xWin)n n / 若窗口存在，并且没有被关闭若窗口存在，并且没有被关闭n if (xWin != & ! xWin.closed)n xWin.close();nn/ 可以修改该

9、函数代码，测试可以修改该函数代码，测试window对象的其他方法对象的其他方法nfunction test() nn window.moveTo(0,0);nnnnn   n n n nn 计算机网络原理、技术及应用计算机网络原理、技术及应用新窗口对应的html文件bookIndex.htmnnnnbook IndexnnnIndex for The bookn nnn计算机网络原理、技术及应用计算机网络原理、技术及应用网页中时钟的实现示例nnnn var timeID;n var Running=false;n function StartTime()n n running=tru

10、e;n ChangeTime();n n function ChangeTime()n n var currentTime=new Date();n document.myClock.show.value=currentTime.toLocaleString();n /递归调用递归调用n timeID=setTimeout(ChangeTime(),1000);n n function StopTime()n n if (Running)n clearTimeout(timeID);n Running=false;n nnnnn nnn 计算机网络原理、技术及应用计算机网络原理、技术及应用fr

11、amesframes对象对象n在在window属性中，属性中，frames是一个是一个array型成型成员对象员对象n如果窗口分祯的话，每个如果窗口分祯的话，每个frame相当于一个单相当于一个单独的独的window对象。对象。n对帧的访问可以通过数组下标对帧的访问可以通过数组下标0,1,，或者通，或者通过帧名。过帧名。l 例如，例如，window.frames0代表第一个帧窗口。代表第一个帧窗口。 计算机网络原理、技术及应用计算机网络原理、技术及应用framesframes对象举例对象举例n建立一个包含左右两个帧的页面，在左面帧页中，设建立一个包含左右两个帧的页面，在左面帧页中，设置一个置一

12、个button按钮，单击该按钮，改变右侧帧窗口的按钮，单击该按钮，改变右侧帧窗口的背景色。背景色。 计算机网络原理、技术及应用计算机网络原理、技术及应用framesframes对象举例对象举例HTMLHTML代码代码nnnnnn nnn左侧帧窗口（左侧帧窗口（left）代码清单（）代码清单（myleft.htm）如下：）如下：nnnnnleftnn/ 将帧窗口将帧窗口fname的背景色设置为的背景色设置为colorn/ fname的取值可以是数字的取值可以是数字0,1,，也可以为帧的名称，也可以为帧的名称nfunction test(fname,color)nn window.parent.f

13、ramesfname.document.bgColor = color; nnnnnnnnn计算机网络原理、技术及应用计算机网络原理、技术及应用locationlocation对象对象nlocation对象用来存储当前窗口的对象用来存储当前窗口的url值。它储存了一个完整的值。它储存了一个完整的url，并且可，并且可能通过对能通过对location对象的赋值来改变当前窗口的对象的赋值来改变当前窗口的url，从而改变当前网页的内，从而改变当前网页的内容容n属性属性计算机网络原理、技术及应用计算机网络原理、技术及应用historyhistory对象对象n一般把一般把history对象称做历史清单对

14、象，它保存窗口或框架在某时间段内的对象称做历史清单对象，它保存窗口或框架在某时间段内的url。出。出于安全方面的原因，于安全方面的原因，history对象并不向脚本提供列表的真正内容，例如一个完整的对象并不向脚本提供列表的真正内容，例如一个完整的url名称。名称。 n属性属性n计算机网络原理、技术及应用计算机网络原理、技术及应用screenscreen对象对象nwindow对象的对象的screen成员对象包含有关客户机显示成员对象包含有关客户机显示屏幕的信息。屏幕的信息。n属性属性n常用的属性是：常用的属性是：lavailHeight（显示屏幕的高度）（显示屏幕的高度）lavailWidth（

15、显示屏幕的宽度），（显示屏幕的宽度），lheight（显示屏幕的高度）（显示屏幕的高度）lwidth（显示器屏幕的宽度）（显示器屏幕的宽度）计算机网络原理、技术及应用计算机网络原理、技术及应用screenscreen对象举例对象举例n利用利用screen对象，在一个窗口中打开一个窗口，让对象，在一个窗口中打开一个窗口，让窗口在屏幕上平滑的移动，遇到屏幕边界，将自动弹窗口在屏幕上平滑的移动，遇到屏幕边界，将自动弹回，改变移动方向回，改变移动方向计算机网络原理、技术及应用计算机网络原理、技术及应用bouncewin.htmbouncewin.htmnnnn/ 初始化动画的变量初始化动画的变量nva

16、r x = 0, y = 0, w=100, h=100; / 窗口的位置和大小窗口的位置和大小nvar dx = 5, dy = 5; / 窗口在窗口在x,y方向每次移动的距离方向每次移动的距离n/窗口移动函数，将窗口移动到窗口移动函数，将窗口移动到(x+dx, y+dy)位置位置nfunction bounce() nn if (win.closed) n n window.clearInterval(winID);n return;n n if (x+dx (screen.availWidth - w) | (x+dx (screen.availHeight - h) | (y+dy 0

17、)n dy = -dy;n /更新窗口的位置更新窗口的位置n x += dx;n y += dy;n win.moveTo(x,y);nnn计算机网络原理、技术及应用计算机网络原理、技术及应用bouncewin.htmbouncewin.htm（Cont1.Cont1.）nnn/打开一个子窗口打开一个子窗口nvar win = window.open(javascript:hello, bounce, width= + w + ,height= + h);n/ 窗口的初始位置窗口的初始位置nwin.moveTo(x,y);n/ 使用使用setInterval() 每隔每隔100毫秒调用毫秒调用

18、 bounce() nvar winID = window.setInterval(bounce(), 100);nnnnnn 计算机网络原理、技术及应用计算机网络原理、技术及应用eventevent对象对象n在事件创立时产生，如：点击一个可点击的对象，移动鼠标，或获得输入焦点等，在事件创立时产生，如：点击一个可点击的对象，移动鼠标，或获得输入焦点等，此时，此时，Event对象被创建，用于存储按键值、当前的（对象被创建，用于存储按键值、当前的（x,y）坐标等。）坐标等。nevent对象的属性对象的属性n可能的事件可能的事件lonDblClick，鼠标双击，鼠标双击lonKeyDown，键被按下

19、，键被按下lonKeyPress，键被按下然后被释放，键被按下然后被释放lonKeyUp，键被释放，键被释放lonMouseDown，鼠标被按下，鼠标被按下lonMouseMove，鼠标移动，鼠标移动lonMouseUp，鼠标被释放，鼠标被释放lonResize，窗口被调整大小，窗口被调整大小计算机网络原理、技术及应用计算机网络原理、技术及应用HTMLHTML文档对象模型文档对象模型DOMDOMn概念概念l当浏览器打开一个网页时，不管是当浏览器打开一个网页时，不管是HTML还是还是XML文档，对于网页中的文档，对于网页中的每一个标记，都在内存中创建一个相应的内存对象。这些对象按照树型每一个标记

20、，都在内存中创建一个相应的内存对象。这些对象按照树型结构组织，这就是文档对象模型结构组织，这就是文档对象模型DOM。 lDOM理解为网页的理解为网页的API，它将网页中的元素看作一个个对象，这些对象，它将网页中的元素看作一个个对象，这些对象通过标记的通过标记的name属性来命名，通过对这些可访问的内存对象进行编程，属性来命名，通过对这些可访问的内存对象进行编程，来实现对网页中元素及其属性的修改，以便动态的修改网页。来实现对网页中元素及其属性的修改，以便动态的修改网页。l文档对象模型（文档对象模型（Document Object Model，DOM）是一种与浏览器、平）是一种与浏览器、平台、语言

21、无关的接口。台、语言无关的接口。nDOM 被分为被分为3个不同的部分个不同的部分l核心核心DOMlXML DOMlHTML DOM 计算机网络原理、技术及应用计算机网络原理、技术及应用HTML DOMHTML DOM对象对象n在在HTML文档中，当浏览器打开一个网页时，为每一个标记在内存中建立一文档中，当浏览器打开一个网页时，为每一个标记在内存中建立一个内存对象，即个内存对象，即HTML DOM对象对象计算机网络原理、技术及应用计算机网络原理、技术及应用HTML DOMHTML DOM对象的层次关系对象的层次关系n所有的所有的HTML DOM对象中，他们之间为层次结构关系，这种关系和对象中，他

22、们之间为层次结构关系，这种关系和HTML规规范中标记之间的层次关系一致。范中标记之间的层次关系一致。 计算机网络原理、技术及应用计算机网络原理、技术及应用documentdocument对象对象ndocument 对象对象l在在HTML DOM中，中，document 对象代表整个对象代表整个HTML文档，文档，可用来访问页面中的所有元素，包括文档头可用来访问页面中的所有元素，包括文档头部分部分和文档体和文档体部分部分ldocument 对象是浏览器对象模型对象是浏览器对象模型BOM中的中的window 对对象的一个部分，可通过象的一个部分，可通过 window.document属性来访问。属

23、性来访问。 n对象属性对象属性n对象方法对象方法计算机网络原理、技术及应用计算机网络原理、技术及应用documentdocument对象属性对象属性n对象属性对象属性l在在FrontPage中的代码视图，输入中的代码视图，输入window.document.可打开可打开IntelliSense窗口，显示其所包含的属性和方法。窗口，显示其所包含的属性和方法。 计算机网络原理、技术及应用计算机网络原理、技术及应用documentdocument对象方法对象方法n对象方法对象方法计算机网络原理、技术及应用计算机网络原理、技术及应用bodybody对象对象nhtml文档有一个文档有一个标记，浏览器在内

24、存中创建一个标记，浏览器在内存中创建一个body对象，对象，body对象封装了对象封装了html文档中文档中标记的所有属性及所有的文档体元素。标记的所有属性及所有的文档体元素。n从从html结构看，结构看，body对象是对象是document 对象的成员对象对象的成员对象 nBody对象属性对象属性计算机网络原理、技术及应用计算机网络原理、技术及应用bodybody对象举例对象举例n设置设置 元素的元素的 id nnnn x=document.getElementsByTagName(body)0;n document.write(Body id: + x.id);n document.wri

25、te();n document.write(An alternate way: );n document.write(document.getElementById(myid).id);ndocument.write(Body title: + x.title);nnn计算机网络原理、技术及应用计算机网络原理、技术及应用imagesimages数组成员属性数组成员属性nimages数组的每个元素都是数组的每个元素都是image对象，对象，image对象的成对象的成员属性员属性 计算机网络原理、技术及应用计算机网络原理、技术及应用举例举例-动画显示nnnnvar ImageNum=1;nfunc

26、tion Begin()nndocument.MyImage.src=ImageArrayImageNum.src;nImageNum+;nif (ImageNum3)nImageNum=1;nnnnnnnvar ImageArray=new Array();nfor (i=1;i=3;i+)nnImageArrayi=new image();nImageArrayi.src=tu+i+.gifnnnn 计算机网络原理、技术及应用计算机网络原理、技术及应用links链接数组n链接数组是另一种常用的链接数组是另一种常用的document对象中的数组成员，对象中的数组成员，links数组的每一个元

27、素都是一个数组的每一个元素都是一个link对象，或者是对象，或者是area对象，对应对象，对应html文档中的一个超链接标记文档中的一个超链接标记，用来存储，用来存储url的信息，通过的信息，通过links数组可以对文档中的超链接进行操作。数组可以对文档中的超链接进行操作。 n一个完整的一个完整的url可以分成几个组成部分可以分成几个组成部分http:/:8080/javascript/index.html#startl协议协议l端口端口l路径路径l文件名文件名l定位文档中的定位文档中的anchor计算机网络原理、技术及应用计算机网络原理、技术及应用举例-改变URL示例nnnn n n nn下

28、一步下一步nn计算机网络原理、技术及应用计算机网络原理、技术及应用WebWeb交互交互n使用使用form实现实现Web页面的信息交互页面的信息交互lform对象的属性对象的属性lform对象的方法对象的方法l访问访问form对象对象l访问访问form中的元素中的元素l举例举例u获取表单中的输入数据获取表单中的输入数据u下拉式菜单与图层的综合应用下拉式菜单与图层的综合应用n使用使用frame实现更复杂的交互实现更复杂的交互l举例举例u网页之间的数据操作网页之间的数据操作计算机网络原理、技术及应用计算机网络原理、技术及应用formform对象对象nHTML中的中的标记标记l 使用使用frame实现

29、更实现更复杂的交互复杂的交互计算机网络原理、技术及应用计算机网络原理、技术及应用formform对象属性对象属性n在在HTML中，表单是由若干控件（属性域）组成的，中，表单是由若干控件（属性域）组成的，因此，一个因此，一个form对象即是一个容器对象。对象即是一个容器对象。nelementslelements为元素数组，存储表单中的所有控件对象为元素数组，存储表单中的所有控件对象l对表单中的属性域，可以通过对表单中的属性域，可以通过“表单名表单名.elements下下标标”来访问，也可以通过来访问，也可以通过“表单名表单名.控件名控件名”来访问，来访问，例如例如myform.elements0

30、、myform.account nname，action，target，encoding，method l反映了反映了标记中的相应属性标记中的相应属性计算机网络原理、技术及应用计算机网络原理、技术及应用formform对象方法对象方法nform对象的方法对象的方法l form对象的方法只有一个，即对象的方法只有一个，即submit()方法方法l document.mytest.submit();计算机网络原理、技术及应用计算机网络原理、技术及应用访问访问formform对象对象n通过通过form名称访问名称访问l在在标记中，包含一个标记中，包含一个name属性，它对应了属性，它对应了from对

31、象的对象名，对象的对象名，Javascript程序可以通过表单名程序可以通过表单名来访问表单，例如：来访问表单，例如：document.myForm() n通过数组来访问通过数组来访问forml通过通过document对象的对象的forms对象数组来访问对象数组来访问form对象，对象，因此可通过下列格式实现因此可通过下列格式实现form对象的访问。对象的访问。document.forms0、document.forms1、document.forms2等等 计算机网络原理、技术及应用计算机网络原理、技术及应用访问访问formform中的元素中的元素n一个表单是由若干的表单控件组成的，这些控件

32、包括：一个表单是由若干的表单控件组成的，这些控件包括：文本框（文本框（text）、单选钮（）、单选钮（radio）、复选框）、复选框（checkbox）、按钮（）、按钮（button）等。每一个控件，在）等。每一个控件，在内存中都创建相应的内存对象。内存中都创建相应的内存对象。n在在JavaScript中要访问这些基本元素，必须通过对应中要访问这些基本元素，必须通过对应特定的特定的form元素的数组下标或元素的数组下标或form元素名来实现。元素名来实现。lformNpertyName | methodNamelformName.elementNpertyName | methodName计算机网络原理、技术及应用计算机网络原理、技术及应用举例举例- -获取表单中的输入数据获取表单中的输入数据n一个表单一个表单计算机网络原理、技术及应用计算机网络原理、技术及应用举例举例- -获取表单中的输入数据获取表单中的输入数据HTMLHTML代码代码nHTML代码代码nexa5-14.htm 计算机网络原理、技术