在HTML中编写JavaScript代码有多种方法，以下是一些常见的方法：
（图片来源网络，侵删）
1、内联JavaScript代码
在HTML文件中，可以使用<script>标签将JavaScript代码嵌入到HTML文档中，这种方法简单易用，但可能导致HTML文件变得混乱。
示例：
<!DOCTYPE html>
<html>
<head>
<title>内联JavaScript示例</title>
</head>
<body>
<h1>内联JavaScript示例</h1>
<button onclick="alert(\'Hello, World!\')">点击我</button>
<script>
// 在这里编写JavaScript代码
document.write("这是内联JavaScript代码");
</script>
</body>
</html>
2、外部JavaScript文件
将JavaScript代码保存在一个单独的文件中，然后在HTML文件中引用该文件，这种方法可以使HTML文件保持整洁，同时便于管理和重用JavaScript代码。
步骤：
a. 创建一个名为script.js的JavaScript文件，并将以下代码添加到其中：
function sayHello() {
alert(\'Hello, World!\');
}
b. 在HTML文件中，使用<script>标签引用script.js文件：
<!DOCTYPE html>
<html>
<head>
<title>外部JavaScript示例</title>
</head>
<body>
<h1>外部JavaScript示例</h1>
<button onclick="sayHello()">点击我</button>
<script src="script.js"></script>
</body>
</html>
3、事件处理程序
在HTML元素中，可以使用onclick、onmouseover等属性为元素添加事件处理程序，当用户与元素交互时，浏览器会自动调用相应的JavaScript函数。
示例：
<!DOCTYPE html>
<html>
<head>
<title>事件处理程序示例</title>
<script>
function showMessage(message) {
alert(message);
}
</script>
</head>
<body>
<h1>事件处理程序示例</h1>
<button onclick="showMessage(\'Hello, World!\')">点击我</button>
</body>
</html>
4、DOM操作
JavaScript可以操作HTML文档的DOM（文档对象模型），从而实现对页面元素的增删改查等操作，可以使用getElementById、getElementsByClassName等方法获取页面元素，然后修改其属性或内容。
示例：
<!DOCTYPE html>
<html>
<head>
<title>DOM操作示例</title>
<script>
function changeText() {
var element = document.getElementById("myElement");
element.innerHTML = "文本已更改";
}
</script>
</head>
<body>
<h1 id="myElement">原始文本</h1>
<button onclick="changeText()">点击我</button>
</body>
</html>
5、jQuery库的使用（可选）
jQuery是一个流行的JavaScript库，简化了DOM操作和事件处理，要使用jQuery，首先需要在HTML文件中引入jQuery库，然后可以使用jQuery选择器和方法来操作页面元素。
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery示例</title>
<!引入jQuery库 >
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
<script>
$(document).ready(function() { // 确保文档加载完成后执行脚本 $("button").click(function() { // 为按钮添加点击事件 $("h1").text("文本已更改"); // 修改标题文本 }); }); // 结束匿名函数 $(document).ready() 和 $() 是jQuery特有的语法，用于确保文档加载完成后执行脚本和选择元素，在这个示例中，我们为按钮添加了一个点击事件，当用户点击按钮时，会修改标题文本，注意，这里的代码需要放在一个外部JavaScript文件中，或者使用在线编辑器运行。
本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/440898.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
