Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 자바입문
- 오라클UPDATE
- 데이터베이스
- 데이터베이스 집합연산자
- 라이젠노트북
- 레노버 슬림3
- 코딩입문
- 사무용 노트북
- 오라클 DELETE
- 데이터베이스 기초
- 코린이
- 개발자준비
- 자바초보
- 레노버 아이디어패드 슬림3
- 오라클
- 코딩초보자
- lenovo ideapad 3
- 레노버 노트북
- 데이터베이스기초
- 슬림3
- 가성비 노트북
- 데이터베이스 DELETE
- 데이터베이스 UPDATE
- 코딩일기
- 티모장인
- SQL
- 탑마이장인
- IdeaPad 3 15ABA7
- 데이터베이스 JOIN
- 데이터베이스 예제
Archives
- Today
- Total
스퐁지송 개발노트
자바스크립트(openAPI) 본문
728x90
OpenWheater 오픈 API를 사용해서 현재위치 뽑아오기
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="name"></h1>
<h1 id="main"></h1>
<h1 id="temp"></h1>
<script src="script.js"></script>
</body>
</html>
js
// const API_KEY = '93222063c13048e2ee959a1231e3217e';
// let name = document.querySelector('#name');
// let main = document.querySelector('#main');
// let temp = document.querySelector('#temp');
// function connect(position) {
// const lat = position.coords.latitude;
// const lon = position.coords.longitude;
// const lang = 'kr';
// console.log(`위도:${lat} 경도:${lon}`);
// const URL = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric&lang=${lang}`;
// fetch(URL).then((response) => response.json())
// .then((data) => {
// console.log(data.name); // 지역이름
// console.log(data.weather[0].main); // 날씨
// console.log(data.main.temp); // 온도
// name.innerHTML = data.name;
// main.innerHTML = data.weather[0].main;
// temp.innerHTML = data.main.temp + '℃'; // ㄹ 한자
// });
// }
// function errorConn() {
// alert('위치연결 실패');
// }
// navigator.geolocation.getCurrentPosition(connect, errorConn);
const API_KEY = '93222063c13048e2ee959a1231e3217e';
let name = document.querySelector('#name');
let main = document.querySelector('#main');
let temp = document.querySelector('#temp');
function connect(position){
const lat = position.coords.latitude;
//현재위치 위도 변수로 저장
const ion = position.coords.longitude;
//현재위치 경도 변수로 저장
const lang = 'kr';
//언어설정 변수
console.log(`위도:${lat} 경도${ion}`);
const URL = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${ion}&appid=${API_KEY}&units=metric&lang=ko`;
fetch(URL).then((response) => response.json())
.then((data) => {
console.log(data.name); //위치 지역 이름 뽑아내기
console.log(data.weather[0].main); //날씨뽑아내기
//배열을 쓴이유 : 개발자창에 저장된 weather배열에 날씨데이터가 들어있어서
console.log(data.main.temp); //온도 뽑아내기
name.innerHTML = data.name;
main.innerHTML = data.weather[0].main;
temp.innerHTML = data.main.temp + '℃'; // ㄹ 누르고 한자키
});
}
function errorConn(event){
alert('위치연결 실패')
}
navigator.geolocation.getCurrentPosition(connect,errorConn);
//내장된 함수코드
728x90
'JAVA_Script' 카테고리의 다른 글
자바스크립트(스크롤 이벤트, 정규식,회원가입페이지만들기) (0) | 2022.12.29 |
---|---|
자바스크립트(캐러셀) (0) | 2022.12.28 |
자바스크립트(버블링) (1) | 2022.12.27 |
자바스크립트(전자시계만들기) (0) | 2022.12.27 |
자바스크립트 (클래스 추가,삭제로 메뉴바,모달,tap메뉴 만들기) (0) | 2022.12.27 |
Comments