科创学院Web应用开发课件第三章页面的客户端交互.ppt

《科创学院Web应用开发课件第三章页面的客户端交互.ppt》由会员分享，可在线阅读，更多相关《科创学院Web应用开发课件第三章页面的客户端交互.ppt（40页珍藏版）》请在三一办公上搜索。

1、3.1 学习情境引入 3.2 基本知识1：文档对象模型DOM 3.3 基本知识2：JavaScript脚本语言简介 3.4 决策与计划 3.5 实施,3.1 学习情境引入,HTML和CSS都是客户端静态内容的设计技术，静态内容是网页设计的基础，但只有静态内容的网页无法完成丰富的交互功能。3.1.1 客户端交互的功能需求3.1.2 客户端交互的功能展示3.1.3 客户端交互功能实现的技术分解,3.1.1 客户端交互的功能需求,网站与用户的交互，如果在服务器端实现，需要经过HTTP请求和响应，会使人感觉反应迟缓，用户体验较差。DHTML技术，使得用户与网站之间，通过浏览器，在客户端就可以进行交互，

2、从而提高了用户体验，在网站的开发中得以广泛应用。,3.1.2 客户端交互的功能展示,1.弹出删除确认对话框框 此功能要求当在购物车中单击“取消”按钮时，立即弹出一个删除确认对话框进行提示，以引起操作者的注意，以防止误操作。2.设为主页 此功能要求，当单击“设为主页”链接按钮的时候，会弹出一个浏览器内置的对话框，供用户选择是否将当前页设为主页。3.添加收藏 此功能要求，当单击“添加收藏”链接按钮的时候，会弹出一个浏览器内置的对话框，供用户选择是否将当前页添加到收藏夹。,3.1.3 客户端交互功能实现的技术分解,上述客户端交互，都是随用户的单击，弹出一个对话框，这类似于Windows桌面程序的事件

3、机制。实际上，只需要浏览器将HTML元素（含CSS样式）视为“对象”，就可以拥有“事件”，使用客户端编程语言，就可以编写“事件处理程序”了。所以，这一章我们需要掌握的基本知识有：DOM和JavaScript语言。我们将使用这些技术，完成网上书店管理系统中弹出警告框、设为首页、添加收藏等客户端交互功能。,3.2 基本知识1：文档对象模型DOM,3.2.1 DOM基本结构3.2.2 DOM顶级对象简介3.2.3 DOM对象的事件,3.2.1 DOM基本结构,档对象模型(Document Object Model，DOM)是DHTML的基础，是由W3C制定的标准，定义了编程访问和操作HTML文档的标

4、准方法。DOM把HTML文档的元素视为对象，每个对象都有自己的属性和行为，通过对这些属性和行为的控制可以改变它们的状态和动作。,3.2.2 DOM顶级对象简介,window对象document对象location对象navigator 对象history对象frame对象,3.2.2 DOM顶级对象简介,window对象例31 打开新窗口，访问桃李网。在VS.NET IDE中，新建HTML页面HTMLPage.htm，设置title，并在head标记中输入script标记及其内容 打开新窗口的例子 window.open(http:/www.taoli.name);,3.2.2 DOM顶级对象

5、简介,window对象例32 单击页面中的“桃李网”按钮，打开新窗口，访问桃李网在VS.NET IDE中，新建HTMLPage.htm页面，使用拆分视图；从工具箱HTML选项卡中，拖动一个Input(Button)控件到设计界面中（或到源代码的body标记中），这是一个客户端按钮，请观察源代码的变化；选中设计界面中的按钮控件，在属性面板中，设置其ID属性为“ButtonOpenTaoLi”，Value属性设置为“新窗口打开桃李网”。在文档选项卡上部的“客户端对象和事件”下拉框中选择ButtonOpenTaoLi对象（已有id属性的HTML元素会出现在此下拉列表中），如图 36所示；图 36 可

6、视化添加客户端对象的事件在右侧的下拉框中选择onclick事件，VS.NET自动生成相关的客户端代码在ButtonOpenTaoLi_onclick函数中输入“window.open(http:/www.taoli.name);”语句，在浏览器中查看网页，单击“新窗口打开桃李网”按钮,3.2.2 DOM顶级对象简介,window对象例33 设置浏览器状态栏文本参考例32步骤，加入HTML按钮，ID设为“ButtonSetStatusText”、Value设为“设置状态栏”，输入onclick事件函数代码例34 弹出一个警告对话框执行window对象的alert方法，将弹出一个警告框，其参数为警

7、告框中显示的文本。上述代码书写中，省略了window对象。在浏览器中查看网页，单击按钮，效果如图 39所示，该警告对话框和下述确认对话框，都是模态对话框。例35 弹出一个确认对话框代码中，调用window对象的confirm方法，弹出一个确认对话框，并定义变量r保存confirm方法的返回值，作为一种简单的脚本语言，JavaScript虽然是类C语言，但不是强类型语言，用var来声明所有变量。confirm方法返回的是一个bool值，代码中，根据此返回值，进行程序分支，决定执行何种操作。,3.2.2 DOM顶级对象简介,2.document对象 document对象代表整个网页，是客户端编程中

8、最常用的对象。,3.2.2 DOM顶级对象简介,2.document对象,3.2.2 DOM顶级对象简介,2.document对象例38 动态添加HTML元素document对象的createElement方法用于创建HTML元素，该方法参数为标记名称字符串，返回值为创建的对象。本例创建了p元素，并用objP变量表示此对象。HTML元素对象的innerText属性是标记中的显示文本，innerHTML属性是HTML元素中的所有内容。本例中给objP对象的innerText属性赋值，也就创建了段落中的文本，此处也可用innerHTML代替innerText。HTML DOM对象的appendCh

9、ild方法在该元素对象中添加一个嵌套的子对象。此处将objP对象添加到了body对象中。,3.2.2 DOM顶级对象简介,3.location对象location对象对浏览器窗口的当前页面地址进行管理。当前页面的URL存放在location对象中，使用location对象的属性，可以直接访问这个URL的各个部分，而不必再进行字符串分析编程。location对象还具有导航方法，可以使浏览器窗口导航到指定地址。,3.2.2 DOM顶级对象简介,location对象例39 location对象的属性function showLocation_onclick()var str=href属性值为：+lo

10、cation.href+n+protocol属性值为：+location.protocol+n+host属性值为：+location.host+n+hostname属性值为：+location.hostname+n+port属性值为：+location.port+n+pathname属性值为：+location.pathname+n+search属性值为：+location.search+n+hash属性值为：+location.hash;alert(str);,3.2.2 DOM顶级对象简介,location对象,3.2.2 DOM顶级对象简介,navigator 对象,3.2.2 DOM顶

11、级对象简介,5.history对象history对象对当前浏览器窗口（或选项卡）已经访问过的网址进行管理，其length属性表示历史记录URL的个数，常用其下列三个方法调用历史记录中的URL，以实现浏览器导航。back方法：等效于浏览器中的“后退”按钮。forward方法：等效于浏览器中的“前进”按钮。go方法：使用整型参数决定导航到哪一条历史记录，如：go(-1)相当于back()，go(-2)相当于执行两次back()。,3.2.2 DOM顶级对象简介,frame对象在HTML代码中使用frame框架标记（配合frameset框架集标记），能够将浏览器窗口划分为多个部分（即框架），每个部分

12、显示一个网页，每个框架网页单独刷新。一般说来，frame对象在window对象的下层，但文档中包含frameset框架集时，每个frame对象都包含一个window对象，每个window对象有自己的DOM结构。由于这样的结构破坏了DOM层次，并且其功能又可以用iframe标记、AJAX技术等代替，所以，不建议使用frameset、frame。,3.2.3 DOM对象的事件,前面介绍了JavaScript对DOM顶级对象的基本操作，也包含了对HTML DOM对象的创建和修改操作，修改操作包括修改属性值（如innerHTML、innerText等）、修改样式（style属性）等操作。实际上，在用户

13、交互中，经常要对HTML DOM对象的事件进行处理，window对象还有一个event子对象，用于维护事件状态，如事件对象、鼠标、键盘的状态等。本部分仅介绍event对象的基本使用，更详尽的内容请参阅其他书籍。,3.2.3 DOM对象的事件,例312 event对象的使用为window对象添加onmousemove、onkeypress、onclick事件，编写事件代码，然后在网页中添加几个HTML控件，并设置body的border样式.为window添加onmousemove等事件，实际上为body元素生成了onmousemove等属性。onmousemove事件由用户在body中移动鼠标而

14、产生，其处理函数代码中，使用event对象的x属性和y属性获取鼠标位置，将其显示在浏览器窗口状态栏上。onkeypress事件由用户按下并松开某个键盘按键而产生，其处理函数代码中，使用event对象的keyCode属性，将所按键的键码用警告框显示出来。onclick事件由用户对body的单击而产生，其处理函数代码中，使用event对象的srcElement属性，将单击的元素对象用警告框显示出来，默认显示元素对象的类型名称。,3.3 基本知识2：JavaScript脚本语言简介,3.3.1 概述3.3.2 数据类型和变量3.3.3 运算符、表达式、流程控制3.3.4 函数3.3.5 常用内置对象

15、,3.3.1 概述,JavaScript是由Netscape公司开发的一种基于对象的网页脚本编程语言 1.JavaScript语言特点 JavaScript脚本语言也是类C语言，与C#语法有很多相似。2.JavaScript脚本程序的使用 使用JavaScript脚本时，还要注意：函数中的脚本语句通常是由对象事件调用的，如果没发生相关事件，这些函数将不会运行；但脚本语句还可以不在任何函数中，它们将会随着文档的顺序加载，而被顺序运行。,3.3.2 数据类型和变量,JavaScript是弱类型语言，变量不必声明类型，但赋值后类型自动确定。数据类型字符串型、数值型、布尔型、对象型、null、unde

16、fined2.数据类型转换（1）隐式转换（2）强制转换3.变量JavaScript的变量统一用“var”关键字声明，标识符命名规则与C#相近，大小写敏感，不再详述。,3.3.3 运算符、表达式、流程控制,1.JavaScript运算符JavaScript的运算符与C#类似，也支持new操作符初始化对象、this操作符指代当前对象等，还支持delete操作符删除对象。不再详述。2.JavaScript的流程控制JavaScript的流程控制与C#类似，其中for语句的循环变量不包括类型声明，其他不再详述。,3.3.4 函数,全局函数（1）eval(字符串)（2）parseInt(字符串)和par

17、seFloat(字符串）（3）isNaN(表达式)（4）Boolean(对象)、Number(对象)、String(对象)（5）escape(字符串)和unescape(字符串)2.自定义函数（1）函数定义（2）函数的调用,3.3.5 常用内置对象,在JavaScript程序中，除了可以操作DOM对象，JavaScript 本身也是基于对象的编程语言，有很多有用的内置对象。每个对象有它自己的属性、方法和事件。,3.3.5 常用内置对象,字符串对象String例314 字符串对象的例子。本例使用string对象的常用属性和方法。在内置脚本script标记中输入如下代码：var str=JavaS

18、cript is a scripting language.;var s1,s2,s3,s4,s5;s1=str.length;s2=str.toUpperCase();s3=str.indexOf(S);s4=str.substring(4,6);s5=str.substr(4,6);document.write(str：+str+);document.write(s1+：+eval(s1)+);document.write(s2+：+eval(s2)+);document.write(s3+：+eval(s3)+);document.write(s4+：+eval(s4)+);docume

19、nt.write(s5+：+eval(s5)+);,3.3.5 常用内置对象,2.数组对象Array例315 数组对象使用的例子在网页中放入一个Select控件，修改id和name属性，并直接修改其option标记源码，再为其指定onchange事件，编写事件处理函数脚本程序，得到如下代码：function SelectProvince_onchange()var ops=new Array();ops=document.getElementsByTagName(option);var str=;for(i=0;i,3.3.5 常用内置对象,3.日期对象Date例 316 制作数字时钟在网页中

20、加入一个div，id为“nowDiv”；在head中加入script标记，输入如下脚本程序：setInterval(show(),1000);/设置每1000毫秒调用一次show函数function show()var date=new Date();/空参数初始化Date对象，获得当前日期时间 var now=;now=date.getFullYear()+-;/取年份 now=now+(date.getMonth()+1)+-;/取月，011对应12个月 now=now+date.getDate()+;now=now+date.getHours()+:;now=now+date.getMi

21、nutes()+:;now=now+date.getSeconds()+;document.getElementById(nowDiv).innerHTML=now;/在div内显示now字符串,3.3.5 常用内置对象,4.数学对象Math（1）min(值1,值2)与max(值1,值2)（2）round(数值)、ceil(数值)和floor(数值)方法round()、ceil()和floor()三个方法都是将参数取整后返回，不同之处是取整的方法不同。round()方法是将参数四舍五入后取整；ceil()方法是返回大于或等于参数的最小整数；floor()方法是返回小于或等于参数的最大整数。例如

22、，round(3.5)返回4，ceil(3.5)返回4，floor(3.5)返回3。（3）random()方法使用random()方法能够产生01的一个随机数，当我们需要用一定范围的数字测试某个项目时，利用它产生数据特别方便。（4）sqrt(数值)方法（5）abs(数值)方法,3.4 决策与计划,本章的学习情境是网上书店管理系统的客户端交互功能的实现，这需要使用客户端的动态技术。1.购物车删除时弹出确认框 在购物车页面中，此交互要求，当用户单击某行的“取消”按钮时，弹出确认对话框，给用户提示，供用户选择是否执行删除。2.设为主页 在前台页面，提供“设为主页”功能，能够调用浏览器的内置功能，以完

23、成相关操作。不同的浏览器此功能的调用方法不同，我们仅就IE浏览器实施此功能。3.加入收藏与“设为主页”类似，经查阅资料，IE浏览器的加入收藏功能。,3.5 实施,3.5.1 购物车页面弹出删除对话框功能3.5.2“设为主页”和“加入收藏”功能,3.5.1 购物车页面弹出删除对话框功能,操作步骤如下：新建网站，添加HTML页；在body标记内插入2行9列表格，输入标题行数据；在表格第二行输入模拟数据，并设置此行tr标记id为“row1”，最后一列放置“取消”超链接，设置“取消”超链接的id属性为“del”，为“取消”超链接添加onclick事件；表格设计效果如图 323所示。图 323 购物车模

24、拟表格设计效果“取消”超链接相关代码如下：取消编写del超链接的onclick事件处理函数，代码如下：function del_onclick()var result=confirm(确认删除？);if(result)var r=document.getElementById(row1);r.parentNode.removeChild(r);,3.5.2“设为主页”和“加入收藏”功能,接着使用上面小节的网页，操作步骤如下：为将“设为主页”和“加入收藏”链接排列在网页顶部，紧跟在body开始标记后，输入table元素：设为主页 加入收藏 内联样式“margin:0 0 auto auto”表示

25、元素外部边距的上、右为0，下、左则按默认方式布局，在IE8等浏览器中的排版效果为水平居右、垂直靠顶。注意设置超链接的id属性。为两个超链接添加onclick事件，输入代码如下：function setHomePage_onclick()event.srcElement.style.behavior=url(#default#homepage);event.srcElement.setHomePage(location.href);function addFavorite_onclick()window.external.addFavorite(location.href,信院书苑)代码中eve

26、nt.srcElement代表setHomePage超链接对象。,3.6 检查与评价,在浏览器中查看页面，检查功能是否实现。本章的评价点为：主要是学会对客户端交互技术的灵活使用，掌握使用JavaScript操作DOM的方法。对于传统的HTML语言来说，很难开发出具有动态和交互性的网页，而DHTML可以实现这一点，我们可以将JavaScript嵌入到普通的HTML网页中并由浏览器执行，从而实现动态实时的效果，提高用户体验，并大大降低服务器的负荷，提高执行的效率。,3.7 训练,1.题目制作个人图书订购单的网页2.要求制作一个个人图书订购单的网页，效果如图 319图书订购单 所示，要求：添加“设为首页”和“添加收藏”功能；小计可以自动计算数量和单价的乘积；选购项目的复选框选中后会被自动计算。,