5. 자바스크립트 - 함수(Function)와 버튼 클릭 이벤트(Button Click Event)

 

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 초보자를 위한 자바스크립트 커리큘럼

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - +자바스크립트 - html과 css를 가볍게 알아보자!

 

2019/10/02 - [JavaScript/초보자를 위한 자바스크립트] - 1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 2. 자바스크립트 변수(variable)와 자료형(data type)

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - 3. 자바스크립트 - 비교연산자(Comparisons)와 조건문(Conditional operators)

2019/11/19 - [JavaScript/초보자를 위한 자바스크립트] - 4. 자바스크립트 - 배열(Array)와 반복문(loop)

---

함수(Fuction)란?

이번 시간에는 자바스크립트(JavaScript)에서 '함수'에 대해 배워보도록 하겠습니다.

함수는 하나의 로직을 재실행할 수 있도록 하는 것입니다. 이러한 함수를 이용해서 반복되는 동일한 작업을 필요할 때마다 불러와서 사용할 수 있습니다. 이러한 것을 '코드 재사용'이라고 하기도 합니다. 한번 만들어둔 함수를 계속해서 불러와서 다시 사용할 수 있기 때문이죠.

 

함수는 1. 함수를 선언하기 2. 함수를 호출하기  ^[각주:1]이 두가지로 이루어집니다. 함수 선언 = 함수를 만든다고 볼 수 있고, 함수 호출 = 만들어둔 함수를 사용한다 라고 할 수 있습니다.

 

1. 함수 선언하기

function functionName( argument1, argument2, ...) {
	//do something
    }

2. 함수 호출하기

functionName( value1, value2, ...);

---

함수 예제 살펴보기

1. 덧셈 함수

function add(x, y) {
  document.write(x+y); //document.write는 화면에 x+y결과를 표시해준다.
}

add(2, 3);
add(2, 7);

위를 보면 x와 y라는 두 개의 인수(argument)값을 받아 더해주는 add라는 이름의 함수를 선언했습니다.

그리고 add(2,3); 이런식으로 더해줄 두 값을 넣어주면 add함수를 통해 더한 결과를 확인할 수 있습니다.

 

2. 1부터 n까지 더한 값을 구해주는 함수

function sum(x) {
  var result = 0;
  for(var i = 0; i<=x; i++){
    result += i; //result = i + result와 같다.
  }
  document.write(result);
}

sum(10);

지난 시간에 배운 반복문을 이용하여 이런 식의 함수를 만들어볼 수도 있습니다.

한개의 값(x)을 받아서 1부터 해당 값까지 모두 더한 값을 출력하는 함수입니다.

10을 입력받으면 1부터 10까지 더한 값을 출력해주는 것입니다.

---

버튼 클릭 이벤트(Button Click Event)

 

자바스크립트에서 함수는 '버튼 클릭 이벤트를 발생'시킬 때도 자주 사용합니다.

예를 들어 사용자가 버튼을 클릭했을 때 "안녕?"이라는 alert창을 띄우고 싶다고 합시다. 이때 버튼을 누르는 사용자의  행위(action)를 이벤트(event)라고 합니다.  그리고 이 이벤트에 맞춰서 발생할 동작을 함수로 구현할 수 있습니다.

 

 

*이벤트(event) : 이벤트(event)는 사용자의 행위(action)를 의미합니다. 즉 사용자가 버튼을 누르거나 브라우저를 닫거나 하는 것들을 이벤트라고 볼 수 있습니다. 위의 예시에서는 버튼을 클릭하는 행위를 이벤트로 볼 수 있습니다.

 

*이벤트 타입(event type) : 이벤트의 종류를 의미합니다. 예를 들어 버튼을 클릭하는 이벤트라고 하면 click이 그 이벤트 타입입니다. 이밖에도 다양한 종류의 이벤트 타입이 존재합니다. ^[각주:2]

 

*이벤트 타겟(event target): 이벤트가 일어날 객체^[각주:3]를 의미합니다. 예를 들어서 id가 A라는 버튼을 클릭했을 때 이벤트가 발생하도록 하고 싶은 거라면 A라는 버튼이 타겟이 되는 것입니다.

 

*이벤트 핸들러(event handler) = 이벤트 리스너(event listener) : 이벤트가 발생했을 때 동작하는 코드를 의미합니다. ^[각주:4]

 

 

1. 사용자가 버튼을 클릭했을 때 "안녕?"이라는 alert창을 띄우는 예제

  <button id = "btn1">버튼</button>

버튼생성과 같은 content나 구조에 대한 것은 html로 작업합니다.

codesandbox를 켜서 html파일에 위와 같이 적어주면 웹페이지에 버튼이 생성된 것을 확인할 수 있습니다.

document.getElementById("btn1").addEventListener('click',hello);

function hello(){
  alert("안녕?");
}

 버튼에 대해 '동작'하는 부분은 javascript가 담당합니다. 

 

 

---

2. 숫자 n을 입력받아 1부터 n까지 더한 결과를 출력하는 함수 만들기

 

이는 보다 심화된 예제입니다.

<input id="number" /> 
    <button id="btn1" onclick="addNum();">입력</button>
    <br />
    결과: <span id="output"></span>

먼저 html에는 숫자를 입력받을 창과 누르면 결과를 출력하도록 하는 버튼, 그리고 결과를 출력하는 부분 총 3가지가 필요합니다.

입력받는 것은 input태그^[각주:5]를 이용하여 만들 수 있습니다. 그리고 버튼은 button태그를 이용하고, 결과를 띄워주기 위해 span태그를 이용해보도록 하겠습니다. (이때 div태그를 이용해도 괜찮습니다. 일단은 자세한 설명은 생략하고 사용하면서 어떤식으로 이용하는건지 익혀보도록 하겠습니다.) ^[각주:6]

document.getElementById("btn1").addEventListener("click", addNum);

function addNum() {
  var result = 0;
  var num = document.getElementById("number").value;
  for (var i = 1; i <= num; i++) {
    result += i; // result = result + i 와 같다.
  }

  document.getElementById("output").innerHTML = result;
}

 javascript파일에는 버튼을 클릭하는 이벤트가 발생했을 때 실행될 부분을 적어주어야합니다.

 

<코드설명>

 

*getElementById() : id를 이용하여 특정한 값을 가진 요소를 가져옵니다.

위에 코드를 보면 html파일의 button태그에 btn1이라는 id값을 주었습니다. 만약 버튼(button)이 여러개이고, 이중에서 하나의 버튼에 대해서만 특정 함수가 작동하길 바란다면 그 특정 버튼에 id값을 주어 다른 버튼들과 구분할 수 있습니다.

 

*addEventListener(): 이벤트 리스너는 특정 이벤트가 발생했을 대 그 처리를 담당하는 함수를 가리킵니다. addEventListener는 특정 이벤트 발생시 특정 함수를 실행시킵니다.

document.getElementById("btn1").addEventListener("이벤트종류", 함수이름);

우리가 작성할 이벤트리스너는 사용자가 버튼을 클릭했을 때 발생하므로 이벤트 종류는 click이고, 함수이름은 저는 addNum으로 설정했습니다.

 

*document.getElementbyId("아이디").innerHTML : 해당 id를 가진 객체 영역에 html코드를 삽입하는 소스입니다.

 

<div id = "test">김커피</div>

document.getElementById("test").innerHTML = "김라떼로 개명!";

위와 같은 예제를 직접 작성해보면 innerHTML이 어떤식으로 쓰이는지 알 수 있을겁니다 :)

 

 

1. https://www.codingfactory.net/10386 함수선언,호출 방식에 대한 보다 자세한 블로그 포스팅입니다. 자세히 알고 싶은 분들은 참고하세요. [본문으로]
2. 다양한 이벤트 타입을 포스팅해둔 게시물 링크입니다. https://abc1211.tistory.com/201 [본문으로]
3. JavaScript변수 안에는 다양한 형태의 값을 저장할 수 있습니다. 어떤 경우에는 서로 연관된 값들을 하나로 묶어 저장할 필요가 있습니다.객체는 이 때 등장하는 개념입니다.객체 란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 형식입니다. [본문으로]
4. 이벤트 핸들러 종류 : https://jdh5202.tistory.com/15 이벤트리스너 설명: http://tcpschool.com/javascript/js_event_eventListenerRegister [본문으로]
5. https://coding-factory.tistory.com/24 [본문으로]
6. div태그와 span태그의 차이점: https://m.blog.naver.com/PostView.nhn?blogId=javaking75&logNo=140160292268&proxyReferer=https%3A%2F%2Fwww.google.com%2F [본문으로]