13day-函数条件

变量和函数预解析

变量预解析
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>

匿名函数

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

函数传参

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

函数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>

流程控制语句

JS中的程序是从上到下一行一行执行的
通过流程控制语句可以控制程序执行流程,
使程序可以根据一定的条件来选择执行
<!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>

条件判断语句:

使用条件判断语句可以在执行某个语句之前进行判断,
如果条件成立才会执行语句,条件不成立则语句不执行。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容