函数传参、返回、条件语句、数组

作者: HDhandi | 来源:发表于2018-06-25 16:49 被阅读0次

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

函数传参、返回、条件语句、数组

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读