1、WEB程序设计WEB Programming i黔南民族师范学院计算机科学系主讲：钟志宏 E-mail：7 December 2009 WEB程序设计钟志宏第四章客户端设计黔南民族师范学院计算机科学系WEB程序设计WEB Programming第四章客户端设计 7 December 2009 WEB程序设计钟志宏第四章客户端设计引客户端Javascript的特性:控制文档的外观和内容控制浏览器的行为与HTML表单交互与用户交互用Cookie读写客户状态7 December 2009 WEB程序设计钟志宏第四章客户端设计本章主要内容v1.JAVASCRIPT在HTML如何引入v2.对象的认识与操
2、作v3.改变对象样式v4. 对象与事件的控制技巧v5.JAVASCRIPT与文档对象模型7 December 2009 WEB程序设计钟志宏第四章客户端设计一、JAVASCRIPT在HTML如何引入把客户端JavaScript代码嵌入HTML文档有以下四种方法：标记对和之间 标记的src属性指定的外部*.js文件事件处理程序中，由onclick等HTML属性值指定作为URL的主体，该URL使用特殊的javascript:协议时钟控制示例 引入js文件示例 文本框控制示例7 December 2009 WEB程序设计钟志宏第四章客户端设计在HTML引入JAVASCRIPT要点1、为整个HTML文
3、件指定默认脚本语言的标准。在使用上述声明后，无需在每个中指明type或language属性，即可安全的使用javascript脚本。2、javascript文件javascript文件扩展名一般为*.js，其中只包含纯粹的javascript代码，其中不能包含标记，也不能包含其它HTML标记。7 December 2009 WEB程序设计钟志宏第四章客户端设计在HTML引入JAVASCRIPT要点3、标记可以采用document.write()方法向另一个浏览器窗口或框架中输出脚本。top.frames2.frames1.document.write( “”);top.frames2.fram
4、es1.document.write(“document.write(写入信息后，出现询问框);“);top.frames2.frames1.document.write(“alert(信息写入。请检查！);“);top.frames2.frames1.document.write( “);由于HTML解析器不理解javascript代码，遇到“”，即使在“”中，HTML解析器也会认为是当前脚本的结束标记。避免方法有二：(1)将“”写为 ”(2)将“”写为 ” 向框架写入脚本示例7 December 2009 WEB程序设计钟志宏第四章客户端设计在HTML引入JAVASCRIPT要点4、URL
5、中的JavaScript通常，我们可以用URL中的JavaScript来执行某些命令和预定义的函数，但此时必须注意：确保URL中的最后一条语句没有返回值。因为URL中的Javascript会将最后一条语句的返回值直接在当前窗口中作为新文档显示出来。确保没有返回值可以采用如下方法Javascript: window.open(“about:blank”);void 0;即显示指定最后一条语句无返回值。url中脚本的返回值7 December 2009 WEB程序设计钟志宏第四章客户端设计在HTML引入JAVASCRIPT要点5、事件处理要点onclick：果然处理程序返回false，则浏览器不执
6、行任何与按钮或链接相关的默认动作。如不会进行超级链接(用于)，或提交表单(submit按钮)。onmouseover：处理程序返回true，则制止浏览器在状态栏中显示链接的URL。 7 December 2009 WEB程序设计钟志宏第四章客户端设计二、对象的认识与操作对象(Object)是面向对象程序设计的核心。基于浏览器的客户端设计，通过对HTML文档对象的控制，可是实现丰富多彩的设计。本章主要对下面关键客户端对象进行讲解： Window Document Form F7 December 2009 WEB程序设计钟志宏第四章客户端设计（1）HTML客户端对象组成示意图显示对象的相关信息7
7、 December 2009 WEB程序设计钟志宏第四章客户端设计显示对象的相关信息代码示例var x;document.write(“对象名称：window “);for(x in window) document.write(x + “ : “ + windowx + “ : “+“);document.write(“对象名称：document “);for(x in document) document.write(x + “ : “ + documentx + “ : “+“);document.write(“对象名称：location “);for(x in location) do
8、cument.write(x + “ : “ + locationx + “ : “+ “);7 December 2009 WEB程序设计钟志宏第四章客户端设计（2）Window对象window对象表示浏览器中打开的窗口，提供关于窗口状态的信息。可以用window对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。 window对象的属性 window对象的方法 window对象的事件 window对象示例7 December 2009 WEB程序设计钟志宏第四章客户端设计（2.1）Window对象概述属性client :保存浏览器版本与名称信息及其启用特性的信息Closed:
9、窗口关闭时返回（true表示窗口关闭，否则为false）defaultStatus ，status:提供窗口状态条中显示的缺省消息dialogArguments :返回从主窗口传递给模态对话框的变量或变量数组Document:提供窗口的文档对象引用Event:提供窗口的事件对象引用History:提供窗口的历史对象引用length :提供集合中的元素个数Location:提供窗口中显示文档的URL Name:指定窗口或帧的名称7 December 2009 WEB程序设计钟志宏第四章客户端设计（2.1）Window对象概述属性Navigator:提供窗口的浏览器对象引用opener :提供生成
10、当前窗口的窗口引用parent :返回父窗口：对于通过FRAME生成的窗口，父窗口是FRAMESET元素所在的窗口returnValue:指定从模态对话框返回主窗口的数值Screen:提供窗口的屏幕对象引用self :提供引用当前窗口或帧的办法top :返回最上层窗口对象，它是自己的父对象window :提供当前窗口的引用，与self相同7 December 2009 WEB程序设计钟志宏第四章客户端设计（2.1）Window对象概述方法alert( )显示带消息和OK按钮的alert对话框blur ( )使对象失去焦点并激活onBlur事件clearInterval ( )取消由setInt
11、erval ( )启动的间隔clearTimeout ( )取消由setTimeout ( )设置的超时close ( )关闭当前浏览器窗口confirm ( )显示带消息和OK按钮及Cancel 按钮的确认对话框execScript ( )执行指定的脚本focus ( )使控件取得焦点并执行由onFocus事件指定的代码navigate ( )显示某个URL，只用于VBS7 December 2009 WEB程序设计钟志宏第四章客户端设计（2.1）Window对象概述方法open ( )打开新窗口并装入指定URL文档prompt ( )显示带消息和输入字段的提示对话框ScrollBy(),
12、ScrollTo()滚动窗口中显示的文档resizeBy(), resizeTo()调整窗口大小setInterval ( )在指定毫秒数后重复求值一个表达式setTimeout ( )在指定毫秒数后求值一个表达式showHelp ( )显示指定URL的帮助文件showModalDialog ( )将HTML文档作为模态对话框打开7 December 2009 WEB程序设计钟志宏第四章客户端设计（2.1）Window对象概述事件onBlur 对象失去焦点时onError 装入文档或图形发生错误时onFocus 对象取得焦点时onHelp 用户按F1键或单击浏览器Help按钮时onLoad浏览
13、器打开指定对象之后onResize 窗口调整尺寸时onScroll 滚动框移动时onUnload 页面删除之前7 December 2009 WEB程序设计钟志宏第四章客户端设计（2.2）Window对象示例分析打开新窗口、关闭窗口调整窗口中文件显示的位置输入参数调整窗口大小打开对话窗口并返回值History对象操作时钟示例 7 December 2009 WEB程序设计钟志宏第四章客户端设计（3）document对象Document对象是存放所有HTML相关标记的地方，通过Document对象可以控制对象中以和标记建立的子对象。下面通过几个例子来讲解：设置网页文件的颜色在文件中加入文字和图形
14、改变文档中标记内容 7 December 2009 WEB程序设计钟志宏第四章客户端设计（3.1）document对象要点1. 利用write( )和writeln( )向文档中写入文本只是writeln( )函数后会增加一个换行符。2. 可以存取HTML标记内容的属性innerHTML：可以存取对象中的HTML，但不包含对象标记本身。innerText：可以存取对象中的Text，但不包含对象标记本身。outHTML：可以存取对象中的HTML，但包含对象标记本身。outText：可以存取对象中的Text，但包含对象标记本身。7 December 2009 WEB程序设计钟志宏第四章客户端设计（
15、4）Form对象Form对象是建立交互的重要对象，其中包含了Button、Radio、Checkbox、Text、Textarea、Select等子对象。通过Javascript代码，可以存储表单中对象的数据。下面将从以下两个方面对Form控制进行介绍： Form对象存取方法 Form表单客户端验证 7 December 2009 WEB程序设计钟志宏第四章客户端设计（4.1）Form对象存取方法示例代码使用id或名称存取表单中的对象document.obj1.obj_1 document.form_obj.B1id和名称混合使用document.obj1.B1 document.form_o
16、bj.obj_1使用forms和elements对象表示document. forms0.elements0其中，forms0表示第一个表单，elements0表示forms0中的第一个元素7 December 2009 WEB程序设计钟志宏第四章客户端设计（4.2）Form对象示例分析存取表单中Radio的值存取表单中下拉列表框的值存取表单中Checkbox的值存取表单中Text的值简易在线测试7 December 2009 WEB程序设计钟志宏第四章客户端设计（4.3）Form客户端验证表单主要用于与用户交互或收集相关数据。用户填写完毕后，通常将提交给服务器进行处理并存储。数据库存放的数据
17、一般要求完整性及一致性，如何保证用户提交的数据完整一致呢？对用户提交数据进行验证。用户数据验证一般分为两个阶段：客户端验证、服务器端验证。为了用户有良好的客户端体验，一般要求先用客户端验证对用户输入信息进行检查并简单处理，及时向用户提示输入数据的正确与否。下面将介绍Form客户端验证的基本方法：7 December 2009 WEB程序设计钟志宏第四章客户端设计（4.3）Form客户端验证表单客户端验证的基本方法：当提交表单是，验证数据是否正确。并通过返回值来决定表单是否立即提交。表单验证示例7 December 2009 WEB程序设计钟志宏第四章客户端设计（5）Frame对象Frame框架
18、对象将窗口分割为多个部分。使用Javascript可以存取与设置框架中各部分的数据。本部分从以下方面对框架对象进行介绍： Frame对象的层次结构与引用方法 Frame对象实例解析 7 December 2009 WEB程序设计钟志宏第四章客户端设计（5.1）Frame层次结构frame0frame6frame5frame4frame3frame2frame1frame7Frame框架示例该框架结构层次框架关系命令如下目前所在框架self最上层框架Top上一层框架Parent说明命令 7 December 2009 WEB程序设计钟志宏第四章客户端设计（5.1）Frame层次结构Frame0: Frame1:Frame3:7 December 2009 WEB程序设计钟志宏第四章客户端设计（5.1）Frame层次结构frame0frame6frame5frame4frame3frame2frame1frame7top.f2Frame2top.f3Frame3top.f1.f4Frame4top.f1.f5Frame5top.f3.f7Frame7top.f3.f6Frame6top.f1Frame1引用框架相对Frame0，Frame0 Frame7表示如下Frame框架示例
