[JavaScript] 함수

[선언적 함수]

이름이 있는 함수 

 <button onclick="basicFunction();">기본함수실행</button>

    <div id="container"></div>

    <button onclick="paramFunction(prompt('이름'),prompt('나이'));">실행</button>

    

    <h2>매개변수를 적게 입력하여 호출하면?</h2>

    <button onclick="paramFunction(prompt('이름'));">실행</button>

    

    <h2>매개변수를 더 많이 입력하면?</h2>

    <button onclick="paramFunction('홍길동',19,180.5,'주소');">더많이 입력</button>

    <script>

        function basicFunction(){

          //querySelector는 선택자로 객체를 가져올 수 있는 함수 (한개값만 가져옴)

          //var el = document.querySelectorAll("p:nth-of-type(2)"); (여러개값 가져옴) 전체를 배열로 받아서 그중에 2번째

            

var el = document.querySelector("p:first-of-type+p"); 

            el.style.color="blue";

        }

        

        basicFunction();

[매개변수가 있는 선언적 함수]

매개변수를 name,age 2개보다 적게 입력하여(이름만 입력)출력하면 ? 이름 : 홍길동 나이 : undefined 

 매개변수를 name,age 2개보다 많이 입력하여 출력하면?  이름 : 홍길동 나이 : 19 

 - 알아서 2개값만 출력한다

function paramFunction(name,age){

            var container=document.querySelector("#container")

            container.innerHTML+="이름 : "+name+" 나이 : "+age;

        }

[익명 함수]

이름이 없는 함수 

<button onclick="fn2(prompt('색상'));">fn2실행</button>

    <p class="a">이벤트!</p>

    <p class="a">이벤트!</p>

    <p class="a" onclick="eventHandler();">이벤트!</p>

    <script>

        //매개변수가 있는 익명함수

        var fn2 = function(color){

            var el = document.querySelector("p:last-of-type");

            el.style.backgroundColor=color; //매개변수로 받아온 색을 넣어줌

        }

        //한번만 실행하고 끝나는 함수(다시 호출 불가능) 페이지 초기에 떴을때 한번만 하고 끝날경우 사용

        

(function(){alert('익명함수!');})();

        var fn = function(){

            var el = document.querySelector("p:last-of-type");

            el.style.backgroundColor="purple";

        };

        fn();

        

       //클릭하면 폰트사이즈 바꾸기 (리스너)

 var ps = document.getElementsByClassName("a");

        for(var i=0; i<ps.length; i++){

            ps[i].addEventListener("click",function(){

                this.style.fontSize="50pt";

            });

        }

//클릭하면 폰트사이즈 바꾸기 (표준)

            for(var i=0; i<ps.length; i++){

            ps[i].addEventListener("click",eventHandler);

        }

        function eventHandler(){

            this.style.fontSize="50pt"; //this를 외부태그에서 호출하면 window가 발생함  

이벤트가 발생한 p태그(객체)를 찾을 수 없음

        }

        //이것도 익명함수

var arr = [1,2,5,3,7,1,7,2];

        arr.sort(function(left,right){

            return left-right;

        })

        //함수도 호이스팅이 된다

        console.log(testHo,typeof(testHo));

        var testHo=function(){

            alert("호이스팅");

        };

        testHo();

    

    </script>

[argument 객체]

함수의 전달된 모든 매개변수를 보관하는 것

<script>

        function testArgu(){

            console.log(arguments);

        }

        testArgu("홍길동",19,180.5);

    

    </script>