728x90
728x170
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80 |
<!-- this를 사용한 이벤트 발생 예제1 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
<title>이벤트</title>
<script type="text/javascript">
function chColor(obj, state){
var myColor;
if(state=="over"){
myColor="red";
}
else {
myColor="black";
}
obj.style.color=myColor;
}
// <button>에 마우스를 올릴 경우엔 글자 색상이 빨간색으로 바뀌고,
// 마우스가 벗어났을 경우엔 글자 색상이 다시 검은색으로 변함.
</script>
</head>
<body>
<button onmouseover="chColor(this,'over')" onmouseout="chColor(this,'out')">마우스 아웃</button>
</body>
</html>
<!-- this를 사용한 이벤트 발생 예제2 -->
<script type="text/javascript">
function submit_chk(myForm){
var reg1=/^[가-힣]{2,5}$/;
var reg2=/^(010|016|011)\d{3,4}\d{4}$/;
var name=myForm.user_name;
var tel=myForm.user_tel;
var result1=reg1.test(name,value);
var result2=reg1.test(tel,value);
if(!result1){
alert("이름 입력이 잘못되었습니다.");
name.value="";
name.focus();
return false;
}
else if(!result2){
alert("연락처 입력이 잘못되었습니다.");
tel.value="";
tel.focus();
return false;
}
}
function reset_chk(myForm){
var result=confirm("정말로 회원가입을 취소하시겠습니까?");
if(result) {
return false;
}
}
</script>
</head>
<body onload="document.f1.user_name.focus();">
<form action="#" method="post" name="f1" onsubmit="return submit_chk(this);" onreset="return reset_chk(this);">
<fieldset>
<legend>회원가입</legend>
<p>
<label for="user_name">이름</label>
<input type="text" name="user_name" id="user_name" />
</p>
<p>
<label for="user_tel">연락처</label>
<input type="text" name="user_tel" id="user_tel" />
</p>
<p>
<input type="submit" value="회원가입" />
<input type="reset" value="가입취소" />
</p>
</fieldset>
</form>
</body>
</html> |
cs |
소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
728x90
그리드형(광고전용)
'Source Code > JavaScript' 카테고리의 다른 글
| [JavaScript] 공백이 검색되지 않도록 하기 (검색창 구현) (0) | 2022.04.27 |
|---|---|
| [JavaScript] Scroll Indicator 구현하기 (0) | 2022.04.12 |
| Checkbox, Radio, Select에서 선택된 항목 출력하기 (0) | 2020.11.05 |
| 이벤트 객체 (Event Object) (0) | 2017.05.21 |
| 이벤트 등록 메서드가 브라우저별로 서로 다르게 실행되도록 하기 (0) | 2017.05.21 |
| 이벤트 (Event) (0) | 2017.05.21 |
| 함수를 사용하여 사진 갤러리 만들기 (0) | 2017.05.21 |
| 함수 (Function) (1) | 2017.05.21 |
