在HTML中使用JavaScript

在 HTML 中使用 JavaScript 有以下几种常见的方式：

一、内联脚本

（一）基本语法

内联脚本是将 JavaScript 代码直接嵌入到 HTML 文件的 <script> 标签内部。

<!DOCTYPE html>

<head>

<title>内联脚本示例</title>

</head>

<body>

// 变量声明与赋值

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>

<head>

<title>外部脚本示例</title>

</head>

<body>

<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>

<head>

<title>内联事件处理示例</title>

</head>

<body>

</body>

</html>

在上述示例中，当用户点击按钮时，会弹出一个包含文本"你点击了按钮！"的警告框。

这种方式虽然简单直观，但将 HTML 和 JavaScript 代码紧密耦合在一起，不利于代码的维护和管理，因此在实际开发中不建议大量使用。

DOM 方式

通过 JavaScript 的 addEventListener() 方法为元素添加事件处理程序，这种方式可以实现 HTML 和 JavaScript 代码的分离，提高代码的可维护性。

<!DOCTYPE html>

<head>

<title>DOM 事件处理示例</title>

</head>

<body>

var button = document.getElementById('myButton');

button.addEventListener('click', function() {

alert('你点击了按钮！');

});

</script>

</body>

</html>

在上述示例中，首先通过 getElementById() 方法获取到按钮元素，然后使用 addEventListener() 方法为按钮添加 click 事件的处理程序。当用户点击按钮时，会弹出一个包含文本"你点击了按钮！"的警告框。

（四）注意事项

同一个事件可以添加多个事件处理程序，它们会按照添加的顺序依次执行。
addEventListener() 方法的第三个参数是一个可选的对象，用于指定事件处理的一些选项，如事件捕获阶段还是冒泡阶段处理事件、是否在事件处理程序执行期间阻止事件的默认行为等。