📅 最后修改于: 2023-12-03 15:09:06.029000 🧑 作者: Mango
在网页中嵌入 JavaScript 代码可以实现丰富的功能和交互效果，本文将介绍如何将 JavaScript 放入 HTML 页面中。
HTML 文件可以通过 <script> 标签来嵌入 JavaScript 代码。下面是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Demo</title>
</head>
<body>
<h1>JavaScript Demo</h1>
<p id="demo"></p>
<script>
var message = "Hello, JavaScript!";
document.getElementById("demo").innerHTML = message;
</script>
</body>
</html>
在上面的例子中，我们在 HTML 文件的 <head> 标签中定义了页面的标题和编码方式。在 <body> 标签中，我们使用了 <h1> 标签和 <p> 标签来显示页面的标题和内容，其中 <p> 标签的 id 属性为 demo，用于在 JavaScript 中定位该标签。在 <script> 标签中，我们定义了一个 message 变量，其值为字符串 "Hello, JavaScript!"，随后我们使用 document.getElementById("demo").innerHTML 方法将该变量的值放入 id 为 demo 的标签中。
需要注意的是，<script> 标签必须放在 HTML 文件的 <head> 或 <body> 标签之间，否则代码不会生效。
为了使代码更加模块化和易于维护，我们可以将 JavaScript 代码放入独立的外部文件中，然后使用 <script> 标签将该文件引入 HTML 页面。下面是一个简单的例子：
在 HTML 文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Demo</title>
<script src="script.js"></script>
</head>
<body>
<h1>JavaScript Demo</h1>
<p id="demo"></p>
</body>
</html>
将 JavaScript 代码存放在 script.js 文件中：
var message = "Hello, JavaScript!";
document.getElementById("demo").innerHTML = message;
在上面的例子中，我们在 HTML 文件的 <head> 标签中通过 <script> 标签引入了 script.js 文件，该文件中包含了前面的 JavaScript 代码。注意，文件路径必须正确，否则代码无法生效。
JavaScript 社区中有许多优秀的库和框架，可以帮助我们更快、更便捷地开发复杂的网站和应用程序。例如，jQuery 是一个功能强大的 JavaScript 库，可以简化 DOM 操作、事件处理、Ajax 请求等常用的操作。下面是一个使用 jQuery 的例子：
在 HTML 文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Demo</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>JavaScript Demo</h1>
<p id="demo"></p>
</body>
</html>
将 JavaScript 代码存放在 script.js 文件中：
$(document).ready(function() {
var message = "Hello, jQuery!";
$("#demo").text(message);
});
在上面的例子中，我们在 HTML 文件的 <head> 标签中通过 <script> 标签引入了 jQuery 最新版本的 CDN 地址，然后在 script.js 文件中使用了 jQuery 的 $ 函数来选择 id 为 demo 的标签，使用 .text() 方法将新的文本值放入该标签中。注意，使用外部库和框架需要了解其用法和设计思想，以免出现兼容性问题和效率问题。
至此，本文介绍了三种向 HTML 页面中嵌入 JavaScript 代码的方法，读者可以根据实际需求选择其中的一种或多种方法，实现自己的 JavaScript 程序。