【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

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

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

相关文章

图像滤波总结

图像滤波总结

中值滤波器 中值滤波器是一种常用的非线性滤波器&#xff0c;其基本原理是&#xff1a;选择待处理像素的一个邻域中各像素值的中值来代替待处理的像素。主要功能使某像素的灰度值与周围领域内的像素比较接近&#xff0c;从而消除一些孤立的噪声点&#xff0c;所以中值滤波器能够…
阅读更多...
超美！ChatGPT DALL-E 3已可用，另外GPT-4可上传图片进行问答

超美！ChatGPT DALL-E 3已可用，另外GPT-4可上传图片进行问答

今天&#xff0c;在ChatGPT里使用DALL-E 3的功能终于上线了。以下是截图&#xff1a; 在GPT-4下加了一个菜单入口&#xff0c;名为 DALL-E 3&#xff0c;这也意味着ChatGPT免费账户暂时不能使用这个功能。 我们体验一下这个功能。 技术交流 建了技术交流群&#xff01;想要进…
阅读更多...
解决echarts配置滚动(dataZoom)后导出图片数据不全问题

解决echarts配置滚动(dataZoom)后导出图片数据不全问题

先展现一个echarts&#xff0c;并配置dataZoom&#xff0c;每页最多10条数据&#xff0c;超出滚动 <div class"echartsBox" id"echartsBox"></div>onMounted(() > {nextTick(() > {var chartDom document.getElementById(echartsBox);…
阅读更多...
如何在雷电模拟器上安装Magisk并加载movecert模块抓https包（二）

如何在雷电模拟器上安装Magisk并加载movecert模块抓https包（二）

接来下在PC端安装和配置Charles&#xff0c;方法同下面链接&#xff0c;不再赘述。在模拟器上安装magisk实现Charles抓https包&#xff08;二&#xff09;_小小爬虾的博客-CSDN博客 一、记录下本机IP和代理端口 二、在手机模拟器上设置代理192.168.31.71:8888&#xff0c;设置…
阅读更多...
接口自动化测试_L1

接口自动化测试_L1

目录&#xff1a; 接口自动化测试框架介绍 接口测试场景自动化测试场景接口测试在分层测试中的位置接口自动化测试与 Web/App 自动化测试对比接口自动化测试与 Web/App 自动化测试对比接口测试工具类型为什么推荐 RequestsRequests 优势Requests 环境准备接口请求方法接口请求…
阅读更多...
LeetCode【118】杨辉三角

LeetCode【118】杨辉三角

题目&#xff1a; 解析&#xff1a; 该题目解析起来更像是数学推导&#xff0c;找到里面的规律 1、第n行有n个元素 2、第i行第j个元素&#xff0c;为第i-1行&#xff0c;j-1个元素和j个元素的和 3、每行第一个&#xff0c;最后一个元素是1 代码&#xff1a; public List<…
阅读更多...
Docker 的数据管理和网络通信

Docker 的数据管理和网络通信

目录 Docker 的数据管理 管理 Docker 容器中数据的方式 端口映射 容器互联&#xff08;使用centos镜像&#xff09; Docker 镜像的创建 Dockerfile 操作常用的指令 编写 Dockerfile 时格式 Dockerfile 案例 Docker 的数据管理 管理 Docker 容器中数据的方式 管理 Doc…
阅读更多...
STM32使用HAL库驱动DS3231

STM32使用HAL库驱动DS3231

1、STM32通讯口配置 启动IIC&#xff0c;默认配置即可。 2、头文件 #ifndef __DS3231_H #define __DS3231_H#include "main.h"#define DS3231_COM_PORT hi2c1 /*通讯端口*//**************************** defines *******************************/ #define DS3231…
阅读更多...
cocos2d-x C++与Lua交互

cocos2d-x C++与Lua交互

Cocos版本&#xff1a; 3.10 Lua版本&#xff1a; 5.1.4 环境&#xff1a; window Visual Studio 2013 Lua Lua作为一种脚本语言&#xff0c; 它的运行需要有宿主的存在&#xff0c;通过Lua虚拟栈进行数据交互。 它的底层实现是C语言&#xff0c;C语言封装了很多的API接口&a…
阅读更多...
ICCV23中的域泛化相关研究

ICCV23中的域泛化相关研究

ICCV23中的域泛化相关研究 【OCR】Order-preserving Consistency Regularization for Domain Adaptation and Generalization【iDAG】iDAG: Invariant DAG Searching for Domain Generalization【RIDG】Domain Generalization via Rationale Invariance【3DLabelProp】Domain G…
阅读更多...
2023年医药商业行业发展研究报告

2023年医药商业行业发展研究报告

第一章 行业概况 1.1 定义 医药商业行业&#xff0c;作为医药领域的重要组成部分&#xff0c;扮演着至关重要的角色。这一行业专注于医药商品的经营与流通&#xff0c;确保药品能够有效、安全地到达消费者手中。随着医药科技的进步和市场需求的增长&#xff0c;医药商业行业在…
阅读更多...
Android攻城狮学鸿蒙 -- 点击事件

Android攻城狮学鸿蒙 -- 点击事件

具体参考&#xff1a;华为官网学习地址 1、点击事件&#xff0c;界面跳转 对于一个按钮设置点击事件&#xff0c;跳转页面。但是onclick中&#xff0c;如果pages前边加上“/”&#xff0c;就没法跳转。但是开发工具加上“/”才会给出提示。不知道是不是开发工具的bug。&#…
阅读更多...
C++day6

C++day6

编程题&#xff1a; 以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a; 比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在&#xff0c;动物…
阅读更多...
ubuntu下查看realsense摄像头查看支持的分辨率和频率

ubuntu下查看realsense摄像头查看支持的分辨率和频率

引言&#xff1a; 在实际应用中&#xff0c;摄像头的频率如果过高&#xff0c;可能会造成系统图像处理的压力过大&#xff0c;因此需要选择合适的参数才能达到预期的效果。本文主要探讨设置realsense相关参数 1、打开终端&#xff0c;输入rs-enumerate-devices rs-enumerate-…
阅读更多...
Java架构师系统架构设计性能评估

Java架构师系统架构设计性能评估

目录 1 导论2 架构评估基础系统性能衡量的基本指标2.1 系统性能的指标2.2 数据库指标2.3 并发用户数2.4 网络延迟2.4 系统吞吐量2.5 资源性能指标 3 架构评估基础服务端性能测试3.1基准测试3.2 负载测试3.3 压力测试3.4 疲劳强度测试3.5 容量测试 1 导论 本章的主要内容是掌握架…
阅读更多...
018-第三代软件开发-整体介绍

018-第三代软件开发-整体介绍

第三代软件开发-整体介绍 文章目录 第三代软件开发-整体介绍项目介绍整体介绍Qt 属性系统QML 最新软件技术框架 关键字&#xff1a; Qt、 Qml、 属性、 Qml 软件架构 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object …
阅读更多...
【Kotlin精简】第2章 集合

【Kotlin精简】第2章 集合

1 简介 在 Kotlin 中集合主要分为可变集合与只读集合&#xff0c;其中可变集合使用 “Mutable” 前缀 集合类名表示&#xff0c;比如 MutableList、MutableSet、MutableMap 等。而对于只读集合就是和 Java 中集合类名是一致。 Java 中的 List 非 Kotlin 中的 List , 因为 Kot…
阅读更多...
风光十几年的MIUI要无了，小米自研MIOS即将就位

风光十几年的MIUI要无了，小米自研MIOS即将就位

今年8月小米新品发布会上&#xff0c;K60 至尊版亮相的同时带来了下一代系统&#xff08;或者说UI &#xff09;的名字&#xff1a;MIUI 15 。 好家伙不知不觉已经要更到 15 了&#xff0c;大家用过几个版本呢&#xff1f; 回想起 MIUI V1 内测发布、MIUI V5 全民刷机、MIUI 8…
阅读更多...
skywalking动态配置[集成nacos/apollo/consul]

skywalking动态配置[集成nacos/apollo/consul]

说明：以下配置仅关于的阈值规则的动态配置，其他参数也可以进行配置。 1，skywalking动态配置集成nacos 编辑application.yml nacos配置参数如下： nacos:# Nacos Server HostserverAddr: 10.10.5.145# Nacos Server Portport: 8848# Nacos Configuration Groupgroup: skywal…
阅读更多...
【数据结构】二叉树--链式结构的实现 (遍历)

【数据结构】二叉树--链式结构的实现 (遍历)

目录 一 二叉树的遍历 1 构建一个二叉树 2 前序遍历 3 中序遍历 4 后续遍历 5 层序 6 二叉树销毁 二 应用(递归思想) 1 二叉树节点个数 2 叶子节点个数 3 第K层的节点个数 4 二叉树查找值为x的节点 5 判断是否是二叉树 一 二叉树的遍历 学习二叉树结构&#xff0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023