正在加载...
JavaScript 写在哪里
你已经知道 JavaScript 负责行为。下一个问题很实际：代码应该写在哪里，浏览器才能找到它，而你要改的元素也已经存在？
应该把 JavaScript 放在 HTML 页面的什么位置？
把 JavaScript 放进 <script> 元素——可以写在标签之间的内联代码，也可以用 src 指向外部 .js 文件。初学者日常要改页面时，把脚本放在紧挨着 </body> 之前，这样上面的 HTML 已经就绪。代码变长后，挪到外部文件，并保持同样的 body 末尾习惯（稍后会学到 defer）。
三种放置方式一览
📊 JavaScript 可以放在哪里
| 选择 | 放在何处 | 初学者最适合的用途 |
|---|---|---|
| 写在 head 里 | <head> 中的 <script> |
仅极小初始化；元素尚未出现时有风险 |
| 写在 body 末尾 | 紧挨 </body> 之前的 <script> |
改标题或文本的短演示默认选择 |
外部 .js 文件 |
<script src="app.js">（常在 body 末尾） |
逻辑变长或要复用文件时的默认选择 |
写在 head 里的脚本（了解，慎用）
head 中的脚本会较早运行，此时浏览器可能还在读文档。这会推迟可见内容。若代码立刻用 getElementById 找下面的元素，它可能还不存在——得到 null 或报错。
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>
何时 head 脚本合适
- 只打日志或设置不依赖 DOM 的简单值
- 用现代属性加载库（稍后会见到
defer/async） - 不是本课程「改这段文字」演示的默认做法
写在 body 末尾（初学者默认）
先放好访客需要的标记，再运行脚本。脚本上方带 id 的元素在执行语句时已经在文档里。
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>
这个习惯为什么有用
- 标题和段落可以在脚本工作结束前先显示
getElementById("title")能找到真实节点- 学语言时短演示仍可放在一个文件里
- 之后把同样语句挪到外部文件，思路不变
外部 JavaScript 文件（项目默认）
结构留在 HTML，逻辑放进 app.js。用 src 指向文件。路径相对 HTML，除非你写了子目录。
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>
document.getElementById("title").textContent =
"Loaded from app.js";
为什么项目变大后更宜用外部文件
- 一个
.js可服务多个页面 - 编辑器在独立文件里对 JavaScript 高亮更清晰
- 避免在标记里塞巨大的
<script>块 src路径写错时页面看似正常却不运行——若无动静，检查 Console 与 Network
顺序很重要
浏览器从上往下读。解析器遇到脚本就执行（除非以后用高级属性）。若第一行需要 #title，该元素必须出现在 HTML 中脚本的上方，或者等文档加载完。把脚本放在 body 末尾，是把顺序做对的简单办法。
自己动手
- 用 body 末尾示例创建
where.html。打开并确认标题已更新。 - 改
textContent字符串，保存并刷新。 - 用外部示例的 JavaScript 创建
app.js。在where.html的</body>前只保留<script src="app.js"></script>。 - 临时改名
app.js或弄坏src路径，刷新并看 Console——再修好路径。 - 可选：把同一脚本（不加
defer）挪到 head，观察getElementById可能失败；再放回 body 末尾。
常见错误
- 把会更新 DOM 的脚本放在 head，让
getElementById在元素出现前就运行 <script src="app.js">拼写或文件夹写错——页面看起来正常却什么也不跑- 每个 HTML 里堆几百行内联代码，而不是共用一个
.js - 把本节与 CSS 引入方式搞混：样式用
<link>/<style>；行为用<script>
小结
- JavaScript 写在
<script>里——内联或用src指向.js - 代码要碰页面元素时，body 末尾是对初学者友好的默认位置
- head 脚本跑得早；在掌握加载属性前，不要在那里更新 DOM
- 演示变大后，外部文件是项目默认
- 脚本顺序跟随文档顺序，除非以后使用高级加载选项
- 练习把能跑的内联演示拆成 HTML +
app.js
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
6
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部