21.11.10 - TIL

10646 ワード
TIL JavaScript フロントエンド テキストリンク
FEチームミニプロジェクト
現在の位置、位置の天候を取得
天気情報を取得するには、天気オープンAPIを使用します.
完全なコード
const weatherTemperate = document.querySelector('.temperate');
let temp_max; // 최고온도
let temp_min; // 최저 온도
let weather; // 현재 기상 상태

init();

function init() {
  positionWeather();
}

// 현재 위치의 날씨 정보를 가져오는 함수
function positionWeather() {
  const location = JSON.parse(localStorage.getItem('location'));

  if (location === null) getCoords();
  else getWeather(location.latitude, location.longitude);
}

// 현재 위치를 가져오는 함수
function getCoords() {
  navigator.geolocation.getCurrentPosition(successGeo, errorGeo);
}

// 현재 위치를 성공적으로 가져왔을 때 실행되는 함수
function successGeo(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;

  const coordsObj = {
    latitude,
    longitude,
  };
  localStorage.setItem('location', JSON.stringify(coordsObj));
}

// 현재 위치를 가져오지 못했을 때 실행되는 함수
function errorGeo() {
  console.log('Location is not correct');
}

// Open Weather API를 가져오는 함수
function getWeather(lat, lon) {
  fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid={자신만의 api}&units=metric`,
  )
    .then(response => {
      return response.json();
    })
    .then(json => {
      console.log(json);
      temp_max = Math.floor(json.main.temp_max);
      temp_min = Math.floor(json.main.temp_min);
      weather = json.weather[0].main;
      weatherInfo();
      weatherTemperate.innerHTML = `${temp_min}° ~ ${temp_max}°`;
    });
}
振り返る
関数に変える練習をすべきだと思います!最初はめちゃくちゃに書いて、必要な機能を集めて関数にするので、機能が一目瞭然です.昨日はコールバック関数を使ったときの問題を発見して解決しましたが、それを普通の関数に書くのも解決策の一つのようです!
最後に振り返る
今日は心がドキドキして、たくさんできませんでした.
私が正しい道をしたかどうかは分からないが...やることはたくさんありますが、それをつついていると思います.勉強の方向についてもっと真剣に考えなければならない.
MySQLデータベースdump,restoreの時の小さい細い点
白駿18429.ルートロス(Python)