函數傳參、返回、條件語句、數組

(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)流程控制語句
流程控制語句

  • JS中的程序是從上到下一行一行執行的

  • 通過流程控制語句可以控制程序執行流程，
    使程序可以根據一定的條件來選擇執行

  • 語句的分類：
    1.條件判斷語句
    2.條件分支語句
    3.循環語句

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制語句</title>
    <script type="text/javascript">
        console.log('你好');
        alert('hello');
    </script>
</head>
<body>

</body>
</html>

(6)條件判斷語句
條件判斷語句：

  • 使用條件判斷語句可以在執行某個語句之前進行判斷，
    如果條件成立才會執行語句，條件不成立則語句不執行。

  • if語句

  • 語法一：
    if(條件表達式){
    語句...

          if語句在執行時，會先對條件表達式進行求值判斷，
      如果條件表達式的值為true，則執行if后的語句，
      如果條件表達式的值為false，則不會執行if后的語句。
          if語句只能控制緊隨其后的那個語句,
              如果希望if語句可以控制多條語句，
              可以將這些語句統一放到代碼塊中
          if語句后的代碼塊（即{}）不是必須的，但是在開發中盡量寫上代碼塊，即使if后只有一條語句
      - 語法二:
          if(條件表達式){
              語句...
          }else{
              語句...
          }
  
      if...else...語句
          當該語句執行時，會先對if后的條件表達式進行求值判斷，
              如果該值為true，則執行if后的語句
              如果該值為false，則執行else后的語句

還有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>條件判斷語句</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            var oDiv = document.getElementById('box');
            /*oBtn.onclick = function(){
               if(oDiv.style.display == 'none'){
                    oDiv.style.display = 'block';
                }else{
                    oDiv.style.display = 'none';
                }
            }*/
        
            // alert(oDiv.style.display);//彈出空白提示框，因為div沒設置過 style屬性
            oBtn.onclick = function(){
                if(oDiv.style.display == 'block' || oDiv.style.display == ''){
                    oDiv.style.display = 'none';
                }else{
                    oDiv.style.display = 'block';
                }
           }
        }
    </script>
</head>
<body>
    <input type="button" value="切換" id="btn">
    <br>
    <div class="box" id="box"></div>
</body>
</html>

(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>

(9)數組常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數組常用方法</title>
    <script type="text/javascript">
        var aRr = [1,2,3,4];
        //用-連接數組元素并轉為字符串
        //var sTr = aRr.join("-");//用-連接數組元素并轉為字符串，彈出1-2-3-4
        // var sTr = aRr.join('');//用空串連接
        // alert(sTr);//彈出1234
        //向數組最后追加元素
        // aRr.push(5);
        // alert(aRr);//1,2,3,4,5
        //刪除末尾元素
        // aRr.pop();
        // alert(aRr);//1,2,3
        //向最前面插入元素0
        // aRr.unshift(0);
        // alert(aRr);//0,1,2,3,4
        //刪除第一個（索引為0的）元素
        // aRr.shift();
        // alert(aRr);//2,3,4
        //反轉
        // aRr.reverse();
        // alert(aRr);//4,3,2,1
        //查找字母'b'第一次出現的索引
        var aRr2 = ['a','b','c','d','a','b','c','d'];
        var num = aRr2.indexOf('b');
        // alert(num);//1
        //從第2索引元素開始，刪除1個元素
        // aRr2.splice(2,1);//刪除c
        // alert(aRr2);//a,b,d,a,b,c,d
        //從第2索引元素開始，刪除1個元素，再插入e
        // aRr2.splice(2,1,'e');//把c替換成e
        // alert(aRr2);//a,b,e,d,a,b,c,d
        //刪除后面的abcd，改為fghi
        aRr2.splice(4,4,'f','g','h','i');
        alert(aRr2);//a,b,c,d,f,g,h,i
    </script>
</head>
<body>

</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • (1)變量和函數預解析變量預解析alert(a);//只把變量a的聲明提前，賦值不提前，所以彈出undefined...
    松雪寶寶閱讀 388評論 0贊 0
  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執行單位為行（line），也就是一...
    悟名先生閱讀 4,195評論 0贊 13
  • 偏心先生和任性姑娘一旦相遇必定是天雷勾地火，一言不合就吵架，兩個人正如眼前的名字一樣，一個特別的任性另一個則是偏心...
    會變身的小浮沉閱讀 539評論 0贊 5
  • 愛情兩個字好像已經很久沒有出現在我的生活中，今天和一個陌生人聊天，他說女生現在都到了恐嫁恐生的地步，應該沒有這么嚴...
    時光支書閱讀 185評論 0贊 0