网页客户端脚本.ppt

Part II 客户端脚本与网页动态效果 学习目标 理解客户端脚本的作用； 掌握在网页中使用客户端脚本的方法； 掌握JavaScript语言的基本语法； 掌握JavaScript内置对象的作用； 掌握浏览器对象在脚本编程中的作用； 理解DHTML的原理，能够在网页中应用DHTML特效。 对象的PEM模型 HTML文档中的每个元素都是一个拥有属性（Property）、事件（Event）和方法（Method）的对象，称为文档对象。 页面中的任何对象都有它的属性。在使用HTML标记定义时，通过设置其属性以控制对象的外观等； 事件是能被对象识别的动作，事件可以由用户操作、程序代码或系统行为来触发。为增强页面的交互能力，可以定义对象的事件。例如，设置按钮实现对页面背景音乐的播放或停止控制，就要定义按钮的单击事件。 当触发一个对象的某个事件时，该对象能够按照某种方式做出响应，但具体的响应过程需要用户编写脚本代码来实现，这种过程称为事件过程，对事件响应的代码称为事件代码，事件代码的总称称为方法。 属性（数据） 方法（动作） 事件 特殊对象: window 特殊对象: document 在JS脚本中输出HTML标记 交换图像：对象的属性访问 背景音乐控制—对象属性访问 定义按钮的单击事件——OnClick； bgsound定义特殊的对象，只能使用id属性进行标识，相当于name属性； 属性volume表示bgsound对象的音量。 滚动控制：对象的方法 OnMouse和OnMouseout是浏览器支持的事件； This表示本滚动对象； Stop()和Start()是方法。 什么是脚本和脚本语言？ 脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。 JavaScript脚本中的注释方法：在命令行尾加上双斜杠（如同VC++），即 //注释内容 动态HTML：即Dynamic HTML，建立在如下三个方面之上： HTML CSS 客户端脚本 客户端脚本的作用 脚本代码嵌入到HTML文档中用来实现HTML语言不能完成或难以完成的功能，如进一步增强网页的交互性，通过和操作浏览器对象控制浏览器外观、状态和运行方式等。 客户端脚本经常用来检测浏览器、响应用户动作、验证表单数据等； 实现页面元素的特殊显示效果，如图片的循环显示、图片渐变等。 总之，使用客户端脚本能实现页面的动态效果。 在HTML页面中使用客户端脚本 脚本代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载，执行时不进行编译，由浏览器解释执行。 内部脚本代码可通过标记script引入到HTML文档的任何地方，但一般都是将所有的脚本代码集中放在head部分，脚本代码以script开始，以/script结束，并通过Language属性定义脚本代码所用的脚本语言。 格式如下： Script Language=“JavaScript” …… /Script 使用客户端脚本方式1:内联式脚本 直接将响应事件的代码放置事件名称后，这样的脚本称为内联式脚本。如前面交换图像。 又如： input type=“button” value=“请点击我！” onclick=“javascript:window.alert(‘hello’);” 使用客户端脚本方式2：内部脚本 用Script和/Script标记符嵌入脚本程序，一般置于文档的头部。例如： script Language=“JavaScript” 此处为程序代码 /script 交换图像的内部脚本写法 使用客户端脚本方式3*-链接脚本文件* 综合实例 单元练习 变量是存放信息的容器，用于数据的存取(读/写)； 可用var定义，格式为： var 变量名； 说明： (1) 变量命名应尽量做到见名思义; (2) 变量也可不定义而直接使用。 JS变量不需要指定类型，这不同于其它的程序设计语言，因此，JS的变量是弱类型； 常量主要有两种：字符型和数值型。使用时，字符型要加一对双引号或一对单引号，而数值型按通常的方式直接使用。 计算测验题·文本框接收输入·文本框更新后事件的处理方法在脚本里·处理信息 单元练习 JS内置对象应用示例—下拉列表点歌 单元练习 [例] 根据进入页面的时间显示相应的问候信息，并输出系统的日期/时间和星期。 [实验6] 单元练习 实时显示系统时间(时-分-秒) 循环显示一组图片 动态链接 文档对象模型示意图 Window对象 属性 Document:窗口中显示的HTML文档； History:访问过的URL； Location:包含有当前URL的信息； Navigator: