Problem Solving
[JavaScript] Requirements Q08~12 : Form
Isaac S. Lee
2023. 10. 12. 16:22
📌Requirements Q08: 우편 번호 검색
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7121714adf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../../asset/question.css">
<title>Document</title>
<style type="text/css">
#tbl1 {
border: 1px solid gray;
border-collapse: collapse;
width: 600px;
}
#tbl1 td {
border: 1px solid gray;
padding: 10px;
}
#tbl1 td:first-child {
background-color: #DEDEDE;
width: 100px;
text-align: center;
}
input {
border: 1px solid gray;
padding-left: 3px;
}
#zip {
width: 60px;
}
#address1, #address2 {
width: 98%;
}
</style>
<script type="text/javascript">
function search() {
window.open("search_impl.html", "search", "width=300, height=200");
}
</script>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
새창을 띄운 뒤 우편 번호 검색을 하시오.
우편번호, 주소 : 새창에서 선택하면 자동 채우기
상세주소 : 포커스 맞추기
-->
<form name="form1">
<h1>우편 번호 검색</h1>
<table id="tbl1">
<tr>
<td>우편번호</td>
<td>
<input type="text" id="zip" name="zip" readonly />
<input type="button" value=" 우편번호검사하기" onclick="search();" />
</td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" id="address1" name="address1" readonly /></td>
</tr>
<tr>
<td>상세주소</td>
<td><input type="text" id="address2" name="address2" /></td>
</tr>
</table>
</form>
</body>
</html>
📌Requirements Q09: 주문 정보 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7121714adf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../../asset/question.css">
<title>Document</title>
<style>
fieldset {
border: 1px solid #999;
line-height: 2em;
}
</style>
<script>
function copy() {
var name1 = document.all.txtName1;
var address1 = document.all.txtAddress1;
var name2 = document.all.txtName2;
var address2 = document.all.txtAddress2;
var cb1 = document.all.cb1;
if (cb1.checked) {
name2.value = name1.value;
address2.value = address1.value;
} else {
name2.value = "";
address2.value = "";
name2.focus();
}
}
</script>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!-- 주문하시는 분 정보를 받으시는 분으로 복사하시오. -->
<h3>주문하기</h3>
<fieldset>
<legend>주문하시는 분</legend>
이름 : <input type="text" name="txtName1" autofocus /><br />
주소 : <input type="text" name="txtAddress1" />
</fieldset>
<div style="margin: 15px;">
<input type="checkbox" name="cb1" id="cb1" onclick="copy();" /> <label for="cb1">주문하시는 분과 정보과 동일합니다.</label>
</div>
<fieldset>
<legend>받으시는 분</legend>
이름 : <input type="text" name="txtName2" /><br />
주소 : <input type="text" name="txtAddress2" />
</fieldset>
</body>
</html>
📌Requirements Q10: 회원 가입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7121714adf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../../asset/question.css">
<title>Document</title>
<style type="text/css">
#tbl1 {
border: 1px solid gray;
border-collapse: collapse;
width: 600px;
}
#tbl1 th {
background-color: #eee;
}
#tbl1 th, #tbl1 td {
border: 1px solid gray;
padding: 10px;
}
input {
border: 1px solid gray;
font-weight: bold;
padding: 2px 5px;
}
</style>
<script type="text/javascript">
function check(jumin1) {
var year = document.all.year;
var month = document.all.month;
var day = document.all.day;
var jumin2 = document.all.jumin2;
if (jumin1.value.length == 6) {
year.value = "19" + jumin1.value.substring(0, 2);
month.value = jumin1.value.substring(2, 4);
day.value = jumin1.value.substring(4, 6);
jumin2.focus();
}
}
function check2(jumin2) {
var gender = document.all.gender;
if (jumin2.value.length == 1) {
if (parseInt(jumin2.value) % 2 == 1) {
gender[0].checked = true;
} else {
gender[1].checked = true;
}
}
}
</script>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
주민번호 입력 시 나머지 컨트롤(생년월일, 성별) 제어를 하시오.
주민등록 번호 앞자리 입력 완료 -> 뒷자리 자동 포커스
주민등록 번호 앞자리 입력 완료 -> 생년월일 자동 완성
주민등록 번호 뒷자리 첫 숫자 입력 -> 성별 자동 체크
-->
<h1>회원 가입</h1>
<table id="tbl1">
<tr>
<th>주민번호</th>
<td>
<input type="text" name="jumin1" onkeyup="check(this);" maxlength="6" size="6" /> - <input type="text"
name="jumin2" onkeyup="check2(this);" maxlength="7" size="7" />
</td>
</tr>
<tr>
<th>생년월일</th>
<td><input type="text" name="year" size="4" /> 년 <input type="text" name="month" size="2" /> 월 <input
type="text" name="day" size="2" /> 일</td>
</tr>
<tr>
<th>성별</th>
<td><input type="radio" name="gender" /> 남자 <input type="radio" name="gender" /> 여자</td>
</tr>
</table>
</body>
</html>
📌Requirements Q11: 목록 관리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7121714adf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../../asset/question.css">
<title>Document</title>
<style type="text/css">
#tbl1 {
border: 1px solid gray;
width: 500px;
margin: 10px auto;
border-collapse: collapse;
}
input {
display: block;
margin: 10px auto;
padding: 5px;
}
#tbl1 td {
border: 1px solid gray;
text-align: center;
padding: 15px;
}
h4 {
margin: 0;
}
select {
width: 150px;
margin: 15px;
height: 340px;
}
select option {
padding: 5px;
}
.btn {
width: 100%;
}
</style>
<script type="text/javascript">
var leftList, rightList;
window.onload = function () {
leftList = document.all.leftList;
rightList = document.all.rightList;
};
function add2() {
moveOne(leftList, rightList);
}
function remove2() {
moveOne(rightList, leftList);
}
function moveOne(left, right) {
var selOption = left.options[left.selectedIndex];
//rightList.options.add(selOption);
right.options.add(new Option(selOption.text, selOption.value));
left.options.remove(selOption.index);
}
function addAll() {
moveAll(leftList, rightList);
}
function removeAll() {
moveAll(rightList, leftList);
}
function moveAll(left, right) {
for (i = 0; i < left.options.length; i++) {
var op = left.options[i];
right.options.add(new Option(op.text, op.value));
}
var count = left.options.length;
for (i = 0; i < count; i++) {
left.options.remove(0);
}
}
</script>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!-- 셀렉트 박스의 항목을 좌우로 이동시키시오. -->
<table id="tbl1">
<tr>
<td>
<h4>차단된 친구</h4>
<select name="leftList" size="10" ondblclick="add2();">
<option value="1">권예진</option>
<option value="2">권준혁</option>
<option value="3">김동식</option>
<option value="4">김세진</option>
<option value="5">김여정</option>
<option value="6">노형준</option>
<option value="7">박민선</option>
<option value="8">백강현</option>
<option value="9">변기현</option>
</select>
</td>
<td>
<input type="button" value="Add ▷" onclick="add2();" class="btn" />
<input type="button" value="◁ Remove" onclick="remove2();" class="btn" />
<input type="button" value="Add All ▷▷" onclick="addAll();" class="btn" />
<input type="button" value="◁◁ Remove All" onclick="removeAll();" class="btn" />
</td>
<td>
<h4>허용된 친구</h4>
<select name="rightList" size="10" ondblclick="remove2();"></select>
</td>
</tr>
</table>
</body>
</html>
📌Requirements Q12: 입력 잠금
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7121714adf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../asset/question.css">
<title>Document</title>
<style>
#tbl {
width: 600px;
}
#tbl th {
font-size: 1em;
padding: 7px;
}
#tbl td {
text-align: center;
}
#tbl .txt {
width: 450px;
border: 1px solid #999;
background-color: white;
padding: 3px;
}
#tbl .txt:read-only {
cursor: not-allowed;
background-color: #eee;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
체크박스를 사용해 텍스트 박스를 제어하시오.
각각의 텍스트 박스의 입력/잠금 상태를 제어하시오.
체크박스 : 텍스트 박스를 읽기 전용으로 만든다.(readonly)
입력 후 엔터를 치면 자동으로 잠금 상태가 된다.
텍스트 박스를 더블클릭하면 입력 상태가 된다.
-->
<h2>입력하기</h2>
<table id="tbl" class="table">
<tr>
<th>번호</th>
<th>입력</th>
<th>잠금</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="txt" class="txt" data-no="0"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="0"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="txt" class="txt" data-no="1"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="1"></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="txt" class="txt" data-no="2"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="2"></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="txt" class="txt" data-no="3"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="3"></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="txt" class="txt" data-no="4"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="4"></td>
</tr>
<tr>
<td>6</td>
<td><input type="text" name="txt" class="txt" data-no="5"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="5"></td>
</tr>
<tr>
<td>7</td>
<td><input type="text" name="txt" class="txt" data-no="6"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="6"></td>
</tr>
<tr>
<td>8</td>
<td><input type="text" name="txt" class="txt" data-no="7"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="7"></td>
</tr>
<tr>
<td>9</td>
<td><input type="text" name="txt" class="txt" data-no="8"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="8"></td>
</tr>
<tr>
<td>10</td>
<td><input type="text" name="txt" class="txt" data-no="9"></td>
<td><input type="checkbox" name="cb" class="cb" data-no="9"></td>
</tr>
</table>
<script>
var txt = document.all.txt;
var cb = document.all.cb;
for (var i=0; i<cb.length; i++) {
cb[i].onchange = function() {
if (event.srcElement.checked) {
txt[event.srcElement.dataset["no"]].readOnly = true;
} else {
txt[event.srcElement.dataset["no"]].readOnly = false;
}
};
txt[i].onkeydown = function() {
if (event.keyCode == 13) {
cb[event.srcElement.dataset["no"]].click();
}
};
txt[i].ondblclick = function() {
cb[event.srcElement.dataset["no"]].click();
};
}
</script>
</body>
</html>