Open WeatherMap 사용
11936 단어 OpenWeatherMapJavaScript초학자
이 기사가 할 수 있는 일
1. Open WeatherMap 이해
2. Javascript를 사용하여 API를 처리하는 방법
3. 날씨 정보 얻기
Open Weather Map 소개
Openweatherrmap은 웹과 모바일 응용 프로그램 개발자에게 현재 날씨와 역사를 예측하는 각종 날씨 데이터를 포함한 무료 API의 온라인 서비스를 제공합니다.(위키백과에서)
그러나 API뿐만 아니라 위 이미지처럼 도시 이름을 입력하면 GUI를 통해 날씨 정보를 확인할 수 있다.
API 사용 준비
1. 계정을 만듭니다.
사용자 이름, 메일 주소 및 암호 설정
2.api 키 가져오기
3. API 선택
API를 많이 준비했기 때문에 선택합니다.
이번에는 현재 Weather Data를 사용합니다.
우편 번호에서 지역과 날씨를 얻다
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>json_get</title>
</head>
<body>
<script src="jquery-3.1.0.min.js"></script>
<!--郵便番号入力フォーム-->
<form id="form1" action="#">
<input type="text"id="input_message" value="">
<input type="button" onclick="func1()" value="送信">
</form>
<!--取得した天気を表示-->
<div id="output_message"></div>
<script language="javascript" type="text/javascript">
function func1() {
//郵便番号を変数post_numへ代入
var post_num = document.getElementById("input_message").value;
//zipに郵便番号を代入
url = `http://api.openweathermap.org/data/2.5/weather?zip=${post_num},jp&appid=apiキー`;
//取得したJSONデータを読み込む
$.getJSON(url, (data) => {
//地域名
console.log(`${data.name}`);
//天気
document.getElementById("output_message").innerHTML = `${data.weather[0].main}`;
});
}
</script>
</body>
</html>
취득한 JSON 데이터(요코하마시 서구 고도의 경우){
"coord": {
"lon": 139.62,
"lat": 35.46
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04n"
}
],
"base": "stations",
"main": {
"temp": 283.85,
"feels_like": 277.79,
"temp_min": 283.71,
"temp_max": 284.15,
"pressure": 1021,
"humidity": 62
},
"visibility": 10000,
"wind": {
"speed": 6.7,
"deg": 20
},
"clouds": { "all": 75 },
"dt": 1607444694,
"sys": {
"type": 1,
"id": 8074,
"country": "JP",
"sunrise": 1607463548,
"sunset": 1607498931
},
"timezone": 32400,
"id": 0,
"name": "Takashima",
"cod": 200
}
결과 표시
시험해 보다
'' 와 '의 차이는 초보자에게는 어려울 수 있다. (나도 오랫동안 프로그래밍을 하지 않아서 잊어버렸다)
다른 기사 참고할 때 주의하세요.
의외로 자바스크립트의 입문서는 API가 처리하는 것이 매우 적기 때문에 이 문장에서
나는 최초의 한 걸음을 내디뎠으면 좋겠다고 생각한다.
여러 API 중에서 이번에는 Open WeatherMap을 선택했지만 API를 사용할 수 있으면 범위가 넓어집니다.
Reference
이 문제에 관하여(Open WeatherMap 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/inosan/items/49a330210f7bd0b3249e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Openweatherrmap은 웹과 모바일 응용 프로그램 개발자에게 현재 날씨와 역사를 예측하는 각종 날씨 데이터를 포함한 무료 API의 온라인 서비스를 제공합니다.(위키백과에서)
그러나 API뿐만 아니라 위 이미지처럼 도시 이름을 입력하면 GUI를 통해 날씨 정보를 확인할 수 있다.
API 사용 준비
1. 계정을 만듭니다.
사용자 이름, 메일 주소 및 암호 설정
2.api 키 가져오기
3. API 선택
API를 많이 준비했기 때문에 선택합니다.
이번에는 현재 Weather Data를 사용합니다.
우편 번호에서 지역과 날씨를 얻다
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>json_get</title>
</head>
<body>
<script src="jquery-3.1.0.min.js"></script>
<!--郵便番号入力フォーム-->
<form id="form1" action="#">
<input type="text"id="input_message" value="">
<input type="button" onclick="func1()" value="送信">
</form>
<!--取得した天気を表示-->
<div id="output_message"></div>
<script language="javascript" type="text/javascript">
function func1() {
//郵便番号を変数post_numへ代入
var post_num = document.getElementById("input_message").value;
//zipに郵便番号を代入
url = `http://api.openweathermap.org/data/2.5/weather?zip=${post_num},jp&appid=apiキー`;
//取得したJSONデータを読み込む
$.getJSON(url, (data) => {
//地域名
console.log(`${data.name}`);
//天気
document.getElementById("output_message").innerHTML = `${data.weather[0].main}`;
});
}
</script>
</body>
</html>
취득한 JSON 데이터(요코하마시 서구 고도의 경우){
"coord": {
"lon": 139.62,
"lat": 35.46
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04n"
}
],
"base": "stations",
"main": {
"temp": 283.85,
"feels_like": 277.79,
"temp_min": 283.71,
"temp_max": 284.15,
"pressure": 1021,
"humidity": 62
},
"visibility": 10000,
"wind": {
"speed": 6.7,
"deg": 20
},
"clouds": { "all": 75 },
"dt": 1607444694,
"sys": {
"type": 1,
"id": 8074,
"country": "JP",
"sunrise": 1607463548,
"sunset": 1607498931
},
"timezone": 32400,
"id": 0,
"name": "Takashima",
"cod": 200
}
결과 표시
시험해 보다
'' 와 '의 차이는 초보자에게는 어려울 수 있다. (나도 오랫동안 프로그래밍을 하지 않아서 잊어버렸다)
다른 기사 참고할 때 주의하세요.
의외로 자바스크립트의 입문서는 API가 처리하는 것이 매우 적기 때문에 이 문장에서
나는 최초의 한 걸음을 내디뎠으면 좋겠다고 생각한다.
여러 API 중에서 이번에는 Open WeatherMap을 선택했지만 API를 사용할 수 있으면 범위가 넓어집니다.
Reference
이 문제에 관하여(Open WeatherMap 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/inosan/items/49a330210f7bd0b3249e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>json_get</title>
</head>
<body>
<script src="jquery-3.1.0.min.js"></script>
<!--郵便番号入力フォーム-->
<form id="form1" action="#">
<input type="text"id="input_message" value="">
<input type="button" onclick="func1()" value="送信">
</form>
<!--取得した天気を表示-->
<div id="output_message"></div>
<script language="javascript" type="text/javascript">
function func1() {
//郵便番号を変数post_numへ代入
var post_num = document.getElementById("input_message").value;
//zipに郵便番号を代入
url = `http://api.openweathermap.org/data/2.5/weather?zip=${post_num},jp&appid=apiキー`;
//取得したJSONデータを読み込む
$.getJSON(url, (data) => {
//地域名
console.log(`${data.name}`);
//天気
document.getElementById("output_message").innerHTML = `${data.weather[0].main}`;
});
}
</script>
</body>
</html>
{
"coord": {
"lon": 139.62,
"lat": 35.46
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04n"
}
],
"base": "stations",
"main": {
"temp": 283.85,
"feels_like": 277.79,
"temp_min": 283.71,
"temp_max": 284.15,
"pressure": 1021,
"humidity": 62
},
"visibility": 10000,
"wind": {
"speed": 6.7,
"deg": 20
},
"clouds": { "all": 75 },
"dt": 1607444694,
"sys": {
"type": 1,
"id": 8074,
"country": "JP",
"sunrise": 1607463548,
"sunset": 1607498931
},
"timezone": 32400,
"id": 0,
"name": "Takashima",
"cod": 200
}
결과 표시
시험해 보다
'' 와 '의 차이는 초보자에게는 어려울 수 있다. (나도 오랫동안 프로그래밍을 하지 않아서 잊어버렸다)
다른 기사 참고할 때 주의하세요.
의외로 자바스크립트의 입문서는 API가 처리하는 것이 매우 적기 때문에 이 문장에서
나는 최초의 한 걸음을 내디뎠으면 좋겠다고 생각한다.
여러 API 중에서 이번에는 Open WeatherMap을 선택했지만 API를 사용할 수 있으면 범위가 넓어집니다.
Reference
이 문제에 관하여(Open WeatherMap 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/inosan/items/49a330210f7bd0b3249e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Open WeatherMap 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/inosan/items/49a330210f7bd0b3249e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
