JavaScript に基づいたリアルタイム天気予報アプリケーションの構築-jsチュートリアル-php.cn

JavaScript に基づいたリアルタイム天気予報アプリケーションの構築

王林

リリース： 2023-08-09 15:42:26

オリジナル

1510 人が閲覧しました

JavaScript に基づいたリアルタイム天気予報アプリケーションの構築

テクノロジーの発展に伴い、天気予報は生活に欠かせないものになりました。 JavaScript を使用してリアルタイム天気予報アプリケーションを構築すると、最新の気象情報を簡単に取得して表示できます。この記事では、JavaScript を使用して簡単なリアルタイム天気予報アプリケーションを構築する方法をコード例とともに紹介します。

まず、気象データを取得する必要があります。気象データはインターフェイスを通じて取得できます。一般的に使用される無料インターフェイスの 1 つは OpenWeatherMap (https://openweathermap.org/) です。 Web サイトに登録し、インターフェイスを使用してリアルタイムの気象データを取得するための API キーを申請します。

気象データを取得する手順は次のとおりです。

HTML ファイルの作成
天気予報アプリケーションのインターフェイスを構築するために、index.html という名前の HTML ファイルを作成します。天気情報と検索ボックスを表示するには、HTML ファイルの本文に ID「weather-app」の div 要素と ID「search-form」の form 要素を追加します。

<!DOCTYPE html>
<html>
<head>
  <title>实时天气预报应用</title>
</head>
<body>
  <div id="weather-app">
    <form id="search-form">
      <input type="text" id="search-input" placeholder="输入城市名">
      <button type="submit">搜索</button>
    </form>
    <div id="weather-info"></div>
  </div>

  <script src="app.js"></script>
</body>
</html>

ログイン後にコピー

JavaScript ファイルの作成
気象データの取得と表示を処理するため、同じディレクトリに app.js という名前の JavaScript ファイルを作成します。

// 使用fetch方法获取天气数据
function getWeatherData(city) {
  const apiKey = 'YOUR_API_KEY'; // 替换成你的API密钥
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

  return fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      return {
        cityName: data.name,
        weather: data.weather[0].description,
        temperature: data.main.temp
      };
    });
}

// 更新天气信息
function updateWeatherInfo(weatherData) {
  const weatherInfo = document.getElementById('weather-info');
  weatherInfo.innerHTML = `
    <h2>${weatherData.cityName}</h2>
    <p>天气状况：${weatherData.weather}</p>
    <p>温度：${Math.round(weatherData.temperature - 273.15)}℃</p>
  `;
}

// 监听表单提交事件
const searchForm = document.getElementById('search-form');
searchForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const searchInput = document.getElementById('search-input');
  const city = searchInput.value;
  
  // 获取天气数据并更新天气信息
  getWeatherData(city)
    .then(data => updateWeatherInfo(data));
});

ログイン後にコピー

これで、簡単なリアルタイム天気予報アプリケーションが完成しました。ユーザーが検索ボックスに都市名を入力すると、アプリケーションは該当する都市の気象情報を取得してページに表示します。

上記は、JavaScript を使用してリアルタイム天気予報アプリケーションを構築する手順です。天気インターフェースを呼び出してデータを取得し、JavaScript を使用してデータを処理および表示することで、実用的な天気予報アプリケーションを簡単に構築できます。もちろん、これは単なる例であり、必要に応じてアプリケーションの機能やインターフェイスを拡張したり、美しくしたりすることができます。

上記の内容があなたのお役に立てば幸いです。プログラミングを楽しんでください。

以上がJavaScript に基づいたリアルタイム天気予報アプリケーションの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。