【Java 进阶篇】JavaScript 与 HTML 的结合方式
JavaScript是一种广泛应用于Web开发中的脚本语言,它与HTML(Hypertext Markup Language)结合使用,使开发人员能够创建交互式和动态的网页。在这篇博客中,我们将深入探讨JavaScript与HTML的结合方式,包括如何将JavaScript嵌入HTML、HTML事件处理、DOM操作以及常见的示例和最佳实践。
1. JavaScript 的嵌入方式
要在HTML中嵌入JavaScript代码,有几种方式可以选择:
1.1 内联方式
内联方式是将JavaScript代码直接嵌入到HTML文件中的方法。通常,你会将JavaScript代码放置在<script>
标签中,并将其放在HTML文档的<head>
或<body>
部分。
<!DOCTYPE html>
<html>
<head><title>JavaScript 内联方式</title><script>function greet() {alert('Hello, World!');}</script>
</head>
<body><button onclick="greet()">点击我</button>
</body>
</html>
在上面的示例中,我们在<script>
标签内定义了一个JavaScript函数greet()
,并在<button>
元素的onclick
属性中调用该函数。
1.2 外部文件方式
为了更好地组织代码并提高可维护性,你可以将JavaScript代码保存在外部文件中,并在HTML中引入这些文件。这样可以将JavaScript代码与HTML分离,使代码更清晰。
index.html:
<!DOCTYPE html>
<html>
<head><title>JavaScript 外部文件方式</title><script src="script.js"></script>
</head>
<body><button onclick="greet()">点击我</button>
</body>
</html>
script.js:
function greet() {alert('Hello, World!');
}
在这个例子中,我们将JavaScript代码放入了一个名为script.js
的外部文件,并通过<script>
标签的src
属性引入该文件。
1.3 异步和延迟加载
可以通过添加async
或defer
属性来改变脚本的加载方式:
async
:脚本将异步加载,不会阻止HTML解析。脚本将在下载完成后立即执行,不保证执行顺序。defer
:脚本将异步加载,但会在HTML解析完毕后按顺序执行。
<!DOCTYPE html>
<html>
<head><title>JavaScript 异步和延迟加载</title><script src="script1.js" async></script><script src="script2.js" defer></script>
</head>
<body><!-- 页面内容 -->
</body>
</html>
在上面的示例中,script1.js
将立即异步加载,而script2.js
将在HTML解析完毕后按顺序执行。
2. HTML 事件处理
JavaScript与HTML结合的一个关键方面是事件处理。事件处理使你能够对用户在网页上的交互作出响应。以下是一些常见的HTML事件:
onclick
:单击(或触摸)元素时触发。onmouseover
:鼠标悬停在元素上时触发。onchange
:元素的值更改时触发。onsubmit
:表单提交时触发。onload
:文档加载完成时触发。
你可以使用内联方式或外部文件方式添加事件处理程序。以下是一个使用内联方式的示例:
<!DOCTYPE html>
<html>
<head><title>HTML 事件处理</title>
</head>
<body><button onclick="sayHello()">单击我</button><script>function sayHello() {alert('Hello, World!');}</script>
</body>
</html>
在这个例子中,当用户单击按钮时,sayHello()
函数将触发onclick
事件。
你也可以使用外部文件方式添加事件处理程序,这样代码更容易维护:
index.html:
<!DOCTYPE html>
<html>
<head><title>HTML 事件处理</title><script src="script.js"></script>
</head>
<body><button id="myButton">单击我</button>
</body>
</html>
script.js:
document.getElementById('myButton').addEventListener('click', function() {alert('Hello, World!');
});
在上面的示例中,我们使用addEventListener
方法来绑定单击事件处理程序。
3. DOM 操作
文档对象模型(DOM)是HTML和XML文档的编程接口,它允许JavaScript通过操作文档的元素和属性来动态改变页面内容。以下是一些常见的DOM操作:
3.1 获取元素
你可以使用JavaScript来获取文档中的元素,以便进一步操作。
// 通过ID获取元素
var elementById = document.getElementById('myElementId');// 通过标签名获取元素(返回元素数组)
var elementsByTagName = document.getElementsByTagName('p');// 通过类名获取元素(返回元素数组)
var elementsByClassName = document.getElementsByClassName('myClass');
3.2 修改元素内容
你可以使用DOM来修改元素的内容。
// 获取元素
var myElement = document.getElementById('myElementId');// 修改元素的文本内容
myElement.textContent = '新的文本内容';// 修改元素的HTML内容
myElement.innerHTML = '<strong>加粗文本</strong>';
3.3 创建和插入元素
你可以使用DOM创建新的元素并将其插入到文档中。
// 创建新的元素
var newElement = document.createElement('div');// 设置元素的属性
newElement.id = 'newDiv';
newElement.className = 'myClass';// 插入元素到文档
document.body.appendChild(newElement);
3.4 删除元素
你可以使用DOM删除元素。
// 获取要删除的元素
var elementToRemove = document.getElementById('elementToRemove');// 删除元素
elementToRemove.parentNode.removeChild(elementToRemove);
4. JavaScript 与 HTML 示例
以下是一个简单的示例,演示了JavaScript与HTML的结合方式、事件处理和DOM操作:
<!DOCTYPE html>
<html>
<head><title>JavaScript 与 HTML 示例</title><script>function sayHello() {var myElement = document.getElementById('myElementId');myElement.textContent = 'Hello, World!';}</script>
</head>
<body><button onclick="sayHello()">单击我</button><p id="myElementId">这是一个段落。</p>
</body>
</html>
在这个示例中,当用户单击按钮时,sayHello()
函数将触发onclick
事件,从而修改了段落的文本内容。
5. 最佳实践
以下是一些最佳实践,以确保JavaScript与HTML结合的顺利工作:
- 将JavaScript代码放在文档的底部,以加快页面加载速度。
- 使用外部文件方式组织和存储JavaScript代码。
- 合理使用事件处理程序,不滥用内联事件处理。
- 使用现代的DOM操作方法,避免过时的方法。
- 测试你的代码以确保它在不同的浏览器中运行良好。
6. 结语
JavaScript与HTML的结合使我们能够创建丰富的Web应用程序和网页。它允许我们添加交互性、动态性以及对用户行为的响应。通过了解JavaScript的嵌入方式、HTML事件处理和DOM操作,你可以更好地掌握这一强大的组合,为用户提供更好的在线体验。希望这篇博客对你有所帮助,祝你编写出出色的Web应用程序!
作者信息 作者 : 繁依Fanyi CSDN: https://techfanyi.blog.csdn.net 掘金:https://juejin.cn/user/4154386571867191 |
相关文章:

【Java 进阶篇】JavaScript 与 HTML 的结合方式
JavaScript是一种广泛应用于Web开发中的脚本语言,它与HTML(Hypertext Markup Language)结合使用,使开发人员能够创建交互式和动态的网页。在这篇博客中,我们将深入探讨JavaScript与HTML的结合方式,包括如何…...

华为云云耀云服务器L实例评测 | 实例评测使用之硬件参数评测:华为云云耀云服务器下的 Linux 磁盘目录分析神器 ncdu
华为云云耀云服务器L实例评测 | 实例评测使用之硬件参数评测:华为云云耀云服务器下的 Linux 磁盘目录分析神器 ncdu 介绍华为云云耀云服务器 华为云云耀云服务器 (目前已经全新升级为 华为云云耀云服务器L实例) 华为云云耀云服务器…...

Linux大老都是怎么记住这么多命令的?
今天给大家带来的是面试/实际工作中经常用到的Linux相关操作命令: 一. vi/vim编辑器 ---->文本编辑器 作用:创建文件,编辑文件,查看文件 格式:vi/vim 文件的名字 解析:如果该文件不存在,vi就会创建该…...

LoRa技术未来发展前景:物联网和边缘计算的引领者
随着物联网和边缘计算的快速发展,低功耗广域网(LoRa)技术在连接远距离设备、实现长距离通信和满足低功耗需求方面崭露头角。本文将分析LoRa技术在未来的发展前景,尤其是在物联网和边缘计算领域的潜在影响。 LoRa技术的核心优势 1…...
出现 PowerShell终端执行conda activate无效 解决方法
目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 在cmd命令行中执行conda activate 可以成功,但是回pycharm的PowerShell终端执行该命令,一直无效 具体过程如下: PS E:\pythonProject\SteganoGAN-master> conda activate py37 PS E:\pythonProject\SteganoGAN-mas…...

Python实现某音短视频JS XB逆向解析
哈喽兄弟们,今天来实现一下某音短视频的JS逆向解析。 知识点 动态数据抓包在这里插入代码片 requests发送请求 X-Bogus 参数逆向环境模块 python 3.8 运行代码 pycharm 2022.3 辅助敲代码 requests pip install request…...

SecureCRT 自动测试脚本的使用方法
脚本示例(get_batteryifo_interval_2s.vbs): Sub Main Do While(1)crt.Screen.Send "pm_client batteryinfo" & chr(13)crt.Sleep 2000 Loop End Sub 1. 解压 SecureCRT 压缩包(网上下载);…...
常用图像标注工具
1. LabelImg 1)LabelImg 是一款开源的图像标注工具,标签可用于分类和目标检测,它是用 Python 编写的,并使用Qt作为其图形界面,简单好用。注释以 PASCAL VOC 格式保存为 XML 文件,这是 ImageNet 使用的格式。…...
hadoop namenode -format报错显示:命令未找到
这个bug很搞笑,我做分布式搭建时,slaver1和slaver2都可以hadoop name -format,就是master不可以,配置都是一样的,这个第一时间也是想到了环境配置问题 打开环境配置文件编辑 sudo vim ~/.bashrc 添加以下代码&#…...

prostate数据集下载
1. prostatex 下载地址:https://wiki.cancerimagingarchive.net/pages/viewpage.action?pageId23691656 比赛:https://prostatex.grand-challenge.org/ 这个下载的是一个tcia文件,参考这篇文章打开该文件 2. promise12 地址:…...

比较和同步数据库架构和数据:MssqlMerge Pro Crack
比较和同步数据库架构和数据 适用于Oracle、MySQL 和 MariaDB、SQL Server、PostgreSQL、SQLite、MS Access和跨 DBMS 场景 业界领先的文本比较工具中常用的两面板 UI 快速过滤器显示所有/新/更改/新更改 合并两个方向的更改 轻量级:跨 DBMS 工具小于 20 MB…...

R语言——赋值(= ,<- ,<<-)
R语言 R语言——赋值( ,<- ,<<-) 文章目录 R语言一、 与 <- 的区别二、 <<- ,向上一环境层写入变量 R语言中" <- " 与 " " 都可以用来赋值,但R中建议使用" <- “…...

图形界面四则运算计算器(Python+PyQt5)
(1) 导入所需的库和模块。 (2) 创建一个名为Calculator的类,继承自QMainWindow。 (3) 在Calculator类的__init__方法中,调用initUI方法初始化界面。 (4) 在initUI方法中,设置窗口标题和大小,创建显示结果的文本框,并调…...

SQL Server 创建表
切换数据库,判断是否存在 --切换数据库 use DBTEST--判断表是否存在 --创建的所有表都可以在sys.boject中找到,所以这里在sys.objects中查找是否有名字为department的表并且type为U 即用户生成的表 if exists(select * from sys.objects where namedepa…...
JS数组或数组对象去重常用方法
数组去重有许多种方法,下面列举几种常见方法 数组去重数组对象去重 数组去重 使用 Set:将数组转化为 Set 对象,去重后再转化回数组,Set 会自动去重 const arr [1, 2, 3, 2, 1, 4] const newArr [...new Set(arr)] console.log…...

allure测试报告生成逻辑--解决在Jenkins里打开allure报告页面后空白显示无数据问题(以window环境为例)
前言 相信大家在用Jenkins持续集成+ant自动构建+jmeter接口测试+pytest代码.xml文件转化+allure测试报告为一体的接口自动化测试构建过程中,都会遇到Jenkins里打开allure报告页面后空白显示无数据问题这一现象级问题,今天Darren洋就给大家分享一下如何讲讲allure测试报告生成…...

基于JAYA优化的BP神经网络(分类应用) - 附代码
基于JAYA优化的BP神经网络(分类应用) - 附代码 文章目录 基于JAYA优化的BP神经网络(分类应用) - 附代码1.鸢尾花iris数据介绍2.数据集整理3.JAYA优化BP神经网络3.1 BP神经网络参数设置3.2 JAYA算法应用 4.测试结果:5.M…...
JavaScript进阶(二十六):ES各版本特性详解
文章目录 一、ECMAScript简介二、ES6 (ES2015)三、ES7 (ES2016)四、ES8 (ES2017)五、ES9 (ES2018)六、ES10 (ES2019)七、ES11 (ES2020)八、ES12 (ES2021)九、拓展阅读 一、ECMAScript简介 ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,Europ…...

排序算法-快速排序法(QuickSort)
排序算法-快速排序法(QuickSort) 1、说明 快速排序法是由C.A.R.Hoare提出来的。快速排序法又称分割交换排序法,是目前公认的最佳排序法,也是使用分而治之(Divide and Conquer)的方式,会先在数…...

Python 简介
一、Python 简介 Python 是著名的“龟叔” Guido van Rossum 在 1989 年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言。牛人就是牛人,为了打发无聊时间竟然写了一个这么牛皮的编程语言。 现在,全世界差不多有 600 多种编程语言&am…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...

docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...

基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...

Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...