从一张静止的网页，到一张会回应的网页
把一张网页想象成一栋房子。HTML 是骨架——墙、门、房间，它们说「这里是一个标题，这里是一个按钮」。CSS 是油漆和家具——颜色、字体、间距，让待在里面很舒服。光有这两样，你能得到一栋漂亮的房子，但它是一张静止的照片：什么都不动，你敲门它也不应。
JavaScript 就是让这栋房子活过来的东西。它是一门运行在网页内部的编程语言，能在页面加载之后改变各种东西：打开菜单、检查表单、数你点了几下、替换图片、载入新数据。如果说 HTML 和 CSS 描述网页长什么样，那么 JavaScript 描述的就是网页怎么动。整个核心思想就这一句——它是行为层。
回应用户：先监听，再回应
几乎所有的交互都遵循同一个简单的套路：网页监听某件事发生，一旦发生，就运行一段代码来回应。这「某件事」叫做事件（event）——一次点击、一次按键、一张页面加载完成。你把 JavaScript 指向某个元素，相当于在说：「当这个被点击时，就做这件事。」
这是最小的一个真实例子。我们在页面上找到一个按钮，然后挂上一个监听器：有人点击它时，弹出一句友好的提示。慢慢读——就算标点看起来有点怪，它的意思几乎就是大白话。
const button = document.querySelector("#hello");
button.addEventListener("click", function () {
alert("You clicked me!");
});我们交给 addEventListener 的那一小块，是一个函数——一捆有名字或没名字的步骤，它不会立刻运行。我们不希望提示框在页面一加载就弹出来；我们希望把它存起来、等到点击真的发生时再运行。函数就是 JavaScript 把一份活儿揣在口袋里、等到合适时机才掏出来的方式。
这段代码跑在哪里：访客的浏览器里
这里有个让很多新手犯迷糊的点，咱们说得特别清楚。这段 JavaScript 不是跑在某台遥远的服务器上。它就跑在访客的浏览器里——Chrome、Safari、Firefox——在他们自己的笔记本或手机上。浏览器自带一个内置引擎，它读懂你的 JavaScript，然后当场执行里面的指令。
正因为它跑在访客的机器上、就紧挨着他们正在看的屏幕，这一部分被称为前端——一个应用「前台」的部分，也就是用户真正看得见、摸得着的那一面。（「后端」是服务器那一侧，远在某个数据中心，我们在另一篇指南里讲。）前端的超能力是又快又近：一次点击能立刻得到回应，不用大老远跑去任何地方。
等待，但不卡住
有些活儿是瞬间的，比如弹出一个提示。另一些则很慢：向服务器要新数据、等一个几秒钟的计时器、加载一张图片。慢活儿的危险在于：如果页面干脆停下来死等，它就会卡住——按钮没反应、滚动锁死，访客会以为页面坏了。
JavaScript 的答案是异步代码（asynchronous 的简称）。与其堵在门口、把所有人都拦住直到慢活儿做完，你不如说：「先把这个启动，等它完成时，运行这个函数。」这期间页面就能腾出手来继续处理点击和滚动。这就像点咖啡——你不会僵在柜台前，而是拿个取餐器、坐下，咖啡好了取餐器自然会响。
console.log("Asking the server...");
fetch("/api/weather")
.then(function (response) { return response.json(); })
.then(function (data) {
console.log("Weather arrived:", data);
});
console.log("Page keeps working meanwhile.");注意那两条「这期间」的消息会先于天气数据打印出来——这正好证明页面从没卡住。再注意异步是用什么搭起来的：又是函数。我们把数据就绪后要运行的函数交给 fetch，用的还是点击例子里那套「先揣口袋、回头再掏」的招数。一旦你看清函数既是点击、也是等待的共同积木，一大片 JavaScript 就会突然在脑子里对上号。
小结
现在你已经掌握了 JavaScript 用来做什么的整体轮廓。它是行为层，叠在 HTML 的结构和 CSS 的样式之上，把一张静止的网页照片变成会听、会回应的东西。下面是我们走过的四步路。
- JavaScript 是行为层——它在 HTML 结构和 CSS 样式之上添加交互。
- 交互 = 监听一个事件（比如点击），然后运行一个函数来回应。
- 它跑在访客的浏览器里、在他们自己的设备上——这就是前端。
- 对于慢活儿，异步代码先启动工作、稍后再运行一个函数，这样页面永远不会卡住。