函数

2018-07-19  本文已影响0人  Khada

(1)变量和函数预解析
变量预解析
alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined，表示它的值未定义
alert(c);报错，c没有声明，这是真正的未定义

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量和函数预解析</title>
<script type="text/javascript">
    var a = 123;
    /*函数预解析*/
    myalert();//弹出hello!
    function myalert(){
        alert('hello!');
    }
</script>
</head>
<body>
</body>
</html>

(2)匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
<title>匿名函数</title>
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        /*有名字的函数*/
        // oDiv.onclick = myalert;
        // function myalert(){
        //  alert('hello');
        // }
        /*匿名函数*/
        oDiv.onclick = function(){
            alert('hello');
        }
    }
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

(3)函数传参

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参</title>
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        changeStyle('color', 'gold');
        changeStyle('background', 'red');
        changeStyle('width', '300px');
        changeStyle('height', '300px');
        changeStyle('fontSize', '30px');
        function changeStyle(styl, val){
            oDiv.style[styl] = val;
        }
    }
</script>
</head>
  <body>
  <div id="div1">这是一个div元素</div>
</body>
  </html>

(4)函数return关键字

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数return关键字</title>
<script type="text/javascript">
    window.onload = function(){
        var oInput01 = document.getElementById('input01');
        var oInput02 = document.getElementById('input02');
        var oBtn = document.getElementById('btn');
        //写入值
        // oInput01.value = 10;
        // oInput02.value = 5;
        oBtn.onclick = function(){
            var val01 = oInput01.value;
            var val02 = oInput02.value;
            var rs = add(val01, val02);
            alert(rs);
        }
        function add(a, b){
            var c = parseInt(a) + parseInt(b);
            // alert('计算完成');//执行
            return c;//返回函数设定的值，同时结束函数的运行
            // return;//不返回值，仅结束函数的运行
            // alert('计算完成');//不执行
        }
    }
</script>
  </head>
  <body>
<input id="input01" type="text" name="">
<input id="input02" type="text" name="">
<input id="btn" type="button" name="" value="相加">
</body>
</html>

(5)流程控制语句
流程控制语句

(7)多重条件判断语句
if语句
语法三：
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}

        if...else if...else
            当该语句执行时，会从上到下依次对条件表达式进行求值判断
            如果值为true，则执行当前语句。
            如果值为false，则继续向下判断。
            如果所有的条件都不满足，则执行最后一个else后的语句
            该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句

条件分支语句也叫switch语句
    语法：
        switch(条件表达式){
            case 表达式:
                语句...
                break;
        case 表达式:
                语句...
                break;
            default:
                语句...
                break;
        }

    执行流程：
        switch...case..语句
        在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，
            如果比较结果为true，则从当前case处开始执行代码。
                当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，
                这样可以确保只会执行当前case后的语句，而不会执行其他的case
            如果比较结果为false，则继续向下比较
            如果所有的比较结果都为false，则只执行default后的语句

    switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。
<!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>多重条件判断语句</title>
<script type="text/javascript">
    var today = 4;
    // if(today == 1){
    //  alert('语文');
    // }else if(today == 2){
    //  alert('数学');
    // }else if(today == 3){
    //  alert('英语');
    // }else if(today == 4){
    //  alert('美术');
    // }else if(today == 5){
    //  alert('舞蹈');
    // }else{
    //  alert('不补习');
    // }
    switch(today){
        case 1:
            alert('语文');
            break;//结束整个switch语句
        case 2:
            alert('数学');
            break;
        case 3:
            alert('英语');
            break;
        case 4:
            alert('美术');
            break;
        case 5:
            alert('舞蹈');
            break;
        default:
            alert('不补习');
            break;//最后一个default可以不写break，但建议写上
    }
</script>
  </head>
  <body>

</body>
</html>

(8)数组

  <!DOCTYPE html>
   <html lang="en">
  <head>
<meta charset="UTF-8">
<title>数组</title>
<script type="text/javascript">
    //面向对象的方式创建
    var aRr01 = new Array(1,2,3,'abc');
    //直接创建
    var aRr02 = [1,2,3,'def'];//推荐使用，性能更高
    //获取数组的成员数量（长度）
    // alert(aRr02.length);//弹出4
    // alert(aRr02[3]);//弹出cdf
    var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
    // alert(aRr03.length);//弹出3
    // alert(aRr03[1].length);//弹出3
    alert(aRr03[1][2]);//弹出c
</script>
</head>
<body>

</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读