构建天气应用程序 JavaScript

在这个教程中，我们将介绍如何使用 JavaScript 构建一个天气应用程序。我们将使用 OpenWeather API 来获取天气数据，并使用 Bootstrap 来构建用户界面。

准备工作

在开始之前，您需要进行以下准备工作：

1. 注册一个 OpenWeather API 帐户并获取 API 密钥。
2. 确保您的项目中包含以下文件:

• index.html - 包含您的 HTML 和 JavaScript 代码。
• styles.css - 包含您的 CSS 样式。
• bootstrap.min.css - 包含 Bootstrap 样式。
• jQuery.min.js - 包含 jQuery 库，它是 Bootstrap 主要依赖项之一。
• bootstrap.min.js - 包含 Bootstrap JavaScript。

获取天气数据

首先，我们将使用 JavaScript 中的 fetch() 方法来获取天气数据。使用 API 密钥和所需城市的名称构建 API URL，并在获取响应后将 JSON 数据解析为 JavaScript 对象。

function getWeather(city) {
    const apiKey = 'YOUR_API_KEY_HERE';
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // 解析数据并更新 UI
        })
        .catch(error => console.error(error));
}

确保您将 YOUR_API_KEY_HERE 替换为您的 OpenWeather API 密钥。

更新用户界面

接下来，我们将使用 JavaScript 更新用户界面以显示所选城市的天气信息。我们将使用 Bootstrap 的卡片组件来显示天气信息，如下所示：

<div class="card">
    <div class="card-header">
        <h4 class="card-title">City Name</h4>
    </div>
    <div class="card-body">
        <p class="card-text">Temperature: 25°C</p>
        <p class="card-text">Humidity: 65%</p>
        <p class="card-text">Condition: Clear</p>
    </div>
</div>

使用 JavaScript 更新这些值：

function updateUI(data) {
    const cityName = data.name;
    const temperature = data.main.temp;
    const humidity = data.main.humidity;
    const condition = data.weather[0].description;
    
    const cardTitle = document.querySelector('.card-title');
    const temperatureText = document.querySelector('.temperature');
    const humidityText = document.querySelector('.humidity');
    const conditionText = document.querySelector('.condition');
    
    cardTitle.textContent = cityName;
    temperatureText.textContent = `Temperature: ${temperature}°C`;
    humidityText.textContent = `Humidity: ${humidity}%`;
    conditionText.textContent = `Condition: ${condition}`;
}

处理用户输入

最后，我们需要处理用户输入以允许他们搜索城市并显示天气信息。我们将使用事件监听器来监听表单提交事件，并从输入字段中获取城市名称，如下所示：

const form = document.querySelector('form');

form.addEventListener('submit', event => {
    event.preventDefault();
    const city = document.querySelector('#city').value;
    getWeather(city);
});

并确保您的 HTML 包含一个表单：

<form>
    <div class="form-group">
        <label for="city">City:</label>
        <input type="text" class="form-control" id="city">
    </div>
    <button type="submit" class="btn btn-primary">Get Weather</button>
</form>

完整的 HTML、CSS 和 JavaScript 代码可以在我的 GitHub 存储库 中找到。

希望您喜欢这个教程，祝您好运！