在 HTML 中使用 JavaScript 有以下几种常见的方式：
一、内联脚本
（一）基本语法
内联脚本是将 JavaScript 代码直接嵌入到 HTML 文件的 <script> 标签内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联脚本示例</title>
</head>
<body>
<script>
// 变量声明与赋值
var message = "Hello, World!";
// 函数定义
function showMessage() {
console.log(message);
}
// 函数调用
showMessage();
// 条件语句
if (message.length > 5) {
console.log("消息长度大于 5");
} else {
console.log("消息长度小于或等于 5");
}
// 循环语句
for (var i = 0; i < 5; i++) {
console.log(i);
}
</script>
</body>
</html>
在上述示例中，我们在 <script> 标签内部定义了变量、函数，并进行了函数调用、条件判断和循环操作等基本的 JavaScript 编程操作。
（二）注意事项
-
<script> 标签可以放在 <head> 或 <body> 部分，但通常建议将功能性的脚本放在 <body> 的底部，以确保在页面的内容加载完成后再执行脚本，避免因脚本执行时间过长导致页面加载卡顿或显示异常。
-
内联脚本适合编写少量、简单的 JavaScript 代码。对于大型项目和复杂的功能，使用外部脚本文件（将在后面介绍）可以更好地组织和管理代码。
二、外部脚本文件
（一）创建外部脚本文件
您可以使用任何文本编辑器（如 Visual Studio Code、Sublime Text 等）创建一个扩展名为 .js 的文件，在其中编写 JavaScript 代码。
例如，创建一个名为 myScript.js 的文件，内容如下：
function greet(name) {
alert(`Hello, ${name}!`);
}
function calculateSum(num1, num2) {
return num1 + num2;
}
（二）在 HTML 中引用外部脚本文件
要在 HTML 文件中使用这个外部脚本文件，您可以在 HTML 文件的 <head> 或 <body> 部分添加 <script> 标签，并通过 src 属性指定脚本文件的路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部脚本示例</title>
<script src="myScript.js"></script>
</head>
<body>
<button οnclick="greet('Alice')">点击问候</button>
<p>两数之和为：<span id="sumResult"></span></p>
<button οnclick="var sum = calculateSum(5, 3); document.getElementById('sumResult').innerHTML = sum;">计算两数之和</button>
</body>
</html>
（三）注意事项
-
请确保 src 属性中指定的文件路径是正确的，相对路径或绝对路径都可以。
-
当浏览器遇到带有 src 属性的 <script> 标签时，它会暂停 HTML 文档的解析，去下载并执行指定的脚本文件，然后再继续解析 HTML 文档。
三、事件处理
（一）基本概念
事件是用户与网页进行交互时发生的操作，例如点击按钮、鼠标移动、键盘输入等。您可以使用 JavaScript 来监听这些事件，并在事件发生时执行相应的代码。
（二）常见的事件类型
-
click 事件：当用户点击元素时触发。
-
mouseover 事件：当鼠标指针移到元素上时触发。
-
mouseout 事件：当鼠标指针移出元素时触发。
-
keydown 事件：当用户按下键盘上的某个键时触发。
-
keyup 事件：当用户释放键盘上的某个键时触发。
-
submit 事件：当用户提交表单时触发。
-
load 事件：当页面或图像等资源加载完成时触发。
（三）事件处理程序的添加方式
- HTML 属性方式（内联事件处理程序）
您可以在 HTML 元素的属性中直接指定事件处理函数，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联事件处理示例</title>
</head>
<body>
<button οnclick="alert('你点击了按钮！')">点击我</button>
</body>
</html>
在上述示例中，当用户点击按钮时，会弹出一个包含文本"你点击了按钮！"的警告框。
这种方式虽然简单直观，但将 HTML 和 JavaScript 代码紧密耦合在一起，不利于代码的维护和管理，因此在实际开发中不建议大量使用。
- DOM 方式
通过 JavaScript 的 addEventListener() 方法为元素添加事件处理程序，这种方式可以实现 HTML 和 JavaScript 代码的分离，提高代码的可维护性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM 事件处理示例</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('你点击了按钮！');
});
</script>
</body>
</html>
在上述示例中，首先通过 getElementById() 方法获取到按钮元素，然后使用 addEventListener() 方法为按钮添加 click 事件的处理程序。当用户点击按钮时，会弹出一个包含文本"你点击了按钮！"的警告框。
（四）注意事项
-
同一个事件可以添加多个事件处理程序，它们会按照添加的顺序依次执行。
-
addEventListener() 方法的第三个参数是一个可选的对象，用于指定事件处理的一些选项，如事件捕获阶段还是冒泡阶段处理事件、是否在事件处理程序执行期间阻止事件的默认行为等。