一.函数 1.概念: 重复执行的代码块或者说函数是事件驱动的重复执行的代码块. 2.函数的定义: 语法结构:function 函数名称遵循命名规则(){ 函数体 } 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> //实现But_click函数 function But_click(){ alert('被点击时触发了点击事件,并调用了函数But_click'); } </script> </head> <body> <!--在点击的时候调用了一个函数名称为But_click的函数--> <button onclick="But_click();">点击试试</button> <button onclick="But_click();">第二次点击还是会调用函数</button>//可以多次调用 </body> </html>(1)不指定函数名称/匿名函数:也就是就是没有名字的函数 结构:Function(参数 1,参数 2,…,参数 n){ //函数的主体语句 } function(){}为错误的定义 如下所示：
<script type="text/javascript"> //由事件驱动onload,执行重复代码块(匿名函数) window.onload=function(){ //alert('加载事件驱动匿名函数') //函数之中嵌套函数 //匿名函数的定义 var myfunction=function(){ alert('这是一个匿名函数,你调用了'); } //如何调用匿名函数 // alert(myfunction());//先输出的是函数的主体然后输出的是undefined // alert(myfunction);//错误的,将函数直接输出,函数并没有被调用既没有执行 myfunction();//正确的调用方法,因为不能将函数当做一个值输出,只有这种形式才可以调用函数.从而执行函数体 //查看数据类型 // alert(typeof myfunction);//返回结果为function类型(复杂的数据类型) } </script>函数的调用: i.事件的驱动进行调用函数 ii.自己调用 注:如果我们只定义函数,并没有调用函数,则函数本身是不会执行的. (2)具备名称的函数: 结构:语法: function函数名(参数 1,参数 2,….,参数 n){ return 表达式; //函数体语句 } 例如：
<script type="text/javascript"> function myFunction(){ document.write('这是一个有名称的函数:myFunction()'); } myFunction(); //自己调用 </script> <body> <button id="btn">点击1</button> <script type="text/javascript"> var btn1=document.getElementById('btn'); // btn1.onclick=函数(有名称的函数/匿名函数) //btn1.onclick=function(){} //点击事件驱动匿名函数执行 btn1.onclick=btn; //直接调用函数的名称就行,不需要添加括号 function btn(){ //创建了一个触发点击事件后要执行的行为(函数) alert('点击按钮调用了有名称的函数'); } </script> </body>3.定义一个带有参数的函数. 概念:function 函数名称(参数1,参数2…){函数体} 例如：
<script type="text/javascript"> function test1(a){//形参 document.write(a); } test1(20)//实参 </script> <script type="text/javascript"> function test2(a,b){//形参 document.write(a+b); } test2(2,5);//(实参)//形参和实参必须对应,输出结果为7 </script>注:总之可以理解为定义函数时的参数叫’形参’,调用函数时的参数为’实参’. 例:用户手动输入两个数字,判断两个数字的大小,如果a>b,则返回1,否则返回-1,相等返回0,使用函数解决问题
<script type="text/javascript"> 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 NumberBj(num1,num2){ if(num1>num2){ document.write(1); }else if(num1==num2){ document.write(0); }else{ document.write(-1); } } NumberBj(num1,num2);//这个函数用来比较两个数字大小的,可多次调用 </script>4.带有返回值的函数 例如：
<script type="text/javascript"> //带有返回值 : 使用关键字return var a=5,b=12; function test1(a1,b1){ return a1+b1; } // test1(a,b);//传递的是实参 var sum=test1(a,b); alert(sum);//结果为17 </script> <script type="text/javascript"> //比较两个数字的大小,a>b返回1,否则返回-1,相等则返回0 var a=3,b=2; function test2(a,b){ if(a>b){ return 1; }else if(a<b){ return -1; }else{ return 0; } } var num=test2(a,b); alert(num);//结果为1 </script>二.全局变量 在整个程序中,所有的函数都可以访问到的变量,或者是写在对象底下的变量. 例如：
<script type="text/javascript"> window.onload=function(){ var name='张三'; var age=34; var job='软件开发'; var money=8000.56; function myTest1(){ document.write('我是第一个函数调用变量name为'+name); } myTest1(); // function myTest1(name1){ // document.write('我是第一个函数调用变量name为'+name1); // } // myTest1(name); function myTest2(){ document.write('我是第二个函数也可以调用变量name为'+name); } myTest2(); //注:以上两个函数都可以访问变量name的值,所以把name 称之为全局变量 } </script>三.局部变量
<script type="text/javascript"> //var num1=20; window.onload=function(){ function test1(){ //var num1=20; num1=20;//去掉var } function test2(){ document.write('使用test2函数访问 test1函数中的变量num1='+num1); } test1(); test2();//在调用test2函数的时候,访问test1中的变量num1无效,原因是num1作用于test1函数 }//会发现在test2中无法调用test1的num1, //在一个函数体中如何将一个局部变量转换为全局变量? // 只需要将这个函数体中的定义变脸搞得关键字var 去掉或写在事件外边 </script>注意： 1、全局变量写在函数的最前 面，局部变量写在函数体内，局部变量省略了 var 也就默认成为了全局变量！ 2、函数体内部可以读取到函数外的变量，而函数外不能读取到函数内的变量！
