使用JavaScript构建实时天气预报应用
1.前言
天气预报应用是一种广泛使用的应用程序。在过去，天气预报主要靠气象专业人士通过计算天气模型来预测未来的天气情况。而今天，我们可以通过互联网上提供的各种气象数据和天气预报API，来轻松获得准确的天气预报信息。在本文中，我们将向您展示如何使用JavaScript来构建一个实时天气预报的应用程序。
2.获取天气预报数据
在构建这个应用程序之前，我们需要获取天气预报数据。幸运的是，现在有很多气象数据提供商都有实时天气预报API。在这个应用程序中，我们将使用OpenWeather API来获取天气预报数据。
首先，我们需要去OpenWeather网站注册账户，然后登录后找到API key。API key 就像是对API的密码，我们需要用它才可以获得数据。
一旦我们有了API key，我们就可以开始获取天气预报数据。我们使用的是OpenWeather的班级预报功能，它可以提供接下来几天每隔三小时的天气预报。在我们从API中获取数据之后，我们可以将其显示在应用程序中。
// 在这个文件中，请务必保护您的API密钥！
const API_KEY = '[API key]';
const API_URL = 'https://api.openweathermap.org/data/2.5/forecast?q=London,uk&appid=' + API_KEY;
fetch(API_URL)
.then(response => response.json())
.then(data => {
console.log(data);
});
我们通过上面的代码向OpenWeather API发送GET请求，并在返回值中包含了JSON格式的天气预报数据。使用fetch函数的优点是，它返回一个Promise对象，可以帮助我们处理异步任务。
一旦我们调用API并获得数据，我们就需要解析它并将其呈现在浏览器上。为此，我们需要使用JavaScript的DOM操作功能。我们可以使用document.createElement()和document.appendChild()方法创建新元素，并将它们添加到HTML文件中的适当位置中。
3.创建界面
首先，我们需要创建HTML文件。我们将使用一个简单的HTML和CSS模板来创建用户界面。在我们的HTML文件中，我们将包含一个搜索栏，用户可以在其中输入城市名称，并按下一个按钮来获取当前天气情况，然后显示一些元素来呈现数据。
<input type='text' placeholder='输入城市名称...' id='search-box'/>
<button id='submit-btn'>查询</button>
<div class='weather-data'>
<h2 id='city-name'></h2>
<h2 id='weather-description'></h2>
<h2 id='temperature'></h2>
<h2 id='loading'></h2>
</div>
上面的代码中，我们提供了一个搜索框和一个按钮。当用户输入他们要查询的城市名称后，他们可以通过按下“查询”按钮来查询天气。当我们获取到天气数据时，我们将把它保存在四个不同的div元素中：
city-name：用于呈现所查询城市的名称
weather-description：用于呈现天气概况
temperature：用于呈现当前温度
loading：用于显示正在加载
接下来，我们需要通过CSS来对这些元素进行样式化。如下所示，我们可以使应用程序看起来更好。
input {
width: 200px;
}
#submit-btn {
background-color: #4caf50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
}
.weather-data {
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
margin-top: 20px;
}
.weather-data h2 {
margin-bottom: 10px;
}
#loading {
color: grey;
}
4.处理用户输入
我们需要通过JavaScript来获取用户输入。当用户输入城市名称并点击“查询”按钮时，我们就可以将它作为输入参数，使用OpenWeather的API来获取天气预报数据。
const searchBox = document.querySelector('#search-box');
const submitButton = document.querySelector('#submit-btn');
const cityName = document.querySelector('#city-name');
const weatherDescription = document.querySelector('#weather-description');
const temperature = document.querySelector('#temperature');
const loading = document.querySelector('#loading');
submitButton.addEventListener('click', event => {
event.preventDefault();
const city = searchBox.value;
if (city.length === 0) {
alert('请输入城市名称');
return;
}
loading.textContent = '加载中...';
fetchData(city);
});
function fetchData(city) {
const API_KEY = '[API key]';
const API_URL = 'https://api.openweathermap.org/data/2.5/forecast?q=' + city + '&appid=' + API_KEY;
fetch(API_URL)
.then(response => response.json())
.then(data => {
console.log(data);
loading.textContent = '';
cityName.textContent = data.city.name;
weatherDescription.textContent = data.list[0].weather[0].description;
temperature.textContent = Math.round(data.list[0].main.temp - 273.15) + '°C';
})
.catch(() => {
alert('查询失败，请检查输入!');
loading.textContent = '';
});
}
在上面的代码中，我们使用querySelector()方法来获取搜索框和查询按钮，并使用事件监听器来监视当用户点击“查询”按钮时的事件。在用户点击“查询”按钮时，我们将获取搜索框中的文本，并使用fetch()方法向OpenWeatherAPI发送GET请求。
一旦我们调用API并得到了数据，我们就开始使用DOM操作将数据添加到HTML文件中。我们在cityName、weatherDescription和temperature变量中保存获取到的天气信息，并使用textContent方法将其添加到HTML文档中。最后，我们还处理了错误情况并进行了简单的错误处理。
5.总结
通过使用JavaScript和OpenWeather的API，我们已经创建了一个实时天气预报应用程序。在这个应用程序中，我们已经使用户可以查询他们所在地区的天气，并获得准确和实时的天气预报信息。我们现在有一个完整的应用程序，它可以通过API获取数据并将其呈现在HTML文件中。我们可以使用类似于上面的代码来扩展和自定义这个应用程序。