03 함수와 이벤트

1. 함수

1) 함수 선언

2) 호출

 

문제) 함수를 사용해 두 수 더하기

>> add( ) 3번 호출되어 메시지가 3번 출력된다

 

※ 함수 선언과 실행 순서

웹 브라우저에서 자바스크입트 소스를 해석할 때에는 함수 선언 부분을 가장 먼저 합니다

순서는 다르지만 ①,② 둘 다 문제없이 잘 실행되는 소스이다

 

 

2. var 변수의 특징

1) 변수가 적용되는 범위(스코프 scope)

지역변수(로컬 변수) - 함수 안에서만 사용할 수 있는 변수

전역변수(글로벌 변수) - 스크립트 소스 전체에서 사용할 수 있는 변수

 

2) var 지역 변수 선언하기

                     >> var로 선언한 변수는 함수 안에서만 사용할 수 있는 지역변수이다

 

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

- var 예약어를 빼고 선언

- var 예약어를 사용하지 않으면 전역 변수가 된다

                                           >> 변수 result는 전역 변수가 된다

 

4) var와 호이스팅

>> 자바스크립트 해석기(interpreter)는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해 둔다

>> 변수를 실행하기 전이지만, ‘이런 변수가 있구나’ 하고 기억해 두기 때문에 마치 선언한 것과 같은 효과가 있는 것이다 (이것을 호이스팅이라 한다)

 

5) 변수의 재선언과 재할당

- var를 사용한 변수는 호이스팅 외에도 재선언과 재할당을 할 수 있습니다

 

 

3. let과 const

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

- let 예약어로 선언한 변수는 { }로 묶은 부분에서만 유효라고 { }를 벗어나면 사용할 수 없습니다

                                      >> for문에 i변수를 let 예약어로 선언하였다

 

- 재할당할 수는 있지만 변수를 재선언할 수는 없다

                                   >> 재할당 (O)

 

               >> 재선언 (X)

 

 

※ var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 아직 할당되지 않은 자료형인 undefined값을 가질 수 있습니다. 바로 호이스팅이기 때문입니다

하지만 let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류메시지를 나타냅니다

 

2) const

- const로 선언한 변수는 상수 변수이다

- const로 할당한 변수는 재선언하거나 재할당 할 수 없다

- let 예약어를 사용한 변수처럼 블록 레벨의 스코프를 가집니다

>> 값이 자주 바뀌는 변수라면 let 예약어를 사용하고,

                    재할당이 없는 변수라면 const를 사용하는게 좋다

 

 

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

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

 

2) 매개변수의 기본값 지정하기

 

5. 함수 표현식

1) 익명 함수

- 익명 함수 선언하기

 

- 익명 함수 실행하기

 

2) 즉시 실행 함수

 

3) 화살표 함수

 

 

- 매개변수가 없는 경우

- 매개변수가 1개인 함수

 

- 매개변수가 2개 이상인 경우

 

 

6. 이벤트 처리기

- 마우스 이벤트

 

- 키보드 이벤트

 

- 문서 로딩 이벤트

 

- 폼 이벤트

 

- 이벤트 처리

>> 이벤트를 처리하는 가장 기본적인 방법은 HTML 태그에 이벤트 처리기를 직접 연결하는 것이다

 

 

 

문제) 버튼을 클릭하면 배경색 바꾸기

결과 확인

                                                    >> blue, red, green 클릭시 색상 변화

 

 

 

 

7. DOM을 이용한 이벤트 처리기

DOM을 사용하면 JS가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결합니다

웹 요소를 여러 방법으로 가져올 수 있는데 그중에서 함수 querySelector( )를 사용

※ 주의 - 함수의 이름만 사용하고 괄호는 붙이지 않아야 한다

 

방법 1) 웹 요소를 변로 지정 & 미리 만든 함수 사용

 

방법 2) 웹 요소를 따로 변수로 만들지 않고 사용

 

방법 3) 함수를 직접 선언