JavaScript网页特效案例教程.ppt

1、书名： JavaScript网页特效案例教程 ISBN： 978-7-111- 45596-7 作者：杨旭超 出版社：机械工业出版社 本书配有电子课件,第3章 JavaScript语法,JavaScript,标签对一般放在标签对内,JavaScript语法结构： ,JavaScript的代码必须与HTML代码结合在一起,回顾,Javascript代码放置在 标签对间,JavaScript语法结构： ,JavaScript的代码必须与HTML代码结合在一起,回顾,标签通知浏览器 有脚本嵌入到标签中,JavaScript语法结构： ,JavaScript的代码必须与HTML代码结合在一起,回顾,J

2、avaScript脚本语法如下：, 标题内容 /在此编写事件响应代码 ,回顾,JavaScript脚本语法如下：, 标题内容 /在此编写事件响应代码 ,指定脚本语言的类型,回顾,JavaScript脚本语法如下：, 标题内容 /在此编写事件响应代码 ,最近的HTML和XHTML标准中 要求使用type属性指定脚本语言的类型,回顾,JavaScript脚本语法如下：, 标题内容 /在此编写事件响应代码 ,type属性的使用格式,回顾,3.1.4 JavaScript函数,定义一个函数的格式如下： function 函数名(参数列表) 程序代码 return表达式； ,用function关键字定义

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

4、d, 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中，函数的定义通常放在HTML文档头中，这样就可以确保先定义后使用。,案例,案例3.3 案例 ,Javascrip

5、t代码,案例, 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); alert(average

6、= + 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,3

7、0); 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 s

8、um/3; var average; alert(average = + average); 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 = + av

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

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

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

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

13、; alert(x); show(); ,定义同名的局部变量X,操作局部变量X,输出局部变量X的值,如果函数中定义了与全局变量同名的局部变量，则在该函数中使用的是局部变量，这时，函数中的局部变量覆盖了同名的全局变量。,3.1.7 参数个数可变的函数,在函数内部的程序代码中，可以使用数组对象arguments，其中包含了调用程序传递给函数的所有参数。,arguments对象,这是一个数组对象,案例3.8 function Parameter( ) var p= ; p = arguments.length+ + arguments0+ + arguments1; alert(p); Parame

14、ter(李明,18); ,Parameter()函数使用的是空参数列表,但在调用Parameter()函数时 可以给它传递进若干个参数,案例3.8 function Parameter( ) var p= ; p = arguments.length+ + arguments0+ + arguments1; alert(p); Parameter(李明,18); ,在函数内部使用arguments 对象来表示这些参数,案例3.8 function Parameter( ) var p= ; p = arguments.length+ + arguments0+ + arguments1; al

15、ert(p); Parameter(李明,18); ,arguments的length属性代表参数的个数,arguments0, arguments1分别表示两个参数,可以进一步修改为： function Parameter() var p= ; for(var i=0; i,argumentsi数组 分别表示若干个参数,3.1.8 创建动态函数,基本语法格式如下： var varName=new Function(argument1, , lastArgument);,创建一个动态函数 需要使用Function对象,所有的参数都必须是字符串型的,最后的参数是这个动态函数的功能程序代码,案例3

16、.9 案例 var s=new Function (x, y, var sum;sum=x+y;return 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.9 系统函数,也称之为内部方法，程序可以直接调用这些函数来

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

18、例如: 把”32”分别转换成对应的十六进制数， 和十进制数。,转换为十六进制整数,parseInt(32,10),转换为十进制整数,3.1.9 系统函数,转换为十进制整数,parseInt(”32abc”,10),把字符串”32”转换成对应的十进制整数，结果为32。,若其中包含有无法转换成数字的字符，那么parseInt方法只取这个字符前面的部分进行转换,如果parseInt()方法完全无法将一个字符串转换成数字，它返回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.1.9 系统函数, eval(),将某个参数字符串作为一个JavaScript表达式执行,eval()：将字符串转换为实际代表的语句或运算,3.1