Form데이터를 전송하는 방법 [로그인 과정]
[방법 1] 폼 객체(forms)를 통해 폼의 정보를 얻어오는 방법
form태그가 1개인 경우에는 문제 없지만, form태그가 여러 개인 경우 병렬 처리가 어려워 불안정합니다.
- var f = document.forms[0];
- forms는 현재 문서에 존재하는 form정보를 구하는 객체입니다.
- froms는 문서내의 form정보를 배열로 저장을 합니다.
- f.action -> 전송대상(where) form의 정보를 전송할 대상을 지정합니다. 생략시 자기 자신의 페이지를 호출합니다.
- f.method -> 전송방식(how) : GET방식 or POST방식
- f.submit() -> 전송함수(함수호출시 괄호 주의!) -> 동작을 안하는데 에러도 내지 않음. 오류수정이 어렵습니다.
[방법 2] 폼 태그에 이름을 부여하여 정보를 얻어오는 방법
form태그가 여러개인 경우 form의 이름이 같아서 충돌하는 경우의 수가 있을 수 있으므로 불안정합니다.
- form태그의 name속성을 "ff"로 설정합니다.
- var f = document.ff;
더보기
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function send(){
//form이 1개인 경우 사용 가능
//하지만 form이 여러개인 경우 병렬처리가 어려운 불안정한 방법
//[방법1] -> 현재 문서(Documnet)내 존재하는 form정보를 구하는 객체
//forms : 문서내 form정보를 배열로 저장합니다. -> form태그가 1개라면 0번지, form 태그가 2개라면, 0,1번지가 존재합니다.
var f = document.forms[0]; // -> 폼 정보를 얻어오는 방법
//[방법2] -> form태그에 이름을 부여하는 방법
//<form name="ff">:폼 이름이 부여된 상태
//var f = document.ff;
// id값 얻어오기 + 공백제거
var id = f.id.value.trim();
var pwd = f.pwd.value.trim();
//입력데이터 검증과정
if(id==''){
alert('아이디를 입력하세요!!');
f.id.value='';
f.id.focus();
return;
}
if(pwd==''){
alert('비밀번호를 입력하세요!!');
f.pwd.value='';
f.pwd.focus();
return;
}
f.action = ""; //전송대상(where) 생략시 자기 자신에게 전송한다. 자신의 페이지를 호출한다.
f.method = "GET" //전송방식(how)
f.submit(); //전송함수(정말주의: 함수 호출시 괄호 주의) 자바스크립트는 함수에서 괄호를 빼면 에러를 내지 않고 동작을 하지 않는다. 따라서 에러잡기가 힘듦,,,
}
</script>
</head>
<body>
<form action="" method="">
<table border="1">
<tr>
<th>아이디</th>
<td><input name="id"></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="로그인1" onclick="send1();">
<input type="button" value="로그인2" onclick="send2();">
<input type="button" value="로그인3" onclick="send3();">
</td>
</tr>
</table>
</form>
</body>
</html>
|
cs |
[방법 3] -> 가장 많이 사용하는 방법. 함수에 인자를 전달합니다. form의 자식 요소가 자신의 부모 요소를 전달하기 때문에 충돌의 위험이 없습니다. 즉, 현재 이벤트를 발생시킨 주체를 소유하고 있는 form에 대한 정보를 함수의 인자로 전달하기 때문에 2개 이상의 form이 충돌할 위험이 없습니다.
- this : Event의 주체 - > 이 예시에서는 로그인3 버튼
- this.form : this(버튼)를 소유하는 폼 정보. this.form는 form태그의 Element요소만 사용할 수 있습니다.
- form태그의 element : input, label, select, textarea, button, fieldset, legend, datalist, output, option, optgroup
[방법 4] <button>태그 혹은 <input type="image">의 태그의 onclick을 사용하는 방법
- 방법 1~3과는 달리 방법4에서 사용하는 태그들은 onclick으로 함수를 호출하고 나서, 함수의 결과와는 상관없이 자동으로 onsubmit하여 정보를 전송하도록 되어있습니다.
- 예를들어, 방법1~3을 사용하여 form의 정보를 보낸다고 했을 때, 검증과정을 거치지 못하면 return되어 함수가 종료되기 때문에 f.submit을 수행하지 않고 끝이납니다. 하지만 방법4를 사용하여 form태그의 정보를 보낸다고 했을 때, 검증 과정을 거치지 못하고 return되면 똑같이 f.submit을 수행하지 않고 함수가 끝이나고, 함수를 호출한 위치로 돌아가게 되면, 방법 4는 기본적으로 onsubmit이 수행되기 때문에 함수가 종료되었는데도 form의 정보가 전송되는 것입니다.
- 다른 예로, 검증과정을 거쳐서 f.submit으로 form 데이터가 제대로 전송되더라도 함수의 명령을 마치고 호출한 위치로 돌아와서 자동으로 onsubmit이 실행되기 때문에, 올바르게 작동을 하더라도 두 번의 데이터를 전송하게 됩니다. ㄴ> f.submit, 자동실행되는 onsubmit
- 이를 해결하기 위한 방법으로는 사용자가 직접 form정보를 전송할 수 있도록 제어하는 2가지 방법이 있습니다.
- return false를 함수가 종료되고 다시 돌아오는 호출지점에 선언해주는 것입니다.
- <button onclick="send4(this.form); return false;">로그인4</button>
- 함수내에서 return만 선언하는 것이 아니라 return false를 선언하여 함수가 성공하던 실패하던 false를 반환하게 만드는 방법입니다.
- return false를 함수가 종료되고 다시 돌아오는 호출지점에 선언해주는 것입니다.
더보기
|
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
|
<input type="image" src="../image/login.png" onclick="return send5(this.form);">
//함수내용
//모든 return값을 false로 줍니다.
function send5(f){ //f = this.form
//[방법 4] 인자를 전달받는 방법, input태그가 아니고 button태그를 사용한 경우
// id값 얻어오기 + 공백제거(trim())
var id = f.id.value.trim();
var pwd = f.pwd.value.trim();
//입력데이터 검증과정
if(id==''){
alert('아이디를 입력하세요!!');
f.id.value='';
f.id.focus();
return false;
}
if(pwd==''){
alert('비밀번호를 입력하세요!!');
f.pwd.value='';
f.pwd.focus();
return false;
}
f.action = "you5.do"; //전송대상(where) 생략시 자기 자신에게 전송한다. 자신의 페이지를 호출한다.
f.method = "GET" //전송방식(how)
f.submit(); //전송함수(정말주의: 함수 호출시 괄호 주의) 자바스크립트는 함수에서 괄호를 빼면 에러를 내지 않고 동작을 하지 않는다. 따라서 에러잡기가 힘듦,,,
return false;
}
|
cs |
[자바스크립트의 외부 라이브러리] -> 사용 방법 및 문법은 소스코드의 주석을 참고하시기 바랍니다.
더보기
|
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
|
<!--html 파일_start-->
<!-- 외부 자바스크립트 library 연결 -->
<script type="text/javascript" src="../JS/test.js"></script>
<script type="text/javascript">
function calc(op){
var su1 = document.getElementById('su1').value;
var su2 = document.getElementById('su2').value;
//입력값 체크(정규식: 숫자만)
document.title = ("원주율 : " + PI);
var result = 0;
if(op=='+'){
result = plus(parseInt(su1), parseInt(su2));//parseInt(su1) + parseInt(su2);
//더하기 연산만 문자열 연산이 되기때문에, 다른 연산은 parseInt를 안해도 숫자연산이 진행된다.
//그래도 확실하게 바꿔주는 게 좋음
} else if(op=='-'){
result = minus(parseInt(su1), parseInt(su2)); //parseInt(su1) - parseInt(su2);
}
document.getElementById("result").value = result;
}
</script>
</head>
<body>
수1:<input id="su1"><br>
수2:<input id="su2"><br>
<input type="button" value="+" onclick="calc('+');">
<input type="button" value="-" onclick="calc('-');">
<br>
결과:<input id="result">
</body>
<!--html 파일_end-->
<!--js 파일_start-->
const PI = 3.14;
function plus(a,b) {
return a+b;
}
function minus(a,b) {
return a-b;
}
<!--js 파일_end-->
|
cs |
[자바스크립트의 클래스] -> 사용 방법 및 문법은 소스코드의 주석을 참고하시기 바랍니다.
더보기
|
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
|
<!--html 파일_start-->
<!-- 외부 자바스크립트 Class 연결 -->
<script type="text/javascript" src="../JS/MyMath.js"></script>
<script type="text/javascript">
//계산용도 객체 생성
var mm = new MyMath();
var a = 10, b = 5, result;
result = mm.max(a,b);
console.log(a,b,result);
result = mm.min(a,b);
console.log(a,b,result);
var n = 10;
result = mm.hap(n);
console.log(result);
//정적함수 호출 result = MyMath_Static.min(a,b); console.log(a, b, result); //자바스크립의 기본 API호출 result = Math.min(a,b); console.log(a,b,result); </script>
<!--html 파일_end-->
<!--js 파일_start-->
class MyMath{
//함수 선언시 클래스내부에서는 function예약어는 사용하지 않고, 정의할 함수명만 선언합니다.
max(a,b){
return a > b ? a : b;
}
min(a,b){
return a < b ? a : b;
}
hap(n){
var sum=0;
while(n>0){
sum += n;
n--;
}
return sum;
}
}
<!--js 파일_end-->
|
cs |
[자바스크립트 클래스 활용] -> 주민번호 연습
멤버 필드를 선언하는 경우는 반드시 this를 사용해야 합니다.
더보기
|
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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
|
<!--html start-->
<!-- 외부 라이브러리 연결 -->
<script src="../JS/Jumin.js"></script>
<script>
/* var jumin = new Jumin('801212-1234560');
//게터세터는 함수처럼(괄호사용) 호출하지 않고 변수처럼 사용하면 된다.
//getter을 통해서 값을 읽어오기
console.log(jumin.jumin_no);
//setter을 통해서 값을 설정
jumin.jumin_no = '901212-1234568';
//getter을 통해서 값을 읽어오기
console.log(jumin.jumin_no);
//함수 호출
console.log(jumin.getYear());
console.log(jumin.getAge()); */
var regular_jumin = /^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-8][0-9]{6}$/;
function extract() {
var jumin_no = document.getElementById("jumin_no").value;
if(regular_jumin.test(jumin_no)==false){
alert("주민번호 형식이 잘못되었습니다.");
document.getElementById("jumin_no").value='';//값 지우기
document.getElementById("jumin_no").focus();
return;
}
//작업 시작!
var jumin = new Jumin(jumin_no);
var birth_year = jumin.getYear();
var age = jumin.getAge();
var tti = jumin.getTti();
var gender = jumin.getGender();
var local = jumin.getLocal();
var season = jumin.getSeason();
var ganji = jumin.getGanji();
//추출된 값을 테이블 내에 넣기
document.getElementById("jumin_no1").innerHTML = jumin_no;
document.getElementById("birth_year").innerHTML = birth_year + ", " + ganji + "s";
document.getElementById("age").innerHTML = age;
document.getElementById("tti").innerHTML = tti;
document.getElementById("gender").innerHTML = gender;
document.getElementById("local").innerHTML = local;
document.getElementById("season").innerHTML = season;
}
</script>
</head>
<body>
주민등록번호:<input id="jumin_no" value="801212-1234560">
<input type="button" value="부가정보추출" onclick="extract();">
<hr>
<table border="1" width="500">
<tr>
<th width="150">주민번호</th>
<td><span id="jumin_no1"></span></td>
</tr>
<tr>
<th width="150">출생년도</th>
<td><span id="birth_year"></span></td>
</tr>
<tr>
<th width="150">나이</th>
<td><span id="age"></span></td>
</tr>
<tr>
<th width="150">띠</th>
<td><span id="tti"></span></td>
</tr>
<tr>
<th width="150">성별</th>
<td><span id="gender"></span></td>
</tr>
<tr>
<th width="150">지역</th>
<td><span id="local"></span></td>
</tr>
<tr>
<th width="150">계절</th>
<td><span id="season"></span></td>
</tr>
</table>
</body>
<!--html end-->
<!-- js start-->
class Jumin{
//내부변수를 명시하는 방법: _변수명...
//_jumin_no;
//생성자(Constructor)
constructor(jumin_no){
this._jumin_no = jumin_no;
}
//getter
get jumin_no(){
return this._jumin_no;
}
//setter
set jumin_no(jumin_no){
this._jumin_no = jumin_no;
}
/* 성별정보
내국인 외국인
남 여 남 여
1900 1 2 5 6
2000 3 4 7 8
1800 9 0
*/
//출생년도 구하기
getYear(){
var temp = this._jumin_no.substr(0,2);
//문자열 -> 숫자(정수)로 변환
var year = parseInt(temp);//2자리 년도
//성별코드
var gender = this._jumin_no.charAt(7);
if(gender=='1' || gender=='2' || gender=='5' || gender=='6'){
year += 1900;
}else if(gender=='3' || gender=='4' || gender=='7' || gender=='8'){
year += 2000;
}else {
year += 1800;
}
return year;
}
//나이 구하기
getAge(){
var year = new Date().getYear() + 1900;
return year - this.getYear() + 1;
}
//띠 구하기
getTti(){
var temp = this.getYear() % 12;
//0 1 2 3 4 5 6 7 8 9 10 11
//신 유 술 해 자 축 인 묘 진 사 오 미
switch(temp){
case 0: return '신(원숭이띠)';
case 1: return '유(닭띠)';
case 2: return '술(개띠)';
case 3: return '해(돼지띠)';
case 4: return '자(쥐띠)';
case 5: return '축(소띠)';
case 6: return '인(호랑이띠)';
case 7: return '묘(토끼띠)';
case 8: return '진(용띠)';
case 9: return '사(뱀띠)';
case 10: return '오(말띠)';
default: return '미(양띠)'
}
}
//성별 구하기
getGender(){
var temp = this._jumin_no.substr(7,1);
if(temp == 1 || temp == 3 || temp == 5 || temp == 7 || temp == 9){
return '남';
} else{
return '여';
}
}
//지역 구하기
getLocal(){
var temp = this._jumin_no.substr(8,2);
if(temp >= 0 && temp <=8){
return '서울';
}else if(temp >=9 && temp <= 12){
return '부산';
}else if(temp >=13 && temp <= 15){
return '인천';
}else if(temp >=16 && temp <= 25){
return '경기도';
}else if(temp >=26 && temp <= 34){
return '강원도';
}else if(temp >=35 && temp <= 47){
return '충청도';
}else if(temp >=48 && temp <= 66){
return '전라도';
}else if(temp >=67 && temp <= 90){
return '경상도';
}else if(temp >=91 && temp <= 95){
return '제주';
} else{
return '잘못된 지역번호';
}
}
//계절 구하기
getSeason(){
var temp = this._jumin_no.substr(2,2);
switch(Math.floor(parseInt(temp)/3)){
case 1: return '봄';
case 2: return '여름';
case 3: return '가을';
default: return '겨울';
}
}
//간지 구하기
getGanji(){
var temp = this.getYear();
var gan = ['신', '유', '술', '해', '자', '축', '인', '묘', '진', '사', '오', '미'];
var ji = ['경', '신', '임', '계', '갑', '을', '병', '정', '무', '기'];
var str = ji[temp%10] + gan[temp%12];
return str;
}
}
<!-- js end-->
|
cs |
'BackEnd > WEB' 카테고리의 다른 글
| SERVLET_국비_DAY53 (0) | 2022.05.16 |
|---|---|
| UML_국비_DAY52 (0) | 2022.05.13 |
| JSP_국비_DAY47 (0) | 2022.05.06 |
| JDBC 미니프로젝트 2일차 (0) | 2022.05.05 |
| JSP_국비_DAY46 (0) | 2022.05.04 |
