JavaScript程序设计》课件第4章.ppt

第4章函数 在进行复杂的程序设计时 ，通常是根据所 要实现 的功能将程序划分为一些相对独立的部 分，每个部分编写成一个函数，从而使任务单 一、结构清晰，程序易于阅读 、理解和维护 。 JavaScript中的函数将一些共享的程序代码独立 出来，能够传递 参数并返回执行的结果。在程 序中可以通过使用函数名来调用函数。 在JavaScript中有两种函数，即JavaScript内 置的系统函数和用户自定义的函数。 函数是完成特定任务的语句段。当需要重复执行某 种 任务时，就应把相应的语句组织成函数，这样，在 JavaScript程序的任何位置都可以通过引用函数名来执 行函数。程序员可以在程序中建立多个函数，这有利 于组织应 用程序的结构，使程序代码的维护与修改更 容易。 第4章函数 4.1函 数 概 述 4.1.1定义函数 在JavaScript中使用函数前，需要先对其进行定义。函数的定义要使 用function关键字，其语法格式如下所示（方括号“ ”中的内容 为可选项 ）： function 函数名（参数列表） 语句 return语句 第4章函数 4.1函 数 概 述 在定义函数时，需要注意以下事项： （1）函数名必须唯一，且区分大小写。 （2）参数可以是常量、变量和表达式。 （3）参数列表中有多个参数时，参数间以逗号“,”隔开。 （4）若函数需要返回值，则使用return语句。 （5）定义函数并不会执行组成函数的语句，只有调用函数时，函数 才 会执行。 （6）如果省略了return语句中的表达式，或函数中没有return语句，函 数就会返回一个undefined值。 第4章函数 4.1函 数 概 述 在函数的定义中可以看到函数名后有一个参数列表，其中可以有一个 或者几个参数。那么怎样确定参数的个数呢？在JavaScript中，可以 通过使用arguments.length属性来检查 参数的个数。例如： function function_Name(exp1,exp2,exp3,exp4) 使用arguments.length属性检查 参数的个数 number=function_Name.arguments.length; if(number1) document.write(exp2); if(number2) document.write(exp3); if(number3) document.write(exp4); 参看例4-1 第4章函数 4.1函 数 概 述 4.1.2调用函数 通常可以在文档的头部定义函数，以便在装载HTML文档时首先 载入函数。如果函数没有返回值或者调用程序不关心函数的返回值， 可以使用下面的语法格式调用已经定义的函数： 函数名（传递给函数的参数1，传递给函数的参数2，传递给函数的参数n）; 参看例4-1、例4-2、例4-3. 第4章函数 4.1函 数 概 述 变量是程序中一个已经命名的存储单元，主要用于 为 数据操作提供存放信息的容器。在程序中，变量存储 的数值是可以变化的。根据变量的作用域，可以将变 量分为全局变量和局部变量两种。 第4章函数 4.2全局变变量和局部变变量 4.2.1全局变量 在函数之外声明的变量叫做全局变量。 例如： var x=5; 定义全局变量x function myFunction() document.write(“在函数体外：“); 显示提示信息 document.write(“x=“+x+“); 输出此时x的值 第4章函数 4.2全局变变量和局部变变量 4.2.2局部变量 在函数内声明的变量叫做局部变量。 例如： function myFunction() document.write(“在函数体内：“); 显示提示信息 x=7; 定义局部变量x document.write(“x=“+x+“); 输出此时x的值 第4章函数 4.2全局变变量和局部变变量 4.2.3变变量的作用域 变量的一个重要属性就是变量的作用域。 全局变量的作用域是此变量定义后的所有语句，包 括 其后定义的函数和中的代码。 局部变量作用于函数内部，只对其所在的函数体有 效，在此函数后的其他函数中定义的同名变量与此变 量毫无关系，且以最后一个定义的变量的值为准。在 下面的例子中建立了两个函数，以说明全局变量和局 部变量的作用域。 参看例4-5. 第4章函数 4.2全局变变量和局部变变量 4.2.4使用局部变量避免冲突 如果函数中定义了与全局变量同名的局部变量，则 在 此函数中位于此变量定义之后的脚本代码使用的是局 部变量，而不是全局变量。此时，全局变量被局部变 量覆盖，不再起作用。因此，在定义变量的时候，为 了避免发生不必要的冲突，提倡使用局部变量。下面 是一个使用局部变量避免冲突的示例。 参看例4-6. 第4章函数 4.2全局变变量和局部变变量 在函数的定义中，函数名后的参数表中可以有一个 或 多个参数，也可以没有参数，这需要根据实际应 用确 定。 第4章函数 4.3函数参数的使用 4.3.1给函数添加参数 在4.1节中已介绍了简单 函数的定义及调用形式，这里介绍如何在 函 数中使用参数。定义函数时指定的参数称为形式参数，简称形参；调 用函数时实际传递 的值称为实际 参数，简称实参。 定义带 参数的函数的语法格式如下： function函数名(形参1，形参2，形参n) 函数体 调用带参数的函数的语法格式如下： 函数名（实参1，实参2，实参n） 下面的例子定义了一个带有参数的Show函数，它把参数text中的字符 串显示在Web页面上。参看例4-7. 第4章函数 4.3函数参数的使用 4.3.2使用多个参数 如果函数带有多个参数，调用函数时实参按照形参排列的 顺 序依次传递给 函数中定义的相应的形参。 参看例4-8. 第4章函数 4.3函数参数的使用 4.3.3使用参数数组 函数中的arguments参数数组包含了传递给 当前函数的每个 参数，如argumentsi或functionName.argumentsi，其中， i是一个序列数，其值从零开始计数，因此，传递给 函数的第一 个参数应是arguments0。 通过设置arguments的属性，函数可以很好地处理数量可变 的 参数。当不知道将有多少个参数传递给 函数时，arguments参数 数组可以用arguments.length属性确定实际传递给 函数的参数数 量。 参看例4-9. 第4章函数 4.3函数参数的使用 在JavaScript中，有的函数有返回值，有的没有返回值（返 回值是空）。本节对函数返回值的相关知识进行简单介绍。 4.4.1给函数添加返回值 在JavaScript中，可以使用return语句返回函数的值，其语法格 式如下： 参看例4-10. return 表达式; 4.4.2区分函数和过程 在JavaScript中，把只返回undefined值的函数称为过程。函数 和过程的区别是过程调用单独使用一条语句，而函数调用则可 以出现在表达式中。 参看例4-11. 第4章函数 4.4使用函数返回值值 在其他语言（如C语言）中，可以定义指向函数的指针， 也 就是可以定义一个指针变量来指向某个函数，以后就可以用这 个指针变量来调用其指向的函数。JavaScript也提供了类似的技 术，称为创建动态函数。 4.5.1使用Function对象创建动态函数 创建一个动态函数需要使用Function对象，其语法格式为： var 变量名=new Function(参数列表); 其中，参数列表中的所有参数都必须是字符串型，最后一个参 数是这个动态函数的功能程序代码。 参看例4-12. 第4章函数 4.5创创建动态动态 函数 4.5.2动态函数与函数直接量 动态函数和函数直接量之间存在以下差别： 首先，动态函数允许在运行时动态创 建和执行JavaScript代 码；而函数直接量是程序结构的一个静态部分，就像函数语 句 一样。 其次，每次调用动态函数时都会解析函数体，并且创建一 个 新的函数对象，因此，如果对构造函数的调用出现在一个循 环 或一个经常被调用的函数中，这种方法的效率将非常低；函 数 直接量不论出现在循环中还是出现在嵌套函数中，都不会在 每 次调用时被重新解析，也不会每次都创建一个新的函数对象 ， 从而提高了程序的执行效率。 最后，动态函数总是被当作顶级函数来编译。 第4章函数 4.5创创建动态动态 函数 在JavaScript中,不仅可以使用自定义函数，还可以使用 JavaScript提供的系统函数（也称为内部方法）来实现某些功 能。本节对JavaScript中的常用系统函数进行简单介绍。 第4章函数 4.6JavaScript的系统统函数 4.6.1URI编码处 理函数 URL（Uniform Resource Locator，统一资源定位符）是最常 用的一种URI（Universal Resource Identifier，通用资源标识 符）。URI比URL表示的范围更大，不仅限于描述Internet资源 的地址，还包括数字对象标识符和国际标准书号等标识名称 。 JavaScript主要包括两个编码函数:encodeURI和decodeURI。 第4章函数 4.6JavaScript的系统统函数 1.encodeURI函数 encodeURI函数返回对某个URI字符串编码后的结果。其语法 格 式如下： encodeURI(URIString); 其中，URIString是必选项，代表一个要编码的URI字符串。 参看例4-13. 2.decodeURI函数 与encodeURI函数相反，decodeURI函数将一个已编码的URI字 符串解码成原始的字符串并返回。其语法格式如下： decodeURI(URIstring); 其中，URIstring是必须有的，表示一个要解码的URI字符串。 参看例4-14. 第4章函数 4.6JavaScript的系统统函数 4.6.2数值处理函数 JavaScript中的数值处理函数主要有parseInt、parseFloat和 isNaN。 1.parseInt 函数 parseInt函数将一个字符串按照指定的进制转换成一个整 数，其语法格式为： parseInt（numstring,radix） 第4章函数 4.6JavaScript的系统统函数 其中，第一个参数是要进行转换的字符串；第二个参数为 可 选项，是介于236之间的一个数值，用于指定字符串转换所 用 的进制类型。如果未指定第二个参数，则前缀为“0x”的字符 串 被视为十六进制数，前缀为“0”的字符串被视为八进制数，所 有其他字符串都被视为十进制数。 如果要转换的字符串中包含无法转换成数字的字符，那么 parseInt函数只对字符串中的数字部分进行转换，如parseInt （“12abc”）的返回结果为12。如果parseInt函数完全无法将一 个字符串中的第一个字符转换成数字，将返回NaN。NaN需要 使用isNaN方法才能检测出来。 参看例4-15. 第4章函数 4.6JavaScript的系统统函数 2.parseFloat函数 parseFloat函数用于将一个字符串转换 成对应 的浮点数。其 语法格式如下：参看例4-16. parseFloat(string)； 其中，string是必须有的，表示要解析的字符串。 3.isNaN函数 isNaN函数可以用于检测 parseInt和parseFloat函数的返回值是否 为 NaN，如果是，则返回值为 true，否则返回false。 其语法格式如下：参看例4-17. isNaN(x)； 其中，x是必须有的，表示要检测 的值。 第4章函数 4.6JavaScript的系统统函数 4.6.3字符串编码处 理函数 字符串编码处 理函数在JavaScript传递参数的过程中起到 了很重要的作用，使用字符串编码处 理函数，可以有效防止 数 据泄露。 这里主要介绍3个JavaScript字符串编码处 理函数：escape、 unescape和eval。 第4章函数 4.6JavaScript的系统统函数 1.escape函数 escape函数返回对一个字符串编码后的结果字符串，其中 ， 所有空格、标点、重音符号以及任何其他非ASCII码字符都用 %xx（xx等于该字符对应的Unicode编码的十六进制数）格式 的 编码替换，例如，空格返回为%20。值大于255的字符以 %uxxxx格式存储。escape函数的语法格式如下： escape(string)； 其中，string是要被转义或编码的字符串。 需要说明的是，对URI的编码不要使用escape函数，而应 使用encodeURI函数。 参看例4-18. 第4章函数 4.6JavaScript的系统统函数 2.unescape函数 unescape函数将一个用escape函数编码的字符串解码成原始 字符串并返回。其语法格式如下： unescape(string)； 其中，string是必须有的，表示要解码或反转义的字符串。 参看例4-19. 第4章函数 4.6JavaScript的系统统函数 3.eval 函数 eval函数将某个字符串参数作为一个JavaScript表达式执行。如果想 在运行时修改变量的名称，则可以使用eval函数实现 此功能。其语 法 格式如下： eval(codeString)； 其中，codeString是包含JavaScript语句的字符串，例如： for(var i=0;in;i+) eval(“var a“+i+“=“+i); 第4章函数 4.6JavaScript的系统统函数 上面这段代码定义了n个变量，变量名分别为 a0，a1，an，相 当 于在JavaScript中直接编写如下代码： var a0=0; var