자바스크립트 함수 및 이벤트

함수

• 프로그래밍 코드(스크립트 실행문) 를 저장하는 공간(실행 가능)

• 변수:  데이터형을 저장하는 공간(실행 불가)

함수는 함수명(); 혹은 참조변수();로 호출한다

함수는 반드시 개발자가 함수 정의문을 선언하고 호출문을 사용해야만 함수 내 일련의 실행문을 실행시킬 수 있다

매개변수가 있는 함수

함수를 호출 할 때 전달 값을 입력하여 호출 가능

function Family(dad, mom){

document.write(“My dad is ” + dad + “ and my mom is” + mom);

{

Family(“Lee”, “Mun”);

 

내장함수

• 함수 정의문 선언 없이 바로 호출만으로 사용 가능한 함수

• 자바 스크립트 엔진에 포함되어 있음

 

Return

함수에서 결과값을 되돌려 줄 때 사용

함수에서 return문이 실행되면 반복문에 break문과 비슷하게 실행문 종료

• 데이터를 반환하는 리턴문

• 강제 종료하는 리턴문

document.write(" World");는 return에 의해 강제종료 되었기 때문에 실행되지 않음

재귀함수(Recursive Function)

• 최초 함수 안에서 자기 자신을 재 호출 하는 함수

• 함수를 반복문처럼 여러번 호출하기 위해 사용

 

지역변수, 전역변수

변수의 중복 사용을 피하기 위해서 사용

• Var의 위치 여부에 따라 지역변수, 전역변수로 갈림

• 전역변수: 함수 내에서 var을 붙이지 않은 변수, 이 변수에 저장된 데이터는 자바스크립트 내 어디서든 사용가능

• 지역변수: 함수 내에 var을 붙인 변수, 함수 내에서만 사용 가능하다

전역변수

지역변수

 

이벤트

• 브라우저에서 방문객이 취하는 모든 동작

• 이벤트 핸들러

• 이벤트가 발생했을 때 자바스크립트 실행문을 실행한다

• 마우스 이벤트 / 키보드 이벤트 / 기타 이벤트

• 2가지 방법

• 직접 요소 이벤트 등록 방식

• DOM을 이용한 이벤트 등록 방식

직접 요소 이벤트 등록 방식

태그에 직접 등록하는 행 입력 방식

DOM을 이용한 이벤트 등록 방식

 

이벤트 예제

 

키보드 접근성

마우스 사용이 불가피할 경우를 대비하여 반드시 키보드로도 동작할 수 있도록 대응 이벤트를 함께 작성해주어야 한다

 

이벤트 중복 해결 방법

• 한 요소에 같은 이벤트를 중복으로 등록하면 제일 마지막에 등록한 이벤트만 실행, 마지막 이벤트 제외 모든 이벤트 동작 취소

• IE8 이하 브라우저 간의 호환성 문제 => 제이쿼리에서 이벤트 등록 메서드의 호환성 문제 해결

 

This 키워드

방문자가 사이트를 방문해서 이벤트를 발생하였을 때 그에 맞는 함수가 호출된다. 이 때, 이 실행문에 포함되어있는 this는 방문자가 이벤트를 발생한 요소를 가리킨다.

이벤트 객체

• 방문자가 지정한 요소에서 이벤트가 발생할 경우, 이벤트 핸들러에 이벤트 객체를 생성하여 실행문으로 사용가능하다.

• 이벤트 객체 속성을 활용하면 단축키 정보, 마우스 위치값을 활용한 스크립트 작성 가능

 

이벤트 객체의 속성 종류

키보드 자판이 눌렸을 때 이벤트 객체 생성

document.onekeydown=function(e){

var eventObj=e?e:window.event;

alert(eventObj)

}