반응형
<최종 화면> - onload, onclick, ondblclick, addEventListener, onblur, onchange, onmouseover, onmouseout, onmousemove, mousedown, mouseup, 정규표현식 등에 대해 알아본다.
요소를 제어할때 흔히 하는 실수가 있다. id를 찾아서 Hello를 쓰려고 했는데..
제어하기위해 script안에 id를 찾는데..
중요한 것은 head를 실행하고 body를 실행하여 당연히 동작이 안된다.
보통 스크립트문을 head 영역에 쓰기 때문에, 당연히 이런 경우가 많다. 그럴경우 아래와 같이 onload를 이용하자.
또한 .onclick 이벤트를 처리할 수 있다. (클릭시 반응하기)
더블 클릭했을때, 이벤트 방법도 있다. .ondblclick (더블클릭시 반응하기)
더블클릭은 두가지 방법이 있다. 위 사진처럼 .ondblclick과 이벤트리스너를 추가하는 것이다.
.addEventListener
포커스를 받으면 반응하는 이벤트에 대해 알아보자. onfocus
포커스를 받을시 aa값을 주었다.
포커스를 받고, 다른 곳으로 가면 반응하는 이벤트에 대해 알아보자. onblur
값이 변경되었을 시, 반응하는 이벤트도 알아보자. onchange
onchange를 이용해서 입력창에 입력한 소문자를 -> 대문자로 변경하는 입력필드를 만들어 보자.
마우스 이벤트에 대해서 알아보자. onmouseover, onmouseout, onmousemove
아무스 좌표를 이용해서 특정 영역,위치에 갔을때 변화를 주자.
[예제는 네모에 들어가면 네모의 색이 바뀌게 했다.]
마우스가 움직일 시 반응하는 이벤트에 알아보자.
마우스 포인트가 네모 영역 안에서 움직이면 숫자가 1씩 증가 카운트 된다.
이제 마우스 좌표값을 확인해보자.
마우스 업 & 다운에 반응하는 이벤트에 대해서도 알아보자.
버튼을 눌렀을시 mousedown리스너를 달아서 확인해보자.
유효성 검사에 대해 알아보자. 이메일 형식,전화번호 같은 규칙이 있는 것에 대해 알맞게 기재했는지 확인하는 것이다.
우선 입력창과 버튼을 만들자.
버튼을 눌렀을 시, 동작하는 checkReg()메소드를 만든다.
정규표현식은 / 내용 /; 이다.
-참고 자료-
정규식 표현을 a~z,A~Z으로 최소 한글자로 했다. 그래서 알파벳은 OK 다이얼로그 창이, 숫자는 "요구하는 형식이 아닙니다." 다이얼로그 창이 나온다.
결과를 p요소에도 쓸 수 있다.
/a/는 a가 포함되어야 하는 정규표현식이다.
소문자 a만 들어가면 true를 반환한다.
^는 무조건 시작 값을 정하는 수식이다.
그래서 아래 사진과 같이 시작이 무조건 a이면 OK 결과가 나오고, a가 들어가더라도 맨 처음 값이 아니면 안된다.
아래 정규표현식을 보고 대충 감을 잡자.
<최종 화면>
<복붙용 코드>
|
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event handling!!</title>
<script>
// 이벤트를 처리하는 3가지 방법
// 1. html요소에 속성으로 콜백함수 지정. <button onclick="aaa()">
// 2. 자바스크립트에서 요소를 찾아와서 이벤트 콜백함수를 속성으로 지정하는 방법
// 3. 요소에 특정 이벤트리스너를 추가하는 메소드를 통해 처리.[가장 권장]
// body안에 있는 요소 제어
document.getElementById('aa').innerHTML="Hello";
// 무조건 body보다 head요소가 먼저 실행되므로
// head에서 body에 있는 요소를 그냥 찾으면 찾을 수 없음.
// 그래서 body 문서의 loading이 완료되었다는 이벤트를 이용해야함.
function loaded(){
document.getElementById('aa').innerHTML="Hello";
// 2. onclick 이벤트를 자바스크립트에서 처리하기
document.getElementById('aa').onclick= function(){
// alert();
document.getElementById('aa').innerHTML+="asdf"; // 클릭했을때 문자열 추가 시킴
}
// document.getElementById('aa').ondblclick= function(){ //그러나 이 방법은 잘 사용 안함 밑에 방법을 권장
// alert('double'); //더블 클릭했을때 실행
// }
// 3. 요소에 이벤트리스너 추가하는 메소드를 이용하는 방법 (권장)
document.getElementById('aa').addEventListener('dblclick',function(){
alert('double clicked!!');
});
}
</script>
</head>
<body onload="loaded()">
<!-- 1. 이벤트 속성을 통해 적용 연습용 -->
<h2 id="aa"></h2>
<!-- input요소에 대한 이벤트 -->
<input type="text" id="in1" onfocus="aaa()">
<input type="text" id="in1" onblur="bbb()">
<input type="text" id="in1" onchange="ccc()">
<script>
function aaa(){
document.getElementById('in1').value="aa";
}
function bbb(){
alert('blur');
}
function ccc(){
alert('change');
}
</script>
<hr>
<!-- 사용자가 값을 입력하고 필드를 벗어나면 자동으로 대문자로 변경해주는 입력 필드 -->
<input type="text" id="in3" onchange="changeUp()">
<script>
function changeUp(){
var a= document.getElementById('in3').value;
document.getElementById('in3').value= a.toUpperCase();
}
</script>
<hr>
<!-- 마우스 이벤트 : 좌표 -->
<div style="width: 200px; height: 100px; background-color: green;" onmouseover="over(this)" onmouseout="out(this)" onmousemove="move(this)"></div>
<script>
// 마우스 이벤트 over, out, move
function over(e){ //파라미터 e : 위에서 this로 전달한 div요소
e.style.backgroundColor="yellow";
}
function out(e){
e.style.backgroundColor="green";
}
var a=0;
function move(e){
a++;
e.innerHTML = a+"";
}
</script>
<!-- 마우스 좌표 알아내기 -->
<div style="width: 200px; height: 100px; background-color: yellow;"id="kk"></div>
<script>
document.getElementById('kk').addEventListener('mousemove', function(e){
// 파라미터로 전달된 e : MouseEvent 객체
var str= 'client coord : '+ e.clientX+" , "+ e.clientY+"<br>"; //브라우저 문서 안에서의 좌표
str+= 'screen coord : '+ e.screenX+" , "+ e.screenY+"<br>"; //모니터 기준 해상도 좌표
str+= 'offset coord : '+ e.offsetX+" , "+ e.offsetY+"<br>"; //영역 안에서의 좌표
document.getElementById('kk').innerHTML = str;
});
</script>
<!-- 마우스 업 & 다운 -->
<button id="btn">button</button>
<script>
var btn= document.getElementById('btn');
btn.addEventListener('mousedown', function(){
});
//이벤트 처리용 콜백 익명 함수를 변수에 저장
var up= function(){
}
btn.addEventListener('mouseup',up);
</script>
<!-- 유효성 검사 : 이메일 형식, 전화번호 형식, 암호규칙에 맞는지 -->
<!-- 입력폼 입력 후 검증 : 정규표현식 + onblur 이벤트로 처리하는 것이 보통 -->
<hr>
<h3>RegEx 객체 (정규표현식 : Regular Expression)</h3>
<input type="text" id="in5">
<button onclick="checkReg()">check</button>
<p id="p5"></p>
<script>
function checkReg(){
// input요소에 입력된 값 [검증대상 값]
var str= document.getElementById('in5').value;
// 결과를 보여주기 위한 p요소
var p= document.getElementById('p5');
// 검증용 정규표현식
// ^:시작을 a~z,A~Z로 해야하고 +:최소 한글자 이상이어야 한다.
var regExp= /^[a-zA-Z]+$/; //RegExp 객체 생성
// 정규표현식을 점증 2가지 방법
// 1. string객체의 .match()메소드 이용
// else alert('요구하는 형식이 아닙니다.');
// 2. RegExp객체의 test() 메소드 이용
else p.innerHTML="요구하는 형식이 아닙니다."
// 정규표현식 연습 - 예시
regExp=/a/; //a가 포함되는 모든 문자열..
regExp=/A/; //A가 포함되는 모든 문자열..
regExp=/ab/; //ab가 포함되는 모든 문자열..
regExp=/^a/; //시작이 무조건 a ....
regExp=/^[a-z]/; //시작이 무조건 영어소문자 ....
regExp=/a$/; //끝이 무조건 a...
regExp=/ab$/; //끝이 무조건 ab...
regExp=/^a$/; //무조건 a 1개.. (시작이 a이고 끝이 a..가 아님!!)
regExp=/^ab$/; //무조건 ab 1개..
regExp=/^[a-z]$/; //무조건 영어소문자 1개..
regExp=/^[a-zA-Z]$/; //무조건 영어 대소문자 1개..
regExp=/^[a-zA-Z0-9]$/; //무조건 영문자 도는 숫자 1개..
regExp=/^[a-z]{2}$/; //무조건 영어 소문자 2개
regExp=/^[a-z]{2,4}$/; //무조건 영어 소문자 2~4개
regExp=/^[a-z]{2,}$/; //무조건 영어 소문자 2개 이상..
regExp=/^\w{4,}$/; //무조건 문자나 숫자 4개 이상..
regExp=/^[a-z]*$/; //영어 소문자 0개 이상.. (영어소문자만 )..값을 안넣어도 ok
regExp=/^[a-z]+$/; //영어 소문자 1개 이상.. (영어소문자만 )..
regExp=/^[a-z]?$/; //영어 소문자 1개 또는 0개 (영어소문자만 )..
regExp=/^[0-9]?$/; // 0-9중에 숫자 1개
regExp=/^[5-9]?$/; // 5-9중에 숫자 1개
regExp=/^\d$/; // 숫자 1개
regExp=/^\d\d\d$/; // 숫자 3개
regExp=/^\d{3,4}$/; // 숫자 3~4개
regExp=/^\d\da\d\da\d\d$/; // 숫자 2개 a 숫자 2개 a 숫자 2개
regExp=/^\d\d\d\d-\d\d-\d\d$/; // 생년월일 : ###-##-##
regExp=/^[a-zA-Z0-9]+@[a-zA-Z]+$/; // 이메일 형식 : ###@##
regExp=/^http:/; //시작이 http:인 것을 검증
regExp=/^\/$/; // '/' 한개!! (역슬래시가 이스케이프문자)
else p.innerHTML="요구하는 형식이 아닙니다."
}
</script>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML+Java script (기초) canvas (문자, 도형,선, 이미지 그려보기) (0) | 2019.12.17 |
|---|---|
| HTML+Java script (기초) Key Event (키보드 이벤트) (0) | 2019.12.17 |
| HTML+Java script (기초) BOM (0) | 2019.12.16 |
| HTML+Java script (기초) DOM 요소(속성 변경, 노드 동적 생성) (0) | 2019.12.16 |
| HTML+Java script (기초) DOM (트리 구성 요소 제어 요소,속성,텍스트 ) (0) | 2019.12.16 |
댓글