《网页制作与设计》立体化电子课件 第8章—脚本语言与网页特效.ppt

网页特效一般使用JavaScript或VBScritp语言来实现 有时也会利用Java Applet 来实现，并通过客户端的Web浏览器来运行与显示 网页特效技术 定义函数的格式如下： function 函数名(参数1,参数2, …) { 语句段； …… return 表达式； } JS语言基础-函数 函数名是调用函数时引用的名称 参数是调用函数时接收传入数值的变量名 大括号中的语句是函数的执行语句，当函数被调用时执行 如果需要函数返回值，可以使用return语句，需要返回的值应放在return之后 JS语言基础-函数 对象 对象就是客观世界中存在的特定实体 对象包含两个要素：属性 和方法 属性：用来描述对象特性的一组数据，也就是若干变量； 方法 ：用来操作对象特性的若干动作，也就是若干函数 通过访问或设置对象的属性，并且调用对象的方法，可以对对象进行各种操作，从而获得需要的功能 JS语言基础-对象 DOM JavaScript使用文档对象模型DOM(Document Object Model)来描述网页文档中的各类内置对象 这些对象被组织成层次树的结构，如下图所示 JS语言基础-对象 JavaScript内置对象层次结构 JS语言基础-对象 在JavaScript中可以操作的对象通常包括三种类型： 浏览器对象 JavaScript内部对象 用户自定义对象 JS语言基础-对象 JS语言基础-对象 1 浏览器对象是指文档对象模型规定的对象，例如HTML元素对象、document对象、window对象等 浏览器对象 2 JavaScript内部对象包括一些常用的通用对象，例如数组对象Array、日期对象Date、数学对象Math等 内部对象 3 用户自定义对象为用户可以按需要编写自定义的对象来完成特定的任务 用户自定义对象 事件 事件(event) 是由鼠标、键盘等对象引发的动作 事件是浏览器响应用户、进行交互操作的一种机制 JS语言基础-事件处理 事件 处理 事件处理(Event Handling)就是浏览器为响应某个事件而进行的处理过程 事件处理可以改变浏览器响应用户操作的方式，从而能够开发出具有交互性并易于使用的动态网页 JS语言基础-事件处理 事件处 理程序 事件处理程序(Event Handler)是指用来完成事件处理的函数或程序代码 JS语言基础-事件处理 JavaScript采用事件驱动(Event-Driven)的处理机制 事件驱动处理机制的原理如下 JS语言基础-事件处理 用户可在HTML文档中为某个对象的特定事件编写处理事件的JavaScript函数 如果没有定义对特定事件的处理程序，浏览器将使用系统默认的处理行为 所谓默认的处理行为，是指系统对每个事件都设置了标准的处理动作，这些动作通过调用系统为每个标准事件预设的对应处理程序来实现 JS语言基础-事件处理 标准事件处理程序的定义方式： 一般是先在事件名称前加上“on”这一关键字，构造出事件响应标识 然后在事件响应标识后用等于号赋予处理事件的JavaScript代码，或用等于号指定处理事件的自定义函数名称 JS语言基础-事件处理 事件主要在用户与网页交互时发生 浏览器自身的一些行为也能够触发事件 浏览器在程序运行的大部分时间内都在等待交互事件的发生，并在事件发生后，自动调用事件处理函数，完成事件处理过程 JavaScript常用的事件如下表所示 JS语言基础-事件处理 JavaScript常用事件列表 JS语言基础-事件处理 image、超链接及表单控件 KeyUp(按键弹起) image、超链接及表单控件 KeyDown(按键按下) window及表单控件 Focus(获得焦点) window、image Error(错误) window DragDrop(拖曳) 超链接及表单控件 DblClick(双击) 超链接及表单控件 Click(单击) 表单的文本控件(text、password、 textarea)及select Change(改变) window及表单控件 Blur(失去焦点) image Abort(中止) 产生事件的对象 事件名称 产生事件的对象 事件名称 JS语言基础-事件处理 JavaScript常用事件列表(续) document UnLoad(卸载) form Submit(提交) 表单的文本控件 Select(选择) window Resize(改变尺寸) form Reset(重置) window Move(移动) document、超链接及表单控件 MouseUp(鼠标释放) document、超链接及表单控件 MouseOut(鼠标移出) documen