《ASP.NET网站开发技术项目式教学课件作者李正吉第三章节页面的客户端交互》由会员分享，可在线阅读，更多相关《ASP.NET网站开发技术项目式教学课件作者李正吉第三章节页面的客户端交互（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 客户端交互功能实现的技术分解,上述客户端交互，都是随用户的单击，弹出一个对话框，这类似于Window
3、s桌面程序的事件机制。实际上，只需要浏览器将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制定的标准，定义了编程访问
4、和操作HTML文档的标准方法。 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
5、.name“); ,3.2.2 DOM顶级对象简介,window对象 例32 单击页面中的“桃李网”按钮，打开新窗口，访问桃李网 在VS .NET IDE中，新建HTMLPage.htm页面，使用拆分视图； 从工具箱HTML选项卡中，拖动一个Input(Button)控件到设计界面中（或到源代码的body标记中），这是一个客户端按钮，请观察源代码的变化； 选中设计界面中的按钮控件，在属性面板中，设置其ID属性为“ButtonOpenTaoLi”，Value属性设置为“新窗口打开桃李网”。 在文档选项卡上部的“客户端对象和事件”下拉框中选择ButtonOpenTaoLi对象（已有id属性的HTM
6、L元素会出现在此下拉列表中），如图 36所示； 图 36 可视化添加客户端对象的事件 在右侧的下拉框中选择onclick事件，VS .NET自动生成相关的客户端代码 在ButtonOpenTaoLi_onclick函数中输入“window.open(“http:/www.taoli.name“);”语句，在浏览器中查看网页，单击“新窗口打开桃李网”按钮,3.2.2 DOM顶级对象简介,window对象 例33 设置浏览器状态栏文本 参考例32步骤，加入HTML按钮，ID设为“ButtonSetStatusText”、Value设为“设置状态栏”，输入onclick事件函数代码 例34 弹出一个
7、警告对话框 执行window对象的alert方法，将弹出一个警告框，其参数为警告框中显示的文本。上述代码书写中，省略了window对象。在浏览器中查看网页，单击按钮，效果如图 39所示，该警告对话框和下述确认对话框，都是模态对话框。 例35 弹出一个确认对话框 代码中，调用window对象的confirm方法，弹出一个确认对话框，并定义变量r保存confirm方法的返回值，作为一种简单的脚本语言，JavaScript虽然是类C语言，但不是强类型语言，用var来声明所有变量。confirm方法返回的是一个bool值，代码中，根据此返回值，进行程序分支，决定执行何种操作。,3.2.2 DOM顶级对
8、象简介,2. document对象 document对象代表整个网页，是客户端编程中最常用的对象。,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属性赋值，也就创建了段落中的文
9、本，此处也可用innerHTML代替innerText。 HTML DOM对象的appendChild方法在该元素对象中添加一个嵌套的子对象。此处将objP对象添加到了body对象中。,3.2.2 DOM顶级对象简介,3. location对象 location对象对浏览器窗口的当前页面地址进行管理。当前页面的URL存放在location对象中，使用location对象的属性，可以直接访问这个URL的各个部分，而不必再进行字符串分析编程。location对象还具有导航方法，可以使浏览器窗口导航到指定地址。,3.2.2 DOM顶级对象简介,location对象 例39 location对象的属性
10、 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属性值为
11、： “ + location.search + “n“ + “hash属性值为： “ + location.hash; alert(str); ,3.2.2 DOM顶级对象简介,location对象,3.2.2 DOM顶级对象简介,navigator 对象,3.2.2 DOM顶级对象简介,5. history对象 history对象对当前浏览器窗口（或选项卡）已经访问过的网址进行管理，其length属性表示历史记录URL的个数，常用其下列三个方法调用历史记录中的URL，以实现浏览器导航。 back方法：等效于浏览器中的“后退”按钮。 forward方法：等效于浏览器中的“前进”按钮。 go方法
12、：使用整型参数决定导航到哪一条历史记录，如：go(-1)相当于back()，go(-2)相当于执行两次back()。,3.2.2 DOM顶级对象简介,frame对象 在HTML代码中使用frame框架标记（配合frameset框架集标记），能够将浏览器窗口划分为多个部分（即框架），每个部分显示一个网页，每个框架网页单独刷新。 一般说来，frame对象在window对象的下层，但文档中包含frameset框架集时，每个frame对象都包含一个window对象，每个window对象有自己的DOM结构。由于这样的结构破坏了DOM层次，并且其功能又可以用iframe标记、AJAX技术等代替，所以，不建
13、议使用frameset、frame。,3.2.3 DOM对象的事件,前面介绍了JavaScript对DOM顶级对象的基本操作，也包含了对HTML DOM对象的创建和修改操作，修改操作包括修改属性值（如innerHTML、innerText等）、修改样式（style属性）等操作。 实际上，在用户交互中，经常要对HTML DOM对象的事件进行处理，window对象还有一个event子对象，用于维护事件状态，如事件对象、鼠标、键盘的状态等。本部分仅介绍event对象的基本使用，更详尽的内容请参阅其他书籍。,3.2.3 DOM对象的事件,例312 event对象的使用 为window对象添加onmou
14、semove、onkeypress、onclick事件，编写事件代码，然后在网页中添加几个HTML控件，并设置body的border样式. 为window添加onmousemove等事件，实际上为body元素生成了onmousemove等属性。onmousemove事件由用户在body中移动鼠标而产生，其处理函数代码中，使用event对象的x属性和y属性获取鼠标位置，将其显示在浏览器窗口状态栏上。onkeypress事件由用户按下并松开某个键盘按键而产生，其处理函数代码中，使用event对象的keyCode属性，将所按键的键码用警告框显示出来。onclick事件由用户对body的单击而产生，其
15、处理函数代码中，使用event对象的srcElement属性，将单击的元素对象用警告框显示出来，默认显示元素对象的类型名称。,3.3 基本知识2：JavaScript脚本语言简介,3.3.1 概述 3.3.2 数据类型和变量 3.3.3 运算符、表达式、流程控制 3.3.4 函数 3.3.5 常用内置对象,3.3.1 概述,JavaScript是由Netscape公司开发的一种基于对象的网页脚本编程语言 1. JavaScript语言特点 JavaScript脚本语言也是类C语言，与C#语法有很多相似。 2. JavaScript脚本程序的使用 使用JavaScript脚本时，还要注意：函数中
16、的脚本语句通常是由对象事件调用的，如果没发生相关事件，这些函数将不会运行；但脚本语句还可以不在任何函数中，它们将会随着文档的顺序加载，而被顺序运行。,3.3.2 数据类型和变量,JavaScript是弱类型语言，变量不必声明类型，但赋值后类型自动确定。 数据类型 字符串型、数值型、布尔型、对象型、null、undefined 2. 数据类型转换 （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(字符串
