10주차 - 함수와 이벤트
함수와 이벤트
자바스크립트의 경우 명령을 순차적으로 처리합니다. 이때 프로그램의 기능별로 여러 명령을 묶게 되는데 이를 함수라고 합니다.
함수의 경우 원하는 기능만 실행할 수 있고 또한 재사용 가능합니다.
15-1 함수 알아보기 15-2 var를 사용한 변수의 특징 15-3 let와 const의 등장 15-4 재사용할 수 있는 함수 만들기 15-5 함수 표현식 15-6 이벤트와 이벤트 처리기 15-7 DOM을 이용한 이벤트 처리기
15-1 함수 알아보기
여러 동작을 묶은 덩어리, 함수
예시 - alert() 함수
함수를 왜 사용할까?
자신이 필요한 명령을 직접 함수로 만들어서 사용하기 위해
함수 선언 및 호출
함수를 선언 || 함수를 정의 -> 함수를 호출 || 함수를 실행 기본형 function 함수명() { 명령 }
15-2 var를 사용한 변수의 특징
자바스크립트 ES6 버전의 경우 변수 선언을 위해 let와 const라는 예약어가 추가되었습니다. 기존에 있던 var와 무엇이 다른지 알아봅시다.
변수의 적용 범위 스코프 알아보기
자바스크립트에서 변수를 선언하고 이후 사용하는 데 있어 어디까지 유효한 영역인지 아는 것이 중요한데 이를 스코프라고 한다. 지역 변수 : 한 함수 내에서만 사용할 수 있는 변수 전역 변수 : 스크립트 소스 전체에서 사용할 수 있는 변수
함수 안에서만 쓸 수 있는 지역 변수
스크립트 안에서 자유롭게 쓸 수 있는 전역 변수
var와 호이스팅
호이스팅 : 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올린다는 의미
변수의 재선언과 재할당
15-3 let와 const의 등장
var 예약어를 사용하는 변수는 함수 영역의 스코프를 가지고, 재할당과 재선언을 할 수 있다. 그렇기에 잘못 사용할 경우 프로그램 오류가 발생하기도 한다. 이를 보완하기 위해 let와 const 예약어가 등장하게 되었다.
let을 사용한 변수의 특징
블록 안에서만 쓸 수 있는 변수
let : 변수를 선언한 블록{}에서만 유효하다.
재할당은 가능하지만 재선언은 할 수 없는 변수
호이스팅이 없는 변수
const를 사용한 변수의 특징
const : 상수 변수, 재선언, 재할당 불가능
자바스크립트 변수, 이렇게 사용하세요
편리성은 프로그램을 가독성이나 디버깅을 어렵게 만듭니다. 그렇기에 자바스크립트 문법에서 벗어나지 않으면서 이러한 점들을 쉽도록 변수 사용 방법에 대해 익혀야한다.
전역 변수는 최소한으로 사용합니다.
var 변수는 함수의 시작 부분에서 선언합니다.
for 문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않습니다.
ES6를 사용한다면 예약어 var보다 let를 사용하는 것이 좋습니다.
15-4 재사용할 수 있는 함수 만들기
매개변수, 인수, return 알아보기
함수를 한번만 사용하기 위해 매개변수 없이 함수를 구현한다면 상관없지만, 재사용성이라는 관점에서 이는 의미가 없을 수 있다. 그렇기에 함수에 매개변수를 받을 수 있게 구현할 수 있다면 함수를 재사용하는데 유용할 것이다.
함수 선언할 때 매개변수 지정하기
매개변수 기본값 지정하기
ES6부터는 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능도 생겼습니다.
15-5 함수 표현식
익명 함수
개념 : 이름이 없는 함수
즉시 실행 함수
개념 : 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있다.
화살표 함수
람다 형식 아닌가?
매개변수가 없을 경우
매개변수가 없을 경우 화살표 함수의 중괄호 생략 가능
매개변수가 1개인 경우
매개변수가 2개인 경우
15-6 이벤트와 이벤트 처리기
이벤트 알아보기
이벤트 : 웹 브라우저나 사용자가 행하는 어떠한 동작 예를 들면, 키보드에서 키를 누르는 행위, 새로운 페이지를 불러오는 것과 같을 것을 이벤트라 한다.
마우스 이벤트
개념 : 마우스를 이용해서 버튼이나 휠 버튼을 조작할 떄 발생
표 15-1 마우스 이벤트
click
사용자가 HTML 요소를 클릭할 때 이벤트가 발생합니다.
dblclick
사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생합니다.
mousedown
사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다.
mousemove
사용자가 요소 위에서 마우스 포인터를 움직힐 때 이벤트가 발생합니다.
mouseover
마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다.
mouseout
마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다.
mouseup
사용자가 요소 위에 놓인 마우스 버튼에서 손을 땔 때 이벤틑가 발새합니다.
키보드 이벤트
개념 : 키보드에서 특정 키를 조작할 때 발생
표 15-2 키보드 이벤트
keydown
사용자가 키를 누르는 동안 이벤트가 발생합니다.
keypress
사용자가 키를 눌렀을 때 이벤트가 발생합니다.
keyup
사용자가 키에서 손을 뗄 때 이벤트가 발생합니다.
문서 로딩 이벤트
개념 : 서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여 주는 것과 관련된 이벤트
표 15-3 문서 로딩 이벤트
abort
문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생합니다.
error
문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
load
문서 로딩이 끝나면 이벤트가 발생합니다.
resize
문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다.
scroll
문서 화면이 스크롤되었을 때 이벤트가 발생합니다.
unload
문서에서 벗어날 때 이벤트가 발생합니다.
폼 이벤트
개념 : 로그인, 검색, 게시판, 설문 조사처럼 사용자가 입력하는 모든 요소를 가리킵니다.
표 15-4 폼 이벤트
blur
폼 요소에 포커스를 잃었을 때 이벤트가 발생합니다.
change
목록이나 체크 상태 등이 변경되면 이벤트가 발생합니다. <input>, <select>, <textarea> 태그에서 사용합니다.
focus
폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다. <label>, <select>, <textarea>, <button> 태그에서 사용합니다.
reset
폼이 리셋되었을 때 이벤트가 발생합니다.
submit
submit 버튼을 클릭했을 때 이벤트가 발생합니다.
이벤트 처리기 알아보기
이벤트 처리기 || 이벤트 핸들러 : 웹 문서에서 이벤트가 발생하면 처리하는 함수
이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하여 이벤트를 처리한다.
기본형 <태그 on이벤트명 = "함수명">
15-7 DOM을 이용한 이벤트 처리기
DOM을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 보기 좋게 사용할 수 있다.
기존 : HTML -> 자바스크립트 DOM 사용 : 자바스크립트 -> HTML
기본형 웹 요소.onclick = 함수;
자바스크립트에서 웹 요소를 가져오는 방법이 여럿 있는데 먼저 querySelector()를 사용하는 것부터 알아보자.
문서 객체 모델(DOM) : 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체입니다. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있습니다.
Last updated