版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
函数（function）是指实现某项单一功能的，可重复使用的程序段。
JavaScript语法基础
函数目录
JavaScript程序设计基础7.1JavaScript概述7.2在HTML文档中使用JavaScript7.3数据类型7.4标识符、变量和常量7.5运算符和表达式7.6流程控制7.7函数7.8正则表达式习题77.7函数7.7.1函数的声明1.声明函数(Functiondeclaration)语法格式如下：function函数名(参数1,参数2,…){
函数体语句块;return返回值;}7.7函数【例7-20】声明两个数的乘法函数multiple。本例文件7-20.html。<scripttype="text/javascript">
functionmultiple(number1,number2){varresult=number1*number2;returnresult;//函数有返回值
}varresult=multiple(20,30);//调用有返回值的函数
document.write(result);//显示：600document.write("<br>");
document.write(multiple(2,3));//调用函数，显示：6</script>7.7函数2.声明函数表达式（FunctionExpression）（1）把函数表达式直接赋值给变量格式如下：var变量名=function(参数1,参数2,…){//函数体语句块;return返回值;}7.7函数【例7-21】声明函数表达式示例。本例文件7-21.html。<scripttype="text/javascript">varmultiple=function(number1,number2){varresult=number1*number2;returnresult;//函数有返回值
}varresult=multiple(20,30);//调用有返回值的函数
document.write(result);//显示：600document.write("<br>");//换行
document.write(multiple(2,3));//调用函数，显示：6</script>7.7函数（2）网页事件直接调用函数表达式格式为：window.onload=function(参数1,参数2,…){//函数体语句块;return返回值;}7.7函数（3）自执行函数如果表达式后面紧跟()，则会自动调用执行。【例7-22】自执行函数示例。本例文件7-22.html在浏览器中显示如图7-23所示。<scripttype="text/javascript">(function(){varx="Hello!!";document.write(x+"<br>");})();//自调用无参函数，将调用自己，自动执行
(function(x,y){document.write(x+y+"<br>");
})(2,3);//自调用有参函数
varsum=(function(x,y){returnx+y;
})(5,6);//自调用有参函数带返回值
document.write(sum);</script>7.7函数7.7.2函数的调用1.直接调用函数用下面的格式调用定义的函数：函数名(传递给函数的参数1,传递给函数的参数2,…);调用函数时的参数取决于声明该函数时的参数，如果定义时有参数，就需要增加实参。7.7函数【例7-23】直接调用函数示例。本例文件7-23.html在浏览器中显示如图7-24所示。<scripttype="text/javascript">functionhello(name){alert("Hello"+name+"!");}varhi=prompt("输入名字：")
hello(hi);//调用函数</script>7.7函数2.在表达式中调用函数变量名=函数名(传递给函数的参数1,传递给函数的参数2,…);例如，result=multiple(10,20);。对于有返回值的函数调用，也可以将其写在表达式中，直接利用其返回的值。例如：document.write(multiple(10,20));7.7函数3.在事件中调用函数<标签属性="属性值"…事件="函数名(参数表)"></标签>例如，使用<a>标记的单击事件onClick调用函数，其代码形式为：<ahref="#"onClick="函数名(参数表)">热点文本</a>7.7函数【例7-24】本例中的hello()函数显示一个对话框，当网页加载完成后就调用一次hello()函数，使用<body>标记的onLoad属性，本例文件7-24.html在浏览器中的显示是先显示对话框，如图7-25左图所示；单击确定按钮后，才显示网页内容，如图7-25右图所示。7.7函数<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>在事件中调用函数</title><scripttype="text/javascript">functionhello(){//定义函数
window.alert("Hello");}</script></head><bodyonLoad="hello();"><!--使用onLoad调用函数--><p>网页内容</p></body></html>7.7函数4.函数的嵌套调用（1）嵌套调用函数【例7-25】编程序求1+(1+2)+(1+2+3)+...+(1+2+3+…+n)的和。1）首先定义一个求1+2+3+…+n和的函数fnSum(num)。functionfnSum(num){ varsum=0,i; for(i=1;i<=num;i++){ sum+=i; } returnsum;}7.6函数2）然后定义求整个和的函数fnAllSum(iNum)，在函数fnAllSum(num)中调用函数fnSum(num)。functionfnAllSum(num){ varsum=0,i; for(i=1;i<=num;i++){ sum+=fnSum(i); } returnsum;}3）在主程序中调用函数fnAllSum(num)。document.write(fnAllSum(10));//输出:2207.6函数4）完成程序如下：<scripttype="text/javascript">functionfnSum(num){varsum=0,i;for(i=1;i<=num;i++){sum+=i;}returnsum;}functionfnAllSum(num){varsum=0,i;for(i=1;i<=num;i++){sum+=fnSum(i);}returnsum;}document.write(fnAllSum(10));//输出:220</script>7.7函数（2）递归调用函数【例7-26】用递归求阶乘n!。在下面程序中，阶乘函数fnFactorial(num)自己调用自己，满足了以上两点条件，实现了递归。本例文件7-26.html在浏览器中的显示3628800。7.7函数<scripttype="text/javascript">functionfnFactorial(num){varresult;if(num<=1)result=1;//递归结束的条件，不再递归
elseresult=num*fnFactorial(num-1);//递归调用
returnresult;}document.write(fnFactorial(10));//输出:3628800</script>7.7函数7.7.3变量的作用域和生命周期1.变量的作用域【例7-27】观察下面代码中变量a、b、c、d值的变化。本例文件7-27.html在浏览器中的显示如图7-26所示。7.6函数<scripttype="text/javascript">vara=1;//a是全局变量
b=2;//b是全局变量
functiontest(){c=3;//c是全局变量
varb=5,d=6;//b、d是局部变量
document.write("test:",a,"<br>");//test:1document.write("test:",b,"<br>");//test:5document.write("test:",c,"<br>");//test:3document.write("test:",d,"<br>");//test:6a=11;//全局变量a被赋值
b=55;//局部变量b被赋值
}test();document.write(a,"<br>");//显示全局变量a的值11document.write(b,"<br>");//显示全局变量b的值2document.write(c,"<br>");//显示全局变量c的值3document.write(d,"<br>");//出错，不显示</script>7.7函数2.变量的生命周期变量的生命周期也叫变量的生存期，对于用var关键字在函数内部声明的变量，当退出函数时，这些局部变量会随着函数调用的结束而被销毁。7.7函数7.7.4内嵌函数【例7-28】内嵌函数示例，在定义函数add()的内部又定义了一个函数plus()。本例文件7-28.html在浏览器中的显示3。<scripttype="text/javascript">functionadd(){//定义函数add()varcounter=2;//add()函数内部的局部变量counterfunctionplus(){//在函数add()内部定义函数plus()，内嵌函数
counter+=1;//在内嵌函数plus()内部访问父函数的局部变量counter}plus();//在函数add()内调用内嵌的函数plus()，counter变为3returncounter;//返回counter的值
}document.write(add());//调用add()函数，显示：3</script>7.7函数7.6.5闭包函数1.闭包的概念【例7-29】闭包函数示例。本例文件7-29.html在浏览器中的显示50。<scripttype="text/javascript">functionAdd(num1,num2){//外层函数
varsum=0;//sum外层函数定义的局部变量
functionDoAdd(){//内嵌函数，在函数add()内部定义函数DoAdd()sum=num1+num2;//在内嵌函数内部访问外层函数的局部变量num1、num2、sumreturnsum;//返回计算结果
}varresultAdd=DoAdd();//在外层函数中调用内嵌函数DoAdd()得到结果，保存到变量中
returnresultAdd;//返回DoAdd()函数的结果
}document.write(Add(20,30));//显示:50</script>7.6函数2.闭包的原理3.闭包的用途【例7-30】函数Add()内部声明的函数DoAdd()是一个闭包，实现函数累加器功能。本例文件7-30.html在浏览器中的显示如图7-27所示。7.6函数<scripttype="text/javascript">functionAdd(start){//声明外层函数
varcounter=start;//外层函数定义的局部变量counter，从start开始计数
functionDoAdd(){//声明内嵌函数，无参数传递
counter=counter+1;//内嵌函数直接使用外层函数的局部变量counteralert(counter);//用于调试时显示变量的变化
}returnDoAdd;//外层函数返回内嵌函数名
}varfn=Add(10);//fn就是DoAdd函数
fn(1);//第1次调用fn函数，输出：11fn(1);//第2次调用fn函数，输出：12fn(1);//第3次调用fn函数，输出：13</script>7.6函数7.7函数7.7.6箭头函数在JavaScript中，“=>”用于定义箭头函数（ArrowFunction）。1．箭头函数的格式箭头函数的基本语法格式为：(parameters)=>{statements}如果函数只接受一个参数，那么可以省略圆括号：parameter=>{statements}如果函数体只有一条语句，那么可以省略大括号，并且该语句的结果将会被自动返回：parameters=>expression7.7函数以下是一些使用箭头函数的示例。1）不带参数的箭头函数：letgreet=()=>{document.write("Hello,World!");};greet();//输出:"Hello,World!"2）带一个参数的箭头函数：letdouble=num=>num*2;document.write(double(5));//输出:10
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026新疆喀什昆仑建设有限公司招聘3人备考题库附参考答案详解（满分必刷）
- 2026江苏淮安市淮阴师范学院部分教师岗招聘4人备考题库有答案详解
- 2026广西物资学校招聘高层次人才4人备考题库附答案详解（培优b卷）
- 2026越秀地产春季校园招聘备考题库及完整答案详解一套
- 2026湖南永州江永县人民医院、中医医院招聘合同制聘用人员的3人备考题库附答案详解（预热题）
- 2026陕西西安交通大学医院招聘1人备考题库附参考答案详解（典型题）
- 2026浙江丽水市市直医疗卫生健康单位招聘卫技人员36人备考题库附答案详解
- 婚礼视频拍摄服务合同
- 2026云南玉溪易门县科学技术协会招聘2人备考题库带答案详解（培优b卷）
- 2026江苏南京工业大学教学科研岗招聘101人备考题库及答案详解【典优】
- 2026年消费维权竞赛试题及答案
- 2026绍兴嵊州市事业单位招聘53人-统考考试备考试题及答案解析
- 2026内蒙古环投集团社会招聘17人考试参考试题及答案解析
- GB/T 4343.2-2026家用电器、电动工具和类似器具的电磁兼容要求第2部分：抗扰度
- 2026年扬州市广陵区事业单位公开招聘工作人员37人笔试参考题库及答案解析
- 2026上半年北京事业单位统考大兴区招聘137人备考题库（第一批）新版附答案详解
- 2026年南宁教师编制考试试题及答案
- 广东省化工（危险化学品）企业安全隐患排查指导手册（工业气体生产经营企业专篇）
- 校医院内部财务管理制度
- 2025年智能家居安防服务协议
- 2026年兰考三农职业学院单招职业适应性测试题库附答案详解（黄金题型）
评论
0/150
提交评论