이벤트 정리

Programming/Javascript | 2013. 1. 1. 19:05
Posted by 오요미

이벤트란? 

사용자로 부터 특정 조작이 행해졌을 때 컴퓨터로부터 발생되는 일종의 신호


자바스트립트의 이벤트 목록

  • blur : 입력 포커스가 폼의 구성요소에 있다가 옮겨진 경우에 발생
  • click : 링크나 폼의 구성원을 선택한 경우에 발생
  • change : 입력 포커스가 폼 내의 필드에 주어진 경우 발생
  • focus : 폼의 구성원의 필드에 입력을 하기 위해 선택하는 경우 발생
  • load : 페이지를 브라우저로 읽을 때 발생하는 이벤트
  • mouseover : 마우스 포인터를 하이퍼 텍스트 링크 위로 옮길 때 발생
  • select : 폼의 구성원의 필드를 선택한 경우에 발생하는 이벤트
  • submit : 폼을 등록한 경우에 발생하는 이벤트(폼과 함께 제공되는 submit과 같은 입력이 끝났음을 알리는 버튼을 누르면 발생)
  • unload : 지금 읽고 있는 페이지 외의 다른 페이지를 읽고자 할 경우 발생
  • dblclick : 해당 객체를 더블클릭 했을 경우
  • mouseout : 객체 안에 마우스 포인터가 머무르다 벗어나게 된 경우 발생

이벤트 핸들러란?(on~)
  • 특정 이벤트와 이에 대한 조치 내용을 담은 코드를 연결하는 역할
  • 자바 스크립트에서는 주로 사용자 입력과 관계된 form과 anchor에 대해서 이벤트 핸들러를 제공

<!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>

</head>

<body 

onload="window.alert('어서오세요.');"

onunload="alert('안녕히 가세요');"

>

<input type="text" onfocus="this.style.backgroundColor='yellow';" 

onblur="this.style.backgroundColor='white';"

/>

<input type="text" onkeypress="alert('타이핑 하셨군요.');"

onchange="document.bgColor='silver';"

onmousemove="this.style.backgrounColor='yellow';"

/>

<table border="1" width="100%">

<tr>

<td onclick="alert('클릭하셨군요');">클릭</td>

<td onmouseover="alert('오버하셨군요.');">마우스오버</td>

</tr>

<tr>

<td ondblclick="alert('더블 클릭하셨군요');">더블클릭</td>

<td onmouseout="alert('밖으로 이동하셨군요.');">마우스아웃</td>

</tr>

</table>

</body>

</html>

'Programming > Javascript' 카테고리의 다른 글

스타일객체  (0) 2013.01.03
onload이벤트  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
 

폼 유효성 검사2(submit&button 비교)

Programming/Javascript | 2013. 1. 1. 17:49
Posted by 오요미

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<script language="javascript" type="text/javascript">

function CheckForm() {

var uid = document.getElementById("txtUserID");

if(uid.value.length<3 || uid.value.length >12){

alert("아이디를 3자 이상 12자 이하로 입력하세요");

uid.focus();

uid.select();

return false;

}else{

return true; //현재 다음 이벤트 실행:submit

}

}

</script>

</head>

<body>

<!-- 확인버튼 눌렀을 때 아이디가 3자 이상 12자 이상인지 검사 -->

<form id="MyForm" action="test.html" method="post" onsubmit="return CheckForm();">

아이디 : <input type="text" id="txtUserID" name="txtUserID"/>

<input type="submit" value="확인" />

</form>

</body>

</html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<script language="javascript" type="text/javascript">

function CheckForm(){

var txt=document.getElementById("txt");

if(txt.value == ""){

alert("아이디를 입력하시오.");

txt.focus();

}else{

document.MyForm.action = "test.html";

document.MyForm.submit();

}

}

</script>

</head>

<body>

<form name="MyForm">

아이디 : <input type="text" name="txt" id="txt"/>

<input type="button" value="확인" onclick="CheckForm();"/>

</form>

</body>

</html>

'Programming > Javascript' 카테고리의 다른 글

onload이벤트  (0) 2013.01.01
이벤트 정리  (0) 2013.01.01
폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
location 객체 속성&메서드  (0) 2012.12.30
 

폼 유효성 검사(아이디, 비밀번호)

Programming/Javascript | 2013. 1. 1. 16:26
Posted by 오요미

<html>

<head>

<meta name="viewport" content="width=device-width;" charset="utf-8" />

<title>폼 유효성 검사 : 아이디 및 암호 체크</title>

<style type="text/css">

div, td, input{color:Navy; font-size:9pt; font-family:"맑은 고딕" Verdana 굴림;}

</style>

<script language="javascript" type="text/javascript">

//자바스크립트는 html의 form, button, textbox등 들을 하나의 객체로 보고 id와 name으로 접근이 가능하다.

function CheckForm(){

//[1] 아이디 텍스트 박스에 접근해서 txtUserID 변수로 객체 담기

var txtUserID = window.document.FrmLogin.txtUserID;

if(txtUserID.value == ""){         //아이디가 입력되지 않았다면

alert("아이디를 입력하시오.");

return false; //진행하지 말고 대기(submit이벤트 중지)

}

//[2] 암호체크

if(document.FrmLogin.txtPassword.value=""){

alert("암호를 입력하시오.");;

return false;

}

}

</script>

</head>

<body>

<!-- form은 post방식을 사용하도록 권장: 데이터가 URL에 노출되므로..-->

<form id="FrmLogin" name="FrmLogin" action="sun/defalt." method="post" onsubmit="return CheckForm();">

<!-- submit이라는 이벤트를 잡을려면 onsubmit이라는 이벤트 핸들러를 사용해야하며 "return 함수명"으로 적는다. -->

<div align="center">

<table border="1" width="300">

<tr>

<td align="right">아이디:</td>

<td><input type="text" id="txtUserID" name="txtUserID" /></td>

<!-- id와 name속성은 될수 있도록 같게 써준다. -->

</tr>

<tr>

<td align="right">암호:</td>

<td><input type="Password" id="txtPassword" name="txtPassword" /></td>

</tr>

<tr>

<td colspan="2" align="center">

<input type="submit" value="로그인" />

<input type="reset" value="취소" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>


submit을 button으로 바꾸고 조금 심화시켜 만들어 봅시다~

 <script language="javascript" type="text/javascript">

function CheckForm(){

var txtUserID = document.FrmLogin.txtUserID;

if((txtUserID.value == "") || txtUserID.value.length<3 || txtUserID.value.length>12){

alert("아이디를 입력하시오.");

document.FrmLogin.txtUserID.focus();         //해당 객체에 커서 포커스:커서가도록

//document.FrmLogin.txtUserID.select(); //해당 객체 텍스트 블록 영역 선택

document.getElementById("txtUserID").select();

return false;

}

else{

document.FrmLogin.action = "./asp/Deault.aspx"; //action속성을 동적으로 변경

document.FrmLogin.submit(); //폼의 내용을 action 속성 URL로 전송

}

}

</script>
 <form id="FrmLogin" name="FrmLogin" action="" method="post">
 <input type="button" value="로그인" onclick="CheckForm();"/>


'Programming > Javascript' 카테고리의 다른 글

이벤트 정리  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
location 객체 속성&메서드  (0) 2012.12.30
document 객체 속성&메서드  (0) 2012.12.30
 
블로그 이미지

오요미

공부할 수 있는 순간을 감사하며 공부하라.

카테고리

분류 전체보기 (121)
Electronics (1)
Programming (72)
Culturallife (30)
English (11)
취업 (1)
대학원 (4)
Life (1)

티스토리툴바