《移动应用设计与开发-前端开发》课件-4 函数

JavaScript脚本语言--函数目录4.1函数的定义与调用4.2变量的作用域4.3匿名函数4.4案例-变幻的背景JavaScript脚本语言--4.1函数的定义与调用如何定义函数？调用函数？函数的定义与调用导入讲解演练总结实践自定义函数内置函数行内式函数：用于封装一段完成特定功能的代码。相当于将一条或多条语句组成的代码块包裹起来，用户在使用时只需关心参数和返回值，就能完成特定的功能，而不用了解具体的实现。导入讲解演练总结实践函数的定义与调用内置函数是浏览器内核自带的，不用任何函数库引入就可以直接使用的函数。alert(“hello!”);

//弹出对话框，显示hello!confirm(“是否确定删除数据？”);//弹出对话框应用alert()弹出一个对话框，该对话框包含一个确定按钮。confirm()显示一个请求确认的对话框，包含一个确认和取消按钮。函数的定义与调用导入讲解演练总结实践内置函数是浏览器内核自带的，不用任何函数库引入就可以直接使用的函数。console.log(parseInt('10.88'));

//返回解析后的整数值：11console.log(parseFloat('10.88'));

//返回解析后的浮点数：10.88应用parseInt()返回解析字符串后的整数值。parseFloat()将字符串转化为浮点型数字形式。函数的定义与调用导入讲解演练总结实践自定义函数除了使用内置函数外，JavaScript中还可以根据具体情况自定义函数，提高代码的复用性、降低程序维护的难度。函数的定义由以下4部分组成：关键字function。函数名。参数。函数体。function函数名([参数1,参数2,……]){

函数体……}函数的定义与调用导入讲解演练总结实践语法自定义函数—定义函数的定义：function：定义函数的关键字。函数名：可由大小写字母、数字、下划线（_）和$符号组成，但是函数名不能以数字开头，且不能是JavaScript中的关键字。参数：是外界传递给函数的值，它是可选的，多个参数之间使用“,”分割。函数体：是专门用于实现特定功能的主体，由一条或多条语句组成。返回值：在调用函数后若想得到处理结果，在函数体中可用return关键字返回。函数的定义与调用导入讲解演练总结实践function函数名([参数1,参数2,……]){

函数体……}自定义函数—参数设置函数的定义与调用导入讲解演练总结实践函数可以根据参数的设置分为以下两种：无参函数有参函数自定义函数—参数设置函数的定义与调用导入讲解演练总结实践无参函数：适用于不需要提供任何数据，即可完成指定功能的情况。functiongreet(){console.log('Helloeverybody!');}在自定义函数时，即使函数的功能实现不需要设置参数，小括号“()”也不能够省略。自定义函数—参数设置函数的定义与调用导入讲解演练总结实践形参：指的就是形式参数，具有特定的含义，在定义有参函数时设置的参数。实参：指的是实际参数，也就是具体的值，在函数调用时传递的参数。functionmaxNum(a,b){a=parseInt(a);b=parseInt(b);returna>=b?a:b;}示例有参函数：适用于开发时函数体内的操作需要用户传递数据的情况。自定义函数—函数调用函数的定义与调用导入讲解演练总结实践当函数定义完成后，要想在程序中发挥函数的作用，必须得调用这个函数。函数的调用非常简单，只需引用函数名，并传入相应的参数即可。函数声明与调用的编写顺序不分前后。函数名称([参数1,参数2,……])[参数1，参数2…]是可选的，用于表示形参列表，其值可以是零个、一个或多个。自定义函数—函数返回值函数的定义与调用导入讲解演练总结实践可以使用return来设置函数的返回值。语法：return值return后的值将会会作为函数的执行结果返回，可以定义一个变量，来接收该结果。在函数中return后的语句都不会执行。如果return语句后不跟任何值就相当于返回一个undefined，如果函数中不写return，则也会返回undefined。return后可以跟任意类型的值。自定义函数—函数返回值函数的定义与调用导入讲解演练总结实践functionsum(a,b,c){

vard=a+b+c;

returnd;}

varres=sum(1,2,3);

console.log("result="+res);对策一函数的定义与调用导入讲解演练总结实践任务：自定义函数，求三数之和。定义函数求三个数的和，并调用输出结果。function函数名([参数1,参数2,……]){

函数体……}函数定义函数名称([参数1,参数2,……])函数调用函数的定义与调用导入讲解演练总结实践对策一函数的定义与调用导入讲解演练总结实践课后练习编写一个函数Min(x,y)，求出x,y两个数中的最小值，要求x,y的值由用户通过提示对话框输入。JavaScript脚本语言--4.2变量的作用域声明变量后就可以在任意位置使用该变量吗？变量的作用域导入讲解演练总结实践导入讲解演练总结实践变量的作用域functioninfo(){

varcolor=“red”;}console.log(color);示例声明的变量，不是在任意位置都可以使用的。函数内var关键字声明的变量，不能在函数外访问。局部变量全局变量变量作用域：就是变量在程序中的作用范围，也就是变量在程序中的有效区域。变量的使用是有作用域范围的。作用域划分：全局作用域、函数作用域和块级作用域（ES6提供的）。不同作用域对应的变量：全局变量、局部变量、块级变量（ES6提供的）。导入讲解演练总结实践变量的作用域块级变量demo.js文件函数含有{}，如for函数作用域全局作用域块级作用域1.局部变量在函数中定义的变量称为局部变量，局部变量只在定义它的函数内部有效。在函数体外，即使使用同一个名字的变量，也被看作另一个变量。变量的作用域导入讲解演练总结实践demo.js文件varnum=1;函数varsum=0;局部变量2.全局变量在函数体外定义的变量称为全局变量。全局变量在定义后的程序代码中都有效，包括它后面定义的函数体。作用范围：它在同一个页面文件中的所有脚本内都可以使用。变量的作用域导入讲解演练总结实践注意：如果局部变量和全局变量同名，在函数体内，只有局部变量是有效的。demo.js文件varnum=1;函数num

=0;全局变量变量的作用域导入讲解演练总结实践注意：如果局部变量和全局变量同名，在函数体内，只有局部变量是有效的。如果函数中没有重新定义同名的变量，函数内的同名变量，将全局变量重新赋值。在函数内部声明的变量只能它自己和它的子函数访问。变量的作用域导入讲解演练总结实践在函数内部声明的函数，只能在当前函数内部使用（子函数也可以使用）。如果函数中访问同名的全局变量，得到的是全局变量的值。3.块级变量ES6提供的let关键字声明的变量称为块级变量，仅在“{}”中间有效，如if、for或while语句等。变量的作用域导入讲解演练总结实践块级变量demo.js文件varnum=1;函数letsum=0;for循环leti=2;3.块级变量变量的作用域导入讲解演练总结实践只在let命令所在的代码块内有效

let变量不能重复声明3.块级变量变量的作用域导入讲解演练总结实践要求必须等let声明语句执行完之后，变量才能使用，不然会报错误。

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。3.块级变量变量的作用域导入讲解演练总结实践let非常适合用于for循环内部的块级作用域。JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，用let声明的变量传入到for循环体的作用域后，不会发生改变，不受外界的影响。

3.块级变量变量的作用域导入讲解演练总结实践let非常适合用于for循环内部的块级作用域。JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，用let声明的变量传入到for循环体的作用域后，不会发生改变，不受外界的影响。

任务：分析程序并输出结果。变量的作用域导入讲解演练总结实践定义在函数之内的变量，只对本函数本身起作用。局部变量定义在函数之外，对整个程序起作用。全局变量变量的作用域导入讲解演练总结实践ES6提供的let关键字声明的变量称为块级变量，仅在“{}”中间有效，如if、for或while语句等。块级变量变量的作用域导入讲解演练总结实践课后练习请写出下列程序段的输出结果。JavaScript脚本语言--4.3匿名函数什么是匿名函数？它与函数有什么区别？匿名函数导入讲解演练总结实践1.函数表达式将声明的函数赋值给一个变量，通过变量完成函数的调用和参数的传递，它也是JavaScript中另一种实现自定义函数的方式。函数的定义方式不同。函数的调用方式不同。函数定义与调用顺序不同。匿名函数导入讲解演练总结实践sum(1,2);functionsum(num1,num2){

returnnum1+num2;};

函数声明方式varfn=functionsum(num1,num2){

returnnum1+num2;};fn(1,2);

函数表达式匿名函数概念：匿名函数指的是没有函数名称的函数。作用：可以有效的避免全局变量的污染以及函数名的冲突问题。说明：既是函数表达式的另一种表示形式，又可通过函数声明的方式实现调用。匿名函数导入讲解演练总结实践匿名函数匿名函数主要有三种方式：（1）函数表达式中省略函数名（2）自调用方式（3）处理事件匿名函数导入讲解演练总结实践varfn=function(num1,num2){returnnum1+num2;};fn(1,2);①函数表达式中省略函数名匿名函数匿名函数主要有三种方式：（1）函数表达式中省略函数名（2）自调用方式（3）处理事件匿名函数导入讲解演练总结实践(function(num1,num2){returnnum1+num2;})(2,3);②自调用方式匿名函数匿名函数主要有三种方式：（1）函数表达式中省略函数名（2）自调用方式（3）处理事件匿名函数导入讲解演练总结实践document.body.onclick=function(){alert('helloworld!!!');};③处理事件注意：这种方法是无法直接传递参数的。匿名函数导入讲解演练总结实践任务：自定义匿名函数,求三数之和匿名函数求三个数的和，并调用输出结果。对策一匿名函数导入讲解演练总结实践函数表达式方式自调用方式处理事件方式对策一匿名函数导入讲解演练总结实践课后练习自定义匿名函数，求三个数中最大值。JavaScript脚本语言--4.4案例变幻的背景能自己编写函数吗？案例导入讲解