[01] Event의 처리(BUTTON, SUBMIT)
- <a href="javascript:sendit();">에서 javascript 생략 불가능.
1. Anchor 태그에서 click 이벤트를 받는 소스
>>>>> /WebContent/event/click.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
* {
font-family: gulim;
font-size: 22px;
}
</style>
<script type="text/javascript">
function sendit() {
/*
document: 브러우저에 출력된 문서를 나타내는 객체, 문서 전체 접근
regiform: 폼 객체
url: INPUT관련 객체
value: INPUT관련 객체의 속성
*/
// str = document.frm.url.value;
str = document.getElementById("url").value;
alert(str);
if (str == "") {
alert("주소를 입력해 주세요");
document.regiform.url.focus(); // 마우스 커서 이동 예) 전화번호 입력: 000 0000 0000
} else {
if (str.indexOf("http://") != -1)
location.href = str; // location 객체: 주소 관련 객체, href: 주소 값, 이동
else {
str = "http://" + str;
location.href = str;
}
}
}
function sendit(num){
var str = "http://";
if(num == 1){
str += "www.daum.net/";
}else if(num == 2){
str += "www.kma.go.kr/";
}else if(num == 3){
str += "www.kyobobook.co.kr/";
}
location.href =str;
}
</script>
</head>
<body>
<form name="frm" method="post">
<!-- id : 태그 검색시 자바 스크립트가 사용, document.getElementById('url');
name: request.getParameter("url") -->
<INPUT type="text" id="url" name="url" size="50">
<A href="javascript: sendit();">주소 이동</a>
<button type="button" onclick="sendit()">주소이동</button>
<button type="button" onclick="sendit(1)">[DAUM]</button>
<button type="button" onclick="sendit(2)">[기상청]</button>
<button type="button" onclick="sendit(3)">[교보문고]</button>
</form>
</body>
</html>
2. 입력값을 검사하는 기본 자바 스크립트
- button 태그는 항상 자바스크립트 함수와 같이 사용됩니다.
- onClick='check(this.form)': this.form은 폼 태그를 말합니다.
>>>>> /event/input.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
font-family: gulim;
font-size: 22px;
}
</style>
<Script type="text/javascript">
// 폼의 input태그가 입력을 받았는지 검사
function check(f) {
// this.form --> document.myform --> f
if (f.wname.value == "" || f.wname.value.length == 0) {
// window 객체 생략 가능
window.alert("이름을 입력해 주십시오.");
f.wname.focus();
} else if (f.subject.value.length == 0) {
window.alert("제목을 입력해 주십시오.");
f.subject.focus();
} else if (f.wcontent.value == "" || f.wcontent.value.length == 0) {
alert("내용을 입력해 주십시오.");
f.wcontent.focus();
} else {
// 모든 데이터를 입력 한 경우 서버로 전송
alert("데이터 정상 입력, 계속 진행합니다.");
f.submit();
}
}
</Script>
</head>
<body>
<!-- 데이터 입력 형식 제공 -->
<form method='post' action='' name='myform'>
<table width="70%" border="0" align="center">
<tr>
<td height="22" colspan="2" align="center">방 명 록</td>
</tr>
<tr>
<td width="20%" height="23">이름</td>
<td width="80%"><input type="text" name="wname">
<!-- 한줄 입력 -->
</td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" name="subject" size=50></td>
</tr>
<tr>
<td>내용</td>
<td>
<!-- 여러줄 입력 -->
<textarea name="wcontent" rows='8' cols='54'></textarea>
</td>
</tr>
<tr align="center" valign="middle">
<td colspan="2">
<!-- 아무런 작동을 안하는 코드, Button은 onclick이벤트를 선언해야함.
<input type="button" name="Submit" value="저장"> -->
<input type="button" value="저장" onclick='check(this.form)'>
</td>
</tr>
</table>
</form>
</body>
</html>
3. SUBMIT 버튼의 사용
- reset: 태그의 기본 값으로 돌아감.
- submit: 서버로 폼의 내용을 전송함.
- onsubmit: submit 버튼이 작동되면 자동으로 호출됨.
>>>>> /event/input2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
font-family: gulim;
font-size: 22px;
}
</style>
<Script type="text/javascript">
// 폼의 input태그가 입력을 받았는지 검사
function check(f) {
// this.form --> document.myform --> f
if (f.wname.value == "" || f.wname.value.length == 0) {
// window 객체 생략 가능
window.alert("이름을 입력해 주십시오.");
f.wname.focus();
return false;
} else if (f.subject.value.length == 0) {
window.alert("제목을 입력해 주십시오.");
f.subject.focus();
return false;
} else if (f.wcontent.value == "" || f.wcontent.value.length == 0) {
alert("내용을 입력해 주십시오.");
f.wcontent.focus();
return false;
} else {
// 모든 데이터를 입력 한 경우 서버로 전송
alert("데이터 정상 입력, 계속 진행합니다.");
return true;
}
}
</Script>
</head>
<body>
<!-- 데이터 입력 형식 제공 -->
<form method='post' action='' name='myform'
onsubmit = "return check(this);"
>
<table width="70%" border="0" align="center">
<tr>
<td height="22" colspan="2" align="center">방 명 록</td>
</tr>
<tr>
<td width="20%" height="23">이름</td>
<td width="80%"><input type="text" name="wname">
<!-- 한줄 입력 -->
</td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" name="subject" size=50></td>
</tr>
<tr>
<td>내용</td>
<td>
<!-- 여러줄 입력 -->
<textarea name="wcontent" rows='8' cols='54'></textarea>
</td>
</tr>
<tr align="center" valign="middle">
<td colspan="2">
<!-- submit 버튼은 onclick 이벤트를 가지고 있어서 별다른 선언이 필요 없음 -->
<input type="submit" value="저장">
</td>
</tr>
</table>
</form>
</body>
</html>
>>>>> /event/input3.html
- image태그는 submit 태그와 같은 기능을하나 버튼 이미지를 사용할 수 있음.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
font-family: gulim;
font-size: 22px;
}
</style>
<Script type="text/javascript">
// 폼의 input태그가 입력을 받았는지 검사
function check(f) {
// this.form --> document.myform --> f
if (f.wname.value == "" || f.wname.value.length == 0) {
// window 객체 생략 가능
window.alert("이름을 입력해 주십시오.");
f.wname.focus();
return false;
} else if (f.subject.value.length == 0) {
window.alert("제목을 입력해 주십시오.");
f.subject.focus();
return false;
} else if (f.wcontent.value == "" || f.wcontent.value.length == 0) {
alert("내용을 입력해 주십시오.");
f.wcontent.focus();
return false;
} else {
// 모든 데이터를 입력 한 경우 서버로 전송
alert("데이터 정상 입력, 계속 진행합니다.");
return true;
}
}
</Script>
</head>
<body>
<!-- 데이터 입력 형식 제공 -->
<form method='post' action='' name='myform'
onsubmit = "return check(this);"
>
<table width="70%" border="0" align="center">
<tr>
<td height="22" colspan="2" align="center">방 명 록</td>
</tr>
<tr>
<td width="20%" height="23">이름</td>
<td width="80%"><input type="text" name="wname">
<!-- 한줄 입력 -->
</td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" name="subject" size=50></td>
</tr>
<tr>
<td>내용</td>
<td>
<!-- 여러줄 입력 -->
<textarea name="wcontent" rows='8' cols='54'></textarea>
</td>
</tr>
<tr align="center" valign="middle">
<td colspan="2">
<!-- Image태그는 Submit 기능을 가지고 있음, Submit 버튼과 매우 유사 -->
<input type="image" src="./button.png" width="150px">
</td>
</tr>
</table>
</form>
</body>
</html>
>>>>> /event/input4.html
- A태그는 form태그의 구성 요소가 아님으로 this로 폼에 접근을 못함으로 폼의 이름을
직접 지정해야 함.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
font-family: gulim;
font-size: 22px;
}
</style>
<Script type="text/javascript">
// 폼의 input태그가 입력을 받았는지 검사
function check(f) {
// this.form --> document.myform --> f
var f = document.myform;
if (f.wname.value == "" || f.wname.value.length == 0) {
// window 객체 생략 가능
window.alert("이름을 입력해 주십시오.");
f.wname.focus();
} else if (f.subject.value.length == 0) {
window.alert("제목을 입력해 주십시오.");
f.subject.focus();
} else if (f.wcontent.value == "" || f.wcontent.value.length == 0) {
alert("내용을 입력해 주십시오.");
f.wcontent.focus();
} else {
// 모든 데이터를 입력 한 경우 서버로 전송
alert("데이터 정상 입력, 계속 진행합니다.");
f.submit();
}
}
</Script>
</head>
<body>
<!-- 데이터 입력 형식 제공 -->
<form method='post' action='' name='myform'>
<table width="70%" border="0" align="center">
<tr>
<td height="22" colspan="2" align="center">방 명 록</td>
</tr>
<tr>
<td width="20%" height="23">이름</td>
<td width="80%"><input type="text" name="wname">
<!-- 한줄 입력 -->
</td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" name="subject" size=50></td>
</tr>
<tr>
<td>내용</td>
<td>
<!-- 여러줄 입력 -->
<textarea name="wcontent" rows='8' cols='54'></textarea>
</td>
</tr>
<tr align="center" valign="middle">
<td colspan="2">
<!-- 아무런 작동을 안하는 코드, Button은 onclick이벤트를 선언해야함.
<input type="button" name="Submit" value="저장"> -->
<a href="javascript:check()">
<img src = "./button.png" width="100" border='0'>
</a>
</td>
</tr>
</table>
</form>
</body>
</html>
