当前位置： 首页 > news >正文

使用JavaScript制作一个简单的天气应用

news 2026/3/27 2:50:13

随着Web开发技术的不断发展，JavaScript已经成为前端开发中不可或缺的一部分。它不仅可以用于创建动态和交互式的用户界面，还可以用于处理各种复杂的任务，如数据验证、动态内容更新、实时通信等。以下是一个使用JavaScript来创建一个简单天气应用的示例。

首先，我们需要一个HTML页面来显示天气信息。我们可以使用一个简单的表单来让用户输入城市名称，并使用一个元素来显示天气信息。

<!DOCTYPE html>  
<html>  
<head>  <title>天气应用</title>  
</head>  
<body>  <h1>天气应用</h1>  <form id="weatherForm">  <label for="city">输入城市名称：</label>  <input type="text" id="city" required>  <button type="submit">查询天气</button>  </form>  <div id="weatherInfo"></div>  <script src="app.js"></script>  
</body>  
</html>

接下来，我们需要在JavaScript中编写代码来处理用户输入和查询天气信息。我们可以使用Fetch API来从天气API获取数据，并使用DOM操作来更新页面上的内容。 

document.getElementById('weatherForm').addEventListener('submit', function(event) {  event.preventDefault(); // 阻止表单的默认提交行为  const cityInput = document.getElementById('city');  const city = cityInput.value.trim(); // 获取输入的城市名称并去除首尾空格  if (city === '') {  alert('请输入有效的城市名称！'); // 如果城市名称无效，则显示警告信息  return;  }  // 查询天气信息  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`) // 替换YOUR_API_KEY为你的API密钥  .then(res => res.json()) // 将响应解析为JSON格式  .then(data => {  const weatherInfo = document.getElementById('weatherInfo'); // 获取显示天气信息的元素  weatherInfo.innerHTML = `城市：${data.name}<br>天气：${data.weather[0].description}<br>温度：${data.main.temp}°C<br>湿度：${data.main.humidity}%`; // 更新天气信息的内容  })  .catch(error => {  console.error('查询天气信息失败：', error); // 如果查询失败，则显示错误信息  });  
});

称作为参数传递给它。然后，我们使用then方法来处理响应，将JSON格式的数据解析为JavaScript对象，并从中提取天气信息。最后，我们使用DOM操作来更新页面上的内容，显示查询到的天气信息。
在JavaScript中，Fetch API 是一种处理网络请求的新方法，它返回一个Promise对象，可以让你更方便地处理异步操作。

在这个示例中，我们使用了fetch函数来发送一个GET请求，并传递了一个URL参数，该参数包含了我们要查询的城市名称。然后，我们使用then方法来处理服务器的响应。服务器返回的数据是一个JSON格式的字符串，我们需要将它解析为JavaScript对象才能访问其中的数据。因此，我们使用另一个then方法来调用响应对象的json方法，将JSON字符串解析为JavaScript对象。

一旦我们获得了JavaScript对象，就可以从中提取天气信息。在这个示例中，我们提取了城市名称、天气描述、温度和湿度信息，并将它们格式化为一个字符串，用于更新页面上的内容。

最后，我们使用catch方法来处理可能发生的错误。如果查询天气信息失败，我们将错误信息打印到控制台中。

当用户在表单中输入城市名称并点击提交按钮时，我们的JavaScript代码将自动发送一个网络请求来查询天气信息，并将结果显示在页面上。这样，用户就可以方便地查看不同城市的天气情况了。

除了查询天气信息外，JavaScript还可以用于实现许多其他功能。例如，你可以使用JavaScript来验证用户输入、动态更新页面内容、处理用户事件、发送网络请求等等。通过结合CSS和HTML，你可以创建出各种动态和交互式的Web应用。

相关文章：

使用JavaScript制作一个简单的天气应用

随着Web开发技术的不断发展&#xff0c;JavaScript已经成为前端开发中不可或缺的一部分。它不仅可以用于创建动态和交互式的用户界面&#xff0c;还可以用于处理各种复杂的任务&#xff0c;如数据验证、动态内容更新、实时通信等。以下是一个使用JavaScript来创建一个简单天气应…...

编程日记 2024/4/14 8:49:49

说说对WebSocket的理解？应用场景？

文章目录 一、是什么二、特点全双工二进制帧协议名握手优点 三、应用场景参考文献 一、是什么 WebSocket&#xff0c;是一种网络传输协议&#xff0c;位于OSI模型的应用层。可在单个TCP连接上进行全双工通信&#xff0c;能更好的节省服务器资源和带宽并达到实时通迅 客户端和…...

编程日记 2024/4/14 8:45:45

网路维护基础知识

1、路由器 路由器&#xff1a;路由器就是将一个可以接入互联网的网路地址分成若干个网路地址可供终端设备连接的网路设备&#xff0c;设备既可以通过有线连接也可以通过无线连接进入互联网 2、交换机 交换机&#xff1a;个人感觉交换机只是为那些有线网路设计的&#xff0c;…...

编程日记 2024/4/14 8:44:44

【GD32】MQ-3酒精检测传感器

2.31 MQ-3酒精检测传感器 MQ-3气体传感器所使用的气敏材料是在清洁空气中电导率较低的二氧化锡(Sn0)。当传感器所处环境中存在酒精蒸气时&#xff0c;传感器的电导率随空气中酒精蒸气浓度的增加而增大。使用简单的电路即可将电导率的变化转换为与该气体浓度相对应的输出信号。…...

编程日记 2024/4/14 8:42:36

如何在极狐GitLab 启用依赖代理功能

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何在[极狐GitLab…...

编程日记 2024/4/14 8:40:34

ES6中 Promise的详细讲解

文章目录 一、介绍状态特点流程 二、用法实例方法then()catchfinally() 构造函数方法all()race()allSettled()resolve()reject() 三、使用场景# 参考文献 一、介绍 Promise&#xff0c;译为承诺&#xff0c;是异步编程的一种解决方案&#xff0c;比传统的解决方案&#xff08;…...

编程日记 2024/4/14 8:39:33

网站建设也会涉及商标侵权，需要注意些！

以前普推知产老杨碰到建站涉及知识产权侵权的&#xff0c;但是大多数是其它方面的&#xff0c;前几天看到某同行说由于给客户建设网站&#xff0c;由于网站名称涉及商标被起诉要索赔几十万。 当时同行给做网站时还看了下营业执照&#xff0c;上面的主体名称与网站名称也是一致…...

编程日记 2024/4/14 8:38:32

Leetcode算法训练日记 | day25

一、组合总和Ⅲ 1.题目 Leetcode&#xff1a;第 216 题 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组合可以以任何顺…...

编程日记 2024/4/14 8:36:29

第23次修改了可删除可持久保存的前端html备忘录:增加了百度引擎

第22次修改了可删除可持久保存的前端html备忘录视频背景分离&#xff0c;增加了本地连接&#xff0c;增加了纯CSS做的折叠隐藏修改说明 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport…...

编程日记 2024/4/14 8:35:28

vue3中使用antv-S2表格（基础功能版）

先看展示效果&#xff1a; 可以调整行宽、列宽、自定义字段图标、表头图标、添加排序、显示总计、小计等 首先确保搭建一个vue3项目环境&#xff0c;从0开始的小伙伴着重看第一点&#xff1a; 一、搭建vue3项目环境 首先创建一个vue3vitets项目&#xff0c;可以查看下面相关…...

编程日记 2024/4/14 8:30:21

算数逻辑单元

目录 一、王道考研ppt总结 二、个人理解 一、王道考研ppt总结 二、个人理解 74181是一款经典的ALU 可以进行加减乘除和与或非、异或等计算&#xff1b;还有移位和求补等 输入有一个CU信号&#xff0c;即控制单元信号&#xff0c;有一个M信号&#xff0c;当M为1时&#xff0c;进…...

编程日记 2024/4/14 8:25:17

clickhouse深入浅出

基础知识原理 极致压缩率 极速查询性能 列式数据库管理 &#xff0c;读请求多 大批次更新或无更新 读很多但用很少 大量的列 列的值小数值/短字符串 一致性要求低 DBMS&#xff1a;动态创建/修改/删除库 表 视图&#xff0c;动态查/增/修/删&#xff0c;用户粒度设库…...

编程日记 2024/4/14 8:24:16

TPS2041A 至 TPS2044A 、TPS2051A 至 TPS2054A

这份文件是德州仪器&#xff08;Texas Instruments&#xff09;关于一系列电流限制型电源分配开关的数据手册&#xff0c;型号包括 TPS2041A 至 TPS2044A 和 TPS2051A 至 TPS2054A。这些开关适用于可能遇到重负载电容负载和短路的应用程序。以下是该数据手册的核心内容概要&…...

编程日记 2024/4/14 8:23:14

Excel从零基础到高手【办公】

第1课 - 快速制作目录【上篇】第1课 - 快速制作目录【下篇】第2课 - 快速定位到工作表的天涯海角第3课 - 如何最大化显示工作表的界面第4课 - 给你的表格做个瘦身第5课 - 快速定位目标区域所在位置第6课 - 快速批量填充序号第7课 - 按自定义的序列排序第8课 - 快速删除空白行第…...

编程日记 2024/4/14 8:22:13

AI图书推荐：如何在课堂上使用ChatGPT 进行教育

ChatGPT是一款强大的新型人工智能&#xff0c;已向公众免费开放。现在&#xff0c;各级别的教师、教授和指导员都能利用这款革命性新技术的力量来提升教育体验。 本书提供了一个易于理解的ChatGPT解释&#xff0c;并且更重要的是&#xff0c;详述了如何在课堂上以多种不同方式…...

编程日记 2024/4/14 8:19:10

Redis中的集群(九)

集群 消息 集群中的各个节点通过发送和接收消息(message)来进行通信&#xff0c;我们称发送消息的节点为发送者(sender),接收消息 的节点成为接收者&#xff0c;如图所示。节点发送的消息主要有以下五种: 1.MEET消息:当发送者接到客户端发送的CLUSTER MEET命令时&#xff0c…...

编程日记 2024/4/14 8:15:07

funasr 麦克风实时流语音识别

参考： https://github.com/alibaba-damo-academy/FunASR chunk_size 是用于流式传输延迟的配置。[0,10,5] 表示实时显示的粒度为 1060=600 毫秒，并且预测的向前信息为 560=300 毫秒。每个推理输入为 600 毫秒（采样点为 16000*0.6=960），输出为相应的文本。对于最后一个语音…...

编程日记 2024/4/14 8:14:06

英语学习笔记-音节划分和字母发音对照表

国际音标 音节划分 英语音节以元音为主体构成的发音单位&#xff0c;一般说来元音发音响亮&#xff0c;可以构成音节&#xff0c;辅音发音不响亮&#xff0c;不能单独构成音节 ((m] (n] [I] 例外)。 从单词拼写形式上看&#xff0c;有几个元字组就有几个音节 音节划分规则 长…...

编程日记 2024/4/14 8:12:03

使用odbc链接dm8数据库

一、环境说明 windows11 VMware Workstation 17 Pro ubuntu22.04 docker $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy因docker版本的dm8中&#xff0c;没有…...

编程日记 2024/4/14 8:11:02

开源项目one-api的k8s容器化部署（上）-- 制作镜像及部署准备

一、背景 最近需要对开源项目one-api进行k8s容器化部署&#xff0c;主要分以下几个步骤&#xff1a; 制作docker镜像申请mysql和redis数据库docker-compose部署方式k8s部署方式 整个的篇幅比较长&#xff0c;将会分成上下两篇来阐述。 二、制作docker镜像 开源项目one-api…...

编程日记 2024/4/14 8:05:56

智能家居控制中心：OpenClaw桥接Qwen3-32B-Chat与HomeAssistant

智能家居控制中心&#xff1a;OpenClaw桥接Qwen3-32B-Chat与HomeAssistant 1. 为什么需要AI驱动的家居控制中心 去年冬天的一个深夜&#xff0c;我被空调异常制热的噪音惊醒。摸黑在手机APP上反复调整参数无果后&#xff0c;突然意识到&#xff1a;如果有个能理解自然语言的智…...

编程新知 2026/3/27 2:44:46

为什么3分钟搞懂AI

炒又幕燃、RedisShake 核心介绍 RedisShake 是阿里云 Tair 开源团队推出的轻量级Redis数据处理工具&#xff0c;无需复杂依赖&#xff0c;部署简单、操作便捷&#xff0c;能适配自建Redis、云Redis等多种环境&#xff0c;解决Redis全生命周期的数据管理难题。 1.1 四大核心功能…...

编程新知 2026/3/27 1:54:38

CGAL-6.0.1在Win11与VS2019环境下的高效编译与配置指南

1. 环境准备&#xff1a;搭建Win11VS2019开发环境 在开始编译CGAL-6.0.1之前&#xff0c;我们需要确保开发环境配置正确。我实测发现&#xff0c;Win11系统与VS2019的组合存在一些特殊配置需求&#xff0c;这里分享几个关键检查点&#xff1a; 首先确认VS2019的安装组件。打开V…...

编程新知 2026/3/27 1:42:29

【经验贴】运营岗考过CDA数据分析师一级经验分享

终于把CDA一级拿下了&#xff01;查成绩那一刻真的挺开心的&#xff0c;不是多难&#xff0c;但全程自己一点点学出来&#xff0c;特别有成就感。今天就把我整个备考过程老老实实写出来&#xff0c;给正在准备的小伙伴一个参考。一、备考原因我最开始考CDA&#xff0c;完全是因…...

编程新知 2026/3/26 22:46:22

从 POST 到落库回写：彻底讲透 SAP Gateway 中 Create Operation 的实现

在经典的 SAP Gateway 开发里，Create Operation 看上去只是一次新增动作，真正落到运行时，却牵涉到一条非常完整的链路：客户端发起 HTTP POST 请求，请求体里的 OData 数据被 Gateway 运行时反序列化成 ABAP 结构，开发者在对应的 <Entity Set>_CREATE_ENTITY 方法里接…...

编程新知 2026/3/26 22:20:17

后端架构师转型AI智能体架构师：3个月实战路径，收藏这份落地指南

如果你本身就是后端/全栈/架构师出身&#xff0c;这意味着你已经有了一套非常扎实的“确定性系统”的构建能力——分布式、高并发、数据库事务、系统稳定性&#xff0c;这些都是你的底牌。 而AI智能体恰恰是“不确定性系统”&#xff08;大模型&#xff09;与“确定性系统”&am…...

编程新知 2026/3/26 21:21:57

ChatTTS 安装与部署实战：从零搭建到性能调优

最近在做一个语音合成的项目&#xff0c;选型时看中了 ChatTTS&#xff0c;它开源的特性、不错的音质和可控性很吸引人。但在实际动手安装和部署时&#xff0c;发现从个人电脑跑起来到服务器上稳定服务&#xff0c;中间有不少坑。今天就把我这一路从零搭建到性能调优的实战经验…...

编程新知 2026/3/26 20:15:43

新手零门槛入门：用快马生成你的第一个jiyutrainer式Python练习脚本

作为一个刚接触Python的新手&#xff0c;想要练习编程却常常被各种环境配置和工具安装搞得晕头转向。最近我发现了一个特别适合新手入门的方法——使用InsCode(快马)平台来生成自己的第一个Python练习脚本。下面我就来分享一下这个零门槛的入门体验。 为什么选择jiyutrainer式练…...

编程新知 2026/3/26 19:04:48

软电话通话30秒自动挂断？一文讲透FreeSWITCH通话超时问题

当你满怀期待地搭建好FreeSWITCH&#xff0c;用两个软电话成功呼叫&#xff0c;却发现通话总是在30秒左右莫名其妙地中断——别急&#xff0c;这是SIP新手最常遇到的“经典Bug”。本文将为你抽丝剥茧&#xff0c;彻底解决这个问题&#xff0c;并附带其他可能引发通话异常中断的…...

编程新知 2026/3/26 18:07:57

【Nano Bana】谷歌风格智能手表UI界面

谷歌风格智能手表UI提示词&#xff08;专业工程版设计/开发专用&#xff09; 在嵌入式智能手表UI设计与开发过程中&#xff0c;符合行业规范且适配开发需求的提示词&#xff0c;是高效生成可用界面、对接GUI框架的关键。本文汇总了适配Nano Banana工具的谷歌风格智能手表UI提示…...

编程新知 2026/3/26 17:51:54