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

ASP.NET网站开发技术ASP.NET网站开发技术 3.1 3.1 学习情境引入学习情境引入 3.2 3.2 基本知识基本知识1 1：文档对象模型：文档对象模型DOMDOM 3.3 3.3 基本知识基本知识2 2：JavaScriptJavaScript脚本语言简介脚本语言简介 3.4 3.4 决策与计划决策与计划 3.5 3.5 实施实施ASP.NET网站开发技术3.1 3.1 学习情境引入学习情境引入HTML和CSS都是客户端静态内容的设计技术，静态内容是网页设计的基础，但只有静态内容的网页无法完成丰富的交互功能。3.1.1 3.1.1 客户端交互的功能需求客户端交互的功能需求3.1.2 3.1.2 客户端交互的功能展示客户端交互的功能展示3.1.3 3.1.3 客户端交互功能实现的技术分解客户端交互功能实现的技术分解ASP.NET网站开发技术3.1.1 3.1.1 客户端交互的功能需求客户端交互的功能需求网站与用户的交互，如果在服务器端实现，需要经过HTTP请求和响应，会使人感觉反应迟缓，用户体验较差。DHTML技术，使得用户与网站之间，通过浏览器，在客户端就可以进行交互，从而提高了用户体验，在网站的开发中得以广泛应用。ASP.NET网站开发技术3.1.2 3.1.2 客户端交互的功能展示客户端交互的功能展示1.1.弹出删除确认对话框框弹出删除确认对话框框 此功能要求当在购物车中单击“取消”按钮时，立即弹出一个删除确认对话框进行提示，以引起操作者的注意，以防止误操作。2.2.设为主页设为主页 此功能要求，当单击“设为主页”链接按钮的时候，会弹出一个浏览器内置的对话框，供用户选择是否将当前页设为主页。3.3.添加收藏添加收藏 此功能要求，当单击“添加收藏”链接按钮的时候，会弹出一个浏览器内置的对话框，供用户选择是否将当前页添加到收藏夹。ASP.NET网站开发技术3.1.3 3.1.3 客户端交互功能实现的技术分解客户端交互功能实现的技术分解上述客户端交互，都是随用户的单击，弹出一个对话框，这类似于Windows桌面程序的事件机制。实际上，只需要浏览器将HTML元素（含CSS样式）视为“对象”，就可以拥有“事件”，使用客户端编程语言，就可以编写“事件处理程序”了。所以，这一章我们需要掌握的基本知识有：DOM和JavaScript语言。我们将使用这些技术，完成网上书店管理系统中弹出警告框、设为首页、添加收藏等客户端交互功能。ASP.NET网站开发技术3.2 3.2 基本知识基本知识1 1：文档对象模型：文档对象模型DOMDOM3.2.1 DOM3.2.1 DOM基本结构基本结构3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介3.2.3 DOM3.2.3 DOM对象的事件对象的事件ASP.NET网站开发技术3.2.1 DOM3.2.1 DOM基本结构基本结构档对象模型(Document Object Model，DOM)是DHTML的基础，是由W3C制定的标准，定义了编程访问和操作HTML文档的标准方法。DOM把HTML文档的元素视为对象，每个对象都有自己的属性和行为，通过对这些属性和行为的控制可以改变它们的状态和动作。ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介1.1.windowwindow对象对象2.2.documentdocument对象对象3.3.locationlocation对象对象4.4.navigator navigator 对象对象5.5.historyhistory对象对象6.6.frameframe对象对象ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介1.1.windowwindow对象对象例例3 1 打开新窗口，访问桃李网。打开新窗口，访问桃李网。在VS.NET IDE中，新建HTML页面HTMLPage.htm，设置title，并在head标记中输入script标记及其内容 打开新窗口的例子 window.open(http:/www.taoli.name);ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介1.1.windowwindow对象对象例例3 2 单击页面中的单击页面中的“桃李网桃李网”按钮，打开新窗口，访问桃李网按钮，打开新窗口，访问桃李网在VS.NET IDE中，新建HTMLPage.htm页面，使用拆分视图；从工具箱HTML选项卡中，拖动一个Input(Button)控件到设计界面中（或到源代码的body标记中），这是一个客户端按钮，请观察源代码的变化；选中设计界面中的按钮控件，在属性面板中，设置其ID属性为“ButtonOpenTaoLi”，Value属性设置为“新窗口打开桃李网”。在文档选项卡上部的“客户端对象和事件”下拉框中选择ButtonOpenTaoLi对象（已有id属性的HTML元素会出现在此下拉列表中），如图 36所示；图 36 可视化添加客户端对象的事件在右侧的下拉框中选择onclick事件，VS.NET自动生成相关的客户端代码在ButtonOpenTaoLi_onclick函数中输入“window.open(http:/www.taoli.name);”语句，在浏览器中查看网页，单击“新窗口打开桃李网”按钮ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介1.1.windowwindow对象对象例例3 3 设置浏览器状态栏文本设置浏览器状态栏文本参考例32步骤，加入HTML按钮，ID设为“ButtonSetStatusText”、Value设为“设置状态栏”，输入onclick事件函数代码例例3 4 弹出一个警告对话框弹出一个警告对话框执行window对象的alert方法，将弹出一个警告框，其参数为警告框中显示的文本。上述代码书写中，省略了window对象。在浏览器中查看网页，单击按钮，效果如图 39所示，该警告对话框和下述确认对话框，都是模态对话框。例例3 5 弹出一个确认对话框弹出一个确认对话框代码中，调用window对象的confirm方法，弹出一个确认对话框，并定义变量r保存confirm方法的返回值，作为一种简单的脚本语言，JavaScript虽然是类C语言，但不是强类型语言，用var来声明所有变量。confirm方法返回的是一个bool值，代码中，根据此返回值，进行程序分支，决定执行何种操作。ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介2.document2.document对象对象 document对象代表整个网页，是客户端编程中最常用的对象。ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介2.document2.document对象对象 ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介2.document2.document对象对象例例3 8 动态添加动态添加HTML元素元素document对象的createElement方法用于创建HTML元素，该方法参数为标记名称字符串，返回值为创建的对象。本例创建了p元素，并用objP变量表示此对象。HTML元素对象的innerText属性是标记中的显示文本，innerHTML属性是HTML元素中的所有内容。本例中给objP对象的innerText属性赋值，也就创建了段落中的文本，此处也可用innerHTML代替innerText。HTML DOM对象的appendChild方法在该元素对象中添加一个嵌套的子对象。此处将objP对象添加到了body对象中。ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介3 3.location.location对象对象location对象对浏览器窗口的当前页面地址进行管理。当前页面的URL存放在location对象中，使用location对象的属性，可以直接访问这个URL的各个部分，而不必再进行字符串分析编程。location对象还具有导航方法，可以使浏览器窗口导航到指定地址。ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介3.3.locationlocation对象对象例例3 9 location对象的属性对象的属性function showLocation_onclick()var str=href属性值为：+location.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);ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介3.3.locationlocation对象对象ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介4.4.navigator navigator 对象对象ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介5.history5.history对象对象history对象对当前浏览器窗口（或选项卡）已经访问过的网址进行管理，其length属性表示历史记录URL的个数，常用其下列三个方法调用历史记录中的URL，以实现浏览器导航。back方法：等效于浏览器中的“后退”按钮。forward方法：等效于浏览器中的“前进”按钮。go方法：使用整型参数决定导航到哪一条历史记录，如：go(-1)相当于back()，go(-2)相当于执行两次back()。ASP.NET网站开发技术3.2.2 DOM3.2.2 DOM顶级对象简介顶级对象简介6.6.frameframe对象对象在HTML代码中使代码中使用frame框架标记（配合frameset框架集标记），能够将浏览器窗口划分为多个部分（即框架），每个部分显示一个网页，每个框架网页单独刷新。一般说来，frame对象在window对象的下层，但文档中包含frameset框架集时，每个frame对象都包含一个window对象，每个window对象有自己的DOM结构。由于这样的结构破坏了DOM层次，并且其功能又可以用iframe标记、AJAX技术等代替，所以，不建议使用frameset、frame。ASP.NET网站开发技术3.2.3 DOM3.2.3 DOM对象的事件对象的事件前面介绍了JavaScript对DOM顶级对象的基本操作，也包含了对HTML DOM对象的创建和修改操作，修改操作包括修改属性值（如innerHTML、innerText等）、修改样式（style属性）等操作。实际上，在用户交互中，经常要对HTML DOM对象的事件进行处理，window对象还有一个event子对象，用于维护事件状态，如事件对象、鼠标、键盘的状态等。本部分仅介绍event对象的基本使用，更详尽的内容请参阅其他书籍。ASP.NET网站开发技术3.2.3 DOM3.2.3 DOM对象的事件对象的事件例例3 12 event对象的使用对象的使用为window对象添加onmousemove、onkeypress、onclick事件，编写事件代码，然后在网页中添加几个HTML控件，并设置body的border样式.为window添加onmousemove等事件，实际上为body元素生成了onmousemove等属性。onmousemove事件由用户在body中移动鼠标而产生，其处理函数代码中，使用event对象的x属性和y属性获取鼠标位置，将其显示在浏览器窗口状态栏上。onkeypress事件由用户按下并松开某个键盘按键而产生，其处理函数代码中，使用event对象的keyCode属性，将所按键的键码用警告框显示出来。onclick事件由用户对body的单击而产生，其处理函数代码中，使用event对象的srcElement属性，将单击的元素对象用警告框显示出来，默认显示元素对象的类型名称。ASP.NET网站开发技术 3.3 3.3 基本知识基本知识2 2：JavaScriptJavaScript脚本语言简介脚本语言简介3.3.1 3.3.1 概述概述3.3.2 3.3.2 数据类型和变量数据类型和变量3.3.3 3.3.3 运算符、表达式、流程控制运算符、表达式、流程控制3.3.4 3.3.4 函数函数3.3.5 3.3.5 常用内置对象常用内置对象ASP.NET网站开发技术3.3.1 3.3.1 概述概述 JavaScript是由Netscape公司开发的一种基于对象的网页脚本编程语言 1.JavaScript1.JavaScript语言特点语言特点 JavaScript脚本语言也是类C语言，与C#语法有很多相似。2.JavaScript2.JavaScript脚本程序的使用脚本程序的使用 使用JavaScript脚本时，还要注意：函数中的脚本语句通常是由对象事件调用的，如果没发生相关事件，这些函数将不会运行；但脚本语句还可以不在任何函数中，它们将会随着文档的顺序加载，而被顺序运行。ASP.NET网站开发技术3.3.2 3.3.2 数据类型和变量数据类型和变量JavaScript是弱类型语言，变量不必声明类型，但赋值后类型自动确定。1.1.数据类型数据类型字符串型、数值型、布尔型、对象型、null、undefined2.2.数据类型转换数据类型转换 （1）隐式转换 （2）强制转换3.3.变量变量JavaScript的变量统一用“var”关键字声明，标识符命名规则与C#相近，大小写敏感，不再详述。ASP.NET网站开发技术3.3.3 3.3.3 运算符、表达式、流程控制运算符、表达式、流程控制1.JavaScript1.JavaScript运算符运算符JavaScript的运算符与C#类似，也支持new操作符初始化对象、this操作符指代当前对象等，还支持delete操作符删除对象。不再详述。2.JavaScript2.JavaScript的流程控制的流程控制JavaScript的流程控制与C#类似，其中for语句的循环变量不包括类型声明，其他不再详述。ASP.NET网站开发技术3.3.4 3.3.4 函数函数1.1.全局函数全局函数（1）eval(字符串)（2）parseInt(字符串)和parseFloat(字符串）（3）isNaN(表达式)（4）Boolean(对象)、Number(对象)、String(对象)（5）escape(字符串)和unescape(字符串)2.2.自定义函数自定义函数（1）函数定义（2）函数的调用ASP.NET网站开发技术3.3.5 3.3.5 常用内置对象常用内置对象在JavaScript程序中，除了可以操作DOM对象，JavaScript 本身也是基于对象的编程语言，有很多有用的内置对象。每个对象有它自己的属性、方法和事件。ASP.NET网站开发技术3.3.5 3.3.5 常用内置对象常用内置对象1.1.字符串对象字符串对象StringString例例3 14 字符串对象的例子。字符串对象的例子。本例使用string对象的常用属性和方法。在内置脚本script标记中输入如下代码：var str=JavaScript 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)+);document.write(s5+：+eval(s5)+);ASP.NET网站开发技术3.3.5 3.3.5 常用内置对象常用内置对象2.2.数组对象数组对象ArrayArray例例3 15 数组对象使用的例子数组对象使用的例子在网页中放入一个Select控件，修改id和name属性，并直接修改其option标记源码，再为其指定onchange事件，编写事件处理函数脚本程序，得到如下代码：function SelectProvince_onchange()var ops=new Array();ops=document.getElementsByTagName(option);var str=;for(i=0;i ops.length;i+)str+=opsi.value;if(opsi.selected)str+=被选中;str+=n;alert(str);ASP.NET网站开发技术3.3.5 3.3.5 常用内置对象常用内置对象3.3.日期对象日期对象DateDate例例 3 16 制作数字时钟制作数字时钟在网页中加入一个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.getMinutes()+:;now=now+date.getSeconds()+;document.getElementById(nowDiv).innerHTML=now;/在div内显示now字符串ASP.NET网站开发技术3.3.5 3.3.5 常用内置对象常用内置对象4.4.数学对象数学对象MathMath（1）min(值1,值2)与max(值1,值2)（2）round(数值)、ceil(数值)和floor(数值)方法round()、ceil()和floor()三个方法都是将参数取整后返回，不同之处是取整的方法不同。round()方法是将参数四舍五入后取整；ceil()方法是返回大于或等于参数的最小整数；floor()方法是返回小于或等于参数的最大整数。例如，round(3.5)返回4，ceil(3.5)返回4，floor(3.5)返回3。（3）random()方法使用random()方法能够产生01的一个随机数，当我们需要用一定范围的数字测试某个项目时，利用它产生数据特别方便。（4）sqrt(数值)方法（5）abs(数值)方法ASP.NET网站开发技术3.4 3.4 决策与计划决策与计划 本章的学习情境是网上书店管理系统的客户端交互功能的实现，这需要使用客户端的动态技术。1.1.购物车删除时弹出确认框购物车删除时弹出确认框 在购物车页面中，此交互要求，当用户单击某行的“取消”按钮时，弹出确认对话框，给用户提示，供用户选择是否执行删除。2.2.设为主页设为主页 在前台页面，提供“设为主页”功能，能够调用浏览器的内置功能，以完成相关操作。不同的浏览器此功能的调用方法不同，我们仅就IE浏览器实施此功能。3.3.加入收藏加入收藏与“设为主页”类似，经查阅资料，IE浏览器的加入收藏功能。ASP.NET网站开发技术 3.5 3.5 实施实施3.5.1 3.5.1 购物车页面弹出删除对话框功能购物车页面弹出删除对话框功能3.5.2 “3.5.2 “设为主页设为主页”和和“加入收藏加入收藏”功能功能ASP.NET网站开发技术3.5.1 3.5.1 购物车页面弹出删除对话框功能购物车页面弹出删除对话框功能操作步骤如下：新建网站，添加HTML页；在body标记内插入2行9列表格，输入标题行数据；在表格第二行输入模拟数据，并设置此行tr标记id为“row1”，最后一列放置“取消”超链接，设置“取消”超链接的id属性为“del”，为“取消”超链接添加onclick事件；表格设计效果如图 323所示。图 323 购物车模拟表格设计效果“取消”超链接相关代码如下：取消编写del超链接的onclick事件处理函数，代码如下：function del_onclick()var result=confirm(确认删除？);if(result)var r=document.getElementById(row1);r.parentNode.removeChild(r);ASP.NET网站开发技术3.5.2“3.5.2“设为主页设为主页”和和“加入收藏加入收藏”功能功能接着使用上面小节的网页，操作步骤如下：为将“设为主页”和“加入收藏”链接排列在网页顶部，紧跟在body开始标记后，输入table元素：设为主页 加入收藏 内联样式“margin:0 0 auto auto”表示元素外部边距的上、右为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,信院书苑)代码中event.srcElement代表setHomePage超链接对象。ASP.NET网站开发技术3.6 3.6 检查与评价检查与评价在浏览器中查看页面，检查功能是否实现。本章的评价点为：主要是学会对客户端交互技术的灵活使用，掌握使用JavaScript操作DOM的方法。对于传统的HTML语言来说，很难开发出具有动态和交互性的网页，而DHTML可以实现这一点，我们可以将JavaScript嵌入到普通的HTML网页中并由浏览器执行，从而实现动态实时的效果，提高用户体验，并大大降低服务器的负荷，提高执行的效率。ASP.NET网站开发技术 3.7 3.7 训练训练1.1.题目题目制作个人图书订购单的网页2.2.要求要求制作一个个人图书订购单的网页，效果如图 319图书订购单 所示，要求：添加“设为首页”和“添加收藏”功能；小计可以自动计算数量和单价的乘积；选购项目的复选框选中后会被自动计算。ASP.NET网站开发技术