HTML与JavaScript：构建动态交互式Web页面的基石

HTML与JavaScript：构建动态交互式Web页面的基石

在现代Web开发中，HTML和JavaScript是不可或缺的两位主角。HTML负责页面的结构和内容，而JavaScript则赋予页面生命，使其能够响应用户交互、动态更新内容，并与后端服务进行通信。本文将深入探讨这两种语言的基础知识、核心语法，以及它们如何协同工作，共同构建出我们日常所见的丰富多彩的Web应用。
在这里插入图片描述

一、HTML：网页的骨架与内容

HTML（HyperText Markup Language，超文本标记语言）是Web页面的标准标记语言。它使用一系列“标签”（Tags）来定义网页的结构和内容，告诉浏览器如何显示文本、图片、链接、表格等元素。

1.1 HTML 基础概念

  • 标签 (Tag)：HTML标签通常由尖括号包围，如 <p>。大多数标签成对出现，包括开始标签（<p>）和结束标签（</p>），内容位于两者之间。有些标签是自闭合的，如 <meta>、<link>、<img>。
  • 元素 (Element)：从开始标签到结束标签的所有内容，包括标签本身，都称为一个元素。例如 <p>这是一个段落</p> 是一个段落元素。
  • 属性 (Attribute)：属性为HTML元素提供额外的信息。它们通常以 name="value" 的形式出现在开始标签中。
    • id：为元素提供唯一的标识符，JavaScript常通过 id 来精确操作特定元素。
    • class：为元素分配一个或多个类名，用于CSS样式或JavaScript选择一组元素。
    • src：指定外部资源的路径，如图片或脚本文件。
    • href：指定链接的目标URL或外部样式表的路径。
    • style：直接为元素应用内联CSS样式。
    • lang：指定元素内容的语言。
    • name：为表单元素命名，或为 meta 标签提供元数据名称。
    • content：为 meta 标签提供元数据内容。
    • rel：指定链接的类型，如 stylesheet。
    • type：指定脚本或样式表的类型。
    • colspan / rowspan：在表格中合并单元格。
    • onclick：一个事件属性，当元素被点击时执行指定的JavaScript代码。

1.2 HTML 页面基本结构

一个标准的HTML5页面通常包含以下结构：

<!DOCTYPE html> <!-- 文档类型声明，告诉浏览器是HTML5 -->
<html lang="zh-CN"> <!-- HTML文档的根元素，指定语言 -->
<head> <!-- 头部，包含元数据，不直接显示在页面上 --><meta charset="UTF-8"> <!-- 字符编码，防止乱码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式设计关键 --><title>页面标题</title> <!-- 浏览器标签页显示的标题 --><link rel="stylesheet" href="style.css"> <!-- 引入外部CSS样式表 --><script src="path/to/some-library.js"></script> <!-- 引入外部JavaScript库 -->
</head>
<body> <!-- 主体，包含所有可见的页面内容 --><header> <!-- 页面头部区域 --><h1>网站主标题</h1></header><main> <!-- 页面主要内容区域 --><section> <!-- 页面中的一个独立主题区域 --><h2>子标题</h2><p>这是一个段落。</p><div id="my-container"> <!-- 一个通用容器，常用于布局或JavaScript操作 --><canvas id="my-chart"></canvas> <!-- 用于绘图的画布 --></div></section><table> <!-- 表格 --><thead> <!-- 表格头部 --><tr><th>列标题</th></tr></thead><tbody> <!-- 表格主体，数据行 --><tr><td>数据</td></tr></tbody></table></main><footer> <!-- 页面底部区域 --><p>&copy; 版权信息</p></footer><script src="script.js"></script> <!-- 引入我们自己的JavaScript文件 -->
</body>
</html>

1.3 HTML 在 Demo 中的作用

在我们的GIS监测Demo中，index.html 扮演了以下角色：

  • 布局容器：通过 <header>, <main>, <section>, <div> 等元素，构建了Dashboard、设备列表和设备详情页的整体布局。
  • 内容占位符：使用带有 id 属性的 <p>, <span>, <ul>, <tbody>, <canvas>, <div> 等元素，为JavaScript动态填充数据、列表项和绘制图表预留了位置。
  • 资源引入：引入了 style.css 进行页面美化，引入了 Chart.js 和 Plotly.js 两个图表库，以及我们核心的 script.js 文件来驱动页面的动态行为。
  • 事件绑定：通过 onclick 属性（如 <button onclick="showSection('dashboard')">）直接在HTML中绑定了简单的JavaScript事件处理函数。

二、JavaScript：网页的生命与交互

JavaScript（通常简称为JS）是一种高级的、解释型的编程语言，主要用于为Web页面添加交互性、动态内容和复杂功能。它可以在用户的浏览器中直接运行，无需服务器端编译。

2.1 JavaScript 基础概念与语法

  • 变量声明：
    • const：声明一个常量，一旦赋值后不能再改变。适用于不希望被重新赋值的变量。
      const API_BASE_URL = 'http://127.0.0.1:5000/api';
    • let：声明一个块级作用域的变量，可以被重新赋值。适用于值会发生变化的变量。
      let devices = [];
let currentDetailDeviceId = null;
  • 函数 (Functions)：组织代码块，使其可重用。
    • 函数声明：
      function updateDashboard() {// ... 函数体 ...
}
    • 异步函数 (async/await)：用于处理异步操作（如网络请求），使异步代码看起来像同步代码，提高可读性。
      • async 关键字用于声明一个异步函数。
      • await 关键字只能在 async 函数内部使用，它会暂停函数的执行，直到一个Promise（异步操作的结果）被解决（fulfilled）或拒绝（rejected）。
      async function updateRealtimeData() {try {const response = await fetch(`${API_BASE_URL}/devices`); // 等待网络请求完成if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}devices = await response.json(); // 等待JSON解析完成} catch (error) {console.error('Error fetching devices:', error);devices = [];}// ... 后续操作 ...
}
  • DOM 操作 (Document Object Model)：JavaScript通过DOM API来访问和操作HTML页面的结构、内容和样式。
    • document.getElementById('some-id')：通过元素的 id 获取HTML元素对象。
    • element.textContent：获取或设置元素的文本内容。
    • element.innerHTML：获取或设置元素的HTML内容（包括子元素）。
    • element.style.display = 'none'：修改元素的CSS样式。
    • document.createElement('tag-name')：创建新的HTML元素。
    • parentElement.appendChild(childElement)：将子元素添加到父元素中。
    • element.insertRow()：在表格中插入新行。
  • 事件监听 (Event Listeners)：JavaScript可以监听用户或浏览器触发的事件，并在事件发生时执行相应的代码。
    • document.addEventListener('DOMContentLoaded', callback)：当HTML文档完全加载和解析后触发。
    • element.onclick = function() { ... } 或 element.addEventListener('click', callback)：当元素被点击时触发。
  • 定时器 (Timers)：
    • setInterval(callback, delay)：每隔 delay 毫秒重复执行 callback 函数。常用于实现实时更新或动画。
      setInterval(updateRealtimeData, 3000); // 每3秒执行一次 updateRealtimeData
  • Fetch API：现代浏览器提供的用于进行网络请求的API，返回Promise对象，常与 async/await 结合使用。
    fetch(url).then(response => response.json()) // 处理响应，解析JSON.then(data => console.log(data)) // 处理数据.catch(error => console.error('Error:', error)); // 错误处理
  • 数组方法：JavaScript提供了丰富的数组方法来处理数据。
    • Array.from()：从类数组对象或可迭代对象创建新的数组实例。
    • map()：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
    • filter()：创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
    • reduce()：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
    • sort()：对数组的元素进行排序。
    • shift()：从数组中删除第一个元素，并返回该元素的值。
    • push()：将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

2.2 JavaScript 在 Demo 中的作用

script.js 是Demo的“大脑”，它实现了所有动态和交互功能：

  • 数据获取：使用 fetch API 定时从后端FastAPI服务获取最新的设备数据。
  • 页面更新：根据获取到的数据，动态更新Dashboard上的统计数字、设备列表、告警信息等。
  • 图表绘制与更新：
    • 利用 Chart.js 库绘制并平滑更新实时局放趋势图和设备详情页的局放幅值趋势图。
    • 利用 Chart.js 和 Plotly.js 库根据设备状态动态生成和更新PRPD图谱、PRPS三维图和频谱图。
  • 用户交互：响应用户点击“查看详情”按钮的事件，切换页面视图并加载相应设备的详细数据。
  • 模拟数据动态化：虽然数据来自后端，但后端本身也通过JavaScript类似的逻辑对数据进行了模拟的实时波动，使得前端每次获取到的数据都是动态变化的。

三、HTML与JavaScript的协同工作

HTML和JavaScript通过DOM（文档对象模型）紧密协作：

  1. HTML 提供结构和标识：index.html 创建了带有 id 属性的HTML元素，这些 id 就像是元素的“身份证号”。
  2. JavaScript 查找和操作元素：script.js 使用 document.getElementById() 等方法，通过这些 id 找到特定的HTML元素。
  3. JavaScript 修改内容和样式：一旦找到元素，JavaScript就可以修改它们的 textContent、innerHTML 来更新显示的数据，或者修改 style 属性来改变元素的可见性（如 display: none）。
  4. 事件驱动交互：HTML元素上的事件（如 onclick）可以触发JavaScript函数，从而响应用户的操作。JavaScript也可以通过 addEventListener 更灵活地绑定事件。

这种分工使得Web开发高效且可维护：HTML专注于内容和结构，CSS专注于样式，而JavaScript则专注于行为和交互。

总结

HTML和JavaScript是现代Web开发的基石。HTML构建了页面的静态结构，而JavaScript则赋予了页面动态性和交互能力。通过理解它们各自的职责和协同工作的方式，您就掌握了构建丰富、响应式Web应用的核心技能。随着您对这两种语言的深入学习，您将能够创造出越来越复杂和引人入胜的Web体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/913201.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/913201.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python数据分析基础03：探索性数据分析

Python数据分析基础03：探索性数据分析

相关文章&#xff1a; 《python数据分析基础02&#xff1a;数据可视化分析》 《Python数据分析基础01&#xff1a;描述性统计分析》 探索性数据分析&#xff08;Exploratory Data Analysis, EDA&#xff09; 的深度解析&#xff0c;涵盖核心目标、方法论框架、关键技术及可视…
阅读更多...
D3 面试题100道之（41-60）

D3 面试题100道之（41-60）

这里是D3的面试题，我们从第 41~60题 开始逐条解答。一共100道，陆续发布中。 🟩 面试题（第 41~60 题） 41. D3 中如何添加图例？ 图例可以通过手动创建 SVG 元素或使用 D3 的辅助函数来实现。常见做法是结合 d3.scaleOrdinal() 和 .range() 创建颜色映射图例。 示例： c…
阅读更多...
Spring Boot事件驱动模型深度解析

Spring Boot事件驱动模型深度解析

目录 一、什么是Spring事件机制&#xff1f; 与传统方法调用的对比&#xff1a; 二、四大核心组件解析 1. ApplicationEvent&#xff1a;事件对象 2. ApplicationEventPublisher&#xff1a;事件发布器 3. ApplicationListener&#xff1a;事件监听接口 4. EventListener…
阅读更多...
Python gmssl.SM4使用案例

Python gmssl.SM4使用案例

Python gmssl.SM4使用案例 摘要：在异构计算系统验证中，通常会有数据加解密的要求，例如用户数据、权重参数等，本文将详细介绍在UVM验证环境中，调用Python的gmssl库，用SM4实现加解密的验证方案。 一、Python gmssl 库介绍 gmssl 是一个开源的、纯Python实现的国密算…
阅读更多...
迅为高情性6TOPS算力的RK3576开发板NPU rknn-model-zoo例程演示

迅为高情性6TOPS算力的RK3576开发板NPU rknn-model-zoo例程演示

迅为iTOP-3576开发板采用瑞芯微RK3576高性能、低功耗的应用处理芯片&#xff0c;集成了4个Cortex-A72和4个Cortex-A53核心&#xff0c;以及独立的NEON协处理器。它适用于ARM PC、边缘计算、个人移动互联网设备及其他多媒体产品。支持INT4/INT8/INT16/FP16/BF16/TF32混合运算&am…
阅读更多...
rsync 命令详解

rsync 命令详解

目录 rsync 传输备份工作原理详解一、核心算法：差异传输二、传输流程三、关键技术四、与cp/scp复制的本质区别rsync的使用基本语法常用选项常用组合案例1. **本地目录同步**2. **远程同步（SSH协议）**3. **删除目标端多余文件**4. **排除特定文件**5. **限速传输（避免占用带…
阅读更多...
【MySQL进阶】错误日志，二进制日志，mysql系统库

【MySQL进阶】错误日志，二进制日志，mysql系统库

目录 一.错误日志 1.1 配置错误日志 1.1.1 Windows的默认错误日志路径 1.1.2 Unix和Linux系统的默认错误日志路径 1.2 错误日志中事件的字段 1.2.1 核心错误事件字段 1.2.2.MySQL 错误消息的两种不同输出渠道 1.2.3 可选错误事件字段 1.3. 刷新错误日志文件和重命名 二…
阅读更多...
day45-nginx复杂跳转与https

day45-nginx复杂跳转与https

1. ✅nginx复杂跳转 客户端ip不是内网(172.16/192.168)ip时&#xff0c;维护文件存在时&#xff0c;返回503或者错误页面 1.1. &#x1f4dd;修改配置文件 server {listen 80;server_name re.linux.cn; root /app/code/re/;set $flag 0;if ( $remote_addr !~* "^172…
阅读更多...
基于pcl点云库实现激光雷达数据采集

基于pcl点云库实现激光雷达数据采集

基于pcl点云库实现倍加福R2000激光雷达数据采集 一、项目介绍二、开发详情三、显示效果展示四、说明 一、项目介绍 最近用pcl库实现了倍加福R2000激光雷达的数据采集&#xff0c;并实时在viewer上实时更新显示。软件的开发是基于vs2019qt插件pcl库实现&#xff0c;可以完成如下…
阅读更多...
微信小程序61~70

微信小程序61~70

1.组件wxml的slot-插槽 在使用基础组件时&#xff0c;可以在组件中间写子节点&#xff0c;从而将子节点内容展示到页面中&#xff0c;自定义组件也可以接收子节点但是要在组件模板中定义节点&#xff0c;承载组件中间的子节点需要使用多个插槽时&#xff0c;要在组件.js中声明…
阅读更多...
03_性能优化：让软件呼吸更顺畅

03_性能优化：让软件呼吸更顺畅

引言 在用户对软件响应速度近乎苛刻的今天&#xff0c;性能已成为产品竞争力的核心指标。据Google研究&#xff0c;页面加载时间每增加1秒&#xff0c;转化率就会下降20%。本文将从前端、后端、移动端三个维度&#xff0c;揭示性能优化的核心策略与实战技巧&#xff0c;帮助你打…
阅读更多...
LangChain4j 框架模仿豆包实现智能对话系统：架构与功能详解

LangChain4j 框架模仿豆包实现智能对话系统：架构与功能详解

系统整体架构设计基于 LangChain4j 框架构建的智能对话系统采用 "前后端分离 大模型中枢" 的三层架构设计&#xff0c;实现了与豆包类似的智能交互体验。系统架构图如下所示&#xff1a;┌────────────────────────────────────…
阅读更多...
基于uni-app的书法学习管理小程序的设计与实现

基于uni-app的书法学习管理小程序的设计与实现

一、设计的目的 书法是中华民族传统文化的瑰宝&#xff0c;更是人类文明的宝贵财富&#xff0c;具有深远的意义和实价值。在当今数字化时代&#xff0c;随着信息技术的飞速发展&#xff0c;传统书法学习模式面临着诸多挑战和需要解决的问题。为推动书法学习的现代化转型&#…
阅读更多...
NumPy 函数库在数学建模中的基本使用方法

NumPy 函数库在数学建模中的基本使用方法

一、引言 在数学建模的世界里，我们常常需要处理大量的数据和进行复杂的数值计算。Python 中的 NumPy 库就像是一位得力的助手，它为我们提供了强大的多维数组对象和丰富的数学函数，让我们能够高效地完成各种数值计算任务。接下来，我们将深入探讨 NumPy 在数学建模中的基本使…
阅读更多...
模块三：现代C++工程实践（4篇）第一篇《C++模块化开发：从Header-only到CMake模块化》

模块三：现代C++工程实践（4篇）第一篇《C++模块化开发：从Header-only到CMake模块化》

引言&#xff1a;现代C工程化的核心挑战&#xff08;终极扩展版&#xff09; 在云计算与物联网时代&#xff0c;C项目规模呈指数级增长。传统Header-only开发模式暴露出编译效率低下、依赖管理混乱、版本冲突频发等致命问题。本文通过CMake 3.22Conan 2.0工具链的深度集成&…
阅读更多...
uniapp启动图被拉伸问题

uniapp启动图被拉伸问题

记录下&#xff1a; 安卓手机有不同的规格&#xff0c;很难所有规格都去适配。如果不适配所有机型&#xff0c;那么就会导致部分机型的启动图被拉伸。 安卓提供了.9.png图片格式&#xff0c;允许标注部分拉伸&#xff0c;这样启动图中间的logo就不会被拉伸。 下面2张图是没有…
阅读更多...
stm32的三种开发方式

stm32的三种开发方式

以下是针对STM32F103RC实现LED闪烁&#xff08;PC13引脚&#xff09;的三种开发方式示例代码&#xff0c;每种方式均保持相同的核心逻辑&#xff1a; 1. 寄存器开发方式&#xff08;直接操作寄存器&#xff09; #include "stm32f10x.h"int main(void) {// 1. 开启G…
阅读更多...
SpringBoot问卷调查系统设计与实现

SpringBoot问卷调查系统设计与实现

概述 基于SpringBoot开发的问卷调查系统&#xff0c;该系统集成了问卷管理、题目管理等多种功能模块。 主要内容 核心功能模块&#xff1a; ​​个人信息管理​​&#xff1a; 修改密码个人信息修改 ​​问卷管理​​&#xff1a; 问卷新增问卷修改问卷删除 ​​题目管理​…
阅读更多...
Linux进程管理：从基础到实战

Linux进程管理：从基础到实战

在 Linux 系统编程中&#xff0c;进程&#xff08;Process&#xff09; 是操作系统进行资源分配和调度的基本单位。理解进程的概念是掌握系统编程、多任务处理、并发编程的基础。 目录 一、什么是进程&#xff1f; 定义&#xff1a; 二、进程的生命周期 示例&#xff1a;查…
阅读更多...
工业物联网中的 Modbus：传感器与网关通信实战（二）

工业物联网中的 Modbus：传感器与网关通信实战（二）

四、实战案例解析 4.1 项目背景与目标 某智能工厂致力于提升生产过程的自动化和智能化水平&#xff0c;对生产线上的各种设备进行实时监控和数据分析。在该工厂的一个生产车间中&#xff0c;存在着大量的传感器&#xff0c;用于监测设备的运行状态、环境参数等信息。这些传感…
阅读更多...
最新文章

Copyright @ 2022~2023