欢迎来到三一办公! | 帮助中心 三一办公31ppt.com(应用文档模板下载平台)
三一办公
全部分类
  • 办公文档>
  • PPT模板>
  • 建筑/施工/环境>
  • 毕业设计>
  • 工程图纸>
  • 教育教学>
  • 素材源码>
  • 生活休闲>
  • 临时分类>
  • ImageVerifierCode 换一换
    首页 三一办公 > 资源分类 > PPT文档下载  

    Section4脚本语言S.ppt

    • 资源ID:6518753       资源大小:329.50KB        全文页数:55页
    • 资源格式: PPT        下载积分:15金币
    快捷下载 游客一键下载
    会员登录下载
    三方登录下载: 微信开放平台登录 QQ登录  
    下载资源需要15金币
    邮箱/手机:
    温馨提示:
    用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)
    支付方式: 支付宝    微信支付   
    验证码:   换一换

    加入VIP免费专享
     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    Section4脚本语言S.ppt

    谭晓阳 南京航空航天大学计算机系网络研究室 Email:txynaef-Tel:4802150(home)4892803(office),WEB技术和应用开发,Section 4 脚本语言Script第2 章Script在客户端的应用,Script在客户端的应用,本讲内容1 客户端浏览器与DHTML2 浏览器内置对象3 文档对象模型4 事件模型5 样式表对象6 Script在客户端的应用示例,1 客户端浏览器与DHTML,1.1 客户端浏览器的组件 在讨论客户端脚本的使用之前,我们先来看看客户端浏览器的工作机制,以Microsoft IE为例:对于最终用户而言,IE看起来是一个独立的应用程序:IEXPLORE.EXE about 60KB 但事实上,IE是由一系列的组件构成的:IEXPLORE.EXE只是一个作为container的小程序,它为其它的组 件提供了一个集成框架 在这个框架中包含了以下几个重要的组件,如下图所示,1 客户端浏览器与DHTML,1 客户端浏览器与DHTML,1.1 客户端浏览器的组件 WebBrowser对象 Microsofts WebBrowser object 由SHDOCVW.DLL所提供。该组件 实现了Web浏览器所应该具备的一些基本特征,例如,forward、back navigation,favorites,page refresh,and printing WebBrowser对象本身并不具备显示HTML页面或者其它类型文档(例如pdf、doc等)的能力 但是,它可以作为一个ActiveX document container,根据当前文档 的类型来加载相应的ActiveX document server。这些ActiveX document server具备对特定类型的文档进行解析和显示的功能,1 客户端浏览器与DHTML,WebBrowser对象续 这样,Microsoft就使得IE成为一个独立于文档类型的浏览器,它 不仅仅能够浏览和操作HTML文档,还能够用于浏览和操作其它 任何ActiveX document,例如Word、Excel等 同时,WebBrowser对象也不仅仅可以用于Microsoft IE中,用户 可以和Microsoft IE一样将WebBrowser对象包含在自己开发的应 用程序中,从而实现类似于Microsoft IE 的功能,我们在HTTP 中的设计的一个示例程序就采用了这种方法 HTML Viewer 对于HTML文档而言,WebBrowser会加载Microsofts HTMLViewer(MSHTML.DLL)MSHTML是一个ActiveX document server,它具有解析展现 HTML文档的功能,并为其它程序(例如:客户端脚本程序)访 问HTML文档提供了编程接口,1 客户端浏览器与DHTML,1.1 客户端浏览器的组件 脚本引擎 虽然HTML Viewer能够按照HTML规范解析HTML,但它不知 道如何执行脚本语句 当HTML Viewer发现HTML文档中所嵌入的脚本程序时,它将根 据脚本语言类型加载合适的脚本引擎,例如用于VBScript的 VBSCRIPT.DLL、用于JScript/JavaScript的JSCRIPT.DLL,并将 脚本语句传递给脚本引擎,由脚本引擎解释执行 同样,对于HTML文档中所嵌入的其它对象,包括ActivieX Control Java Applet 以及其它的一些Pluging,HTML Viewer也 无法解析和处理,此时将会加载相应的处理程序,Dynamic HTML,Dynamic HTML is a combination of positioning in CSS and a scripting language in order to give life to a page,either creating animation or enhancing interaction.Dynamic HTML is a term used to describe HTML pages with dynamic content.There are three components in dynamic HTML:1.HTML2.Cascading Style Sheets(CSS)3.JavaScriptThe three components are glued together with DOM,the Document Object Model.,DHTML,DHTML,or Dynamic HTML,is a new webtechnology that enables elements inside your webpage,such as text,font,color,size,etc.,to bedynamic and change after the page is downloaded.,Dynamic HTML静态vs.动态,1 客户端浏览器与DHTML,1.2 DHTML Object Model简介 DHTML Object Model的地位 在应用程序(包括脚本程序)中可能需要对Web浏览器以及其 中包含的HTML文档进行操作 一种很好的解决方案是采用面向对象的方式为Web浏览器和 HTML文档提供了接口。如图所示 通过这个接口,应用程序只要简单地设置对象的属性或调 用对象的方法就可以操作Web浏览器,以及其中包含的 HTML文档 这样Web页面从服务器端下载到客户端以后,页面的内容 样式等仍然能够随时变换,因此该接口被称为DHTML Object Model,1 客户端浏览器与DHTML,1 客户端浏览器与DHTML,DHTML Object Model的组成 DHTML Object Model由一系列的对象组成,这些对象可以分为以下两种类型 关于Web Browser的对象 在DHTML Object Model中,浏览器以及其中所包含的地址、历史列表、框架文档等各个部分均被抽象为相应的对象 脚本等应用程序可以使用这些对象接口来访问和操纵Web浏 览器 关于HTML Document的对象 一个HTML文档是一个流式的文件,其中HTML指定了文 档的内容和逻辑结构,而CSS则给出了文档的展现信息 为了便于应用程序对文档的访问和操作文档以及其中的各 种组成成分(元素)也被抽象为相应的对象,这些对象统称 为Document Object Model,1 客户端浏览器与DHTML,1.2 DHTML Object Model简介 DHTML Object Model与脚本 DHTML是近年来Web应用开发技术中最振奋人心也最具实用性 的创新之一。它的实现是HTML、CSS、DHTML Object Model、脚本等多种技术的综合 如果将用户看成是主体,Web页面看作是客体,那么DHTML object model是使得客体变得容易操纵的一种机制,而脚本则是主 体用于操纵客体的一种工具,是实际促成页面按照用户的意图进 行动态变化的程序,2 浏览器内置对象,Web文档浏览器和WSH一样,它也是脚本的一种宿主,因此,Web文档浏览器提供了一些脚本语言程序可以直接使用的内置对象。如下图所示,这些对象分为两层。在对象模型的顶层,仅有一个对象Window object window object是对Web浏览器的抽象 Window object 的属性、方法、事件描述了Web浏览器所具备的各 种特点和功能 对象模型的第二层包括Frames object、History object、Location object Navigator object、Document object、Screen object、Event object等 这些object均是Window object的成员 它们分别表示Web浏览器中所包含的地址、历史列表、框架、文 档等各个部分下面我们对上述对象进行简要介绍,2 浏览器内置对象,2 浏览器内置对象,(1)Window Object Window Object是Web浏览器提供给脚本等应用程序直接使用的唯 一对象、它代表着当前脚本程序所运行的Web浏览器宿主环境 通过使用Window Object、脚本程序可以实现以下功能 获取或者设置当前浏览器窗口的有关特征或状态、例如:窗 口中当前网页的URL、状态栏、信息当前窗口的父窗口、当 前窗口的顶层窗口等 通过Window Object来访问Web浏览器对象模型中的其它对象,例如,浏览器中包含的框架、浏览器中所显示的文档、浏览 器的历史列表等 控制浏览器的操作,例如,显示对话框、设置/清除定时器、滚动/移动窗口、在当前窗口中打开新的网页、在一个新窗口 中打开网页等,2 浏览器内置对象,(1)Window Object(续)Window Object包含丰富的属性和方法,同时能够响应各种事件。有关这些方面的详细信息请参见MSDN DHTML References 由于Window Object是Web浏览器提供给脚本程序直接使用的唯一对象。因此在使用时可以将其省略,而直接使用其属性或方法名称即可,但是为了保持程序的可读性,最好能够使用前缀“window.”示例参见window document,2 浏览器内置对象,(2)Frames object当Web浏览器中包含若干个框架(由HTML的FRAME元素定义)时,这 些框架被表示为对象模型中的Frames object 通过访问Windows object的frames属性,就可以得到Web浏览器中的Frames object Frames object是一个集合,其中的每个成员代表了一个框架 每个框架事实上也是一个Window object,因此可以象使用 Window object那样来使用每个框架 示例参见loc&his-index loc&his,2 浏览器内置对象,(3)History object History object包含了Web浏览器所访问过的URL 历史列表的有关信息,通过使用History object,脚本程序可以实现“Back”“Forward”等功能 参见示例loc&his-index loc&his(4)Location object Location object表示Web浏览器当前所浏览的Web页面的地址 通过使用Location Object的属性和方法脚本程序可以实现以下 功能 获取Web浏览器当前所浏览的Web页面地址的有关信息,包 括完整的URL、URL中的主机端口等 设置Web浏览器当前所浏览的Web页面地址,此时浏览器会 立刻打开相应的页面 参见示例loc&his-index loc&his,2 浏览器内置对象,(5)Navigator object Navigator object包含了有关客户端Web浏览器的信息 参见示例navigator(6)Screen object Screen object包含了有关客户端显示器和显示能力的信息 参见示例screen,3 Document object与文档对象模型,DOM简介 在DHTML中,Web浏览器采用面向对象的方法来描述当前所显示的文档,这种描述方法称之为文档对象模型(Document ObjectModel)文档对象模型是DHTML Object Model中的一个重要组成部分,它为访问HTML文档中的各种元素和CSS信息提供了接口 从某种意义上来说,Document Object Model是DHTML的真正核心内容,3 Document object与文档对象模型,document object简介 文档对象模型最常见的表现形式是以document object作为根结点 的树状结构。document object是一个全局的对象,表示Web浏览 器中当前所显示的文档 利用document object,脚本程序可以获取浏览器中当前显示文档 的有关信息,访问文档中的各个HTML元素和文本,甚至处理各 个HTML元素上发生的各种事件。由于window object是Web浏览器提供给脚本程序直接使用的唯一 对象,因此document object也是作为window object的属性(成员)对象来供脚本程序使用的。,3 Document object与文档对象模型,3.1 HTML文档树(1)结点与层次 HTML文档是存储在磁盘上的流式文件。为了便于展现和操纵 Web浏览器根据HTML规范将文档解析成一棵文档树(建立在内 存中)HTML文档树反映了HTML文档的内容和结构。图中给出了HTML文档树的一个示例(仅给出结点的元素种类,省略了元素属性方法等)HTML文档中的每个元素对应于树上的一个结点,结点中包含了 有关该元素的id、name、tag等各种属性信息 在HTML文档中,各个元素之间的包含关系对应于文档树上结点 之间的父/子层次关系。显然,结构化的HTML文档树比流式的HTML文档更易于访问和 操作,3 Document object与文档对象模型,3 Document object与文档对象模型,(2)元素对象 在文档树上,每个结点都是一个对象,相同种类的HTML元素所 对应的结点的对象类型相同 例如,一个HTML文档中包含5个“IMG”元素,那么这5个元素对 应于文档树上的5个结点,这5个结点都是“IMG”类型的对象 DHTML中的元素对象类型和HTML规范中的元素类型几乎是 一一对应的 每种类型的元素对象都有其相应的属性和方法。如图所示,3 Document object与文档对象模型,3 Document object与文档对象模型,(2)元素对象 这些属性/方法可以大致概括为以下两类 公有属性/方法:虽然DHTML中包含有近百种不同的元素对象类型,但它们一般都具有一些共同的属性,例如id、className、style、tagName、lang 以及事件属性onclick、onmousedown,etc.这与HTML规范非常类似。有关详情请参见MSDN DHTML References 特有属性/方法:除了上述这些共有的属性,各种元素对象还 有自己所特有的属性。例如“A”元素对象所具有的href属性、“IMG”元素对象所具有的src属性、以及各种ActiveX control和 Applet所具有的特定属性等等。我们在HTML 中已经对各 种元素的特有属性进行了比较详细的介绍,此处不再讨论 有关详情请参见MSDN DHTML References,3 Document object与文档对象模型,3.2 文档树中对象的引用 使用文档对象模型将HTML文档表示文档树后,可以通过访问文 档树中的结点来获取文档中各个元素的信息,也可以通过操纵文 档树中的结点来改变文档的内容、展现等 在脚本程序中,要引用文档树中的结点对象可以采用以下三种方 式 元素父子关系 元素快速索引表 元素标识符/名称,3 Document object与文档对象模型,元素父子关系 Web浏览器将document object作为一个全局对象提供给脚本程序 使用,而文档树又是以document object作为根结点。脚本程序可以从document object出发,遍历文档树的各个层次,直到获得所需要访问或操纵的结点对象为止 document object以及文档树上所有元素对象均支持以下三个属性 children:返回一个集合,其中包含了当前对象的所有儿子元素。脚本程序可以象访问数组成员一样来访问集合中包含的每个成员。当集合为空时说明当前对象是文档树上的页结点。参见示例 all 与children类似,也返回一个集合,但其中包含的是当前对象的所有儿子元素。parentElement 返回当前对象的父元素。由于document object是文档树的根结点,因此不支持该属性 参见示例refobject,3 Document object与文档对象模型,元素快速索引表 脚本程序在对文档树进行访问时,可能需要经常地访问文档中包 含的某类元素,例如“超链”“表单”“图像”等 文档对象模型提供了以下两种途径来供脚本程序访问文档树或者 其中某个子树上的所包含的某种特定类型的元素。这样,脚本程 序就不需要遍历整个文档树 doucment object具有一些属性,包括anchors,applets,forms,images,links,scripts等。每个属性返回的是一个集合,分别代 表HTML文档树中包含的所有的anchors,applets,forms,images,links,scripts等类型的结点 doucment object以及所有元素对象的all属性和children属性均 是一个集合,该集合支持tags方法,该方法的输入参数为代 表“元素种类”的字符串。该方法能够从all/children集合中返 回由特定种类的元素所组成的子集合。,3 Document object与文档对象模型,例如:doucment.all.tags(“IMG”)返回的是文档中所包含的所有 的img结点,等价于doucment.images object1.all.tags(“IMG”)返回的是结点object1下包含的所有的img子孙结点,而 object1.children.tags(“IMG”)返回的是结点object1下的包含的 所有的img儿子结点 参见示例refobject 元素标识符/名称 在HTML文档中,有些元素被设定了id或者name属性,这样,它 们在文档树上对应的结点的id或name属性也为非空值。此时,id或name属性的值就会被作为这些结点的对象变量名,而 且这些对象变量名在整个文档的名字空间内是有效的。脚本程序可以直接以“window.对象变量名”的形式来访问相应的结 点对象。参见示例refobject,4 事件模型与event object,4.1 事件模型 事件 所谓“事件”(Event)就是指用户对文档中的某个对象执行了某 种操作所产生的动作,比如点击超链元素、在页面上移动鼠标 在表单的文本框控件中输入、提交表单等都可以视为事件 这些事件可以分为以下三类 Web页面中所有元素均能够触发的一些标准的鼠标/键盘事件 某些能够接收焦点的元素均能够触发的一些事件 特定的元素所能够触发的一些独特的事件,4 事件模型与event object,Web页面中所有元素均能够触发的一些标准的鼠标/键盘事件包括 onkeydown 用户按下某个按键 onkeyup 用户松开某个按键 onmousedown 用户按下鼠标按钮 onmouseup 用户松开鼠标按钮 onclick 用户点击鼠标按钮或在表单中的按钮控件上按 下按键或在表单中的checkbox radio等控件上按 下按键等等 ondblclick 用户双击鼠标按钮 onmouseover 用户将鼠标移到某个元素上 onmousemove 用户在某个元素上移动鼠标 onmouseout 用户将鼠标移出某个元素,4 事件模型与event object,某些能够接收焦点的元素均能够触发的一些事件 onfocus 当用户使用按键或者鼠标将焦点移动按钮、超链、文本框等元素上时 onblur 当用户使用按键或者鼠标将焦点从按钮、超 链、文本框等元素上移开时,Fires when an object,such as a button or check box,loses the input focus 参见示例event 特定的元素所能够触发的一些独特的事件 FORM元素所具有的onreset/onsubmit事件(用户提交/重置表 单)INPUT SELECT TEXTAREA元素所具有的onchange事件(用户改变了表单中输入控件的值)参见示例event,4 事件模型与event object,(2)使用脚本来处理事件 HTML文档树上的每个结点(对应于各个HTML元素)都具有事 件属性 在HTML文档中,通过设置元素结点的事件属性,可以将该元素 的相应事件与特定的脚本程序关联起来 客户端浏览器以事件驱动的方式运行。当用户与浏览器中打开的 HTML文档进行交互时,会触发相应元素的特定事件,客户端浏 览器会调用相关的脚本程序来处理该事件。,4 事件模型与event object,(3)Event Bubble 在DHTML中,很多“事件”能够沿着Document Object Model中的 元素层次自底向上传播,就像“气泡”从水下冒到水上一样,也就 是说发生在某个元素上的事件,首先由该元素自身进行处理(调用该元素所拥有的相应的脚 本程序)然后由该元素的父元素进行处理,如此重复直到最终由 document object(DOM对象模型)的根结点进行处理 参见示例event,4 事件模型与event object,(3)Event Bubble(续)在DHTML中,大多数元素所共有的标准的鼠标/键盘事件都具备“Event Bubble”的特性 特定元素所能够触发的一些独特事件通常并不能够“Bubble”。此 时这些事件只能够由触发事件的元素本身进行处理 FORM元素的onsubmit/onreset 事件 能够接收焦点的元素(按钮、超链、文本框等)的 onblur/onfocus事件 FORM中的控件元素(TEXTAREA、SELECT INPUT等)所具有的onchange事件 即使是一些具备“Event Bubble”特性的事件,HTML文档的作者有 时也可能希望该事件并不一定按照缺省的方式“bubble up”,为此 DHTML允许在事件的脚本程序中取消当前事件的“bubble up”。详情请参见event object,4 事件模型与event object,(4)Event Action 当用户的操作触发了HTML文档中某个元素的某个事件时,浏览 器会产生一些缺省的动作,例如 当超链元素上发生onclick事件时,浏览器将会打开该超链元 素所指向的目标Web页面 当表单元素上发生onsubmit事件时,浏览器会将表单中的数 据提交给服务器端的应用程序 有时,HTML文档的作者可能希望当用户与HTML文档进行交互 时,浏览器并不一定按照缺省的方式进行动作,例如,当用户在 表单中填入的数据不合法时,即使用户点击submit按钮,该表单 也不会被提交给服务器,为此DHTML允许在事件的脚本程序 中取消浏览器的缺省动作,详情请参见event object。,4 事件模型与event object,4.2 事件对象 event object是DHTML event model的一个核心部分。它是一个全 局的对象,表示Web浏览器中当前所发生的事件,例如,用户在 Web页面上的某个HTML元素上点取了鼠标或者按下了按键等。由于event object是代表Web浏览器中“当前事件”的一个全局对象,因此,event object只能够用于对事件进行处理的脚本程序中。此外,由于window object是Web浏览器提供给脚本程序直接使用 的唯一对象,因此,event object也是作为window object的属性(成员对象)来供脚本程序使用的,4 事件模型与event object,4.2 事件对象(1)使用event object来获取“当前事件”的详细信息 event object提供了有关“当前事件”的各种信息,包括,发生该事 件的目标元素、事件发生时键盘上ctrl、alt、shift等按键的状态、鼠标的位置,以及各个按钮的状态等 这些信息都被作为event object的属性封装在event object中,包括 srcElement:给出触发“当前事件”的“HTML元素”对象 altKey/ctrlKey/shiftKey:给出“当前事件”发生时 ALT/CTRL/SHIFT等按键的状态(布尔值)KeyCode:给出触发“当前事件”的键盘按键的编码值,该属 性通常用于onkeydown/onkeyup/onkeypress等事件中,4 事件模型与event object,(1)使用event object来获取“当前事件”的详细信息(续)button:给出触发“当前事件”发生时鼠标按钮的状态(数字值,1 Left button、2 Right button、4 Middle button is pressed)。该属性通常用于onmousedown/onmouseup/onmousemove等事件中 offsetX/offsetY:给出“当前事件”发生时,鼠标点击点在目标 元素内的坐标位置 clientX/clientY:给出“当前事件”发生时,鼠标点击点在窗口 客户区中的坐标位置 screenX/screenY:给出“当前事件”发生时,鼠标点击点在屏 幕中的坐标位置,4 事件模型与event object,(1)使用event object来获取“当前事件”的详细信息续 事件处理的脚本程序可以通过访问这些属性来获得相应的状态信 息。参见示例event 特别,地利用event object以及事件所具备的“event bubble”特征,用户可以不必为每个元素对象设置其事件属性,而只需要在文档 对象树的某个层次上设置事件属性,那么当其下层次中所有结点 发生的相应事件时,都会调用处理该事件的脚本程序。脚本程序 可以通过访问event object的各种属性来获知该事件具体发生在那 个元素结点上。参见示例event,4 事件模型与event object,(2)使用event object来改变event bubble 前面我们谈到在DHTML中很多事件均具备“Event Bubble”特 性,而Web页面的作者可能有时会希望取消这种特性,即,当事件 沿着文档对象树自底向上传播到某个层次后不再继续上传 event object提供了cancelBubble属性。在处理事件的脚本程序中,可以通过设置该属性的值来指定该事件是否继续向上传播 缺省情况下cancelBubble被设置为FALSE,当前事件将继 续向更高的一层传播 当cancelBubble被设置为TRUE时,当前事件将不会再上传,这样就不会触发更高层次的事件处理程序 参见示例event,4 事件模型与event object,(3)使用event object来改变event action 前面我们谈到,当用户的操作触发了HTML文档中某个元素的某 个事件时,浏览器会产生一些缺省的动作,而Web页面的作者可 能有时会希望取消浏览器的缺省动作 event object提供了returnValue属性,在处理事件的脚本程序中 可以通过设置该属性的值来指定浏览器是否执行缺省的动作 在默认情况下returnValue被设置为TRUE,在事件处理程序 执行结束后浏览器将会继续执行缺省的动作 当returnValue被设置为FALSE时,浏览器将不再继续执行缺 省的动作 参见示例event,5 样式对象,5.1 Style Object 在HTML规范中每种元素几乎都具有style属性,用于指定该元 素的展现样式信息 与此相对应,在DHTML中每个元素对象也都具有style属性,即object.style style属性也是一个对象类型的变量,即它是元素对象的成员对象。因此,style对象也具有相应的属性和方法。如图所示,5 样式表对象,5.1 Style Object 续 在脚本程序中,可以通过设置object.style的属性,或者调用其方法 来改变元素对象的样式信息,从而相应地改变其展现形式,实现 动态文档的效果。例如,当鼠标移动到某个段落上时,将其反显 以突出其内容,只要在脚本程序中改变对应的pobj.style的前景和 背景颜色属性即可。参见示例style/style 在DHTML中,style类型的对象具有近百个属性,事实上这些 属性和CSS规范中给出的CSS属性几乎是一一对应的,因此,理 解了CSS规范也就可以来使用sytle对象 有关sytle对象的详细信息请参见MSDN DHTML References,5 样式表对象,5.2 CSS提供的样式特征 CSS(Cascading Style Sheets)是W3C所开发的一种样式表语言,它为HTML文档中的元素提供了各种样式属性Attribute 这些属性大致可以分为以下几种类型 Font Properties:元素的字体、大小、修饰等,参见示例 style/css Text Properties:元素的对齐、缩进、空白、大小写等,参见 示例style/css Color Properties:元素的前景、背景、颜色等参见示例 style/css Layout Properties:元素的边缘、边框、填充等。参见示例 style/css Positioning Properties:元素的左上角、顶点坐标、高度、宽度 Z序。参见示例style/css 有关CSS的详细信息请参见MSDN DHTML References,6 Script在客户端的应用示例,Form validation 在将客户端信息提交给服务器端之前,可以使用客户端脚本对表单中各个字段的内容进行校验。与在服务器端的应用程序中检查信息的合法性相比,客户端校验可以加快响应速度,减轻服务器端负载。示例,网上定购系统。Interaction with ActiveX 利用文档对象模型,客户端脚本可以方便地访问和操纵文档中包含的ActiveX控件等活动元素。示例,在Web浏览器中使用Activemovie control来播放音/视频文件。Dynamic positon 利用style object,客户端脚本可以方便地改变文档的展现,而不需要和服务器端交互。示例,在Web浏览器中实现拼图程序。Dynamic content 利用文档对象模型,客户端脚本可以方便地访问和操纵文档的内容,而不需要和服务器端交互。示例,时钟。,作业3,作业:自动创建HTML文档的目录 思路 很多HTML文档使用 等元 素来表示文档的各级标题。可以使用客户端脚本和DHTML提供的各种对 象模型来读取文档中包含的各级标题元素,然后创建文档的目录。,作业3,作业自动创建HTML文档的目录 要求 目录中应该包含HTML文档的各级标题元素 目录中的各个目录项应该和HTML文档中的 各级标题元素建立关联,即用户点击某个目 录项就可以跳转到文档中的相应部分 可以使用JScript、VBScript等任何客户端脚本 语言 形式以小组为单位,2、4人/组 日期11/30日前完成。,THE END,REVIEW,1 教学目标了解客户端浏览器的工作机制。理解DHTML在客户端应用开发中的作用以及它与客户端Script的关系。掌握DHTML object model,包括:window object、document object model、event object、style objcet等,并能够使用它们来设计与实现客户端脚本程序。,REVIEW,2 知识点客户端浏览器的工作机制。DHTML object model在客户端应用开发中的作用。DHTML object model的组成,包括:有关browser的对象、有关document的对象。浏览器提供的内置对象window object。作为window object的属性的内置对象frames object、history object、location object、navigator object、screen object。,REVIEW,2.知识点(续)DHTML中的document object model,以及document object。在脚本中引用HTML文档树上结点对象的三种方法。DHTML中的event object model,以及event object。Event bubble。Event action。DHTML中的style object。CSS提供的样式特征。使用Script开发客户端应用程序、实现DHTML。,

    注意事项

    本文(Section4脚本语言S.ppt)为本站会员(小飞机)主动上传,三一办公仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知三一办公(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    备案号:宁ICP备20000045号-2

    经营许可证:宁B2-20210002

    宁公网安备 64010402000987号

    三一办公
    收起
    展开