JavaScript函数
一、函数的定义?
函数是定义一次,可以调用或执行多次的一段JavaScript代码。
语法格式:
function 函数名(参数1…){
[return 返回值]
}
1、无参函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function hello(){
document.write("你好,JavaScript");
}
hello();
</script>
</body>
</html>
输出结果:
你好,JavaScript
2、有参函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function account(a,b){
var sum=a*b;
return sum;
}
document.write(account(4,4));
</script>
</body>
</html>
输出结果:
16
二、函数的调用
1、函数的简单调用
语法格式:
函数名(传递的参数1,传递的参数2…);
2、在事件响应中调用函数
事件处理过程:
触发事件—>调用和执行函数—>在页面中产生响应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function test(){
alert("拨开云雾见青天");
}
</script>
<form action="***" method="post" name="表单">
<input type="button" value="提交" onclick="test();"/>
</form>
</body>
</html>
3、通过链接调用函数
在< a >标签中的href属性中使用“Javascript:函数名()”格式来调用函数,当用户单击这个链接时,相关函数将被执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function test(){
alert("拨开云雾见青天");
}
</script>
<a href="javascript:test();">test</a>
</body>
</html>
三、函数的参数
1、形参:定义函数时指定的参数
语法格式:
function 函数名(形式参数1…)
函数体
}
2、实参:调用函数时实际传递的值
语法格式:
函数名(实际参数1…)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function show( content){//形参:content
alert("功夫JavaScript作者:"+content)
}
show("明日科技");//实参:明日科技
</script>
</body>
</html>
四、函数的返回值
在JavaScript的函数中,可以使用return语句为一个函数返回一个值。
语法格式: return 表达式;
通过返回值判断两个数的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function show(a,b){
if(a<b)
return "第一个数小于第二个数";
else if(a==b)
return "第一个数和第二个数相等";
else
return "第一个数大于第二个数";
}
document.write(show(4,5));
</script>
</body>
</html>
输出结果:
第一个数小于第二个数
五、嵌套函数
1、函数的嵌套定义
函数的嵌套定义就是在函数的内部再定义一个其它的函数。
虽然在JavaScript中允许函数的嵌套定义,但它会使程序的可读性降低
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function outShow(){
function inShow(x,y){
alert(x+y);
}
inShow(4,5);
}
outShow();
</script>
</body>
</html>
输出结果是:
9
2、函数的嵌套调用
在JavaScript中,允许在一个函数的函数体中对另一个函数进行调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function show(){
alert("Hello World");
}
function b(){
show();
}
b();
</script>
</body>
</html>
输出结果:
Hello World
计算三个数的平均数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function math(x,y,z){
document.write("参数分别是:"+x+"、"+y+"、"+z);
document.write('<br/>'+"参数的平均值为:"+(x+y+z)/3)
}
function average(){
math(60,59,61);
}
average();
</script>
</body>
</html>
输出结果:
参数分别是:60、59、61
参数的平均值为:60
六、递归函数
所谓递归函数就是函数在自身的函数体内调用自身。
语法格式:
function 函数名(参数1){
函数名 (参数2);
}
递归函数只有在特定的情况下使用,比如处理阶乘问题。
计算10!的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function math(x){
if(x==0)
return 1;
return x*math(x-1);
}
alert("10!的结果为:"+math(10));
</script>
</body>
</html>
七、变量的作用域
1、全局变量与局部变量
全局变量:定义在所有函数之外的变量,作用范围是该变量定义后的所有代码。
局部变量:定义在函数体内的变量,只有在该函数中,且该变量定义后的代码中才可以使用这个变量。
2、函数的优先级
如果在函数体中定义了一个与全局变量同名的局部变量,那么该全局变量在函数体中将不起作用。
3、嵌套函数中变量的作用范围
在嵌套函数中,外部函数中的变量可以在该函数体以及嵌套函数体中起作用,而嵌套函数中的变量不能在父级或父级以上的函数体中起作用。
八、内置函数
1、数值处理函数
parseInt()函数
该函数主要将首位为数字的字符串转换为数字,如果字符串不是以数字开头,那么将返回NaN。
语法格式:parseInt(string,[n])
parseFloat()函数
该函数主要将首位为数字的字符串转换为浮点型数字,如果字符串不是以数字开头,那么将返回NaN。
语法格式:parseFloat(string)
isNaN()函数
该函数主要用于检验某个值是否为NaN。
语法格式:isNaN(num)
如果参数num为NaN,函数返回值为true
如果参数num不是NaN,函数返回值为false
isFinite()函数
该函数主要用于检验其函数是否有限
语法格式:isFinite(num)
如果参数num 是有限数字,函数返回值为true
如果参数num是NaN或无穷大,函数返回值为false
2、字符串处理函数
eval()函数
该函数的功能是计算字符串表达式的值,并执行其中的JavaScript代码。
语法格式:eval(string)
escape()函数
该函数用于将一些特殊字符(不包括字母和数字字符以及*、@、-、_、+、和/)进行编码,它可以将这些特殊字符转换为“%XX”格式的数字。
语法格式:escape(string)
unescape()函数
该函数主要用于对应用escape()函数编码后的字符串进行编码,它可以将字符串中的“&XX”格式的数字转换为字符。
语法格式:unescape(string)
encodeURL()函数
该函数主要用于将URL字符串进行编码
语法格式:encodeURI(url)
decodeURL()函数
该函数只要用于对已编码的URL字符串进行解码。
语法格式:decodeURL(url)
九、定义函数的其它方法
1、定义匿名函数
语法格式:
var 变量名=function(参数1,参数2…){
函数体
}
计算1到20之间所有的3的倍数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
document.write("1到20之间所有的3的倍数:")
var test=function(x=1,y=20){
while(x<=y){
if(x%3==0){
document.write(x+" ");
}
x++;
}
}
test();
</script>
</body>
</html>
输出结果:
1到20之间所有的3的倍数:3 6 9 12 15 18
2、Function()构造函数
语法格式:
var 变量名=new Function(“参数1”、“参数2”…,“函数体”);
Function()构造函数中的所有参数和函数体都必须是字符串类型,因此一定要用双引号或单引号引起来