如何在HTML的body中加载JavaScript
在HTML文档的<body>标签内加载JavaScript有多种方法，包括直接在<script>标签中编写代码、链接外部JavaScript文件以及使用模块化脚本，下面将详细解释这些方法，并提供示例代码和表格归纳。
1. 内联JavaScript
这是最直接的方式，将JavaScript代码直接写在<script>标签中，并放置在HTML的<body>部分内，这种方法适用于简单的脚本或一次性使用的代码。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="demo"></h1>
<script>
document.getElementById('demo').innerText = 'Hello, World!';
</script>
</body>
</html>
对于较大的脚本或需要重用的脚本，最好将其放在单独的文件中，并在HTML中通过<script>标签引入，这样可以提高代码的可维护性和可读性。
示例：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External JS Example</title>
</head>
<body>
<h1 id="demo"></h1>
<script src="script.js"></script>
</body>
</html>
script.js:
document.getElementById('demo').innerText = 'Hello from external JS!';
3. 模块化JavaScript（ES6模块）
现代JavaScript开发中，模块化是一个重要概念，可以使用type="module"属性来声明模块化的JavaScript文件。
示例：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module JS Example</title>
</head>
<body>
<h1 id="demo"></h1>
<script type="module" src="module.js"></script>
</body>
</html>
module.js:
export function greet() {
document.getElementById('demo').innerText = 'Hello from ES6 module!';
}
greet();
为了提升页面性能，可以使用async或defer属性异步加载JavaScript文件。async属性会使脚本异步加载，但不保证执行顺序；而defer属性则保证脚本在页面解析完成后按顺序执行。
示例：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async and Defer Example</title>
</head>
<body>
<h1 id="demo"></h1>
<!-Async script -->
<script src="asyncScript.js" async></script>
<!-Deferred script -->
<script src="deferredScript.js" defer></script>
</body>
</html>
asyncScript.js:
document.getElementById('demo').innerText += ' Loaded asynchronously.';
deferredScript.js:
document.getElementById('demo').innerText += ' Loaded with defer.';
有时需要在运行时动态加载JavaScript文件，这可以通过创建新的<script>元素并插入到DOM中实现。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Loading Example</title>
</head>
<body>
<h1 id="demo"></h1>
<button onclick="loadScript()">Load Script</button>
<script>
function loadScript() {
var script = document.createElement('script');
script.src = "dynamicScript.js";
document.body.appendChild(script);
}
</script>
</body>
</html>
dynamicScript.js:
document.getElementById('demo').innerText += ' Loaded dynamically.';
| 方法 | 描述 | 示例文件 | 特点 |
| 内联JavaScript | 直接在HTML中编写JavaScript代码 | index.html | 简单快捷，适合小段代码 |
| 外部JavaScript文件 | 将JavaScript代码放在单独的文件中，并通过
|