前端JavaScript入门——JavaScript函数

函数的定义和调用
函数
函数就是可以重复执行的代码片。

函数定义与执行

<script type="text/javascript">
    // 函数定义
    function aa(){
        alert('hello!');
    }
    // 函数执行
    aa();
</script>

函数的定义和调用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">


        //函数的定义
        function fnMyalert()
        {
            alert('hello world!');    
        }
        //函数调用执行
        // fnMyalert();

        function fnChange(){
            var oDiv = document.getElementById('div1');
            oDiv.style.color = "red";
            oDiv.style.fontSize = "30px";
        }

    </script>
</head>
<body>
    <!-- 标签内调用   -->
    <div id="div1" onclick="fnMyalert()">这是一个div元素</div>
    <input type="button" name="" value="改变div" onclick="fnChange()">
</body>
</html>

函数的定义和调用示例

变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<script type="text/javascript">    
    aa();       // 弹出 hello！
    alert(bb);  // 弹出 undefined
    function aa(){
        alert('hello!');
    }
    var bb = 123;
</script>

变量和函数预解析示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        // 预解析会让变量的声明提前
        alert(iNum);  //弹出undefined
        
        // 使用一个未声明的变量，出错！
        //alert(iNum02);
        var iNum = 12;
        
        // 预解析会让函数的声明和定义提前
        myalert();
        
        function myalert(){
            alert('hello world!');
        }
    </script>
</head>
<body>
    
</body>
</html>

变量和函数预解析示例

提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

为什么要提取行间事件？
原来我们是将函数事件直接放在html代码里面，这样的话，在维护时容易误删导致函数不能正确执行；还有就是应该将js相关的放在一起，实现代码分离，方便观看和维护；

<!--行间事件调用函数   -->
<script type="text/javascript">        
    function myalert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()">

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

提取行间事件示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById('btn01');

            // 将事件属性和一个函数关联，函数不能写小括号，写了会马上执行
            oBtn.onclick = fnChange;

            function fnChange(){
                var oDiv = document.getElementById('div1');
                oDiv.style.color = "red";
                oDiv.style.fontSize = "30px";
            }
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <input type="button" name="" value="改变div" id="btn01">
</body>
</html>

提取行间事件示例

匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
匿名函数适合是给某个元素做一件事情的情况，如果要为多个元素做事，就需要将函数命名，不能使用匿名函数了。

<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */

    // 直接将匿名函数赋值给绑定的事件
    oBtn.onclick = function (){
        alert('ok!');
    }
}
</script>

实际上实现提取行间事件并不是函数的最终写法，我们用的比较多的是匿名函数的写法，如下。

js匿名函数示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById('btn01');
            /* 提取行间事件写法
            oBtn.onclick = fnChange;
            function fnChange(){
                var oDiv = document.getElementById('div1');
                oDiv.style.color = "red";
                oDiv.style.fontSize = "30px";
            }            
            */
            
            // 最终写法-转化成匿名函数的写法：
            oBtn.onclick = function(){
                var oDiv = document.getElementById('div1');
                oDiv.style.color = "red";
                oDiv.style.fontSize = "30px";
            };
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <input type="button" name="" value="改变div" id="btn01">
</body>
</html>

js匿名函数示例

匿名函数综合示例-网页换肤

skin01.css
body{
    background-color:green;
}

input{
    width:200px;
    height:50px;
    background-color:gold;
    border:0;
}

skin02.css
body{
    background-color:#ddd;
}

input{
    width:200px;
    height:50px;
    border-radius:25px;
    background-color:pink;
    border:0;
}

网页换肤.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01">
    <script type="text/javascript">
        window.onload = function(){
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');
            var oLink = document.getElementById('link01');

            oBtn01.onclick = function(){
                oLink.href = "css/skin01.css";
            };
            oBtn02.onclick = function(){
                oLink.href = "css/skin02.css";
            }
        }
    </script>
</head>
<body>
    <input type="button" name="" value="皮肤一" id="btn01">
    <input type="button" name="" value="皮肤二" id="btn02">
</body>
</html>

匿名函数综合示例-网页换肤

函数传参

<script type="text/javascript">
    function myalert(a){
        alert(a);
    }
    myalert(12345);
</script>

函数传参示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            function fnMyalert(a){
                alert(a);
            }
            //fnMyalert('hello world!');
            
            function fnChangestyle(mystyle,val){
                var oDiv = document.getElementById('div1');
                oDiv.style[mystyle] = val;
            }
            fnChangestyle('fontSize','30px');
            fnChangestyle('color','red');
            fnChangestyle('backgroundColor','pink');
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</html>

函数传参示例

函数’return’关键字
函数中’return’关键字的作用：

返回函数执行的结果
结束函数的运行
阻止默认行为
return关键字使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        
        function fnAdd(a,b) {
            var c = a + b;
            // 返回c的值，然后结束函数的运行
            return c;

            alert("函数内部的c="+c);
        }

        var iResult = fnAdd(2,5);
        alert(iResult);
    </script>
</head>
<body>
    
</body>
</html>

return关键字使用示例

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。

前端JavaScript入门——JavaScript函数

猜你喜欢