JavaScript를 기반으로 실시간 일기예보 애플리케이션 구축-JS 튜토리얼-php.cn

JavaScript를 기반으로 실시간 일기예보 애플리케이션 구축

王林

풀어 주다： 2023-08-09 15:42:26

원래의

1510명이 탐색했습니다.

JavaScript를 기반으로 실시간 일기예보 애플리케이션 구축

JavaScript 기반 실시간 일기예보 애플리케이션 구축

기술의 발전으로 일기예보는 생활에서 없어서는 안 될 부분이 되었습니다. 실시간 일기예보 애플리케이션을 구축하기 위해 JavaScript를 사용하면 최신 날씨 정보를 쉽게 얻고 표시할 수 있습니다. 이 기사에서는 코드 예제와 함께 JavaScript를 사용하여 간단한 실시간 일기 예보 애플리케이션을 구축하는 방법을 소개합니다.

먼저 날씨 데이터를 가져와야 합니다. 날씨 데이터는 인터페이스를 통해 얻을 수 있습니다. 일반적으로 사용되는 무료 인터페이스 중 하나는 OpenWeatherMap(https://openweathermap.org/)입니다. 웹사이트에 등록하고 인터페이스를 사용하여 실시간 날씨 데이터를 얻으려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!