前面 12 篇把网页的结构（HTML）和表现（CSS）都配齐了：页面能显示内容、也好看了，但它还是**"死的"**——点按钮没反应、数据不会变。让页面对用户的操作"活"起来，靠的是前端三件套里的第三门语言 JavaScript。这一篇先回答"JS 是什么、管什么"，再解决第一个动手问题：JS 代码写在哪里。
Web 标准的三件套
课程先回到 Web 标准那张图：
Web标准也称网页标准，由一系列的标准组成，大部分由 W3C（World Wide Web Consortium，万维网联盟）负责制定。
| 语言 | 负责 | 具体管什么 |
|---|---|---|
| HTML | 网页的结构 | 页面元素和内容 |
| CSS | 网页的表现 | 页面元素的外观、位置等页面样式，如颜色、大小等 |
| JavaScript | 网页的行为 | 交互效果 |
一句话：HTML 管"有什么"，CSS 管"长什么样"，JS 管"能干什么"。（这张图在 Web前端初识里出现过，这一篇开始真正用它。）
JavaScript 是什么
JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
三个定语说的是三件事：
| 定语 | 意思 |
|---|---|
| 跨平台 | 只要有浏览器就能跑，不用为 Windows、macOS 各写一份 |
| 面向对象 | 它用"对象"来组织代码和数据——自定义对象、DOM 里"把标签当对象处理"，都是这个特点的体现 |
| 脚本语言 | 不需要手动编译，写完直接由浏览器解释执行；改一行、刷新页面就能看到效果 |
WARNING
JS 和 Java 只是名字像（历史原因），两家不同公司的两套设计：Java 是编译型的强类型语言，JS 是解释型的弱类型脚本语言。这门课后面写后端用的是 Java——别把两者的语法习惯互相硬套，尤其变量类型和相等判断（14 篇会专门对照）。
JavaScript 的三大组成
PPT 用一页把 JS 拆成了三块，这是理解后面所有内容的地图：
| 组成 | 全称 | 作用 | 典型例子 |
|---|---|---|---|
| ECMAScript | ECMA 的脚本语言标准 | 规定 JS 的基础语法核心知识 | 变量、数据类型、流程控制、函数、对象等 |
| BOM | Browser Object Model（浏览器对象模型） | 操作浏览器本身 | 页面弹窗、地址栏操作、关闭窗口等 |
| DOM | Document Object Model（文档对象模型） | 操作 HTML 文档 | 改变标签内的内容、改变标签内字体样式等 |
关于标准：
ECMA 国际（前身为欧洲计算机制造商协会）制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而 JavaScript 是遵守 ECMAScript 的标准的（ES2024 是最新版本）。
一句话记忆：ECMAScript 管"语法"，BOM 管"浏览器"，DOM 管"页面"。
引入方式一：内部脚本
内部脚本：将 JS 代码定义在 HTML 页面中——用 <script> 标签把 JS 代码包起来：
<body>
<!-- 页面内容 -->
<!-- 内部脚本 -->
<script>
alert('Hello JS'); // 弹出一个警告框
</script>
</body>PPT 上给这个方式总结了三句话：
- JavaScript 代码必须位于
<script></script>标签之间； - 在 HTML 文档中，可以在任意地方，放置任意数量的
<script>； - 一般会把脚本置于
<body>元素的底部，可改善显示速度。
IMPORTANT
为什么放 body 底部？因为浏览器渲染页面是从上往下逐行解析（03 篇讲过）。脚本放在上面，页面内容还没渲染出来就先执行脚本，用户要多等一会儿才看到内容；放到 body 底部，页面内容先显示出来，再执行脚本——这就是"改善显示速度"。（到了 DOM 那部分还有第二个好处：脚本执行时页面元素已经存在，才拿得到它们。）
NOTE
"任意地方、任意数量"说的是语法允许，不是"随便放都好"。多段脚本配合时要注意执行的先后顺序——浏览器从上往下解析，脚本写在前面的先执行（后面的综合题会让你亲自验证一次）。
引入方式二：外部脚本
外部脚本：将 JS 代码定义在外部 JS 文件中，然后引入到 HTML 页面中。
JS 文件里只放 JS 代码（课程文件 js/demo.js）：
alert('Hello JavaScript');HTML 页面里用 <script src=""> 把它引进来：
<!-- 引入外部 JS 文件，src 写 JS 文件路径 -->
<script src="js/demo.js"></script>课程文件对照：01. JS-引入方式.html 里内部脚本被注释掉了，默认演示的是外部脚本（双击打开会弹出 Hello JavaScript）；想试内部脚本，把注释拆掉、把外部脚本那行注释掉即可。
写的时候注意三条：
| 注意点 | 说明 |
|---|---|
src 写文件路径 | 相对路径 / 绝对路径都行，规则和 <img>、<video> 的 src 完全一样（见 HTML常见标签） |
| 标签里不要再写代码 | <script src="js/demo.js"> 里再写 JS 代码会被浏览器忽略，代码要写进 js 文件里 |
| 必须成对写结束标签 | 写成 <script src="js/demo.js"></script>；<script> 是双标签，不能像 <img> 那样自闭合 |
TIP
外部脚本最大的好处是复用：一个 js 文件可以被多个页面引入，改一处、所有页面都跟着变。页面一多，这一点就是"能不能维护"的分界线。
引入方式三：行内脚本（了解）
第三种写法是把 JS 直接写在标签上，靠"事件属性"触发：
<!-- 点击按钮时执行一段 JS：弹窗 -->
<button onclick="alert('点我干什么')">点我一下</button>NOTE
课程 PPT 只讲了内部脚本和外部脚本两种，行内方式属于补充（了解即可）：代码一多就没法维护，而且把结构（HTML）和行为（JS）搅在一起，违背"结构、表现、行为分离"的做法。
三种引入方式对比
| 方式 | 写法 | 代码放在哪 | 适合什么情况 |
|---|---|---|---|
| 内部脚本 | <script> JS 代码 </script> | 直接写在 HTML 页面里（一般 body 底部） | 代码很少、只有当前页面用 |
| 外部脚本 | <script src="js/demo.js"></script> | 单独的 .js 文件 | 代码多、多个页面共用（推荐） |
| 行内脚本 | 写在标签的事件属性里，如 onclick="..." | 标签上 | 了解即可，不推荐 |
JS 书写规范
结束符：每行结尾以分号结尾，结尾分号可有可无。
TIP
课程代码里每行都写了分号，跟着写就行。分号不写浏览器也能跑（它会自动补），但遇到多行连写、return 换行这类情况容易踩坑；统一写分号最省心，也方便以后写 Java（Java 的分号是必须的）。
小结
| 问题 | 答案 |
|---|---|
| JS 是什么？ | 一门跨平台、面向对象的脚本语言，控制网页行为、实现交互效果；和 Java 是完全不同的语言，只是基础语法类似 |
| Web 标准三件套各管什么？ | HTML 管结构（页面元素和内容）、CSS 管表现（外观、位置等样式）、JS 管行为（交互效果） |
| JS 由哪三部分组成？ | ECMAScript（基础语法）、BOM（操作浏览器）、DOM（操作 HTML 文档）；ES2024 是最新版本 |
| 代码写在哪里？ | 内部脚本写在 <script></script> 之间（一般放 body 底部）；外部脚本单独成 .js 文件，用 <script src=""></script> 引入；行内脚本（了解）写在标签事件属性里 |
| 内部脚本放哪儿、放几个？ | 语法上任意地方、任意数量，但推荐放 body 底部（先显示页面内容、再执行脚本） |
| 外部脚本的两个坑？ | 标签里再写代码会被忽略；<script src=""> 不能自闭合 |
| 书写规范？ | 每行结尾以分号结尾，分号可有可无 |
相关
练习题
一、知识回顾（读完直接做下面的实践题）
- Web 标准的三个组成部分：HTML 负责网页的结构（页面元素和内容）、CSS 负责网页的表现（外观、位置等页面样式，如颜色、大小）、JavaScript 负责网页的行为（交互效果）；大部分标准由 W3C（World Wide Web Consortium，万维网联盟）制定
- JavaScript（简称 JS）是一门跨平台、面向对象的脚本语言，用来控制网页行为、实现页面的交互效果；它和 Java 是完全不同的语言（概念和设计都不同），只是基础语法类似
- JS 的三大组成：ECMAScript 规定基础语法核心知识（变量、数据类型、流程控制、函数、对象等）、BOM（浏览器对象模型）操作浏览器本身（页面弹窗、地址栏操作、关闭窗口等）、DOM（文档对象模型）操作 HTML 文档（改变标签内的内容、标签内的字体样式等）
- ECMA 国际（前身为欧洲计算机制造商协会）制定了标准化的脚本程序设计语言 ECMAScript，JavaScript 遵守这个标准，ES2024 是最新版本
- 内部脚本：JS 代码必须位于
<script></script>标签之间；HTML 文档里可以任意地方放任意数量的<script>；一般把脚本放在<body>元素的底部，可改善显示速度 - 外部脚本：JS 代码单独写在 .js 文件里，HTML 里用
<script src="js/demo.js"></script>引入；src的路径写法与<img>的src一样 - 外部脚本的两个坑：引入外部脚本的
<script>标签里再写 JS 代码会被忽略；这个标签必须成对闭合，不能像<img>那样自闭合 - 行内脚本（补充了解）：把 JS 写进标签的事件属性里（如
onclick="alert('hi')"）；结构和行为混在一起，不推荐 - JS 书写规范：每行结尾以分号结尾，结尾分号可有可无（课程代码统一都写了分号）
- 脚本放 body 底部的原因：页面从上往下逐行解析，内容先渲染出来、脚本后执行，用户不用等脚本跑完才看到页面；多段脚本按在页面里出现的先后顺序执行
二、裸写题
- 提示（先自己想，实在想不出再点开）
一级 · 思路：JS 代码要包在一个专门的标签里；"弹出警告框"是脚本里的一行代码 二级 · 方法：用
<script>标签包住 JS 代码；弹窗用alert('内容')三级 · 骨架：<body>→ 页面内容 →<____>alert('____');</____>→</body>- 参考答案（做完再点开）
html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>内部脚本</title> </head> <body> <h1>JS 引入方式 - 内部脚本</h1> <!-- 内部脚本：放在 body 底部 --> <script> alert('Hello JS'); // 弹出一个警告框 </script> </body> </html>对照课程
01. JS-引入方式.html：课程里这段是被注释掉的（注释符<!-- -->包住了整个<script>标签），拆开注释就能看到弹窗。放 body 底部的原因：浏览器从上往下解析，页面内容先显示出来、脚本再执行，用户不用干等。- 新建一个 JS 文件，里面只写一句弹窗代码，内容是
Hello JavaScript - 新建一个 HTML 页面，用外部脚本的方式把它引入进来——这个页面里不出现任何 JS 代码 写完后双击 HTML 文件，应该看到弹窗；再把 JS 文件里的文字改一下、刷新页面，验证"改一处、页面就变"。 （练习文件
test_13_外部脚本.html和test_13_外部脚本.js，两个文件放在同一目录。）
- 提示（先自己想，实在想不出再点开）
一级 · 思路：JS 代码住在 .js 文件里，HTML 只负责"把它叫过来" 二级 · 方法：引入用
<script src="文件路径"></script>，路径是相对路径，和引入图片一样 三级 · 骨架：JS 文件里alert('____');；HTML 里<script ____="____.js"></script>- 参考答案（做完再点开）
test_13_外部脚本.js：javascriptalert('Hello JavaScript');test_13_外部脚本.html：html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>外部脚本</title> </head> <body> <h1>JS 引入方式 - 外部脚本</h1> <!-- 外部脚本：src 写 JS 文件的路径（同目录直接写文件名） --> <script src="test_13_外部脚本.js"></script> </body> </html>对照课程
01. JS-引入方式.html+js/demo.js：课程把 JS 文件放在js/目录下，所以写src="js/demo.js"；这里两个文件同目录，所以直接写文件名。注意<script src="...">要成对闭合，标签里不能写代码。- 新建一个 JS 文件，里面只写一句弹窗代码，内容是
- html
<html> <head> <title>JS引入方式</title> <script> alert('头部脚本'); </script> </head> <body> <h1>Hello JS</h1> <script src="js/demo.js" /> <script src="js/utils.js"> alert('这行代码会执行吗'); </script> </body> </html>要求：找出 2 处真错误和 1 处写法不推荐的地方，说明原因，并写出改正后的完整代码。
- 提示（先自己想，实在想不出再点开）
一级 · 思路：想一想
<script>是双标签还是单标签；外部脚本的标签里写代码会怎样；脚本一般推荐放在页面的什么位置 二级 · 方法：双标签要写结束标签；引入外部脚本的标签里不能写代码；内部脚本一般放<body>底部 三级 · 骨架：<script src="js/demo.js">____</script>/<script src="js/utils.js">____</script>/ 内部脚本挪到</body>前面- 参考答案（做完再点开）
① 真错误：
<script src="js/demo.js" />自闭合了。<script>是双标签，必须有结束标签，要写成<script src="js/demo.js"></script>。 ② 真错误：<script src="js/utils.js">标签里又写了 JS 代码。 引入外部脚本时，标签内的代码会被浏览器忽略——alert('这行代码会执行吗')永远不会执行；这行代码要写进js/utils.js文件里。 ③ 不推荐：内部脚本放在了<head>里。 语法上"任意地方"都能放，但放 head 里会在页面内容渲染之前就执行；一般放 body 底部。改正后：
html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS引入方式</title> </head> <body> <h1>Hello JS</h1> <!-- 外部脚本：双标签，必须写结束标签 --> <script src="js/demo.js"></script> <!-- 外部脚本：标签里不写代码，代码写进 js/utils.js --> <script src="js/utils.js"></script> <!-- 内部脚本：移到 body 底部 --> <script> alert('页面底部脚本'); </script> </body> </html>
三、综合题
- 新建一个 JS 文件（和 HTML 同目录），里面弹出一句话：
我是外部脚本 - 写 HTML 骨架，在
body的最上面用外部脚本引入这个文件 - 接着写一行标题：
三种 JS 引入方式 - 再放一个按钮，用行内方式实现：点它弹出
我是行内脚本 - 最后在
body底部写一段内部脚本，弹出我是内部脚本 - 保存后双击打开页面，观察并记录：哪一句话先弹出来？哪些要等你的操作才弹？（想一想这和"浏览器从上往下解析"有什么关系）
- 再回答一句：如果这三个地方都要用同一句弹窗代码，用哪种方式最省事？为什么？ （练习文件
test_13_综合_引入方式对照页.html给了骨架和写作区；外部 JS 文件test_13_综合_引入方式对照页.js在同一目录。）
- 提示（先自己想，实在想不出再点开）
一级 · 思路：脚本的执行顺序 = 代码在页面里出现的顺序；行内方式还要多一个"用户操作"的条件 二级 · 方法：外部脚本
<script src="文件.js"></script>；行内<button onclick="alert('...')">；内部<script>alert('...')</script>三级 · 骨架：<body>→<script src="____.js"></script>→<h1>____</h1>→<button ____="alert('我是行内脚本')">____</button>→<script>alert('____')</script>→</body>- 参考答案（做完再点开）
test_13_综合_引入方式对照页.js：javascriptalert('我是外部脚本');test_13_综合_引入方式对照页.html：html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>三种 JS 引入方式</title> </head> <body> <!-- ① 外部脚本：放在 body 最上面，是最先执行的脚本 --> <script src="test_13_综合_引入方式对照页.js"></script> <h1>三种 JS 引入方式</h1> <!-- ② 行内脚本：要等用户点击才执行 --> <button onclick="alert('我是行内脚本')">点我一下</button> <!-- ③ 内部脚本：放在 body 底部，最后执行 --> <script> alert('我是内部脚本'); </script> </body> </html>第 6 步的答案：外部脚本先弹（它写在最上面），关掉它之后内部脚本接着弹（同一时刻按页面里的先后顺序执行）；行内脚本要等你点按钮才弹。第 7 步的答案：外部脚本——代码只写一份，多个页面都能引入，改一处全站生效；写两遍就要维护两个地方，早晚会漏改一个。
- 新建一个 JS 文件（和 HTML 同目录），里面弹出一句话：