날씨, 위치확인 기능 이용하기

Navigator

Navigator 함수는 user의 geolocation(위치)을 준다.

ex)

navigator.geolocation.getCurrentPosition(a,b)

a= 모든게 잘 되었을 때 실행될 함수
b= 에러가 발생했을 때 실행될 함수

ex)

function onGeoOk(position){
	const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    
    console.log("You live in ", lat, lon);}
    
function onGeoError(){
	alert("Can't find you! No weather for you!")}



navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError)

참고) longitude: 경도 latitude: 위도

API 이용하기

API : 간단히 말해서 다른 server와 이야기할 수 있는 방법

openweathermap.org 사이트 이용하기

API - current weather data 이용하기 (open weather map server와 이야기하기)

Fetch()

Fetch함수 : js가 url을 부른다.
ex)

function onGeoOk(position){
const url = `url 주소 적기`;
fetch(url);}

network에서 url을 확인할 수 있다.

fetch는 promise이다. 즉 당장 무언가가 일어나지 않고 시간이 좀 걸린뒤에 일어난다는 특징을 가지고 있다.

• url내의 화씨온도를 섭씨온도로 바꾸어주는 법: API page 내에 units of measurement 내에 &units=metric을 추가표기하면 된다는 정보가 나온다. url 주소 뒤에 &units=metric 추가로 붙여주면 됌!

Fetch 문법

ex)

fetch(url).then((response)=> response.JSON().then((data)=>{ 
	console.log(data.name, data.weather[0].main);}

{} 내에 url내의 어떠한 정보도 가지고 올 수 있다.

도시와 날씨 정보 가져오기

1. html 내에 도시와 기온 정보 적을 공간 만들기

<div id= "weather">
	<span></span>
    <span></span>
</div>

2. js 내에서 html element 만들기

function onGeoOk(position){
fetch(url).then((response)=> response.JSON()).then((data)=>{ 
	const weather = document.querySelector("#weather span:first-child");
    const city = document.querySelector("#weather span:last-child");
    city.innerText = data.name;
    weather.innerText = data.weather[0].main;}}

만약 weather의 innerText로 날씨/기온 으로 표시하고싶다면

weather.innerText = `${data.weather[0].main}/${data.main.temp}`