<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function openZipcode(){
window.open("zipcode.html", "Zipcode", "width=300, height=200"); //JavaScript에 whindow.open()을 사용하여 새로운 창을 띄우는 function
}
</script>
</head>
<body>
<form action="" name="frmRegist" id="frmRegist">
<table width="200" border="1">
<tr>
<td>우편번호</td>
<td>
<input type="text" id="zipcode1" name="zipcode1" value="" size="5 maxlength="3" readonly="readonly">
<input type="text" id="zipcode2" name="zipcode2" value="" size="5 maxlength="3" readonly="readonly">
<input type="button" value="우편번호 찾기" onclick="openZipcode();"> //button에 onclick event시 openZipcode() function을 호출한다.
</td>
</tr>
<tr>
<td>주소1</td>
<td>
<input type="text" id="address1" name="address1" value="" size="30 maxlength="50" readonly="readonly">
</td>
</tr>
<tr>
<td>주소2</td>
<td>
<input type="text" id="address2" name="address2" value="" size="30 maxlength="50">
</td>
</tr>
</table>
</form>
</body>
</html>
child가 되는 페이지. 자식 페이지?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Zipcode Search</title>
<script type="text/javascript">
function insertZipcode(){
var objTbody = document.getElementById("idZipcodeList");
//1. data
//2. check
//3. process
for(var indexI = 0;indexI < 10;indexI++){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var zipcode = "123-456";
var address1 = "서울시 서초구 서초";
td1.innerHTML = "<a href='#' onclick='selectZipcode(\""+ zipcode +"\", \"" + address1 + "\")'>" + "123-456" + "</a>" ; //a태그를 누르면 selectZipcode function을 실행한다.
td2.innerHTML = "서울시 서초구 서초동 ";
tr.appendChild(td1);
tr.appendChild(td2);
objTbody.appendChild(tr);
} //여기 까지는 자식이 되는 페이지에 테이블에 tr과 td를 추가하는 function.
//4. print
}
function selectZipcode(zipcode, address1){
//1. data
//2. check
//3. process
var aryZipcode = zipcode.split("-");
var zipcode1 = aryZipcode[0];
var zipcode2 = aryZipcode[1];
var objOpener = opener.document.frmRegist; //opener를 써서 부모가 되는 페이지에 값을 넣을수 있다.
objOpener.zipcode1.value = zipcode1;
objOpener.zipcode2.value = zipcode2;
objOpener.address1.value = address1;
//4. print
} //부모가 되는 페이지에 자식이 되는 페이지의 내용을 넣는 function
</script>
</head>
<body onload="insertZipcode();"> //body의 내용이 나오기전 실행이 된다. insertZipcode();를 실행해서 테이블의 tbody에 tr과 td를 추가한다.
<table border="1">
<tr>
<td>우편번호</td>
<td>주소</td>
</tr>
<tbody id="idZipcodeList">
</tbody>
</table>
</body>
</html>
위의 코드는 미완성이다.
Database를 연동 하지도 않았다.
Database를 연동하면 실제 웹페이지에서 주소 검색하는 그런 프로그램을 만들수 있다.
'JavaScript' 카테고리의 다른 글
| JavaScript의 비교 연산자와 일치 연산자..! (0) | 2012.05.22 |
|---|---|
| Ajax 한글 파라미터..! (0) | 2012.01.30 |
| JavaScript Parameter Encoding..! (0) | 2011.12.20 |
| 쿠키(Cookie)에 아이디를 저장하기..! (0) | 2011.09.07 |
| JavaScript Radio...! (0) | 2009.11.03 |
