一、前言
上一篇我们知道了 JS 是网页的 “大脑”，这一篇就来实操，教你怎么把 JS 代码放进网页里，让它跑起来。其实就像给手机装 App，学会这几步，你就能让网页听你的话啦。
二、内联脚本：直接写在 HTML 里（最简单）
内联脚本就是把 JS 代码直接放在 HTML 文件的<script>标签里，就像在作文本里夹了一张便利贴。
实操步骤：
html
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个JS页面</h1>
<!– 这里是JS代码 –>
<script>
alert("恭喜！你的JS代码跑起来了！");
</script>
</body>
</html>
注意：
- <script>标签可以放在<head>里，也可以放在<body>里，但新手建议放在<body>底部，这样页面先加载内容，再执行 JS，不会出现 “页面空白等半天” 的情况。
- 不要在<script>标签里写 HTML 代码，它只认 JS 语法。
三、外部脚本：单独写 JS 文件（推荐）
如果 JS 代码很多，或者想在多个网页里复用，就把它写成单独的.js文件，这就像把常用的工具放在一个专门的工具箱里。
实操步骤：
javascript
console.log("这是外部JS文件里的代码");
document.write("Hello，来自外部JS！");
html
<!DOCTYPE html>
<html>
<body>
<h1>外部JS演示</h1>
<!– 引入外部JS文件 –>
<script src="main.js"></script>
</body>
</html>
优点：
- 代码和 HTML 分离，结构更清晰，方便维护
- 浏览器会缓存 JS 文件，下次打开网页不用重新下载，速度更快
- 同一个 JS 文件可以被多个 HTML 页面引用，不用重复写代码
注意：
- 一旦用了src属性引入外部 JS，<script>标签里就不能再写 JS 代码了，写了也不会执行
- src属性里的文件名要和实际 JS 文件名一致，而且要放在同一个文件夹里，不然会找不到文件
四、行内脚本：写在 HTML 标签里（偶尔用）
行内脚本就是把 JS 代码直接写在 HTML 标签的事件属性里，比如onclick（点击事件），就像给按钮贴了一个 “点击我就执行这个操作” 的标签。
示例：
html
<!DOCTYPE html>
<html>
<body>
<!– 点击按钮会执行onclick里的JS代码 –>
<button onclick="alert('你点击了按钮！')">点我一下</button>
</body>
</html>
在浏览器打开，点击按钮就会弹出提示框。
注意：
- 行内脚本只适合写非常简单的代码，代码多了会让 HTML 变得很乱，不好维护
- 尽量少用行内脚本，优先用外部脚本
五、新手常见问题解答
1. 为什么我的 JS 代码不执行？
- 检查<script>标签有没有写错，比如写成了<scirpt>
- 外部 JS 的话，检查文件名和路径对不对，是不是和 HTML 文件在同一个文件夹
- 代码有没有语法错误，比如少了括号、引号
2. <script>标签放在<head>和<body>有什么区别？
- 放在<head>里：网页还没加载内容，JS 就执行了，如果 JS 要操作页面上的元素（比如修改文字），会找不到元素，导致出错
- 放在<body>底部：页面内容加载完了，JS 再执行，就不会有找不到元素的问题，新手推荐这种方式
3. 什么是console.log？
console.log是 JS 里用来输出信息的命令，不会显示在网页上，要在浏览器的开发者工具（按 F12）的 Console 面板里才能看到，主要用来调试代码，看代码有没有执行，变量是什么值。
六、本篇小结
- 把 JS 写入网页有三种方式：内联脚本（写在<script>标签里）、外部脚本（写在.js文件里，用src引入）、行内脚本（写在 HTML 标签的事件属性里）
- 推荐使用外部脚本，代码结构清晰，方便维护和复用
- 新手写 JS 代码，记得把<script>标签放在<body>底部，避免找不到页面元素
- 多动手实操，写代码遇到问题很正常，学会用 F12 开发者工具的 Console 面板看错误信息
🔔 下一篇预告
第 03 篇：《变量和数据类型：给 JS 代码装个 “盒子” 存东西》
