728x90
★ 문제 1
- 아래와 같은 문서를 생성하시오.
- 조건
- 새창을 띄운 뒤 우편 번호 검색을 하시오.
- 우편번호, 주소 : 새창에서 선택하면 자동 채우기
- 상세주소 : 포커스 맞추기
■ HTML 코드
<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>
■ css 코드
<style>
#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>
■ JavaScript
<script type="text/javascript">
function search() {
window.open("008_search.html", "search", "width=300, height=200");
}
</script>
■ 008search.html
<!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">
<title>Document</title>
<style>
input {
display:block;
margin : 10px;
}
</style>
</head>
<body>
<input type="button" name="btn1" value="서울시 강남구 역삼동">
<input type="button" name="btn2" value="서울시 강남구 대치동">
<input type="button" name="btn3" value="서울시 강남구 도곡동">
<script>
document.all.btn1.onclick = m1;
document.all.btn2.onclick = m2;
document.all.btn3.onclick = m3;
function m1() {
opener.document.form1.zip.value = '06232';
opener.document.form1.address1.value = '서울시 강남구 역삼동';
opener.document.form1.address2.focus();
window.close();
}
function m2() {
opener.document.form1.zip.value = '06291';
opener.document.form1.address1.value = '서울시 강남구 대치동';
opener.document.form1.address2.focus();
window.close();
}
function m3() {
opener.document.form1.zip.value = '06267';
opener.document.form1.address1.value = '서울시 강남구 도곡동';
opener.document.form1.address2.focus();
window.close();
}
</script>
</body>
</html>
■ 실행 결과
★ 문제 2
- 아래와 같은 문서를 생성하시오.
- 조건
- 주문하시는 분 정보를 받으시는 분으로 복사하시오.
■ HTML 코드
<h1>주문하기</h1>
<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" autofocus /><br />
주소 : <input type="text2" name="txtAddress2" />
</fieldset>
■ CSS 코드
X
■ JavaScript
<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>
■ 실행 결과
★ 문제 3
- 아래와 같은 문서를 생성하시오.
- 조건
- 주민번호 입력 시 나머지 컨트롤(생년월일, 성별) 제어를 하시오.
- 주민등록 번호 앞자리 입력 완료 -> 뒷자리 자동 포커스
- 주민등록 번호 앞자리 입력 완료 -> 생년월일 자동 완성
- 주민등록 번호 뒷자리 첫 숫자 입력 -> 성별 자동 체크
■ HTML 코드
<form name="form1">
<h1>회원 가입</h1>
<table id="tbl1">
<tr>
<td>주민번호</td>
<td>
<input type="text" id="first-number" name="firstnumber" onkeyup="check(this);" >
-
<input type="text" id="last-number" name="lastnumber" onkeyup="check2(this);" >
</td>
</tr>
<tr>
<td>생년월일</td>
<td>
<input type="text" id="born1" name="born1">년
<input type="text" id="born2" name="born2">월
<input type="text" id="born3" name="born3">일
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" id="man" name="man">남자
<input type="radio" id="women" name="women">여자
</td>
</tr>
</table>
</form>
■ CSS 코드
<style>
#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;
font-weight: bold;
}
input {
border: 1px solid gray;
padding-left: 3px;
}
#first-number, #last-number {
width : 70px;
}
#born1 {
width : 50px;
margin-right : 5px;
}
#born2, #born3 {
width : 30px;
margin-right : 5px;
}
</style>
■ JavaScript
<script>
function check(first) {
var born1 = document.all.born1;
var born2 = document.all.born2;
var born3 = document.all.born3;
var last = document.all.lastnumber;
if (first.value.length == 6) {
born1.value = "19" + first.value.substring(0, 2);
born2.value = first.value.substring(2, 4);
born3.value = first.value.substring(4, 6);
last-number.focus();
}
}
function check2(last) {
var man = document.all.man;
var women = document.all.women;
if (last.value.length == 1) {
if (parseInt(last.value) % 2 == 1) {
man.checked = true;
women.checked = false;
} else {
women.checked = true;
man.checked = false;
}
}
}
</script>
■ 실행 결과
★ 문제 4
- 아래와 같은 문서를 생성하시오.
- 조건
- 셀렉트 박스의 항목을 좌우로 이동시키시오.
■ HTML 코드
<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>
■ CSS 코드
<style>
#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>
■ JavaScript
<script>
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>
■ 실행 결과
★ 문제 5
- 아래와 같은 문서를 생성하시오.
- 조건
- 체크박스를 사용해 텍스트 박스를 제어하시오.
- 각각의 텍스트 박스의 입력/잠금 상태를 제어하시오.
- 체크박스 : 텍스트 박스를 읽기 전용으로 만든다.(readonly)
- 입력 후 엔터를 치면 자동으로 잠금 상태가 된다.
- 텍스트 박스를 더블클릭하면 입력 상태가 된다.
■ HTML 코드
<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>
■ CSS 코드
<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>
■ JavaScript
<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>
■ 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 28 - Variable (0) | 2023.04.25 |
|---|---|
| JAVASCRIPT STEP 27 - Timer (0) | 2023.04.25 |
| JAVASCRIPT STEP 25 - FORM2 (0) | 2023.04.25 |
| JAVASCRIPT STEP 24 - FORM (0) | 2023.04.24 |
| JAVASCRIPT STEP 23 - 응용 예제2 (0) | 2023.04.24 |
