날씨 정보 API 이용 예제 ( $getJSON )
글. 수알치 오상문
끝에 나오는 유튜브 동영상을 참고로 작성한 예제 코드입니다.
자세한 내용은 동영상을 참고하세요.
[예제 소스 코드]
<html lang="ko-kr">
<head>
<title>Wheather</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://code.jquery.com/jquery-1.7.min.js" ></script>
</head>
<script>
// 이용자 키 지정: appid=d399ae90af9c6e9e1347162c12345678
// 서울 코드 지정: id=1835848
// 섭씨 단위 사용: units=metric
$.getJSON( "http://api.openweathermap.org/data/2.5/forecast?id=1835848&appid=d399ae90af9c6e9e1347162c0242be8f&units=metric",
function(data){
// alert(data.list[0].main.temp_min); // ?
var $minTemp = data.list[0].main.temp_min;
var $maxTemp = data.list[0].main.temp_max;
var $curTemp = data.list[0].main.temp;
var $cDate = data.list[0].dt_txt;
var $wicon = data.list[0].weather[0].icon;
// 참고: 현재 시간 구하는 방법
// new Date(Date.now()) or new Date($.now)
var $now = new Date($.now())
var $ctime = $now.getFullYear() + '/' + ($now.getMonth()+1) + '/' + $now.getDate() + ' ' + $now.getHours() + ':' + $now.getMinutes()
// var $iconTemp = data.list[0].main.temp_min
// A.appendTo(B) B 요소 내용 뒤에 A 추가
// A.append(B) A 요소 내용 뒤에 B 추가
// A.prependTo(B) B 요소 내용 앞에 A 추가
// A.prepend(B) A 요소 내용 뒤에 B 추가
$('.lowtemp').append($minTemp);
$('.hightemp').append($maxTemp);
$('.curtemp').append($curTemp);
$('h2').prepend($cDate);
$('.cicon').append('<img src="http://openweathermap.org/img/w/' + $wicon + '.png" />');
$('.ctime').append($ctime);
}
);
</script>
<body>
<h1>날씨 API</h1>
<div class="ctime">현재 시간: </div>
<h2> 날씨 </h2>
<div class="cicon"> </div>
<div class="curtemp">현재 온도: </div>
<div class="lowtemp">최저 온도: </div>
<div class="hightemp">최고 온도: </div>
</body>
</html>
[실행 결과]
[동영상] https://www.youtube.com/watch?v=ccTAedW2KPg
'AJAX, JSON' 카테고리의 다른 글
| XMLHttpRequest (1) | 2022.10.01 |
|---|---|
| Ajax 기능별 웹브라우저 및 버전 호환성 (0) | 2022.09.23 |
| Ajax가 뭐야 (0) | 2022.06.09 |
| JSON 가이드 (TCP School) (0) | 2022.06.06 |
| Ajax 가이드 (TCP School) (0) | 2022.06.06 |