[Do it! HTML+CSS+자바스크립트]함수와 이벤트

22.12.22 배운 내용 정리
함수와 이벤트
(함수, var를 사용한 변수의 특징, let와 const의 등장, 재사용할 수 있는 함수 만들기,
함수 표현식, 이벤트와 이벤트 처리기, DOM을 이용한 이벤트 처리기)

 

함수 알아보기

 

① 여러 동작을 묶은 덩어리, 함수

자바스크립트 프로그램은 여러 가지 동작이 연결되는데, 이렇게 동작해야 할 목적대로 묶은 명령이 함수임.

함수를 사용하면 명령의 시작과 끝을 명확하게 구별할 수 있고,

묶은 기능에 이름은 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있음.

자바스크립트에는 여러 함수가 미리 만들어져 있어서 개발자는 가져다 사용하기만 하면 됨.

 

② 함수를 사용하는 이유

개발자는 프로그래밍을 할 때 알림 창을 표시하는 alert( ) 함수처럼

자바스크립트에 들어 있는 함수를 가져다 사용하거나, 자신이 필요한 명령을 직접 함수로 만들어서 사용함.

함수를 만드는 방법은 쉬움. 예를 들어 두 수를 더하는 프로그램이 있다면 숫자를 더하는 명령어를 묶어 addNumber( ) 함수로 작성할 수 있음. 이렇게 함수로 만들면 a와 b자리에 숫자 2개를 넣으면 알아서 더해 주는 함수가 만들어짐.

 

※ 두 수를 더하는 함수 만들기

<script>

   fumction addNumber(a, b) {

      var sum = a + b;

      alert(sum);

   }

<script>

 

③ 함수 선언 및 호출

함수를 사용하는 가장 기본적인 방법은 함수를 만들 때 이름을 붙이고 필요할 때마다 함수 이름을 사용해 실행하는 것임.

함수가 어떤 명령을 처리할지 미리 알려 주는 것을 함수를 선언한다 또는 함수를 정의한다고 함.

함수를 선언할 때는 함수마다 서로 다른 이름을 붙여 나중에 사용할 때 알아보기 쉽도록 함.

함수를 선언할 때는 다음과 같이 예약어 function을 사용하고, 중괄호({ }) 안에 실행할 여러 명령을 넣음.

기본형 : function 함수명( ) {

                  명령

              }

 

하지만 프로그램에서는 함수를 선언하는 것만으로는 함수가 실행되지 않음.

함수를 선언한 후에 따로 실행하는 코드를 작성해야 함.

함수를 실행하려면 다음과 같이 미리 선언한 함수명을 써서 사용함.

이렇게 선언한 함수를 사용하는 것을 함수를 호출한다 또는 함수를 실행한다고 함.

기본형 : 함수명( ) 또는 함수명(변수)

 

※ 함수를 사용하지 않고 두 수 더하기

먼저 함수를 사용하지 않고 필요한 명령을 순서대로 나열하면 다음과 같이 작성할 수 있음.

웹 브라우저에서 실행하면 알림 창에서 바로 결괏값(5)을 보여줌.

 

 

※ 함수를 사용해 두 수 더하기

두 수를 더하는 명령을 여러 번 실행해야 할 때는 함수가 필요함.

이 예제에서는 addNumber( ) 함수를 선언하고 다음 행에 함수를 2번 호출함.

이렇게 사용하면 프로그램에서 addNumber( ) 함수가 필요한 곳에 함수를 여러 번 실행할 수 있음.

 

 

---

 

var를 사용한 변수의 특징

 

① 변수의 적용 범위 스코프 알아보기

자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프라고 함.

자바스크립트 함수에서 변수를 사용할 때는 이 영역에 주의해야 함.

한 함수 안에서만 사용할 수 있는 변수를 지역 변수(로컬 변수)라고 하고,

스크립트 소스 전체에서 사용할 수 있는 변수를 전역 변수(글로벌 변수)라고 함.

 

(1) 함수 안에서만 쓸 수 있는 지역 변수

지역 변수는 함수 안에서 선언하고 함수 안에서만 사용함.

지역 변수를 선언하려면 예약어 var와 함께 변수 이름을 지정해야함.

 

※ var 예약어로 지역 변수 선언하기

addNumber( )라는 함수 안에 var를 사용해 sum이라는 변수를 선언함.

그리고 10과 20을 더한 값, 즉 30이라는 값이 저장됨.

다음 예제를 웹 브라우저로 연 후 Ctrl + Shift + J를 눌러 콘솔창을 확인해 보면

Uncaught ReferenceError: sum is not defined라는 오류 메시지가 나옴,

이는 변수 sum이 정의되지 않았다는 뜻임.

변수 sum은 함수 addNumber( ) 안에서 선언했는데 함수 밖에 있는 console.log( )에서 사용해서 오류가 발생한 것임.

즉, 변수의 적용 범위를 벗어난 것임. 이처럼 함수 안에서 var로 선언한 변수는 함수 안에서만 쓸 수 있는 지역 변수임.

 

 

(2) 스크립트 안에서 자유롭게 쓸 수 있는 전역 변수

전역 변수는 지역 변수와 달리 스크립트 소스 전체에서 사용할 수 있음.

전역 변수로 사용하려면 함수 밖에서 선언하거나 함수 안에서는 var 예약어를 빼고 선언해야 함.

함수 안에서 선언한 변수라 하더라도 var 예약어를 사용하지 않으면 전역 변수가 됨.

 

※ var 예약어를 사용한 지역 변수와 전역 변수

이 예제를 웹 브라우저의 콘솔 창으로 확인하면 결괏값 200이 나타남.

addNumber( ) 함수 안에서 선언한 multi 변수의 이름 앞에 var 예약어를 사용하지 않았음.

즉, multi 변수를 전역 변수로 사용한 것임.

 

 

② var과 호이스팅

호이스팅이란 '끌어올린다'를 뜻하는데 이는 상황에 따라 변수의 선언과 할당을 분리해서

선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것임.

끌어올린다고 해서 실제로 소스 코드를 쓸어올리는 것은 아니고 소스를 그런 식으로 해석한다는 의미임.

 

※ 변수와 호이스팅

이 파일을 웹 브라우저의 콘솔 창에서 확인해 보면 x의 변숫값은 10이지만,

y의 변숫값은 아직 할당되지 않은 자료형인 undefined로 나타남.

이런 결과가 나타난 것은 바로 변수 호이스팅 때문임.

자바스크립트 해석기는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해 둠.

즉, 변수를 실행하기 전이지만 '이런 변수가 있구나'하고 기억해 두기 때문에 마치 선언한 것과 같은 효과가 있는 것임.

이것이 바로 호이스팅임. 그래서 간혹 호이스팅처럼 var 예약어를 사용한 변수는 선언하기 전에 사용하면 프로그램 오류를 발생시킬 수 있음.

 

 

③ 변수의 재선언과 재할당

var를 사용한 변수는 호이스팅 외에도 재선언과 재할당을 할 수 있음.

 

※ var 예약어를 사용한 변수의 재할당과 재선언

다음 예제에서 변수 sum에 처음에는 변숫값 30을 저장했지만 코드를 작성하면서 다른 값을 할당하면

아예 변수를 새로 선언함. 웹 브라우저 콘솔 창에서 확인해보면 알 수 있음.

 

 

 

---

 

let와 const의 등장

 

① let을 사용한 변수의 특징

var 예약어를 빠뜨리면 의도하지 않게 전역 변수가 되기도 하고, 프로그램 길이가 길어지다 보면

실수로 사용하는 변수를 재선언하거나 값을 재할당해 버리는 경우가 생기기도 함.

그래서 ES6에서는 변수를 선언하기 위한 예약어로 let과 const가 추가되었고,

되도록이면 var 예약어는 사용하지 않을 것을 권장함.

예약어 var과 let, const의 가장 큰 차이는 스코프의 범위임.

var는 함수 영역(레벨)의 스코프를 가지지 만 let과 const는 블록 영역의 스코프를 가짐.

변수 때문에 생기는 오류를 줄이려면 let과 const를 사용하는 것이 좋음.

값이 자주 바뀌는 변수라면 let 예약어를 사용하고, 재할당이 없는 변수라면 const 예약어를 사용하는 것이 좋음.

 

(1) 블록 안에서만 쓸 수 있는 변수

let 예약어로 선언한 변수는 변수를 선언한 블록({ }으로 묶은 부분)에서만 유효하고 블록을 벗어나면 사용할 수 없음.

이렇게 { } 블록이나 ( ) 블록 안에서만 사용할 수 있는 변수를 '블록 변수'라고 함.

 

※ 블록 변수 선언하기

calcSum( ) 함수에서 변수 sum은 let 예약어를 사용하여 선언하였으므로 calcSum( )의 블록 안에서만 사용 가능함.

또한 for문의 카운터 변수 i도 let 예약어를 사용하였으므로 변수 i는 for문을 벗어나면 사용할 수 없음.

이 예제를 웹 브라우저의 콘솔 창에서 실행하면 1부터 10까지 더한 결괏값(55)이 표시됨.

 

 

※ 전역 변수 선언하기

만약 전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 됨.

다음은 sum 변수를 전역 변수로 선언하고 함수 밖의 console.log( )로 결괏값을 표시하는 예제임.

 

 

(2) 재할당은 가능하지만 재선언은 할 수 없는 변수

let 예약어를 사용하면 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없음.

그러니 예약어 var와 같이 실수로 같은 변수의 이름을 사용할 걱정은 없음.

 

※ 블록 변수의 재할당

for문 실행이 끝나고 이미 계산한 값이 저장되어 있는 sum 변수에 값 100을 재할당한 후

실행 결과를 확인하면 sum 변수에는 새로 할당한 값 100이 들어있음.

 

 

※ 재선언할 수 없는 let 변수

블록 변수 sum을 재선언 한 후 실행 결과를 확인하면 sum이 중복으로 선언되었다는 오류 메시지가 나타남.

이렇듯 let 예약어는 같은 변수 이름을 중복해서 사용할 수 없음.

 

 

(3) 호이스팅이 없는 변수

var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 아직 할당되지 않은 자료형인 undefined값을 가질 수 있음.

바로 호이스팅 때문임. 하지만 let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메시지를 나타냄

 

※ 호이스팅이 없는 let 변수

이 예제를 웹 브라우저의 콘솔 창에서 확인해 보면 오류가 표시되는데

이는 함수 displayNumber( )에서 변수 y를 초기화하기 전에 사용할 수 없다는 뜻임.

 

 

② const를 사용한 변수의 특징

const 역시 let과 마찬가지로 변수를 선언할 때 사용하는 예약어임.

const로 선언한 변수는 상수 변수임. 상수는 프로그램 안에서 변하지 않는 값을 뜻함.

즉, 변하지 않는 값을 변수로 선언할 때 예약어 const를 사용함.

프로그램 안에서 특정한 상숫값을 자주 사용한다면 변수에 담아서 사용하는 것이 편리함.

const로 할당한 변수는 재선언, 재할당할 수 없으며, let 예약어를 사용한 변수처럼 블록 레벨의 스코프를 가짐.

 

※ 재선언할 수 없는 const 변수

const를 사용해 변수 currentYear를 선언하고 값을 할당함. 이름이 같은 변수는 재선언할 수 없음.

이 예제를 콘솔 창에서 확인하면 변수를 재선언할 수 없다는 오류 메시지가 나타남.

currentYear 변수를 다시 선언한 부분에서 오류가 발생한 것을 알 수 있음.

 

 

※ 재할당할 수 없는 const 변수

const를 사용해 이미 값을 지정한 변수에 새로운 값을 할당할 수도 없음.

변수 currentYear를 선언하고 값(2020)을 할당한 후 다시 값(2100)을 할당한 후

콘솔 창에서 확인하면 변수 할당 부분에 TypeError가 생겼다는 오류 메시지가 보임.

값 2100을 할당하는 부분에서 오류가 생긴 것을 확인할 수 있음.

 

 

③ 자바스크립트 변수 사용법

자바스크립트 문법은 벗어나지 않으면서 가독성과 디버깅을 하기 쉽도록 변수 사용 방법을 정리함.

 

(1) 전역 변수는 최소한으로 사용하기

전역 변수는 프로그램 어디서든 접근할 수 있으므로 편리하게 사용할 수 있음.

하지만 예상하지 못한 곳에서 값이 달라질 수 있으므로 그만큼 오류 발생 확률이 높아짐.

그래서 전역 변수는 되도록이면 적게 사용하는 것이 좋음.

 

(2) var 변수는 함수의 시작 부분에서 선언하기

var를 사용한 변수는 어디에서 선언하든 상관없지만 내부에서 호이스팅이 생기므로 오류가 발생할 수 있음.

그래서 var 변수는 함수 시작 부분에 선언하는 것이 변수를 확인하기도 쉽고 오류를 줄이는 방법임.

 

(3) for문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않기

for문 안에서만 사용할 카운터 변수는 그 블록 안에서만 사용할 것이므로 가끔 var를 사용해서 선언하기도 함.

하지만 이렇게 선언한다고 해서 블록 변수가 되는 것은 아님.

var 변수는 함수 레벨의 스코프이기 때문에 for문의 카운터 변수는 다음과 같이 for문 밖에서 선언하거나,

let을 사용해서 블록 변수로 선언하는 것이 좋음.

 

※ 블록 밖에서 var로 선언

var i;

for(i = 1; i <= n; i++){

(...생략...)

}

 

※ let을 사용해서 블록 변수로 선언

for(let i = 1; i <=n; i++){

(...생략...)

}

 

(4) ES6를 사용한다면 예약어 var보다 let를 사용하기

var를 사용한 변수는 재선언할 수 있으므로 실수로 같은 변수를 다시 선언하더라도 오류가 발생하지 ㅇ낳음.

간혹 여러 사람이 작성한 프로그램을 합치다 보면 변수가 중복될 수도 있는데 이럴 경우 문제가 발생함.

이럴 때 재선언할 수 없는 let을 사용하는 것이 좀 더 안전함.

 

---

 

재사용할 수 있는 함수 만들기

 

① 매개변수, 인수, return 알아보기

앞에서 addNumber( ) 함수를 사용해 두 수를 더하는 프로그램을 만들었었는데

이때 addNumber( ) 함수 안에 num1=2, num2=3처럼 두 변숫값을 고정했었음.

그래서 addNumber( ) 함수를 실행할 때마다 계속 같은 결괏값(5)를 보여줌.

 

한 번만 사용하는 함수라면 상관없지만, 프로그램 안에서 여러 번 사용하는 함수인데 입력값을 바꾸지 못한다면

매우 불편할 것임. 이처럼 변숫값이 자주 변하는 상황에서 사용하려면

값을 고정하지 않고 어떤 숫자든지 2개만 addNumber( ) 함수로 넘겨서 더해 주면 됨.

즉, 함수를 실행하는 데 필요한 값을 함수 밖에서 제공하는 것임.

이렇게 하려면 함수를 선언할 때부터 외부에서 값을 받아 줄 변수를 미리 만들어야 하는데,

이것을 매개변수라고 하고 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣음.

매개변수에 이름을 붙이는 방법은 일반적인 변수 이름을 붙이는 것과 같음.

매개변수는 선언된 함수 안에서만 사용하며, 매개변수를 여러 개 사용할 때는 매개변수 이름 사이에 쉼표(,)를 찍어 나열함.

 

(1) 함수 선언할 때 매개변수 지정하기

 

※ 매개 변수를 사용한 함수 선언하기

매개변수를 사용하기 위해 함수 addNumber( )를 수정하는데

addNumber( ) 함수에서 사용할 매개변수는 다른 변수와 겹치지 않는 이름을 사용하면 됨.

여기에서는 num1과 num2로 지정하고 쉼표로 구분하여 괄호 안에 표시함.

그리고 두 수인 num1과 num2를 더한 후 변수 sum에 저장함.

그런데 여기까지만 선언하면 두 수를 더한 sum값은 함수 안에만 있게됨.

결괏값을 함수 밖에서 사용하려면 함수를 실행한 위치로 돌려줘야하는데 이러한 동작을 값을 반환한다고 함.

함수의 결괏값을 반환할 때는 예약어 return을 사용해서 다음에 넘겨줄 값을 지정해주면 됨.

여기에서는 변숫값 sum을 넘겨주면됨.

 

 

※ 매개변수를 사용한 함수 선언하고 호출하기

함수 선언이 끝났다면 실행할 함수를 호출해야함. 매개변수가 있는 함수를 호출할 때 실제 값 부분을 인수라고 함.

addNumber( ) 함수를 선언할 때 괄호 안에 표시한 num1, num2를 매개변수라 하고,

addNumber(2, 3)처럼 함수를 실행할 때 괄호 안에 넣어 준 숫자 2와 3을 인수라고 함.

 

 

위 예제 소스에서 함수를 선언하고 실행하는 과정은 다음과 같이 정리할 수 있음.

1번 : 자바스크립트 해석기가 function이라는 예약어를 만나면 함수를 선언하는 부분이라는 것을 인식하고

함수 블록({ })을 해석함. 아직 실행하지 않음.

2번 : addNumber(2, 3)을 만나면 해석해 두었던 addNumber( ) 함수를 실행함.

3번 : addNumber( ) 함수에서 2는 num1로, 3은 num2로 넘기고 더한 값을 sum 변수에 저장함.

4번 : 함수 실행이 모두 끝나면 결괏값 sum을 함수 호출 위치, 즉 var result로 넘김.

5번 : 넘겨받은 결괏값을 result라는 변수에 저장함.

6번 : result 변수에 있는 값을 화면에 표시함.

 

※ 소스 간단하게 작성하기

함수 안에 있는 변수 sum은 단순히 결괏값을 저장했다가 반환하므로 다음과 같이 소스를 줄여서 작성할 수 있음.

이렇게 작성하면 더한 값을 변수 sum에 저장하여 반환하지 않고 바로 반환함.

 

 

② 매개변수 기본값 지정하기

ES6부터는 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능도 생김.

 

※ 매개변수의 기본값 지정하기

다음과 같이 multiple( ) 함수에서 매개변수 b와 c의 변숫값을 넘겨받지 못했을 때 기본값을 사용함.

 

 

이렇게 매개변수의 기본값을 지정한 multiple( ) 함수를 다음과 같이 호출할 수 있음.

이때 넘겨받는 인수에 따라 기본값을 사용함.

 

 

1부터 n까지 숫자를 더하는 함수

 

① 매개변수가 있는 함수 선언하기

만약 사용자가 '10'을 입력하면 1부터 10까지 더한 결괏값을 출력하도록 만들기 위해서는

사용자가 입력한 숫자를 매개변수 n으로 놓고 함수 이름은 calcSum( )으로 만든 후

다음과 같이 </body> 태그 앞에 스크립트 소스를 추가해야함.

 

 

다음으로 숫자를 더하는 결괏값을 저장할 변수 sum을 선언하고 1부터 n+1까지 반복해서 숫자를 더하는 for문을 추가함.

 

 

② 함수 호출하기

함수 선언은 끝났지만 함수 선언만으로는 실행되지 않음.

사용자에게 입력받은 값은 문자열이므로 parseInt( ) 함수를 사용해 정수로 변환한 후 calcSum( ) 함수를 실행함.

작성한 파일을 저장하고 웹 브라우저로 실행한 후 프롬프트 창에 숫자를 입력하면

1부터 입력한 숫자까지 더한 값을 화면에 표시함.

 

 

---

 

함수 표현식

 

① 익명 함수

익명 함수는 이름이 없는 함수를 말함. 즉, 익명 함수를 선언할 때는 이름을 붙이지 않음.

 

※ 익명 함수 선언하기

function(a, b) {    //익명 함수 선언

    return a + b;

}

 

※ 익명 함수 실행하기

익명 함수는 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 또한 다른 함수의 매개변수로 사용할 수 있음.

다음은 두 수를 더하는 익명 함수를 변수 sum에 할당하는 예제임.

이렇게 변수에 저장된 익명 함수는 함수 이름 대신 변수를 이용해 함수를 실행함.

 

 

② 즉시 실행 함수

한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있는데 이게 바로 즉시 실행 함수임.

즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석함.

기본형 : (function( ) {                                         기본형 : (function(매개변수) {

                명령                          또는                                   명령

               } ( ));                                                                  } (인수)); 

 

※ 즉시 실행 함수 만들기

사용자에게 이름을 받아서 인사말을 표시하는 함수는 다음과 같이 작성할 수 있음.

이 소스는 따로 호출하지 않았지만 바로 실행됨.

 

 

※ 매개변수가 있는 즉시 실행 함수 만들기

만약 매개변수를 사용하는 함수라면 선언 부분 끝에 함수 실행을 위한 인수를 넣어 줌.

예를 들어 두 수를 더하는 함수는 다음과 같이 작성할 수 있음.

 

 

③ 화살표 함수

ES6 버전부터는 => 표기법(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있음.

이 방법은 간단히 화살표 함수라고 하는데 익명 함수에서만 사용할 수 있음.

화살표 함수의 기본 형식은 다음과 같이 매개변수와 함수 내용으로 구성됨.

기본형 : (매개변수) => { 함수 내용 }

 

(1) 매개변수가 없을 경우

매개변수가 없는 경우 매개변수를 넣는 괄호 안은 비워둠.

예를 들어 매개변수 없이 간단한 인사말을 화면에 표시하는 함수는 다음과 같이 작성할 수 있음.

 

※ 매개변수가 없는 함수

const hi = function( ) {

   return "안녕하세요?";

}

 

위 함수를 화살표 함수로 작성하면 다음과 같음.

※ 매개변수가 없는 화살표 함수

const hi = ( ) => { return "안녕하세요?" };

 

그리고 중괄호 안에 함수 내용이 한 줄뿐이라면 중괄호를 생략해서 다음과 같이 작성할 수도 있음.

이때 return문은 생략된 것으로 간주함.

※ 매개변수가 없는 화살표 함수(중괄호 생략)

const hi = () => "안녕하세요?";

 

(2) 매개변수가 1개인 경우

매개 변수가 하나인 경우 매개변수의 괄호는 생략할 수 있음.

 

※ 매개변수가 1개인 함수

let hi = function(user) {

    document.write(user + "님, 안녕하세요?");

 

※ 매개변수가 1개인 화살표 함수

let hi = user => { document.write(user + "님, 안녕하세요?"); }

 

(3) 매개변수가 2개 이상인 경우

매개변수가 둘 이상인 경우 화살표 함수는 (매개변수) => { ... }처럼 사용함.

다음은 매개변수가 2개인 경우에 사용하는 함수로, 매개변수를 추가하려면 괄호 안에 쉼표(,)로 구분함.

 

※ 매개변수가 2개인 함수

let sum = function(a, b) {

   return a + b;

}

 

※ 매개변수가 2개인 화살표 함수

let sum = (a, b) => a + b;

 

---

 

이벤트와 이벤트 처리기

 

① 이벤트 알아보기

이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말함.

하지만 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아님.

이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말함.

따라서 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아님.

자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생함.

 

(1) 마우스 이벤트

마우스 이벤트는 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생함.

 

※ 마우스 이벤트

 

종류	설명
click	사용자가 HTML 요소를 클릭할 때 이벤트가 발생함.
dblclick	사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생함.
mousedown	사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생함.
mousemove	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생함.
mouseover	마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생함.
mouseout	마우스 포인터가 요소를 벗어날 때 이벤트가 발생함.
mouseup	사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생함.

 

(2) 키보드 이벤트

키보드 이벤트는 키보드에서 특정 키를 조작할 때 발생함.

 

※ 키보드 이벤트

 

종류	설명
keydown	사용자가 키를 누르는 동안 이벤트가 발생함.
keypress	사용자가 키를 눌렀을 때 이벤트가 발생함.
keyup	사용자가 키에서 손을 뗄 때 이벤트가 발생함.

 

(3) 문서 로딩 이벤트

서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여주는 것과 관련된 이벤트임.

 

※ 문서 로딩 이벤트

 

종류	설명
abort	문서가 완전히 로딩되지 전에 불러오기를 멈췄을 때 이벤트가 발생함.
error	문서가 정확히 로딩되지 않았을 때 이벤트가 발생함.
load	문서 로딩이 끝나면 이벤트가 발생함.
resize	문서 화면 크기가 바뀌었을 때 이벤트가 발생함.
scroll	문서 화면이 스크롤되었을 때 이벤트가 발생함.
unload	문서에서 벗어날 때 이벤트가 발생함.

 

(4) 폼 이벤트

폼은 로그인, 검색, 게시판, 설문 조사처럼 사용자가 입력하는 모든 요소를 가리킴.

 

※ 폼 이벤트

 

종류	설명
blur	폼 요소에 포커스를 잃었을 때 이벤트가 발생함.
change	목록이나 체크 상태 등이 변경되면 이벤트가 발생함. <input>, <select>, <textarea> 태그에서 사용함.
focus	폼 요소에 포커스가 놓였을 때 이벤트가 발생함. <label>, <select>, <textarea>, <button> 태그에서 사용함.
reset	폼이 리셋되었을 때 이벤트가 발생함.
submit	submit 버튼을 클릭했을 때 이벤트가 발생함.

 

② 이벤트 처리기 알아보기

이벤트에서는 작은 이미지를 클릭하면 큰 이미지를 보여 주거나 폼에서 항목을 선택하면 해당 페이지로 이동하는 등

여러 가지 동작을 실행하는데, 웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기(이벤트 핸들러)라고 함.

기본형 : <태그 on이벤트명 = "함수명">

 

※ 버튼을 클릭하면 알림 창 표시하기

예를 들어 마우스로 클릭했을 때의 이벤트 이름은 click임. <a> 태그 안에 onclick 속성을 만들고 실행할 함수를 연결함.

다음은 목록에서 각 버튼을 클릭하면 알림창을 표시하는 예제임.

 

 

이벤트가 발생한 후에 여러 가지 명령을 실행해야 한다면,

그 명령을 묶어서 하나의 자바스크립트 함수로 만드는 것이 좋음.

그리고 이벤트가 발생할 때 함수 이름과 인수를 지정하여 실행함.

 

※ 버튼을 클릭하면 배경색 바꾸기

다음은 웹 요소의 배경색을 바꾸는 changeBg(color) 함수를 미리 만들어서 실행하는 예제임.

항목을 클릭할 때마다 green이나 orange, purple의 색상값을 인수로 넘겨서 changeBg(color) 함수를 실행함.

 

 

버튼을 클릭해서 상세 설명 표시하거나 닫기

 

① 웹 브라우저에서 HTML 파일 확인하기

웹 브라우저에서 파일을 확인해보면 이미지와 [상세 설명 보기] 버튼만 표시되어 있음.

이 버튼을 클릭하면 이미지 아래에 설명 글이 나타나도록 만들어야 함.

 

 

② 비주얼 스튜디오 코드에서 HTML 파일 열기

먼저 버튼을 클릭하면 실행할 함수를 작성해야함.

showDetail( ) 함수는 설명 글을 화면에 표시하고, hideDetail( ) 함수는 설명 글을 사라지게 함.

이 두 함수를 활용해서 click 이벤트를 처리해 보면 다음과 같음.

 

 

③ 클릭하는 이벤트 처리기 추가하기

다음과 같이 <body> 태그 안에는 [상세 설명 보기]와 [상세 설명 닫기]의 <button> 태그가 있음.

여기에 onclick 이벤트 처리기 속성을 추가하여 showDetail( )과 hideDetail( ) 함수를

연결하는 코드를 작성 하고 저장한 후 웹 브라우저에서 확인해 보면

다음과 같이 [상세 설명 보기] 버튼을 클릭하면 이미지 아래에 제목과 설명 글이 표시되고,

[상세 설명 닫기] 버튼을 클릭하면 설명 글이 화면에서 사라짐.

 

 

---

 

DOM을 이용한 이벤트 처리기

 

지금까지 이벤트 처리기를 지정하는 방법은 HTML이 주인이 되어 자바스크립트의 함수를 불러와서 사용함.

하지만 DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결함.

예를 들어 웹 요소를 클릭했을 때 실행할 함수를 연결하려면 다음과 같은 기본 형식으로 사용함.

기본형 : 웹 요소.onclick = 함수;

 

자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있는데

그중에서 함수 querySelector( )를 사용하여 가져오는 것이 쉬움.

querySelector( )의 괄호 안에는 클래스 이름이나 id 이름 또는 다양한 선택자를 넣을 수 있음.

 

※ 버튼 클릭해서 글자색 바꾸기

id = "change"인 버튼을 클릭했을 때 글자색을 바꾸는 예제임.

querySelector( )를 사용해 버튼 요소를 가져오고 변수 changeBttn에 저장함.

그리고 changeBttn에 onclick을 사용해 changeColor( ) 함수를 연결함.

이때 주의할 점은 함수의 이름만 사용하고 괄호는 붙이지 않아야 한다는 것임.

 

 

앞의 스크립트 코드는 조금 다르게 표현할 수도 있음.

웹 요소를 프로그램 안에서 여러번 사용하지 않는다면 다음과 같이 변수에 할당하지 않고 직접 사용해도 됨.

 

 

또는 함수를 딱 한 번만 사용한다면 위 코드에서 changeColor라는 함수 이름이 들어갔던 자리에 직접 함수를 선언해도 됨.

 

 

※ 버튼 클릭해서 설명 글 열고 닫기 - DOM 이벤트 처리기 연결

이렇게 DOM을 이용한 이벤트 처리 방식으로 작성하면

자바스크립트 소스와 HTML 마크업을 분리해서 이벤트를 제어할 수 있음.

 

 

---