每周天气预报应用程序开发

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何创建一个天气预报应用程序,该应用程序可以显示特定地点的每周天气信息。该项目涉及从 API 获取天气数据、解析响应,并动态更新 HTML 元素以向用户呈现天气预报。

👀 预览

天气预报应用程序预览

🎯 任务

在这个项目中,你将学习:

  • 如何使用 jQuery 的 AJAX 功能从 API 获取天气预报数据
  • 如何将获取到的数据绑定到网页上相应的 HTML 元素
  • 如何以用户友好的格式显示每周天气预报信息

🏆 成果

完成这个项目后,你将能够:

  • 创建一个简单的天气预报应用程序,为用户提供每周天气信息
  • 理解如何使用 AJAX 请求从 API 获取数据
  • 展示使用 jQuery 操作 DOM 和更新 HTML 元素的能力

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("`DOM Traversal`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") javascript/NetworkingGroup -.-> javascript/api_interact("`API Interaction`") subgraph Lab Skills javascript/dom_select -.-> lab-445676{{"`每周天气预报应用程序开发`"}} javascript/dom_manip -.-> lab-445676{{"`每周天气预报应用程序开发`"}} javascript/dom_traverse -.-> lab-445676{{"`每周天气预报应用程序开发`"}} javascript/http_req -.-> lab-445676{{"`每周天气预报应用程序开发`"}} javascript/api_interact -.-> lab-445676{{"`每周天气预报应用程序开发`"}} end

设置项目结构

在这一步中,你将设置项目文件和结构。请按照以下步骤完成此操作:

打开项目文件夹。目录结构如下:

├── images        ## 图像资源
├── js            ## js 文件和 json 文件的目录
├── index.html    ## 天气预报页面
├── style.css     ## css 文件

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来,在虚拟机顶部打开 “Web 8080” 并手动刷新,你将看到页面。

初始项目结构视图

获取天气预报数据

在这一步中,你将学习如何使用提供的 API 获取 W 镇的每周天气预报数据。

  1. 在代码编辑器中打开 js/index.js 文件。
  2. 找到负责获取天气预报数据的 getweather() 函数。
  3. getweather() 函数内部,使用 jQuery 的 $.get() 方法向 js/weather.json API 端点发送 GET 请求。
// TODO
$.get("js/weather.json", function (data) {
  // 将天气预报数据绑定到 HTML 元素
  //...
});
  1. API 的响应数据将作为 data 参数传递给回调函数。此数据包含每周天气预报信息。

将天气预报数据绑定到 HTML

在这一步中,你将学习如何把获取到的天气预报数据绑定到页面上相应的 HTML 元素。

  1. $.get() 方法的回调函数内部,找到你要将数据绑定到 HTML 的代码位置。
  2. 使用 jQuery 选择必要的 HTML 元素,比如天气图标、天气描述、温度和风的信息。
function getweather() {
  // TODO
  $.get("js/weather.json", function (data) {
    let item = $(".item");
    let img, one, two, three, time;
    for (let i = 0; i < data.result.length; i++) {
      img = item[i].children[0];
      one = item[i].children[1].children[0];
      two = item[i].children[1].children[1];
      three = item[i].children[1].children[2];
      time = item[i].children[1].children[3].children;
      img.src = data.result[i].weather_icon;
      one.innerText = data.result[i].weather;
      two.innerText = data.result[i].temperature;
      three.innerText = data.result[i].winp;
      time[0].innerText = data.result[i].days;
      time[1].innerText = data.result[i].week;
    }
  });
}
  1. 上面的代码遍历 data.result 数组,该数组包含每周天气预报信息。对于每个项目,它选择相应的 HTML 元素,并用 API 响应中的数据更新它们的内容。
  2. 将更改保存到 js/index.js 文件。
  3. 刷新网页,你应该会看到如目标图像所示的每周天气预报信息。
每周天气预报显示

恭喜!你已经通过从 API 获取数据并将其绑定到页面上的 HTML 元素,成功完成了天气预报项目。

✨ 查看解决方案并练习

总结

恭喜!你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程