JavaScript 함수와 이벤트

함수(function)를 사용하면 무엇이 좋을까요?

• 각 명령의 시작과 끝을 명확하게 구별할 수 있다.
• 함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.

여러 번 사용할 수 있는 함수 만들기

 

매개변수(parameter)

• 함수를 실행하기 위해 필요하다고 지정하는 값
• 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음

function addNumber (a, b) {		a,b 가 매개변수입니다.
	var sum = a + b;
    console.log(sum);
    }

인수(argument)

• 함수를 실행하기 위해 필요하다고 지정하는 값
• 함수를 실행할 때 매개변수로 넘겨주는 값

addNumber(2, 3);   -> 2, 3이 인수
addNumber(10, 20);   -> 10, 20이 인수

return문

• 함수를 실행한 결괏값을 함수 밖으로 넘기는 문
• 반환된 값은 함수를 실행한 소스 위치로 넘겨집니다.

스코프(scope)

• 변수를 선언하고 사용할 때 변수가 적용되는 범위

지역 변수(local variable)

• 변수를 선언한 함수에서만 사용할 수 있는 변수
• 함수 안에서 변수를 선언할 때 var 예약어 사용

var myVar = 100; // 전역 변수 선언
test();
document.write("myVar is "+ myVar);

function test() {
	myVar = 50; // 전역 변수 선언
    }

전역 변수(global variable)

• 스크립트 소스 전체에서 사용할 수 있는 변수
• 함수 밖이라면 var예약어를 사용해서 변수 선언
• 함수 내에서 전역 변수를 선언하려면 var예약어 없이 선언

익명 함수

이름이 없는 함수

함수 자체가 '식(Expression)'이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수도 있음.

var add = function(a, b){
	return a + b;
    } // 함수 선언 후 변수 add에 할당
    
var sum = add(10, 20); // 익명 함수 실행 후 결괏값을 변수 sum에 저장
sum // 변수 sum 값 확인
==> 30

 

이벤트

• 웹 브라우저나 사용자가 행하는 동작
• 사용자가 웨 문서 영역을 벗어나 하는 동작은 이벤트가 아닙니다.  (예, 브라우저 창의 제목 표시줄 클릭)\

마우스 이벤트

이벤트	설명
click	요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick	요소에 마우스를 더블 클릭했을 때 이벤트가 발생
mouseover	요소에 마우스를 오버했을 때 이벤트가 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup	요소에 마우스를 때었을 때 이벤트가 발생
mousemove	요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)

키 이벤트

이벤트	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

폼 이벤트

이벤트	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경 되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그 하여 선택했을 때 이벤트 발생

로드 및 기타 이벤트

이벤트	설명
load	페이지의 로딩이 완료되었을 때 이벤트 발생
error	문서가 정확히 로딩되지 않았을 때 이벤트가 발생됩니다.
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
unload	페이지가 다른 곳으로 이동될 때 이벤트 발생
resize	요소에 사이즈가 변경되었을 때 이벤트 발생
scroll	스크롤바를 움직였을 때 이벤트 발생