05_JS 함수

3680 단어

함수(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();

변수 향상

        var num  = 10;
        showValue();

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


위의 결과는 10이 아니라 undefined 위의 코드는 ===와 같다
    
        var num  = 10;
        showValue();

        function showValue(){
            var num;
            console.log(num);
            num =  20;
        }
    

함수체 내부의 생명 변수는 이 변수의 성명을 함수체의 맨 끝에 두지만 변수 성명만 향상시키고 값을 부여하지 않는다(부치는 아직 제자리에 있다).
함수 매개 변수
  • arguments는 함수를 저장하여 전송한 실삼이다
  • 자바스크립트는 함수를 만드는 동시에 함수 내부에arguments 대상 실례를 만듭니다..
  • arguments 대상은 함수가 시작될 때만 사용할 수 있습니다.함수의arguments 대상은 하나의 수조가 아닙니다. 하나의 매개 변수에 접근하는 방식은 수조 요소에 접근하는 방식과 같습니다
  • arguments 대상의 길이는 실삼 개수에 의해 결정되는 것이지 형삼 개수에 의해 결정되는 것이 아니다
  •     
           /* 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);
        
    

    예:
    
        
        
        <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>
    
    
        <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>
    
    </code></pre></article></div></div>

    좋은 웹페이지 즐겨찾기