Java web 第三章、客户端编程

1、第三章 客户端编程8/12/20221本节课的内容：什么是脚本语言JavaScript概述JavaScript嵌套HTML的方式JavaScript基本语法事件触发和处理对象的基础知识JavaScript的对象模型window 对象document 对象form 对象8/12/20222基本概念JavaScript是基于对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。通常鼠标或热键的动作我们称之为事件，由鼠标或热键引发的一连串程序的动作，称之为事件驱动。对事件进行处理的程序或函数，我们称之为事件处理程序5、事件触发和处理8/12/20223事件处理程序在Java

2、Script中对象事件的处理通常由函数担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。8/12/20224事件驱动单击事件onclick改变事件onchange选中事件onselect获得焦点事件onfocus失去焦点onblur载入文件onload卸载文件onunload鼠标左键按下onmousedown鼠标左键抬起onmouseup获取鼠标onmouseover失去鼠标onmouseout8/12/20225事件是为动作响应时出现的通知。此通知的处理代码称为事件处理程序。在javascript中可以为指定对象的各种事件设置相对应的事件处理程序。如:按钮的onCl

3、ick,onLoad,onunload,onMouseOver,onMouseOut 下拉框的onChange, onClick8/12/20226 事件 描述Click 当用户在表单元素上或连接上点击时产生Change 当用户改变表单字段值时产生Focus 当用户对元素输入时产生Load 当页面被装入到浏览器时产生MouseOver 当在区域或连接对象上移动鼠标指针时产生MouseOut 当鼠标指针离开区域或连接对象时产生Select 当用户选取表单字段时产生Blur 当输入字段失去聚焦时产生8/12/20227 对象 事件处理程序Button onClickReset onClickSub

4、mit onClickRadio onClickCheckbox onClickLink onClick, onMouseOver , onMouseOutForm onSubmit, onResetText onChange, onFocus, onBlur, onSelectTextarea onChange, onFocus, onBlur, onSelectSelect onChange, onFocus, onBlurImage onAbort, onErrorArea onClick, onMouseOver , onMouseOutWindow onLoad, onUnLoad,

5、 onError8/12/20228设置事件的方法，在指定对象的代码中加入类似属性8/12/20229例3-4：创建一个登录页面，它接收客户的帐户ID和口令，如果客户留下任何字段空白，在点击Submit按钮后，应显示一条信息。8/12/202210接收数据的用户界面8/12/202211获得输入框的值用属性value，如：txtAccountID.value事件：代表一个动作的产生。如单击鼠标按钮、双击鼠标、文字的改变等等。当一个事件发生时，系统所做的操作是调用一个函数来完成处理。如： onClick、 onChange 等。8/12/202212创建用户界面 Earnest Bank Ear

6、nest Bank Banking Online Login information: 8/12/202213 Account ID Password 8/12/202214 prompt( ) 语法： prompt(”提示信息“ )；功能：请求用户在对话框中的文本字段中进行输入，并将其用户输入的结果返回。 alert( ) 语法： alert (”用户信息“ )；功能：供用户通信的简单方法，用OK按钮在对话框中显示消息。8/12/202215function checkValues() var AccountID; var AccountIDLength; var passw; var pa

7、ssLength; AccountID=txtAccountID.value; AccountIDLength=AccountID.length; assw=pass.value; passLength=passw.length; if (AccountIDLength=0)|(passLength=0) alert(“你必须同时输入登录名和口令字”); 8/12/202216例3-5事件触发和事件处理 var Images=new Array( ); Images0=dot1.jpg; Images1=check.gif; function changeImg(ImgIndex) docum

8、ent.imgs.src=ImagesImgIndex; 8/12/202217软件设计 8/12/202218对象的基本结构引用对象的途径引用javascript内部对象由浏览器环境提供创建新对象6 对象的基础知识8/12/202219在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。语法:For（对象属性名 in 已知对象名） 循环体 说明:该语句的功能是用于对已知对象的所有属性进行操作的控制循环。P318/12/202220语法:With（对象名） 循环体说明:使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性。8/12/202221this关键

9、字this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，为此JavaScript提供了一个用于将对象指定当前对象的语句this。8/12/202222New 运算符创建对象使用的格式：var objectname=new Object(参数)var birthday=new Date();var array1=new Array(5);8/12/202223对象属性的引用可由下列三种方式之一实现：使用点运算符通过对象的下标实现引用通过字符串的形式实现例程 P328/1

10、2/202224通过对象下标实现饮用 ： P32语法:Objectnum说明:其中Object是对象名称，num是属性在这个对象中是第几个属性的索引。8/12/202225通过字符串的形式实现 ：P32语法:Object“属性名称”说明:其中Object是对象名称，num是属性在这个对象中是第几个属性的索引。8/12/2022266.2 常用对象的属性和方法JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要自己用脚本编写程序来实现这些功能。这正是基于对象编程的真正目的。在JavaScript提供了string（字符串）、math（数值计算）和date（日期）三种对象和

11、其它一些相关的方法8/12/202227常用内部对象串对象该对象只有一个属性，即length。string对象的方法共有个，主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。例程 P33、348/12/202228算术函数的Math对象Math中提供了个属性，它们是数学中经常用到的常数、以为底的自然对数、以为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1_2,2的平方根为SQRT2。主要方法有：abs()、sin(),cos()、asin(), acos()、tan(),atan()、round()、sqrt()、基于几方次的值：P

12、ow(base,exponent)。直接使用Math对象，不必用new创建一个对象8/12/202229日期及时间对象使用date之前先要用new创建一个对象Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。P358/12/202230数组对象数组对象Array是一个对象的集合，其内可以放置不同类型的对象，数组的每一个成员对象都有一个下标，用来标明数组中的位置，下标从0开始8/12/202231数组的定义Var 数组名=new Array()Var 数组名=new Array(元素个数)Var 数组名=new Array(元素1,元素2)例程 P36 Array.html8

13、/12/202232【例3-6】 数字钟的设计 数字钟 function aClock( ) var now=new Date( ); var hour=now.getHours( ); var min=now.getMinutes( ); var sec=now.getSeconds( ); var timeStr= +hour; timeStr+=(min10)?:0:)+min; timeStr+=(sec=12)? P.M.: A.M.;8/12/202233document.clock_form.clock_text.value=timeStr; clockId=setTimeout

14、(aClock( ),1000); 当前时间是： 8/12/2022347、JavaScript 的对象模型8/12/202235navigatorwindowArray(3.0)DateMathStringhistorydocumentlocationframelinkformanchorImage(3.0)resetradiobuttoncheckboxhiddenpasswordtexttextareaselectsubmit8/12/202236JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（window）对象来完成，而输出可

15、通过文档（document）对象的方法来实现。Window.document.Write() Window.history.forward()Window.history.back()8、window 对象8/12/202237 window对象是JavaScript 对象层次的最高层的对象，可以在脚本程序中隐式的引用window 对象。即输出时不用Window.document.Write()每当打开浏览器窗口都有一个相关的window 对象。8/12/202238每个window 对象都与特定的WEB网页相关，而这个网页的结构都反映在window 对象的Document对象中每个windo

16、w 都与URL页相关，而这个URL反映在window 对象的Location对象中每个window 对象都有一个显示在这个窗口前的历史信息，这些信息存储在window 对象的History对象中.8/12/202239 属性描述 defaultStatus包含缺省的状态拦文本的串值Frames记录窗口中框架个数的数组对象,由此定位框架Length表示父窗口框架个数Name包含的名称Parent包含父窗口的名称Self 包含当前的窗口名，另一方法使用上边描述的名Status表示状态栏文本信息Top包含顶层的窗口名Window选用自身或名window 对象相关属性8/12/202240方法用途Al

17、ert(messageText) 以 messageText为消息，上托windowClose() 关闭当前窗口。Confirm (messageText) 上托带显示messageText的消息框，有OK和CANCEL按钮Open(url,name, featureList) 打开url 提供的新窗口，带有此窗口目标名，特征表指出如出现工具栏、状态栏、菜单栏、滚动条等特征。Prompt (messageText ,response) 请求用在对话框的文本域输入 方法8/12/202241事件处理程序 用途onLoad当窗口或框架结束装入时处理onUnload当窗口或框架结束卸载时处理 set

18、Timeout (expression, time)以毫秒指定时间间隔，间隔完后执行表达式clearTimeout(timerID) 清除由timerID指定的时间间隔8/12/202242例3-8、开发Web 站点，当用户访问该站点时能显示向他们致敬的个性化信息。当用户退出时应显示告别的信息。当用户访问该站点时，此站点应接收用户的名。8/12/202243 识别要使用的事件处理程序onLoad onUnLoad例： 识别显示消息的方法Prompt() 接收用户的名alert() 显示信息8/12/202244代码：var visitor_name = ;function greet_visi

19、tor() visitor_name=prompt(请输入你的名字：, ); alert(欢迎 + visitor_name + 光临 !); function farewell_visitor() alert(感谢 + visitor_name + 访问我们网页!); 8/12/202245 var sWindowName; function fnNewWindow() alert(“新窗口在进行中.”); sWindowName=open(,Window,scrollbars=1, status=1); status=单击新窗口选择; 8/12/202246 又如例3-4 P41、428/

20、12/202247名称描述Height设置窗口高度，可为一整数值 Menubar设置有无菜单条：1有， 0无Resizable是否可重定窗口大小：1是，0否Scrollbars设置是否带滚动条，1 是 ， 0 否Status设置是否带状态栏，1 是 ， 0 否Toolbar设置是标准工具条，1 是 ， 0 否Width设置窗口宽度Options 属性8/12/202248文档对象是非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。9、document 对象8/12/202249document中三个主要的对象anchor锚对象链接links对象

21、窗体（Form）对象8/12/202250文档对象中的属性激活的链接颜色：alinkcolor链接颜色：linkcolor浏览过后的颜色：VlinkColor背景颜色：bgcolor前景颜色：FgcolorLocation 表示当前URL的串值Title表示 与 标签之间文本的串值8/12/202251文档对象的基本元素表单属性锚属性链接属性8/12/202252属于 window 的对象，每个窗口都与一个文档对象有关 为处理当前文档资料提供了若干属性，诸如: location Lastmodified 为处理当前文档资料提供了若干方法，诸如： Open()和Close()启动和停止缓冲输出,

22、调用Open打开文档进行写操作，调用Close()关闭写操作Clear()清除文档窗口Write()和Writeln()相同8/12/202253Document 对象相关方法方法用途Clear() 清除document窗口Close() 关闭write流 Open() 打开此文档，检索write()流中的数据Write (content) 把指定的内容写到该文档 Writeln() 向文档写入一行数据，后跟一个回车8/12/202254Ex2 var sWindowName; function fnNewWindow() alert(新窗口在进行中.); sWindowName=open(,

23、Window,scrollbars=1,status=1); status=单击新窗口选择; sWindowName.document.writeln(受欢迎的联机银行业务); sWindowName.document.bgColor=pink; sWindowName.document.fgColor=Green; 8/12/202255 又如例3-3 P38、398/12/2022569、Form对象 属于文档对象的子对象，这就是表单form对象 标记有三个参数，Name表单的名字 method: 可以为get或post Action 提交表单数据时发送到的目的地8/12/202257Fo

24、rm常用的属性Action 设置或获取表单内容发送的URLEncoding 设置或获取表单的MIMEId 获取表单标识Length设置或获取集合中对象的数目Name 设置或获取表单的名字 8/12/202258Form常用的方法Blur（） 使元素失去焦点并触发onblur事件Click（）触发onclick事件Focus（）使元素获得焦点并触发onfocus事件Reset（） 模拟重置按钮submit（）提交表单8/12/202259Form常用集合All 返回对象包含元素集合的引用Elements 获取表单所有对象的集合 例P48-548/12/202260Frame常用的属性id 获取表

25、单标识srcborderColorheightwidthmarginHeightmarginWidthnameself10、Frame对象 例P678/12/202261【例3-10】 、创建一个页面， 包括Login按钮，当客户点击 Login 按钮时，应显示登录页面，该页面应接受帐户ID和口令，应有一个 Submit 按钮. 如果客户在主页上不点击Login按钮，5秒钟后将自动进入登录页面。8/12/202262根据问题陈述需要两个页面： 主页 上边应有一个登录按钮登录页面 有客户ID与口令框及一个submit 提交按钮确定自动显示登录页面的方法SetTimeout() 方法 格式： Se

26、tTimeout(“表达式”，超时)clearTimeout() 方法 格式：clearTimeout(ID)根据问题陈述：打开主页5秒后进入登录页面。8/12/202263 window 对象的 open() 方法 onClick事件 在用户点击按钮时触发 用于打开一个新窗口。语法： Open(“url”,”name”, options);其中： url 是要打开的文档的路径 name 是文档的名称 options 如下表所示：8/12/202264名称描述Height设置窗口高度，可为一整数值 Menubar设置有无菜单条：1有， 0无Resizable是否可重定窗口大小：1是，0否Scr

27、ollbars设置是否带滚动条，1 是 ， 0 否Status设置是否带状态栏，1 是 ， 0 否Toolbar设置是标准工具条，1 是 ， 0 否Width设置窗口宽度Options 属性8/12/202265 5 秒钟自动打开新窗口的 go() 函数： function go() open(“Login.html”,”Login”); 若在 5 秒内用户单击了 Login 按钮，则应先清除设置的超时，再调用go() 函数进入登录页面： 8/12/202266 Earnest Bank Earnest Bank Login information: Account ID Password 8

28、/12/202267编写自动显示登录页面的代码 Earnest Bank function go() open(Login.html,Login); Earnest Bank Welcome to the Web Site! Click on the Login button or wait for 5 seconds to Login! 8/12/202268例四、创建一个可订购书籍的Web页面。显示书的清单及价格。此页面也应使用户能以卢比或美元观看书的价格。8/12/2022698/12/202270识别价格的转换机制结果：若选择 $ 则除以45，若选择Rs则乘以45。识别所需的事件onChange 事件 当用户改变输入元素内容时，触发该事件8/12/202271 f