在html5页面开发中，为页面添加JS脚本是实现交互效果、处理业务逻辑的必要操作，所有脚本的添加都依赖script标签完成，根据代码存放位置的不同，分为内嵌引入和外链引入两种主流方式。
一、内嵌JS脚本的添加方法
内嵌脚本指的是将JS代码直接写在script标签内部，不需要额外的外部文件，适合编写少量、仅当前页面使用的临时逻辑代码。语法格式如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内嵌脚本示例</title>
<!-- 内嵌脚本写在script标签内部 -->
<script>
// 定义函数
function showMessage() {
alert('这是内嵌的JS脚本执行的结果');
}
// 页面加载完成后执行
window.onload = function() {
console.log('内嵌脚本加载完成');
}
</script>
</head>
<body>
<button onclick="showMessage()">点击触发内嵌脚本</button>
</body>
</html>
内嵌脚本的注意事项：
- script标签如果没有指定type属性，html5默认将其内容识别为JS脚本，不需要额外添加
type="text/javascript"属性，这是html5的简化规范。 - 内嵌的JS代码会按照页面解析顺序执行，如果脚本放在head中，会在页面DOM加载前执行，此时无法获取body内的DOM元素。
- 不要在script标签内部再嵌套script标签，会导致语法错误。
二、外链JS脚本的添加方法
外链脚本指的是将JS代码写在独立的.js文件中，再通过script标签的src属性引入到html5页面中，适合复用性高、代码量大的场景，便于代码维护和多人协作。
1. 外链脚本的基础用法
首先创建独立的JS文件，比如命名为common.js，文件内容如下：
// common.js 文件内容
function calculateSum(a, b) {
return a + b;
}
// 导出逻辑供页面使用
window.onload = function() {
let result = calculateSum(10, 20);
console.log('外链脚本计算结果：' + result);
}
然后在html5页面中通过script标签引入该文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外链脚本示例</title>
<!-- 外链引入JS文件，src填写文件路径 -->
<script src="common.js"></script>
</head>
<body>
<p>打开控制台查看外链脚本的输出结果</p>
</body>
</html>
2. 外链脚本的注意事项
- 当script标签使用了src属性引入外部文件时，标签内部不能再写JS代码，内部的代码会被浏览器忽略，不会执行。
- src属性支持相对路径、绝对路径，也支持跨域的外部JS文件地址，比如引入公共CDN上的JS库。
- 外链脚本的加载会阻塞页面的解析，除非添加
async或者defer属性，这两个属性的作用如下：
| 属性 | 作用 | 适用场景 |
|---|---|---|
| async | 脚本异步加载，加载完成后立刻执行，执行顺序不固定 | 独立无依赖的脚本，比如统计类脚本 |
| defer | 脚本异步加载，等到页面DOM解析完成后按照引入顺序执行 | 有依赖关系、需要操作DOM的脚本 |
三、script标签的位置选择
script标签可以放在html5页面的head或者body中，不同位置会影响脚本的执行时机：
- 放在head中：脚本会在页面DOM结构解析前加载执行，此时无法获取body内的DOM元素，除非脚本使用
defer属性或者监听DOMContentLoaded事件。 - 放在body底部，所有DOM元素之后：脚本会在DOM解析完成后加载执行，此时可以直接获取所有DOM元素，是传统开发中最常用的放置位置，不需要额外处理执行时机问题。
四、常见错误规避
不要在script标签内部写html标签，比如直接在script里写<div>，会导致JS语法错误。
另外，如果内嵌脚本中需要用到<字符或者>字符，比如在正则表达式中，不需要额外转义，直接按照JS语法编写即可，只有写在html文档的标签属性或者内容中的<、>才需要转义。
总结来说，html5添加脚本的核心是使用script标签，少量临时代码用内嵌方式，复用性高的代码用外链方式，根据脚本的依赖关系选择合适的加载属性和放置位置，就能正确完成JS脚本的添加。