05_JS函数

2017-09-10 本文已影响0人对方不想理你并向你抛出一个异常

函数(function)

函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数的声明

函数使用跟变量一样，需要声明

自定义函数

function func(){
    alert(123);
}
func();//函数不调用，自己不会执行

函数直接量声明

var fun1 = function(){
    alert("直接量声明")
}
fun1();  也需要调用

利用Function 关键字声明

var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();

变量提升

<script>
        var num  = 10;
        showValue();

        function showValue(){
            console.log(num);//undefined
            var num =  20;
        }
</script>

上面的结果打印的不是10，而是undefined
上面的代码等价于====》

    <script>
        var num  = 10;
        showValue();

        function showValue(){
            var num;
            console.log(num);
            num =  20;
        }
    </script>

在函数体内部生命变量，会把该变量的声明放在函数体的最顶端，但是只是提升变量声明，不赋值(赋值还在原处)。

函数参数

arguments是存储了函数传送过过来实参
Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.
arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同
arguments对象的长度是由实参个数而不是形参个数决定的

    <script>
       /* function func(a,b){
            console.dir(a+b);
        }
        func(1,3);//4
        func(5);//NaN
        func(4,6,2);//10*/
        function fn(a,b){
            console.log(fn.length);//2,得到形参的个数
            console.log(arguments.length);//2，得到实参的个数
            console.log(arguments);//实参列表
            console.log(fn.arguments);//实参列表
            if(fn.length == arguments.length){
                console.log(a+b);
            }else{
                console.error("对不起，您的参数不匹配，正确的参数个数为："+fn.length);
            }
        }
        fn(2,3);
        fn(2,3,4);
    </script>

例：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .box{
            width: 360px;
            height: 430px;
            margin: 100px auto;
        }
        .box li{
            float: left;
            margin-left: 2px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var imgDom = document.getElementById("main-img");
            function fn(liId,imageSrc){
                var target = document.getElementById(liId);
                target.onmouseover = function(){
                    imgDom.src = imageSrc;
                }
            }
            fn("li-btn1","images/01big.jpg");
            fn("li-btn2","images/02big.jpg");
            fn("li-btn3","images/03big.jpg");
            fn("li-btn4","images/04big.jpg");
            fn("li-btn5","images/05big.jpg");
        }

    </script>
</head>
<body>
    <div class="box">
        ![](images/01big.jpg)
        <ul>
            <li id="li-btn1">![](images/01.jpg)</li>
            <li id="li-btn2">![](images/02.jpg)</li>
            <li id="li-btn3">![](images/03.jpg)</li>
            <li id="li-btn4">![](images/04.jpg)</li>
            <li id="li-btn5">![](images/05.jpg)</li>
        </ul>
    </div>
</body>
</html>

返回值 return

定义：
　　一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。
定义函数的返回值：
　　在函数内部用return来设置返回值，一个函数只能有一个返回值。
　　同时，终止代码的执行。
所有的自定义函数默认没有返回值；
Return 后面不要换行

焦点的事件

我们前面学过了 onclick 点击 onmouseover， onmouseout。

获得焦点: onfocus
失去焦点: onblur

例：搜索框校验

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 258px;
            height: 40px;
            margin: 50px auto;

        }
        input{
            padding: 0;
            margin: 0;
        }
        .box input[type="text"]{
            width: 206px;
            height: 40px;
            background: url("images/left.jpg");
            border: 0 none;
            outline-style: none;
            padding-left: 10px;
            float: left;
            color: #999;
        }
        .box input[type="button"]{
            width: 42px;
            height: 40px;
            background: url("images/right.jpg");
            float: right;
            border: 0 none;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var searchTxt = document.getElementById("searchTxt");
            searchTxt.onfocus = function(){//得到焦点
                if(this.value == "请输入..."){
                    this.value = "";
                    this.style.color = "#000";
                }
            }
            searchTxt.onblur = function(){//失去焦点
                if(this.value == ""){
                    this.value = "请输入...";
                    this.style.color = "#999";
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <input type="text" value="请输入..." id="searchTxt"/>
        <input type="button"/>
    </div>
</body>
</html>

this、className、innerHTML、value

指的是本身，This 主要是指事件的调用者。
className 类名

$("result").className ="wrong";

innerHTML
更换盒子里面的内容文字标签都换.
表单更换内容
Input.value
isNaN ： NaN 表示不是一个数字，isNaN是不是不是一个数字
isNaN(“12”) 如果里面的不是个数字返回 true 否则返回false

例：表单验证

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            text-align: center;
            margin: 100px auto;
        }
        .box span{
            display: inline-block;
            width: 200px;
            height: 20px;
            border: 1px solid #ccc;
            line-height: 20px;
            font-size: 12px;
            text-align: left;
            background-color: #eee;
            padding-left: 20px;
            color: #999;
        }
        .box .right{
            color: #5EFF5E;
            background:#DFFFDF url("images/right.png") no-repeat 4px;
            border: 1px solid #ACFFAC;
        }
        .box .error{
            color: #FF6B39;
            background:#FFDCD0 url("images/wrong.png") no-repeat 4px;
            border: 1px solid #FFAC91;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //模拟jquery,
            function $(id) {return  document.getElementById(id);}
            $("mytxt").onblur = function () {
                if(this.value == ""){
                    $("result").className = "error";
                    $("result").innerHTML = "成绩不能为空！";
                }else if(isNaN(this.value)){
                    $("result").className = "error";
                    $("result").innerHTML = "成绩必须为数字哦，思密达！";
                }else if(this.value>150 || this.value<0){
                    $("result").className = "error";
                    $("result").innerHTML = "成绩必须为0~150！";
                }else{
                    $("result").className = "right";
                    $("result").innerHTML = "输入的成绩正确";
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        语文成绩：
        <input type="text" id="mytxt"/>
        <span id="result">请输入语文成绩</span>
    </div>
</body>
</html>

表单自动获得焦点

Input.focus(); 方法
会触发onfocus事件

鼠标经过选择表单

 sele.onmouseover = function(){
    this.select(); //选择
}

getElementsByTagName() 获取某类标签

前面我们可以通过id得到一个盒子：getElementById()只得到一个盒子
我们想要获取某类标签比如说所有的div、li、span：getElementsByTagName(); 很多个所以是复数
getElementsByTagName();返回值是一个伪数组。