<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function init(){
var lay=document.getElementById("test"); // getElementById : 괄호안에 id를 넣어서 해당 오브젝트를 lay객체에 담았다.
lay.onmouseover=function(){ // 익명의 함수
lay.style.background="#00FF00"; // 마우스 올리면 배경색이 지정된 색깔로
};
lay.onmouseout=function(){ // 마우스 내리면
lay.style.background=""; // 배경색이 없음
};
}
//body에 onload써주면 되지만 body가 없는 경우가 있을 수 있다.(페이지가 실행되자 마자 실행되는 함수)
if(window.attachEvent){ // 익스 일때 attachEvent 이벤트처리 함수
window.attachEvent("onload",function(){
init();
});
}else if(window.addEventListener){ // 파폭 크롬 일때 addEventListener 이벤트처리 함수
window.addEventListener("load",function(){
init();
},false);
}
//엔터치면 다음 칸을 넘어감(엔터 치기)
function fnReturn() {
if(event.keyCode==13)
document.forms[0].age.focus(); // focus() 커서가 해당 칸으로 옴김
}
//나이는 숫자만 입력가능하게
function onlyNum() {
if(event.keyCode<48 || event.keyCode>57){ // keyCode 아스키코드 값을 리턴해주느 함수
if(navigator.appName=="Netscape")
event.preventDefault(); //FF(이벤트를 무효화시킴) -> 숫자외에 입력을 불가능하게 한다는 말
else
event.returnValue=false; // IE(이벤트를 무효화시킴)
}
}
//알파벳을 대문자로만 입력하게 만드는 함수(크롬에서는 불가능)
function fnUpper() {
document.title=event.keyCode; //타이틀 제목이 입력된 값의 아스키코드로 출력됨
if(event.keyCode>=97 && event.keyCode<=122 )
event.keyCode=event.keyCode-32;
}
function result() {
var m1=document.getElementById("m1");
var m2=document.getElementById("m2");
var s;
s="x:" + window.event.offsetX +",y:" + window.event.offsetY; // 해당 오브젝트를 기준으로 좌표 출력
// s="x:" + window.event.clientX +",y:" + window.event.clientY; // 전체 윈도우를 기준으로 좌표 출력
// s="x:" + window.event.pageX +",y:" + window.event.pageY;
m2.innerHTML=s; // 개체의 내용 HTML을 반환
}
</script>
</head>
<body>
<div id="test" style="width:200px; height: 200px; border:1px solid #000000"></div>
<!-- id는 오브젝트를 구분할 수 있는것. 중복을 허용하지 않는다. -->
<br/>
<div style="width:200px; height: 200px; border:1px solid #000000" onmouseover="this.style.background='#0000FF';" onmouseout="this.style.background='';"></div>
<!-- 위와 같은 태그소스는 디자이너가 하는 것이고 프로그래머는 동적으로 함수를 이용하여 작업 -->
<br>
키보드 이벤트 : keydown(키보드 눌렀을때) - keypress(누르고 나서 출력됬을때) - keyup <br/>
keypress : a~z,0~9, enter 등 키를 누를경우 발생. shift, alt,f1 등의 키는 발생되지 않음<br/>
<form action="">
이름 : <input type="text" name="name" onkeypress="fnReturn();"> <br/>
나이 : <input type="text" name="age" onkeypress="onlyNum();"> <br/>
알파벳 : <input type="text" name="alp" onkeypress="fnUpper();"> <br/>
</form>
<br/>
<div id="m1" style="width: 300px; height: 300px; border: 1px solid #000000;" onclick="result()"></div>
<div id="m2" style="width: 100px; height: 100px;"></div>
</body>
</html>
♣ onkeydown : 자판에서 키를 눌렀을 때 발생하는 이벤트
♣ onkeypress : 자판에서 키를 누르고 있는 동안 발생하는 이벤트
♣ onkeyup : 자판에서 키를 눌렀다 놓았을 때 발생하는 이벤트
'javascript' 카테고리의 다른 글
| 함수에서 오브젝트에 접근하는 방법들 (0) | 2013.06.25 |
|---|---|
| 자바스크립트 기본 예제(마우를 클릭드래그하여 오브젝트 이동 시키기) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(실행 즉시 작동시키는 소스, 실시간 시간) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(회원약관 동의) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(아이디 이미지) (0) | 2013.06.25 |