《网页设计与制作实用技术（第二版）-电子教案-齐建玲 CH14》由会员分享，可在线阅读，更多相关《网页设计与制作实用技术（第二版）-电子教案-齐建玲 CH14（32页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容： JavaScript的特点及使用方法 JavaScript编程基础 JavaScript事件驱动 JavaScript的对象 利用Dreamweaver CS5行为面板添加网页特效,第14章 在网页中使用行为特效,14.1 JavaScript简介,JavaScript是Netscape公司推出的跨平台、基于对象的脚本语言，用于客户端与服务器端的应用程序。 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。和VBScript一样，它可以被嵌入到HTML文件中，能直接被浏览器执行，从而产生各种各样的动态网页效果。JavaScript弥补了HT
2、ML语言的缺陷，它与HTML、CSS结合被人们称为DHTML。,（1）脚本编写语言 （2）基于对象 （3）简单性 （4）安全性 （5）动态性 （6）跨平台,14.1.1 JavaScript的特点,14.1.2 JavaScript的运行和编辑环境,运行环境：Internet Explorer 4.0或Netscape Navigator 3.0以上。 编辑环境：任何可以编辑HTML文档的文本编辑器或专门的网页编辑器（FrontPage、Dreamweaver等）。,（1）使用SCRIPT标记符插入脚本 在网页中最常用的一种插入脚本的方式是使用SCRIPT标记符，方法是：把脚本标记符置于网页上
3、的HEAD部分或BODY部分，然后在其中加入脚本程序。尽管可以在网页上的多个位置使用SCRIPT标记符，但最好还是将脚本代码放在HEAD部分，以确保容易维护。,14.1.3 在网页中使用JavaScript, 书写JavaScript时应注意大小写. 在JavaScript中，行尾用换行符作为一行完整代码的终止字符. 若需要将几行代码放在一行中，应使用分号将它们分开. 在JavaScript中，/* 和 */也是注释标记。,用户在编写JavaScript时应注意以下几点：,（2）直接添加脚本 HTML可以直接在表单的输入元素标记符内添加脚本，以响应输入元素的事件。 （3）链接脚本文件 如果同一
4、段脚本要在若干个Web页中使用，则没有必要在多处维护相同的冗余代码，此时可以将脚本放在单独的一个文件里，然后再在任何需要该文件的Web页中调用该文件。 要引用外部脚本文件，应使用SCRIPT标记符的src属性来指定外部脚本文件的URL。,所谓变量，就是程序中一个已命名的存储单元。变量的主要作用是存取数据和提供存放信息的容器。 JavaScript支持的数据类型如下：Number（数字） 、Boolean（布尔） 、String（字符串） 、Null（空） 、Undefined（未定义） 、Object（对象） 。,14.2 JavaScript编程基础,14.2.1 JavaScript变量,
5、在JavaScript中定义变量应遵循以下规则： 必须以字母或下划线（_）开头。 在所说明的范围内必须是唯一的。 用var来定义变量，也可以用赋值语句声明变量，但不能既不用var声明变量，又不给它赋值。,14.2.2 JavaScript运算符,在JavaScript中包括以下8类运算符： （1）算术运算符 ：+、-、*、/、%、+ 、- （2）逻辑运算符：&、|、！ （3）比较运算符： 、=、= =、！= （4）字符串运算符 ：+（字符串接合操作） （5）位操作运算符：&、|、-、 （6）赋值运算符：=、+= 、-=、*=、 =、 =、 &=、 （7）条件运算符：？： （8）其他运算符：、
6、、（） 、delete 、new 、void,14.2.3 JavaScript表达式,表达式是运算符和操作数的组合。表达式通过求值确定表达式的值，这个值是对操作数实施运算符所确定的运算后产生的结果。有些运算符将数值赋予一个变量，而另一些运算符则可以用在其他表达式中。 由于表达式是以运算符为基础的，因此表达式可以分为算术表达式、字符串表达式、赋值表达式以及逻辑表达式等等。,14.2.4 JavaScript语句,（1）数据声明语句 声明变量的语法如下： var 变量名=初始值 （2）赋值语句 赋值语句是由赋值表达式组成的语句。 （3）注释语句 /：表示单行注释，从“/”开始到本行结束都为注释。
7、 /*/：表示多行注释，从“/*”开始到“*/”结束为注释。,1一般语句,在JavaScript中提供了if语句、if else语句以及switch语句等三种条件语句。 （1）if语句 if（条件） 语句段； （2）if else语句 if（条件） 语句段1； else 语句段2；,2条件语句,（3）switch语句 如果需要对同一个表达式进行多次判断，那么就可以使用switch语句，格式如下： switch（条件） case value1: 语句段1; case value2：语句段2; case value3：语句段3; default：语句段4；,（1）for语句 for（初始化；条件；
8、增量） 语句段； （2）while语句 while（条件） 语句段； ,3循环语句,（3）do while语句 do 语句段； while（条件） （4）break语句 break语句提供无条件跳出循环结构或switch语句的功能。 （5）continue语句 continue语句的作用是终止当次循环，跳转到循环的开始处继续下一轮循环。,4其他语句,除了以上条件语句和循环语句以外，JavaScript中还包括以下语句： 函数调用语句 函数调用语句用于调用函数。 return语句 用于返回函数调用的值。 with语句 用于表示默认对象。 for in语句 用于对一个对象的所有属性进行循环，直到每
9、个属性都访问到。,14.2.5 JavaScript函数,数是已命名的代码块，代码块中的语句被作为一个整体引用和执行。 定义函数的格式如下： function 函数名（参数1，参数2，） 语句段； return 表达式； ,行为是某个事件和由该事件触发的动作的组合。 事件是浏览器生成的消息，它指示该页的访问者已执行了某种操作。 动作是一段预先编写的JavaScript代码，可用于执行诸如以下的任务：打开浏览器窗口、显示或隐藏 AP 元素、播放声音或停止播放Adobe Shockwave影片等。 对象是指接受事件的主体，即页面元素或页面主体本身。,14.3 JavaScript行为的事件驱动,1
10、4.3.1 行为概述,当用户单击鼠标按钮时，产生onClick事件，同时onClick指定的事件处理程序或代码被调用执行。OnClick事件通常在下列基本对象中产生： （1）button（按钮） （2）checkbox（复选框） （3）radio（单选按钮） （4）reset button（重置按钮） （5）submit button（提交按钮）,14.3.2 事件类型,1单击事件onClick,当用户改变表单元素的原有状态后，将产生该表单元素的onChange事件。,2改变事件onChange,当用户选中一段表单文本时，引发该事件。,3选中事件onSelect,当用户单击鼠标或用Tab键激活
11、某一个表单元素时，产生该表单元素的聚焦事件，此时对象被选中。,4聚焦事件onFocus,与onFocus事件相反，当前激活表单元素从激活状态变为非激活状态，即不再拥有焦点、而退到后台时，引发该事件。,5失去焦点事件onBlur,当鼠标指针位于超链接上时，产生onMouseOver事件。,6鼠标移动事件onMouseOver,当文档载入时引发该事件。OnLoad事件的作用是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使其可以被源代码调用。,7载入文件onLoad,当Web页面退出时引发onUnload事件。,8卸载文在件onUnload,对象就是客观世界中存在的特定实体。,1
12、4.4 JavaScript的对象,14.4.1 JavaScript的内部对象,JavaScript提供了一些内部对象，下面介绍三种常用的对象，即String对象、Date对象和Math对象。,String对象用来存放字符串，是静态对象。 （1）String对象的属性 String对象只有一个属性，即length，它表示字符串中的所有的字符个数，包括所有符号。 （2）String对象的方法 String对象的方法主要用于有关字符串在Web中的显示、字体大小、颜色、大小写转换等。String对象有19个方法。,1String对象,创建日期对象可以使用以下4种构造函数中的一种： var vari
13、able=new Date（） var variable=new Date（milliseconds） var variable=new Date（string） var variable=new Date（year，month，day，hours，minutes，seconds，milliseconds） （1）获取Date对象的常用方法 （2）设置Date对象的常用方法,2Date对象,Math对象包含用来进行数学计算的属性和方法。 （1）Math对象的主要属性 Math中提供了6个属性，即：常数E、以10为底的自然对数ln10、以2为底的自然对数ln2、圆周率PI（3.1 4159）、1
14、/2的平方根SQRT1-2、2的平方根SQRT2。,3Math对象,（1）document对象的常用属性。document对象最常用的属性有：all、bgcolor、forms、title等。 （2）document对象的常用事件有：onclick（表示鼠标单击时产生的事件）、onload（表示在文档装载完毕时产生的事件）、onunload（表示在文档卸载完毕时产生的事件）。另外还有onmouseover和onmouseout事件，分别表示鼠标移上去和移开时发生的事件。 （3）document对象的常用方法。document对象的常用方法有clear、write和writen。,14.4.3
15、浏览器对象,1 document对象,Window对象有12个属性、8个方法和两个事件。 参见教材,2 Window对象,打开Dreamweaver CS5编辑窗口，单击“窗口”“行为”命令，打开“行为”面板，如图所示。,14.5 利用Dreamweaver CS5添加网页行为特效,14.5.1 认识行为面板,利用“行为”面板添加网页特效的步骤如下： （1）在页面上选择一个元素。 （2）选择“窗口”“行为”命令，打开“行为”面板。 （3）单击加号按钮 并从“添加行为”菜单中选择一个动作。当选择某个动作时，将出现一个对话框，显示该动作的参数和说明。菜单中灰显的动作不可选择。 （4）为该动作输入参数，然后单击“确定”按钮。,14.5.2 利用行为面板添加网页特效,示范演示,E N D,
