JavaScript网页特效案例教程.ppt

《JavaScript网页特效案例教程.ppt》由会员分享，可在线阅读，更多相关《JavaScript网页特效案例教程.ppt（64页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、书名：书名：JavaScriptJavaScript网页特效案例教网页特效案例教程程ISBNISBN：978-7-111-978-7-111-45596-7作者：杨旭超作者：杨旭超出版社：机械工业出版社出版社：机械工业出版社本书配有电子课件本书配有电子课件标签对一般放在标签对一般放在标签对内标签对内JavaScript语法结构：语法结构：!-alert(您好，欢迎使用您好，欢迎使用JavaScript!);-JavaScript的代码必须与的代码必须与HTML代码结合在一起代码结合在一起回顾 Javascript代码放置在代码放置在标签对间标签对间 JavaScript语法结构：语法结构：!-

2、alert(您好，欢迎使用您好，欢迎使用JavaScript!);-JavaScript的代码必须与的代码必须与HTML代码结合在一起代码结合在一起回顾标签标签通知浏览器通知浏览器有脚本嵌入到标签中有脚本嵌入到标签中 JavaScript语法结构：语法结构：!-alert(您好，欢迎使用您好，欢迎使用JavaScript!);-JavaScript的代码必须与的代码必须与HTML代码结合在一起代码结合在一起回顾JavaScript脚本语法如下：标题内容标题内容!-/在此编写在此编写Javascript代码代码-/在此编写事件响应代码在此编写事件响应代码 回顾JavaScript脚本语法如下：标

3、题内容标题内容!-/在此编写在此编写Javascript代码代码-/在此编写事件响应代码在此编写事件响应代码 指定脚本语言的类型指定脚本语言的类型 回顾JavaScript脚本语法如下：标题内容标题内容!-/在此编写在此编写Javascript代码代码-/在此编写事件响应代码在此编写事件响应代码 最近的最近的HTML和和XHTML标准中标准中要求使用要求使用type属性指定脚本语言的类型属性指定脚本语言的类型 回顾JavaScript脚本语法如下：标题内容标题内容!-/在此编写在此编写Javascript代码代码-/在此编写事件响应代码在此编写事件响应代码 type属性的使用格式属性的使用格式

4、 回顾 3.1.4 JavaScript函数函数定义一个函数的格式如下：function 函数名(参数列表)程序代码 return表达式；用function关键字定义函数 且不需要说明函数的类型 3.1.4 JavaScript函数函数定义一个函数的格式如下：function 函数名(参数列表)程序代码 return表达式；return返回表达式的运算结果 3.1.4 JavaScript函数函数定义一个函数的格式如下：function 函数名()程序代码 return表达式；当函数无参数时不能省略小括号 若省略了return语句后的表达式则返回undefined 3.1.4 JavaScri

5、pt函数函数定义一个函数的格式如下：function 函数名()程序代码 return表达式；若没有return语句则返回undefined document.write(3+5=+add(3,5);案案例例 document.write(3+5=+add(3,5);各参数之间以逗号“，”隔开 用function关键字定义函数 document.write(3+5=+add(3,5);函数的调用 return语句返回函数值用function关键字定义函数 在程序中返回函数的调用结果 document.write(3+5=+add(3,5);在在JavaScript中，函中，函数的定义通常放在数

6、的定义通常放在HTML文档头中，这样就可以确文档头中，这样就可以确保先定义后使用。保先定义后使用。案案例例 案例3.3案例 Javascript代码案案例例 function aver(x,y,z)var sum;sum=x+y+z;return sum/3;var average;alert(average=+average);average=aver(10,20,30);alert(average=+average);function aver(x,y,z)var sum;sum=x+y+z;return sum/3;var average;alert(average=+average);

7、average=aver(10,20,30);alert(average=+average);定义函数 function aver(x,y,z)var sum;sum=x+y+z;return sum/3;var average;alert(average=+average);average=aver(10,20,30);alert(average=+average);定义变量 function aver(x,y,z)var sum;sum=x+y+z;return sum/3;var average;alert(average=+average);average=aver(10,20,30)

8、;alert(average=+average);定义变量 变量average的值为undefined function aver(x,y,z)var sum;sum=x+y+z;return sum/3;var average;alert(average=+average);average=aver(10,20,30);alert(average=+average);若调用程序需要函数的返回结果则要用这样的格式调用函数 函数的调用 function aver(x,y,z)var sum;sum=x+y+z;return sum/3;var average;alert(average=+ave

9、rage);average=aver(10,20,30);alert(average=+average);变量average的值为函数的值function aver(x,y,z)var sum;sum=x+y+z;return sum/3;var average;alert(average=+average);average=aver(10,20,30);alert(average=+average);等价的操作:alert(average=+aver(10,20,30);在程序中直接使用函数返回的结果 show();主程序对函数进行调用的几种方式 average=aver(10,20,30)

10、;alert(average=+aver(10,20,30);函数没有返回值或调用程序不关心函数的返回值 调用程序需要函数的返回结果 在程序中直接使用返回的函数值 3.1.6 全局变量与局部变量全局变量与局部变量 1.全局变量：在所有函数之外的脚本中定义的变量在所有函数之外的脚本中定义的变量 作用域：是这个变量定义之后的所有语句，包括其是这个变量定义之后的所有语句，包括其后定义的函数中的程序代码和它后面的其他后定义的函数中的程序代码和它后面的其他标签对中的程序代码。标签对中的程序代码。案例3.4案例var x=我是一个全局变量;function show()alert(x);show();al

11、ert(x);函数没有返回值或调用程序不关心函数的返回值 案例3.4案例var x=我是一个全局变量;function show()alert(x);show();alert(x);定义全局变量XX的作用域是这个变量定义之后的所有语句X的作用域包括其后定义的函数 3.1.6 全局变量与局部变量全局变量与局部变量 2.局部变量局部变量：定义在函数内的变量定义在函数内的变量 作用域：只有在该函数中且位于这个变量定义之只有在该函数中且位于这个变量定义之后的程序代码可以使用这个局部变量。后的程序代码可以使用这个局部变量。案例3.5function show()var x;x=我是一个局部变量;aler

12、t(x);show();定义局部变量XX的作用域只有在该函数中且位于这个变量定义之后 案例3.6var x=我是一个全局变量;function show()var x;x=我是一个局部变量;show();alert(x);/该变量与局部变量x毫无关系 定义同名的局部变量X定义全局变量X 案例3.6var x=我是一个全局变量;function show()var x;x=我是一个局部变量;show();alert(x);定义同名的局部变量XX的作用域只有在该函数中且位于这个变量定义之后 案例3.6var x=我是一个全局变量;function show()var x;x=我是一个局部变量;sh

13、ow();alert(x);定义全局变量X该变量与局部变量x毫无关系 局部变量对其后的其他函数和脚本代码来说，都是不可局部变量对其后的其他函数和脚本代码来说，都是不可见的，见的，如果在其后的其他函数和脚本代码中使用了与这个局如果在其后的其他函数和脚本代码中使用了与这个局部变量同名的变量，在那些地方使用的变量与这个局部变量部变量同名的变量，在那些地方使用的变量与这个局部变量毫无关系。毫无关系。局部变量对其后的其他函数和脚本代码来说，都是不可局部变量对其后的其他函数和脚本代码来说，都是不可见的，见的，如果在其后的其他函数和脚本代码中使用了与这个局如果在其后的其他函数和脚本代码中使用了与这个局部变量

14、同名的变量，在那些地方使用的变量与这个局部变量部变量同名的变量，在那些地方使用的变量与这个局部变量毫无关系。毫无关系。案例3.7var x=我是一个全局变量;function show()var x;x=我是一个局部变量;alert(x);show();定义同名的局部变量X操作局部变量X输出局部变量X的值 如果函数中定义了与全局变量同名的局部变量，则在该函数中使用的是局部变量，这时，函数中的局部变量覆盖了同名的全局变量。3.1.7 参数个数可变的函数 在函数内部的程序代码中，可以使用数组对在函数内部的程序代码中，可以使用数组对象象arguments，其中包含了调用程序传递给函数，其中包含了调用

15、程序传递给函数的所有参数。的所有参数。arguments对象对象这是一个数组对象案例3.8function Parameter()var p=;p=arguments.length+arguments0+arguments1;alert(p);Parameter(李明,18);Parameter()函数使用的是空参数列表但在调用Parameter()函数时可以给它传递进若干个参数案例3.8function Parameter()var p=;p=arguments.length+arguments0+arguments1;alert(p);Parameter(李明,18);在函数内部使用在函数

16、内部使用arguments对象来表示这些参数对象来表示这些参数案例3.8function Parameter()var p=;p=arguments.length+arguments0+arguments1;alert(p);Parameter(李明,18);arguments的的length属性代属性代表参数的个数表参数的个数arguments0,arguments1分分别表示两个参数别表示两个参数可以进一步修改为：function Parameter()var p=;for(var i=0;iarguments.length;i+)p+=+argumentsi;alert(p);Param

17、eter(李明,18);Parameter(李明,18,中学生);在调用Parameter()函数时可以传递若干个参数在调用Parameter()函数时可以传递若干个参数argumentsi数组分别表示若干个参数3.1.8 创建动态函数 基本语法格式如下：基本语法格式如下：var varName=new Function(argument1,lastArgument);创建一个动态函数需要使用Function对象 所有的参数都必须是字符串型的最后的参数是这个动态函数的功能程序代码功能程序代码 案例3.9案例 var s=new Function(x,y,var sum;sum=x+y;retu

18、rn sum;);alert(s(3,2);创建了一个动态函数创建了一个动态函数该函数接收两个参数，分别为该函数接收两个参数，分别为x、y 最后的参数是这个动态函数的最后的参数是这个动态函数的功能程序代码功能程序代码 参数参数一定要用双引号或一定要用双引号或单引号引起来单引号引起来 案例3.9案例 var s=new Function(x,y,var sum;sum=x+y;return sum;);alert(s(3,2);将函数赋值给一个名为将函数赋值给一个名为s的变量的变量像调用普通函数的方式来使用像调用普通函数的方式来使用s变变量，调用动态函数的执行代码量，调用动态函数的执行代码3.1

19、.9 系统函数 也称之为内部方法，程序可以直接也称之为内部方法，程序可以直接调用这些函数来完成某些功能调用这些函数来完成某些功能 parseInt()将一个字符串按指定的进将一个字符串按指定的进制转换成一个整数制转换成一个整数 语法格式为：parseInt(numString,radix)3.1.9 系统函数 也称之为内部方法，程序可以直接也称之为内部方法，程序可以直接调用这些函数来完成某些功能调用这些函数来完成某些功能 parseInt()语法格式为：parseInt(numString,radix)要进行转换的字符串 3.1.9 系统函数 也称之为内部方法，程序可以直接也称之为内部方法，程

20、序可以直接调用这些函数来完成某些功能调用这些函数来完成某些功能 parseInt()语法格式为：parseInt(numString,radix)可选，用于指定转换字符串时所用的进制 3.1.9 系统函数 parseInt(”32”,16)例如:把”32”分别转换成对应的十六进制数，和十进制数。转换为十六进制整数parseInt(32,10)转换为十进制整数3.1.9 系统函数 转换为十进制整数parseInt(”32abc”,10)把字符串”32”转换成对应的十进制整数，结果为32。若其中包含有无法转换成数字的字符，那么parseInt方法只取这个字符前面的部分进行转换 如果parseInt

21、()方法完全无法将一个字符串转换成数字，它返回NaN(非数字)，NaN需要用isNaN方法才能检测出。parseFloat()将一个字符串转换成对应将一个字符串转换成对应的小数的小数 3.1.9 系统函数 案例3.10 var str=3.14;alert(str+15)+n+(parseFloat(str)+15);3.1.9 系统函数 将字符串str转换成对应的小数 isNaN()isNaN()方法用于检测方法用于检测parseInt()和和parseFloat()方法的返回值是否为方法的返回值是否为NaN，如是，如是，isNaN()返回返回true，否则，返回，否则，返回false。3.

22、1.9 系统函数 eval()将某个参数字符串作为一个将某个参数字符串作为一个JavaScript表达式执行表达式执行 eval()：将字符串转换为实际代表的语句或运算3.1.9 系统函数 将参数字符串作为一个将参数字符串作为一个JavaScript表达式执行表达式执行 for(var i=0;in;i+)eval(“var a”+i+”=”+i);eval()for(var i=0;in;i+)eval(“var a”+i+”=”+i);var a0=；var a1=1；以上循环定义了以上循环定义了n个变量，相当于如下定义：个变量，相当于如下定义：eval()for(var i=0;in;i+)eval(“var a”+i+”=”+i);随着随着n在运行时的不同取值，可在程序中定义在运行时的不同取值，可在程序中定义不同个数的变量和使用不同的变量名称。可见，使不同个数的变量和使用不同的变量名称。可见，使用用eval函数，可以在程序中函数，可以在程序中动态产生表达式动态产生表达式。eval()