프로토타입
자바의 class와 같은 역할
Web API
- 프레임워크 > 라이브러리 > API
- private 영역을 아예 막아 놓은, 웹에서 제공하는 라이브러리
- 개인이 구현할 수 없는 규모의 작업
- 다음 우편번호
http://postcode.map.daum.net/guide
Key : 도스공격 확인, 사용량 제한
데이터베이스를 직접 받아서 만들 경우 업데이트 어려움
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
</script>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
//네트워크에서 받아옴 CDN (자바의 import) new daum.Postcode(
)
//daum
//Postcode() 생성자
//call-back : 프로그램이 호출 new daum.Postcode({
oncomplete: function(data) {
}
})
//매서드 콜하면서 인자값 넣어주기 - JSON 객체 .open()
//익명 인스턴스 방식익명 인스턴스 방식
Javascript dom level 1
이벤트 할당 하는 여러 방식 (문법 레벨)
<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
//onclick 가장 오래된 방식<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>
<body>
<input type="text" id="postcode" placeholder="우편번호">
<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="Address1" placeholder="도로명주소">
<input type="text" id="Address2" placeholder="상세주소">
<script>
function sample4_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
var roadAddr = data.roadAddress;
document.getElementById('postcode').value = data.zonecode;
document.getElementById("Address1").value = roadAddr;
}
}).open();
}
</script>
</body>
</html>
'디지털 컨버전스 > Java Script' 카테고리의 다른 글
| [Regex] 유효성 검사 예제 (0) | 2020.04.16 |
|---|---|
| [Regex] 정규표현식 (0) | 2020.04.16 |
| [Javascript] 생성자 방식 객체 생성 (0) | 2020.04.16 |
| [Javascript] JSON (0) | 2020.04.16 |
| [Javascript] 객체 (0) | 2020.04.14 |