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

学习情境引入基本知识1：文档对象模型DOM基本知识2：JavaScript脚本语言简介决策与计划实施

3.1学习情境引入HTML和CSS都是客户端静态内容的设计技术，静态内容是网页设计的基础，但只有静态内容的网页无法完成丰富的交互功能。客户端交互的功能需求客户端交互的功能展示客户端交互功能实现的技术分解

3.1.1客户端交互的功能需求网站与用户的交互，如果在服务器端实现，需要经过HTTP请求和响应，会使人感觉反应迟缓，用户体验较差。DHTML技术，使得用户与网站之间，通过浏览器，在客户端就可以进行交互，从而提高了用户体验，在网站的开发中得以广泛应用。

010203此功能要求，当单击“设为主页”链接按钮的时候，会弹出一个浏览器内置的对话框，供用户选择是否将当前页设为主页。2.设为主页此功能要求，当单击“添加收藏”链接按钮的时候，会弹出一个浏览器内置的对话框，供用户选择是否将当前页添加到收藏夹。3.添加收藏此功能要求当在购物车中单击“取消”按钮时，立即弹出一个删除确认对话框进行提示，以引起操作者的注意，以防止误操作。1.弹出删除确认对话框框3.1.2客户端交互的功能展示

3.1.3客户端交互功能实现的技术分解上述客户端交互，都是随用户的单击，弹出一个对话框，这类似于Windows桌面程序的事件机制。实际上，只需要浏览器将HTML元素（含CSS样式）视为“对象”，就可以拥有“事件”，使用客户端编程语言，就可以编写“事件处理程序”了。所以，这一章我们需要掌握的基本知识有：DOM和JavaScript语言。我们将使用这些技术，完成网上书店管理系统中弹出警告框、设为首页、添加收藏等客户端交互功能。12

3.2基本知识1：文档对象模型DOMDOM基本结构DOM顶级对象简介DOM对象的事件

档对象模型(DocumentObjectModel，DOM)是DHTML的基础，是由W3C制定的标准，定义了编程访问和操作HTML文档的标准方法。DOM把HTML文档的元素视为对象，每个对象都有自己的属性和行为，通过对这些属性和行为的控制可以改变它们的状态和动作。3.2.1DOM基本结构

010203040506window对象document对象location对象navigator对象history对象frame对象3.2.2DOM顶级对象简介

3.2.2DOM顶级对象简介window对象例3?1打开新窗口，访问桃李网。在VS.NETIDE中，新建HTML页面HTMLPage.htm，设置title，并在head标记中输入script标记及其内容headtitle打开新窗口的例子/titlescripttype=text/javascriptwindow.open();/script/headbody/body

3.2.2DOM顶级对象简介window对象例3?2单击页面中的“桃李网”按钮，打开新窗口，访问桃李网在VS.NETIDE中，新建HTMLPage.htm页面，使用拆分视图；从工具箱HTML选项卡中，拖动一个Input(Button)控件到设计界面中（或到源代码的body标记中），这是一个客户端按钮，请观察源代码的变化；选中设计界面中的按钮控件，在属性面板中，设置其ID属性为“ButtonOpenTaoLi”，Value属性设置为“新窗口打开桃李网”。在文档选项卡上部的“客户端对象和事件”下拉框中选择ButtonOpenTaoLi对象（已有id属性的HTML元素会出现在此下拉列表中），如图3?6所示；图3?6可视化添加客户端对象的事件在右侧的下拉框中选择onclick事件，VS.NET自动生成相关的客户端代码在ButtonOpenTaoLi_onclick函数中输入“window.open();”语句，在浏览器中查看网页，单击“新窗口打开桃李网”按钮

3.2.2DOM顶级对象简介window对象例3?3设置浏览器状态栏文本参考例3?2步骤，加入HTML按钮，ID设为“ButtonSetStatusText”、Value设为“设置状态栏”，输入onclick事件函数代码例3?4弹出一个警告对话框执行window对象的alert方法，将弹出一个警告框，其参数为警告框中显示的文本。上述代码书写中，省略了window对象。在浏览器中查看网页，单击按钮，效果如图3?9所示，该警告对话框和下述确认对话框，都是模态对话框。例3?5弹出一个确认对话框代码中，调用window对象的confirm方法，弹出一个确认对话框，并定义变量r保存confirm方法的返回值，作为一种简单的脚本语言，JavaScript虽然是类C语言，但不是强类型语言，用var来