유저는 이벤트(event)라고 하는 행동을 통해서 웹 페이지의 부분들과 서로 반응하게 된다. 자바 스크립트를 사용해서 이벤트 핸들러 (event handler)들을 이용하여 이벤트들에 반응할 수 있다. 자바 스크립트에는 12개의 이벤트 핸들러가 있는데 이것을 아래의 표에 나타내었다.
이벤트
이벤트핸들러
onFocus
유저가 오브젝트에 초점을 맞춘다.
onBlur
유저가 오브젝트로부터 초점을 뗀다.
onSelect
유저가 텍스트를 하이라이트 한다.
onChange
유저가 오브젝트의 값을 바꾼다.
onSumit
유저가 양식을 전송한다.
onClick
유저가 버튼이나 링크를 클릭한다.
onMouseOver
유저가 커서를 링크 위로 이동시킨다.
onMouseOut
유저가 커서를 링크 위에서 옮겨 간다.
onLoad
페이지나 이미지가 로드 완료된다.
onUnLoad
유저가 페이지에 떠난다.
onAbort
유저가 로딩 작업을 멈춘다.
onError
에러가 발생한다.
일반적으로 이벤트 헨들러를 통해 스크립트의 제동 장치 역할을 부여하게 된다. 유저가 버튼을 클릭하면, 자바 스크립트로 강화된 페이지가 반응을 하게 된다. 이것은 onClick에 원하는 반응을 배정하여 할 수 있다. 웹 페이지의 각 부분은 어떤 특정한 이벤트 핸들러로써 작동된다.
대부분의 경우, 이런 이벤트 핸들러의 이름들은 자신들이 작동될 때를 나타내 준다. 하지만 몇 가지는 설명이 필요하다. 텍스트 난이나 윈도우로 이동하여 초점을 맞추는 이벤트는 onFocus로 작동된다. 난이나 윈도우를 떠나는 것은 onBlur로 작동된다. 텍스트 난을 떠나기 전에 유저가 텍스트를 입력하면, onBlur로 작동된다. 텍스트 난을 떠나기 전에 유저가 텍스트를 입력하면, onBlur가 아니라 onChange로 작동된다.
어떤 이벤트들은 유저의 행동에 직접적으로 개입하지 않는다. 예를 들어, onError는 스크립트가 작동시에 에러를 만났을 때 반응을 유발시킨다.
11.1. 이벤트에 반응하기
웹 페이지의 거의 모든 부분은 적어도 하나의 이벤트 핸들러를 가지고 있다. 이것들을 이용하여 페이지의 부분들이 스크립트의 부분들을 작동시키도록 할 수 있다.
이벤트 핸들러에 스크립트의 부분을 할당하여 그 이벤트가 (on-다음에 오는 것)발생할 때 그 스크립트 부분을 자바 스크립트가 읽도록 해 놓는다. 작동시키고 싶은 코드를 인용 부호 안에 집어넣어야 한다.
글쓰지 마세요:
스크립트로 쓰고 싶은 HTML 태그를 선택한다.
onChange HTML 속성 다음에 해당 이벤트 핸들러의 이름을 써 넣는다. on 다음에 나오는 글자만 빼고는 모두 소문자로 되어 있어야 한다.
= 등호 표시를 사용하여 배정을 나타낸다.
"alert("경고! 경고!")" 등호 표시 다음의 괄호 안에 반응을 써 넣어서 그 이벤트에 반응을 배정한다. 아래의 코드 실행 결과는 경고 메시지를 나타내 주는 것이다.
■ 코드 실행 결과
11.2. this로 표현 방법 짧게 줄이기
자바 스크립트의 표현 방법은 때로 좀 긴 경향이 있다. 예를 들어, 텍스트 난의 값을 나타내는 것은 적어도 네 단계가 필요하다 : document.forms[0].elements.[0].value 다행히도, this라는 키워드를 사용하여 이것을 짧게 만들 수 있다. this가 전체 오브젝트 내용을 대신한다. 스크립트를 보다 분명하고 간결하게 만들 수 있을 때 this를 사용해야 한다.
원하는 HTML 태그 안에 이벤트 헨드러를 위치시킨다. 밑의 코드 실행 결과는 유저가 텍스트 난 밖을 클릭하면 경고를 나타나게 하는 것이다.
="alert( )"> 이벤트 핸들러에 명령어를 배정한다.
this this를 써넣어 명령어로 작업하고 있는 오브젝트를 지적한다. 또는 document.form[0].elements[0] this를 사용하지 않으면 전체 내용을 완벽하게 써넣어야 한다.
.value 접근하고 싶은 특성과 그 앞에 도트를 써넣는다.
■ 코드 실행 결과
12. 함수 정의하기
함수란 이름을 갖고 있는 자바 스크립트 내용들의 집합이다. 자신이 원하는 내용과 그 그룹에 원하는 이름을 정의할 수 있다. 그 함수를 호출할 때마다, 그 명령어들을 써넣는 순서대로 자바 스크립트가 읽게 된다.
12.1. 함수 정의하기
함수를 사용하기 전에 그것을 정의해야 하므로, 스크립트를 제목 태그 내에 위치시켜 그것이 먼저 읽히게끔 해 놓는다.
function diplay()
function fuction이라는 키워드를 써 넣어서 정의를 시작한다.
display 함수에 이름을 부여한다. '변수들'에 나와 있는, 변수에 이름 붙이 규칙과 똑같은 규칙을 따라야 한다.
() 함수명 뒤에 괄호를 더한다.
{ alert("Have a Great Day!") }
{ } 함수의 내용의 시작과 끝을 괄호로써 표시한다. 밑의 코드 실행 결과에서 나와 있는 것처럼, 왼쪽 괄호는 함수명 다음에 놓고 오른쪽 괄호는 모든 내용 뒤에 놓고 단독 행에 위치시킨다.
alert("Have a Great Day") 함수에서 수행될 명령어들을 써넣는다. 보다 더 쉽게 읽을 수 있도록 하려면, 스크립트의 다른 부분으로부터 약간 떼어놓아야 한다.
■ 코드 실행 결과
12.2. 함수 호출하기
일단 함수를 정의해 놓으면, 페이지 상의 이벤트 핸들러나 어떤 스크립트 내에서도 그것을 사용할 수 있게 된다. 물론 이렇게 하려면, 그것을 트리거하는 방법이 몇가지 필요하다. 이런 것을 함수를 호출한다고 하는데, 괄호 앞에 함수명을 써넣어서 할 수 있다.
페이지 상의 거의 모든 곳에서 몇 번이고 함수를 호출할 수 있다. 함수를 트리거하는 데는 보통 이벤트 핸들러를 사용하게 된다.
함수 호출하기
onClick=" " 이벤트로 함수를 트리거하려면 HTML 태그 내에 이벤트 핸들러를 위치시킨다. 밑의 코드 실행 결과에서는 이것에 버튼을 사용하고 있다.
doMath 이벤트 핸들러 내에 함수명을 써넣는다. 함수를 정의하는 데 사용했던 똑같은 제목을 사용한다.
() 자바 스크립트에게 함수를 불러내고 있다는 것을 알리기 위해 이름에 괄호를 더한다.
■ 코드 실행 결과
12.3. 이벤트 핸들러 재설정하기
이벤트 핸들러는 그것이 트리거될 때마다 똑같은 일을 해낸다. 이것이 문제가 되지는 않지만, 버튼이 처음 트리거되었을 때 한 함수를 호출하고 다시 트리거되었을 때는 다른 함수를 호출하게 하고 싶다면 어떻게 할까? 넷스케이프3.0이상에서는 스크립트 내의 어디서나 이벤트 핸들러에 새로운 함수를 배정할 수 있도록 하여 이 문제를 해결해 놓았다. 이런 기법을 이벤트 핸들러 재설정하기라고 한다. 이벤트 핸들러를 재설정하려면, 스크립트 내에 그것의 위치를 나타내 놓는 방법이 몇 가지 필요한데, 이벤트 핸들러와 연계되어 있는 오브젝트의 특성으로써 나타내면 된다.('오브젝트에 대하여' 참조)
최근 댓글 목록