JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법
다음(카카오)에서 우편번호 검색 서비스를 무료로 제공한다. 팝업 창에 Powerd by kakao가 표시되고, 기본 모양이 투박하다는 단점이 있지만, 빠르게 주소 검색 서비스를 구현해주는 고마운 서비스임에는 틀림이 없다.
자세한 사용법은 아래 링크에 있다.
https://postcode.map.daum.net/guide
너무 상세한 설명이라 이해가 어렵다면, 최소한의 코드로 만들고, 필요한 것을 하나씩 추가하는 게 좋다.
기본 예제와 작동 방식
아래는 최소한의 코드로 작성한 것이다. [우편번호 찾기]를 클릭하면 팝업이 뜨고, 검색 후 주소를 클릭하면 우편번호와 주소가 입력된다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
* {
box-sizing: border-box;
}
input {
height: 40px;
vertical-align: middle;
border: 1px solid #dadada;
padding: 0px 15px;
}
</style>
</head>
<body>
<p>
<input type="text" id="zip-code" placeholder="우편번호">
<input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
<p>
</p>
<input type="text" id="address-1" placeholder="도로명주소" style="width: 500px">
<p>
</p>
<input type="text" id="address-2" placeholder="상세주소" style="width: 500px">
</p>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function execDaumPostcode() {
new daum.Postcode( {
oncomplete: function( data ) {
document.getElementById( 'zip-code' ).value = data.zonecode;
document.getElementById( 'address-1' ).value = data.address;
}
} ).open();
}
</script>
</body>
</html>
작동 순서는 다음과 같다.
- 우편번호 찾기를 클릭하면 execDaumPostcode() 함수를 호출한다.
- 팝업이 뜬다.
- 주소를 검색하고 결과 목록에서 주소를 클릭하면, 주소 정보를 양식에 전송한다.
가져올 정보와 어떤 양식에 값을 넣을지는 아래와 같은 코드로 정한다. 우편번호(data.zonecode)를 ID가 zip-code인 양식에 넣으라는 뜻이다.
document.getElementById( 'zip-code' ).value = data.zonecode;
가져올 수 있는 정보 목록은 아래 링크에 있다.
https://postcode.map.daum.net/guide#attributes
상세 주소에 포커스 맞추고, 전송 받은 정보는 읽기 전용으로 만들기
주소 검색 후 상세 주소에 바로 입력할 수 있게 하려면 아래와 같은 코드를 추가한다.
document.getElementById( 'address-2' ).focus();
가져온 값을 변경하지 못하게 하려면 input에 readonly를 추가한다.
<input ... readonly>
아래는 지번 주소를 추가하고, 가져온 정보는 읽기 전용으로 만들고, 상세 주소에 포커스를 맞춘 것이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
* {
box-sizing: border-box;
}
input {
height: 40px;
vertical-align: middle;
border: 1px solid #dadada;
padding: 0px 15px;
}
</style>
</head>
<body>
<p>
<input type="text" id="zip-code" placeholder="우편번호" readonly>
<input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
<p>
</p>
<input type="text" id="address-1" placeholder="도로명주소" style="width: 500px" readonly>
<p>
</p>
<input type="text" id="address-1-1" placeholder="지번주소" style="width: 500px" readonly>
<p>
</p>
<input type="text" id="address-2" placeholder="상세주소" style="width: 500px">
</p>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function execDaumPostcode() {
new daum.Postcode( {
oncomplete: function( data ) {
document.getElementById( 'zip-code' ).value = data.zonecode;
document.getElementById( 'address-1' ).value = data.address;
document.getElementById( 'address-1-1' ).value = data.jibunAddress;
document.getElementById( 'address-2' ).focus();
}
} ).open();
}
</script>
</body>
</html>
초기화 버튼 만들기
input에 readonly를 추가한 경우 값을 지울 수 없다. 초기화 기능을 넣고 싶다면 다음과 같이 한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
* {
box-sizing: border-box;
}
input {
height: 40px;
vertical-align: middle;
border: 1px solid #dadada;
padding: 0px 15px;
}
</style>
</head>
<body>
<p>
<input type="text" id="zip-code" placeholder="우편번호" readonly>
<input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
<input type="button" onclick="execDaumPostcodeReset()" value="초기화">
<p>
</p>
<input type="text" id="address-1" placeholder="도로명주소" style="width: 500px" readonly>
<p>
</p>
<input type="text" id="address-1-1" placeholder="지번주소" style="width: 500px" readonly>
<p>
</p>
<input type="text" id="address-2" placeholder="상세주소" style="width: 500px">
</p>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function execDaumPostcode() {
new daum.Postcode( {
oncomplete: function( data ) {
document.getElementById( 'zip-code' ).value = data.zonecode;
document.getElementById( 'address-1' ).value = data.address;
document.getElementById( 'address-1-1' ).value = data.jibunAddress;
document.getElementById( 'address-2' ).focus();
}
} ).open();
}
function execDaumPostcodeReset() {
document.getElementById( 'zip-code' ).value = null;
document.getElementById( 'address-1' ).value = null;
document.getElementById( 'address-1-1' ).value = null;
document.getElementById( 'address-2' ).value = null;
}
</script>
</body>
</html>
JavaScript / Object / Math.log(), Math.log10(), Math.Log2()
Math.log(), Math.log10(), Math.Log2() Math.log() : 자연로그의 값을 반환합니다. Math.log10() : 상용로그의 값을 반환합니다. Math.Log2() : 밑이 2인 로그의 값을 반환합니다. 문법 Math.log( number) Math.log10( number ) Math.Log2( number) number에는 숫자가 들어갑니다. 0인 경우 -Infinity, 음수인 경우 NaN을 반환합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...
객체 생성 방법 1 var jb = { 'a':100, 'b':200, 'c':300 }; 객체 생성 방법 2 var jb = {}; jb = 100; jb = 200; jb = 300; 객체 생성 방법 3 var jb = new Object(); jb = 100; jb = 200; jb = 300; 객체 생성 방법 4 var jb = new Object(); jb.a = 100; jb.b = 200; jb.c = 300;
JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성
.slice() .slice()는 배열의 일부분을 선택하여 새로운 배열을 만듭니다. 문법 array.slice( start, end ) start와 end에는 숫자가 들어갑니다. 배열의 start에 해당하는 요소부터 end 바로 전의 요소까지를 선택하여 새로운 배열을 만듭니다. 예를 들어 jbAry.slice( 2, 5 ); 는 jbAry 배열의 3번째 요소부터 5번째 요소까지 선택합니다. end에 값이 없으면 해당 배열의 마지막 요소까지 선택합니다. 값이 음수면 마지막 요소를 기준으로 선택합니다. 예제 <!doctype html> <html ...
JavaScript / 조건문 / if, else if, else
특정 조건 만족 시 어떤 작업을 수행하고 싶을 때 사용하는 것이 if, else if, else입니다. 문법 if ( condition1 ) { statement1 } condition1을 만족하면 statement1을 실행합니다. if ( condition1 ) { statement1 } else { statement2 } condition1을 만족하면 statement1을 실행하고, 만족하지 않으면 statement2를 실행합니다. if ( condition1 ) { statement1 } else if ( ...
JavaScript / 전역변수(Global Variable)와 지역변수(Local Variable)
전역변수와 지역변수 변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다. 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다. 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 함수 외부에서는 접근할 수 없습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Object / Array.push(), Array.pop(), Array.unshift(), Array.shift() - 배열에 원소 추가/제거 하기
.push(), .pop(), unshift(), shift() .push()는 배열의 맨 끝에, .unshift()는 배열의 맨 앞에 원소를 추가합니다. .pop()은 마지막 원소를, .shift()는 맨 앞의 원소를 제거합니다. 예제 네 가지 속성을 비교하는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <script> ...
JavaScript / Object / .innerText, .innerHTML
.innerText .innerText은 특정 요소의 텍스트를 가져오거나, 특정 요소의 텍스트를 변경한다. 문법 1 - 내용 가져오기 element의 내용을 가져온다. element.innerText id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다. var jb = document.getElementById( 'xyz' ).innerText; 예제 1 id의 값이 jb인 요소의 텍스트를 가져와서 출력한다. 태그 등은 제외한 텍스트만 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / 구문(Statement) 넣는 방법
자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다. var jb1 = 'Lorem' var jb2 = 'Ipsum' 하지만, 구문이 완성되지 않았다면 다음 줄까지 해석합니다. 즉 var jb1 = 'Lorem' 과 var jb1 = 'Lorem' 은 같습니다. 구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다. var jb1 = 'Lorem'; var jb2 = 'Ipsum'; 세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 ...
JavaScript / 함수 / 함수 선언하고 호출하기
함수 선언하기 방법 1 function functionName( argument1, argument2, ... ) { // Do Something } 방법 2 var functionName = function( argument1, argument2, ... ) { // Do Something }; 함수 호출하기 functionName( value1, value2, ... ); 방법 1로 함수를 선언한 경우, 함수 호출은 함수 선언 전 또는 함수 선언 후에 할 수 있습니다. functionName( value1, value2, ... ...
JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드
window.matchMedia() CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다. 문법 window.matchMedia( mediaQueryString ) mediaQueryString : CSS 미디어쿼리를 입력합니다. window는 생략할 수 있습니다. 예를 들어 window.matchMedia( '( min-width: 500px )' ) 는 500px 이상을 뜻합니다. 속성 .media : mediaQueryString을 ...