1. 函数的概念
函数就是重复执行的代码片。或者说函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
2. JavaScript 中的函数语法结构
使用关键字 function 定义一个函数
Function 函数的名称(){
函数的主体
}
说明：
定义函数必须使用 function 关键字。
函数名必须是唯一的，尽量通俗易懂，并且跟你定义的代码有关。
函数可以使用 return 语句将某个值返回，也可以没有返回值。
参数是可选的，可以不带参数，也可以带多个参数。如果是多个参数的话，参数之间要用英文逗号隔开
<body>
<!--在点击的时候调用一个函数名称为b_click的函数-->
<button onclick="b_click();">点击试试</button>
<button onclick="b_click();">第二次点击还是会调用函数</button>
<!--实现这个函数-->
<script type="text/javascript">
function b_click(){
alert('调用了一个名为b_click的函数');
}
</script>
</body>
3. 函数的定义与执行
常用的函数有两种：
（1）不指定函数的名称/匿名函数；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 由事件驱动onload执行重复的代码块(匿名函数)
window.onload=function(){
var myfunction=function(){
alert('调用了一个匿名的函数');
}
// 调用这个匿名函数
alert(myfunction());//先输出函数中的主体,再输出undefined
myfunction();//这个正确的, 因为不能将函数当做一个值输出,只有这种形式才可以调用函数.从而执行函数体
}
</script>
</head>
<body>
</body>
</html>
注意：如果我们只定义函数，并没有调用函数，则函数本身是不会执行的。
(2)具备名称的函数
function myfunction(){
document.write('这是一个有名称的函数');
}
// 调用函数
myfunction();4.函数的调用
方法:(1)自己调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function ku(){
alert('放肆的哭');
}
// 调用函数(自己调用)
ku();
</script>
</head>
<body>
<div onclick="ku();">点击试试让它哭</div>
</body>
</html>
方法(2)通过事件驱动的方式调用函数
<body>
<button id="bot">再点击一下</button>
<script type="text/javascript">
var bot1=document.getElementById('bot');//获取元素
bot1.onclick=bot; //直接调用函数的名称就行,不需要添加括号
function bot(){ //创建了一个触发点击事件后要执行的行为(函数)
alert('点击按钮调用了有名称的函数');
}
</script>
</body>4.带有参数的函数
语法：
function 函数名(参数 1,参数 2,….,参数 n)
{
函数体语句
}
<script type="text/javascript">
// 定义一个带有参数的函数function 函数名称(参数1,参数2....){函数体}
function test1(a){ //形参
document.write(a);
}
// test1()(10); //实参,返回结果为10
function test2(a,b){ //形参
document.write(a+b);
}
test2(4,5); //实参 形参与实参必须一一对应,其返回结果为9
test2('4','5'); //返回结果为45
</script>
案例:用户手动输入两个数字,判断两个数字的大小,如果a>b,则返回1,否则返回-1,相等返回0,使用函数解决问题
var mess1=prompt('请输入第一个数字:');
var mess2=prompt('请输入第二个数字:');
var num1=parseFloat(mess1);
var num2=parseFloat(mess2);
//传统方式:
// if(num1>num2){
// document.write(1);
// }else if(num1==num2){
// document.write(0);
// }else{
// document.write(-1);
// }
//常用的方法: 简化代码,提高访问效果,以及运行时间
function Numberbijiao(num1,num2){
if(num1>num2){
document.write(1);
}else if(num1==num2){
document.write(0);
}else{
document.write(-1);
}
}
// Numberbijiao():这个函数是用来比较两个数字大小的
NumberBj(num1,num2);
注:定义函数时的参数叫“形参”，调用函数时的参数叫“实参”。
5.带有返回值的函数
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
语法：
function myFunction()
{
return
}
函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
<script type="text/javascript">
var a=5,b=10;
function test1(a1,b1){
return a1+b1;
}
// test1(a,b); //传递的参数为实参
var num=test1(a,b);
alert(num);
// 比较两个数的大小,a>b返回1,否则返回-1.相等返回0,
var mess1=prompt('请输入第一个数字:');
var mess2=prompt('请输入第二个数字:');
var num1=parseFloat(mess1);
var num2=parseFloat(mess2);
function bijiao(num1,num2){
if(num1>num2){
return 1;
}else if(num1<num2){
return -1;
}else{
return 0;
}
}
var test=bijiao(num1,num2)
alert(test);
6. 全局变量和局部变量
1、函数变量的作用域有全局变量和局部变量两种,全局变量写在函数的最前面，局部变量写在函数体内，局部变量省略了 var 也就默认成为了全局变量！
2、函数体内部可以读取到函数外的变量，而函数外不能读取到函数内的变量！
全局变量: 在整个程序中,所有的函数都可以访问到的变量,或者是写在对象底下的变量
例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 全局变量:在整个程序中,所有函数都可以访问到的变量,或者是写在对象底下的变量
window.onload=function(){
// 变量/字段:用来存储数据
var name='小张';
var age=20;
var job='软件开发';
var money=3000.34;
function mytest1(){
document.write('我是第一个函数调用变量='+name);
}
mytest1();
document.write('<br />');
function mytest2(){
document.write('我是第二个函数调用变量='+name);
}
mytest2();
document.write('<br />');
注: // 以上两个函数都可以访问变量name的值,所以把name 称之为全局变
function mytest3(){
document.write('我是第三个函数调用变量='+money);
}
mytest3();
}
</script>
</head>
<body>
</body>
</html>
例2:
<script type="text/javascript">
window.onload=function(){
// var num1=20; //定义为全局变量
function test1(){
// var num1=20;
//转换为全局变量:去掉var关键字
num1=20;
}
function test2(){
document.write('使用test2函数访问 test1函数中的变量num1='+num1);
}
test1();
test2(); //在调用test2函数的时候,访问test1中的变量num1无效,原因是num1作用于test1函数
//在一个函数体中如何将一个局部变量转换为全局变量?
//注: 只需要将这个函数体中的定义变脸搞得关键字var 去掉
}
</script>