网页设计与制作教程Web前端开发（第7版）课件：JavaScript语法基础-函数_第1页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript语法基础-函数_第2页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript语法基础-函数_第3页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript语法基础-函数_第4页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript语法基础-函数_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

函数（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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论