자바스크립트를 이용해서 다이나믹한 웹페이지를 만들 수 있습니다.
이벤트는 자바스크립트에 의해 감지되는 어떤 액션을 의미합니다.
모든 웹페이지의 엘리먼트들은 자바스크립트에 트리거 할 수 있는 이벤트를 가지고 있습니다.
예를 들면 onclick이라는 이벤트를 버튼엘리먼트에 달고 유저가 버튼을 클릭하면
어떤 특정 함수를 가리키도록 만들 수 있습니다.
이벤트의 예를 들어 볼까요?
버튼을 클릭하는것
페이지의 로딩이 끝나는것
이미지로딩이 끝나는 것
마우스 커서가 엘리먼트위에 올라오는 것
input field에 들어가는 것
form을 submit하는 것
키보드 자판을 입력하는 것... 등
다양한 이벤트와 함수를 조합하여 멋진 인터랙션을 만들어 낼 수 있습니다.
HTML 이벤트 속성을 사용하기
HTML엘리먼트 안에 이벤트 속성을 사용하여 이벤트를 할당시킬수 있습니다.
예제
<button id="myBtn" onclick="displayDate()">Try it</button>
HTML DOM을 사용하여 Event 할당하는 법
<script type="text/javascript">
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
onload / onunload
이것은 페이지에 열거나 떠날때 사용되는 이벤트입니다.
onload 이벤트는 방문자의 브라우저 종류 및 브라우저 버전을 확인하고 정보를 기반으로 웹 페이지의 올바른 버전을 로드하는 데 사용할 수 있습니다.
쿠키를 다룰 때 유용합니다.
<body onload="checkCookies()" />
onfocus, onblur, onchange
이런 이벤트는 폼필드를 검사하는데 조합해서 사용합니다.
아래의 예는 이메일폼을 체크하는 예제입니다.
<input type="text" onchange="checkEmail()" />
onSubmit
폼을 전송할때 사용됩니다.
다음구문에서 폼의 서브밋 버튼을 클릭하면 checkForm이라는 함수가 호출됩니다.
만일 값이 받아들여지지 않으면 서브밋은 취소됩니다.
<form method="post" action="mySubmit.asp" onsubmit="checkForm()">
onmouseover, onmouseout
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script type="text/javascript">
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>
onmousedown, onmouseup and onclick
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>
<script type="text/javascript">
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>
</body>
</html>
'WEB_TECH > javascript' 카테고리의 다른 글
| 날짜 시간 관련 객체 (0) | 2012.10.24 |
|---|---|
| 자바스크립트 디버깅 (0) | 2012.10.18 |
| String객체 (0) | 2012.09.13 |
| javascript 객체기반언어 (0) | 2012.08.17 |
| Try...Catch 구문 (0) | 2012.08.17 |
| 자바스크립트 함수 Function (0) | 2012.08.17 |
| pop up boxes (0) | 2012.08.17 |
| 반복문 (0) | 2012.08.17 |
| 조건문 (0) | 2012.08.17 |
| 연산자 (0) | 2012.08.17 |