자바스크립트 함수

함수 (function)

선언적 함수 : 

function 함수명([매개변수, 매개변수, ...]){

함수 호출 시 실행할 코드 

[return 반환할 결과 값]

}

 

    <button onclick="test1()">누르지마시오</button>

    <div id="area1" class="area"></div>

    <script>

        function test1(){

            // id 속성의 값이 "area1"인 요소 영역에 "test1() 함수 실행을 출력"

            // 클릭할 때마다 같은 내용이 추가되도록!

           

            /*let area1 =*/  

            document.getElementById("area1").innerHTML += "test1() 함수실행" + "<br>";

        }

 

익명 함수(이름이 없는 함수)

 

변수|속성 = function([매개변수, 매개변수]){

// 함수 호출 시 실행할 코드 

[return 결과값;]

주로 이벤트 핸들러 작성 시 사용한다 

}

 

    <button id="btn1">실행</button>

    <button id="btn2">스타일 변경</button>

    <div class="area" id="area2"></div>

    <script>

        // id 속성이 btn1인 요소에 접근

        const btn1 = document.getElementById("btn1");

        // id 속성이 area2인 요소에 접근

        const area2 = document.getElementById("area2");

        // 이벤트 속성에 익명함수를 대입(=> 이벤트 핸들러)

        btn1.onclick = function){

            area2.innerHTML += "이벤트 핸들러에 의해 실행 <br>"

        }

        document.getElementById("btn2").onclick = function(){

            // 요소.style.스타일속성명 = 적용할 스타일 값;

            if(area2.style.backgroundColor == "red"){

                area2.style.backgroundColor = "blue";

            }else{

                area2.style.backgroundColor = "red";

            }

        };

       // 버튼이 클릭된 것처럼 동작시키고자 할 때

        btn1.click();

    </script>

 

 

함수의 매개변수 : 

* 함수의 매개변수 

    <button onclick="test2('안녕하세요');">실행</button>

    <button onclick="test2(26);">실행</button>

    <button onclick="test2([1,2,3,4,5]);">실행</button>

    <button onclick="test2(true);">실행</button>

    <button onclick="test2(prompt('아무거나 입력하세요'));">실행</button>

    <button onclick="test2('이제','2시간도 안남았어요');">실행</button>

 

 <script>

        // 매개변수 작성 시 변수명만 작성!

        function test2(value){

            document.getElementById("area3").innerHTML += value + "<br>" ;

        }

    </script>

 

value

 

매개변수 관련 arguments 배열 : 

 

* 함수 호출 시 전달되는 값은 내부적으로 arguments 배열에 담겨진다 

* arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열 객체이다 

 

   <h4>* 매개변수에 this 전달하기</h4>

    <p>this : 현재 이벤트가 발생한 요소 객체</p>

    <button onclick="test4(this);">버튼1</button>

    <button onclick="test4(this);">버튼2</button>

    <input type="button" value="버튼3" onclick="test4(this);">

    <script>

        function test4(target){

            console.log(target);

            target.innerHTML = "클릭됨!";

            target.style.color = "red";

        }

    </script>

    <hr>

    <h3>함수의 리턴</h3>

    <h3>* 일반적인 값 리턴</h3>

    <button onclick="test5();">실행</button>

    <div class="area" id="area5"></div>

    <script>

        function random(){

            // 1 ~ 100 사이의 랜덤값을 구해서 반환해주는 함수

            // * 정수값으로 변경 :

           return parseInt(Math.random() * 100 + 1);

        }

        function test5(){

            let area5 = document.getElementById("area5");

            area5.innerHTML += "랜덤값 : " + random() + "<br>";

        }

    </script>

    <br>

    <h3>익명 함수를 리턴</h3>

    이름 : <input type="text" id= "userName">

    <button onclick="test6()()">실행</button>

    <script>

        function test6(){

        // userName이라는 id 속성을 가진 요소에 입력된값을 콘솔에 출력

        //  let userName = document.getElementById("userName").value;

        //  console.log(userName);

           

        // 익명 함수를 사용할 때 두번 사용하라

        const getName = function() {

            // userName이라는 id 속성을 가진 요소에 입력된값을 콘솔에 출력

         let userName = document.getElementById("userName").value;

         console.log(userName);

        }

        return getName;

        }

    </script>