JavaScript_function

스크립트를 다루다 보면 특정한 기능을 정의하고 내가 필요할때 사용할 수 있어야 한다.

먼저 기능을 정의하는 방법을 알아보자.

가장 간단하게 알림창을 열어주는 alert을 가지고 예시를 들어보겠다.

 

여러가지 방법으로 선언할 수 있는데

이번 시간에는 function, arrow function 두가지를 알아보자.

    <script>
      const arrowFunction = () => {
        alert("arrow function");
      };

      function commonFunction() {
        alert("function");
      }
    </script>

예시

 

먼저 arrow function은

const 함수명 = () => { 내용 }

문법으로 작성된다.

function은 function이라는 선언자체로

function 함수명() { 내용 }

문법으로 작성된다.

 

사실 우리가 사용함에 있어 기능은 같다고 볼 수 있다.

javascript 사용법을 기본만 알고 있다면 다음과 같은 alert은 알고 있을 것이다.

alert('알림내용');

자 그럼 이 동작이 포함된 함수를 내가 원하는 시점에 적용 시켜보자.

 

첫번째로 onclick을 사용해서 element를 클릭했을때 발생시키는 것이다.

 

[HTML]

<div onclick="arrowFunction();" class="container">arrow Function</div>

<script>
    const arrowFunction = () => {
    	alert("arrow function");
    };
</script>

HTML방식은 아주 간단하다.

그냥 element의 onclick속성에 함수명을 넣어주면 된다.

 

[JavaScript]

function alertEvent() {
alert("function");
}

const container = document.getElementById("container");
container.addEventListener("click", alertEvent);

JavaScript에서는 어떤 방식으로 진행되는지 이해해보자.

 

1. alertEvent라는 함수를 선언했다.

2. 함수가 실행되면 alert('function')이 작동된다.

3. element 중에 'container'라는 id를 가진 element를 container 변수에 담는다.

4. container변수에 이벤트를 추가한다.

5. 이벤트는 'click'작동조건에 'alertEvent' 를 주입시킨다.

 

결과는?

예시

클릭하면 alert이벤트가 작동하면서 의도대로 움직인다.

alert대신 여러 기발한 기능함수를 만들어서 적용해보면 좋겠다.