01JS 是什么与引入方式

HTML 是骨架，CSS 是皮肤，JS 是大脑。 点击按钮弹窗、表单不能为空、菜单点开收起、异步拉数据—— 这些「活」的交互，全靠 JavaScript。本课带你认识 JS，并掌握把 JS「请进」网页的三种方式。

约 14 分钟 7 个动手实验 JS 入门第一步

一、JS 是什么：网页的大脑

JavaScript（简称 JS）是一门脚本语言， 1995 年由网景公司（Netscape）的 Brendan Eich 用 10 天设计出来，最初叫 LiveScript， 后来蹭了 Java 的热度改名 JavaScript —— 它和 Java 几乎没关系， 只是名字撞车，就像「雷锋塔」和「雷锋」。现代浏览器都内置了 JS 引擎来执行它：

  • V8 —— Chrome / Edge / Node.js 在用，速度快得吓人
  • SpiderMonkey —— Firefox 的老牌引擎
  • JavaScriptCore（Nitro）—— Safari 在用
SKELETON

HTML骨架

标签搭出页面结构：标题、段落、图片、按钮。它只负责「有什么」，不懂长什么样、不会动。

SKIN

CSS皮肤

给骨架化妆：颜色、间距、字体、动画。它只负责「长什么样」，不会响应点击。

BRAIN

JS大脑

让页面「活」起来：响应点击、改文字、读服务器、存数据。它负责「做什么」和「什么时候做」。

前端三件套分工对照：谁负责什么
技术角色负责的问题典型语法
HTML骨架 / 结构页面上有什么<h1>标题</h1>
CSS皮肤 / 表现长什么样color: #B8552F;
JS大脑 / 行为做什么 / 何时做btn.addEventListener(...)

JS 在浏览器里能干什么？六件最常干的事：

这六件事涵盖了95% 的前端 JS 工作。 一开始看不懂 fetch、localStorage 没关系， 本课先把前 4 件事的心智模型建起来。

二、三种引入方式：行内 / 内部 / 外部

JS 要在浏览器里跑，得先用 <script> 标签「请进来」。三种请法各有用场：

< script src="main.js"><\/ script><\/ script>
三种引入方式对照：写法 / 场景 / 优缺点
方式写法适用场景优 / 缺
① 行内 <button onclick="..."> 教学演示、极小交互 写法简单，但结构与行为耦合，不能复用，难调试
② 内部 <script>...</script> 单文件 demo、本课 lab 不依赖外部文件，但 JS 和 HTML 搅在一起，多了就乱
③ 外部 <script src="x.js"></script> 所有真实项目 可浏览器缓存、多页面共享、配合模块化，团队协作标配
三种方式都摸一遍：点行内按钮弹窗、内部脚本写入文字、外部脚本在控制台打点（按 F12 看 Console）
真实项目里几乎只写外部一种。 行内 onclick= 在 HTML 基础课就讲过——结构与行为混在一起， 一旦 JS 多起来就完全维护不动。本课的 lab 因为单文件演示才用了内部写法。

三、script 标签的位置与 defer / async

<script> 放哪儿、要不要写 defer / async， 决定了「HTML 解析到一半会不会被阻塞」。四种加载模式一目了然：

script 四种加载模式对照：解析 / 下载 / 执行三段各发生在什么时候
模式解析 HTML 时下载 JS 时执行 JS 时顺序保证
默认（head 内）被阻塞阻塞期间同步下载立刻同步执行✓ 按出现顺序
放 body 末尾已解析完同步下载（页面已可见）立刻执行✓ 按出现顺序
<script defer>不被阻塞后台并行下载解析完 DOM 后按序执行✓ 严格按序
<script async>不被阻塞后台并行下载下载完立刻执行（可能打断解析）✗ 谁先下完谁先跑
<script type="module">不被阻塞后台并行下载同 defer✓ 严格按序，且自动严格模式
默认
head 内
body 末尾
defer
推荐
async
统计代码
解析 HTML下载 JS执行 JS
实色 = 真在做这件事；淡色 = 后台并行，HTML 不阻塞
defer 顺序保证：点按钮执行两个 deferred 脚本，看 console 里谁先谁后（按 F12 → Console）
结论：学完阶段老老实实把 <script> 放 </body> 之前； 想放在 head 又想不阻塞，加 defer； 只有「独立、不依赖任何东西」的脚本（如统计、埋点）才用 async。

四、第一个 JS 程序：控制台 + alert + document.write

写出你的第一行 JS。三种最直观的「输出」方式，难度从轻到重：

  • Console（F12 → Console）：在控制台打印，不打扰用户，写代码、调试都用它
  • alert()：浏览器弹窗显示，文案 + 一个「确定」按钮，最显眼
  • document.write()：直接把 HTML 写入页面，少用（页面加载完再调用会覆盖整个文档）
三个按钮触发三种输出方式：弹窗、页面写入、Console 打印（按 F12 → Console 看）
如果写 document.write('xxx') 在页面加载完之后调用， 会清空整个页面。这是它「少用」的原因—— 一旦忘删就跑路事件，几乎所有代码规范都禁它。改 DOM 请用 element.textContent 或 element.innerHTML。

五、注释与分号

两件「写 JS 之前就要会」的小事。 注释是写给人看的，浏览器会跳过； 分号是分隔语句的，理论上 JS 会自己插（叫 ASI）， 但永远别省略，因为 ASI 会翻车。

ASI 翻车现场 —— return 后面换行，会被自动插分号，返回 undefined：

✓ 正确写法
return {
  ok: true
};
→ 返回 { ok: true }
✗ 翻车写法
return
  { ok: true }
;
→ ASI 在 return 后插了 ;
返回 undefined！
✓ 括号保护
return (
  { ok: true }
);
→ 括号强制 return 一起读完
真跑一遍看返回值：三个按钮返回三种结果，对照「写错一行」差多远
ASI 翻车的经典坑：return 后面千万别换行。 一旦换行，JS 在 return 后悄悄塞了个 ;， 下面那行 { ... } 就成了「没人要的孤儿对象」，函数返回 undefined。 解决：要么同一行写完，要么加 () 括号保护。

六、变量声明的最简体验：let name = '前端自习室'

正式玩变量是下一节的内容，本课只先看一眼。 现在记住一件事：let 用来声明一个会变的变量。

输入框 + 按钮 = 第一个交互程序：在框里输入名字，点按钮弹出「你好，xxx」
命名速记：变量名小驼峰 userName、 常量大写下划线 MAX_COUNT、类名大驼峰 UserCard。 不以数字开头、不用关键字（let class return 等）， 见名知意 a = 1 是最差示范。

七、浏览器开发者工具：Console / Sources / Network

F12（Mac: Cmd + Opt + I）打开 DevTools。本课只展开Console， Sources 和 Network 留到调试课再细聊。

按 F12 打开开发者工具，三块面板分工

Console 控制台

直接写一行 JS 立刻跑，看输出。本课所有 console.log 都打到这里。

例：1 + 1 回车直接显示 2。

Sources 源代码

看 .js 文件、断点调试（运行时暂停看每一步）。

遇到 Bug 找它，比 console.log 高效得多。

Network 网络

看页面请求了哪些文件 / 接口、多久回来、多大。

页面慢？先打开 Network 看哪条最慢。

体验 Console：点按钮把 JS 结果打到控制台（按 F12 → Console 看彩色输出）
现在立刻做：F12 → Console → 输入 document.title 回车。 控制台会打印当前页面的标题。这就是你写 JS 的「游乐场」—— 任何一行不确定的代码，先丢到这里跑一下看对不对，再写进项目里。

八、本章小结

  • JS = 网页的大脑，让页面响应点击、改文字、拉数据； HTML 是骨架、CSS 是皮肤、JS 是行为。
  • 三种引入方式：外部 <script src="x.js"> 是项目标配； 行内 onclick= 不推荐，本课 lab 演示用内部写法。
  • <script> 放 </body> 之前最稳； 想放 head 还要不阻塞，加 defer； async 只给「独立小脚本」（埋点、统计）用。
  • 第一个程序三件套：console.log（调试）、alert（弹窗）、 document.write（慎用，会清页）。
  • 注释 // 和 /* */；分号永远别省略， return 后面别换行（ASI 会返回 undefined）。
  • 变量先看一眼：let name = '前端自习室'，下节课深入。
  • 工具：F12 → Console 是你写 JS 的游乐场。
动手练习： ① 新建一个 demo.html，外部引入一个 demo.js， 在 demo.js 里 console.log 打印三段文字：「hello / 1+1=2 / 当前时间」； ② 在 demo.js 里给页面上的按钮绑 click 事件， 点一下 alert('我被点了')（用 addEventListener，不写 onclick=）； ③ 把 <script> 移到 <head> 里、加上 defer， 看页面是否还能正常交互——动手试试，记忆最深。