안녕하세요 코딩하는 근근이입니다.
지난번 강의에 이어서 폼 체크를 진행하도록 하겠습니다.
이전 강의 먼저 진행하고 와주세요.
13강. javascript <form체크> DOM Part1
안녕하세요 코딩하는 근근이입니다. 오늘은 지난번 강의할 때 만든 회원가입 폼체킹 자바스크립트를 만들어 봅시다. 만들기 전에 DOM 이란놈을 알아봅시다 DOM = Document Object Model의 약자로 문서
yosh2002.tistory.com
자 오늘은 13강에 이어서 자바스크립트를 코딩해 봅시다.!
코딩을 하기 전에 몇 가지 공부하고 갑시다 자바스크립트는 보통 함수(function)를 만들어 쓰는데 다른 방법으로 인라인 자바스크립트라고 하는 게 있습니다. 코딩을 한번 보시죠.
<select name="email_address" id="email_address"
onchange="document.form1.email2.value=this.value">
<option value="">선택</option>
<option value="kakao.com">kakao.com</option>
<option value="gmail.com">gmail.com</option>
<option value="naver.com">naver.com</option>
</select>상단 코딩중 onchange 안에서 바로 실행을 해버리는 방식입니다.
그냥 그런게 있다고만 알고 계시면 될 거 같습니다.
하다 보면 필요에 의해 사용하게 되니까요.
참고로 지금 하는 자바스크립트는 Jquery라는 라이브러리 교육이 아니고 모던 자바스크립트 교육입니다.
Jquery 만 알게 되면 개발도 빠르고 하지만 Jquery 자체가 어떻게 돌아가는지를 거의 모르고 쓰더라고요.
모던 JS를 먼저 배우고 Jquery를 배우도록 하겠습니다.
오늘은 체크박스(input type='checkbox')와 라디오 버튼(input type='radio')의 자바스크립트 접근 방식에 대해서
간략히 배우고 넘어가겠습니다.
| 태그 | 접근방식 | 반환값 |
| <input type="radio" name="gender"> | document.form1.gender[0].checked document.form1.gender[1].checked |
남성이 선택이 되었으면 True 여성이 선택 되었으면 True |
| <input type="checkbox" name="hobby"> | document.form1.hobby[0].checked document.form1.hobby[1].checked document.form1.hobby[2].checked |
독서가 선택이 되었으면 True 자전거가 선택이 되었으면 True 없음이 선택이 되어있으면 True |
우리가 코딩한 폼 안에 있는 태그 중에 radio , checkbox는 접근방식이 동일하며 접근한 값을 확인하면 체킹 되어있으면
true:참 , 되어 있지 않으면 false:거짓 이 반환됩니다. 코딩을 보시면 이해하시기 빠르실 거예요.
if(f.gender[0].checked==false && f.gender[1].checked==false){
alert("성별을 선택하세요");
return;
}
위의 코딩을 해석해보자면 남성이 선택이 되어 있지 않고 여성도 선택이 되어 있지 않을 경우 성별을 선택하라고 얼럿 창을 띄우고 멈춘다 입니다.
if 문은 지정한 조건이 참인 경우 명령문(statement)을 실행합니다. 조건이 거짓인 경우 또 다른 명령문이 실행될 수 있습니다. 지금은 if문만 사용했기 때문에 if문의 두 조건 (둘 다 선택이 되지 않은 경우에만 성별 선택 얼럿 창 띄우기) 이 참이면 성별을 선택하라는 얼럿 창과 함수의 실행이 정지되는 것입니다.
if 문의 연산자는 아래 외에 이거 저거 있지만 우리는 빠르게 개발자가 되는 것이 목표기 때문에 일단은 간략하게 설명드립니다.
| 연산자 | 해석 |
| && | and 입니다. |
| || | or 입니다. |
위의 연산자를 토대로 그 위에 있는 코딩을 다시 해석해보면. 남성의 선택 값이 false이고 여성의 선택 값이 false 인경우 결론 둘 다 선택하지 않았을 경우에 얼럿 창 띄우고 함수 실행 중지입니다. 이해가 되셨으려나요?
처음부터 이해가 되지는 않으실 수도 있지만. 계속 따라오다 보시면 자연스레 이해가 되실 겁니다. 뭐든 반복이 중요합니다.
<!doctype html>
<html lang="en">
<head>
<script>
function sendIt(){
var f = document.form1;
if(f.name.value==''){
alert("이름을 입력하세요");
return;
}
if(f.user_id.value==''){
alert("아이디를 입력하세요");
return;
}
if(f.user_pwd.value==''){
alert("비밀번호를 입력하세요");
}
if(f.gender[0].checked==false && f.gender[1].checked==false){
alert("성별을 선택하세요");
return;
}
if(f.email1.value=='' && f.email2.value==''){
alert("이메일을 입력해주세요");
return;
}
if(f.hobby[0].checked==false &&f.hobby[1].checked==false &&f.hobby[2].checked==false ){
alert("취미를 선택하세요");
return;
}
if(confirm("입력하신 정보가 맞습니까?")){
f.submit();
}
}
</script>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>회원가입</title>
</head>
<body>
<form name="form1" method="POST">
<table>
<tr>
<td>이름</td>
<td><input type="Text" name="name" id="name"></td>
</tr>
<tr>
<td>아이디</td>
<td><input type="text" name="user_id" id="user_id"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="user_pwd" id="user_pwd"></td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" name="gender" value="M">남성
<input type="radio" name="gender" value="F">여성
</td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="text" name="email1" id="email1">
@<input type="text" name="email2" id="email2" readonly="true">
<select name="email_address" id="email_address"
onchange="document.form1.email2.value=this.value">
<option value="">선택</option>
<option value="kakao.com">kakao.com</option>
<option value="gmail.com">gmail.com</option>
<option value="naver.com">naver.com</option>
</select>
</td>
</tr>
<tr>
<td>취미</td>
<td>
독서 <input type="checkbox" name="hobby" id="hobby" value="1">
자전거 <input type="checkbox" name="hobby" id="hobby" value="2">
없음 <input type="checkbox" name="hobby" id="hobby" value="3">
</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="회원가입" onclick="sendIt()"></td>
</tr>
</table>
</form>
</body>
</html>자 그래서 우리가 원하는 코딩의 완성본은 위와 같습니다 사실 폼 체킹을 더 디테일하게 하는데 우리는 공부가 목적이기 때문에 이 정도만 해도 문제가 없습니다. 알아가는 단계이니까요.
위의 코딩을 확인 후 본인의 페이지에 적용해주시기 바랍니다. 다음 강의는 재미있으실 거예요. 데이터베이스를 만져볼 예정입니다. 상단 코딩을 꼭 본인 페이지에 저장하시기 바랄게요! 그럼 오늘도 고생 많으 셨습니다.
'비전공자의 개발공부(연재)' 카테고리의 다른 글
| [번외편] 각종 No-Code 툴들에 대한 고찰 (0) | 2022.10.27 |
|---|---|
| 15강.데이터베이스<DB> (0) | 2022.03.30 |
| 13강. javascript <form체크> DOM Part1 (0) | 2022.03.28 |
| 12강. html태그 <form>part4 (회원가입폼) (0) | 2022.03.25 |
| 11강. html태그 <form>part3 (0) | 2022.03.23 |
댓글