JavaScript 入门：让网页"动"起来的那门语言

你已经会用 HTML 立骨架、用 CSS 穿衣服了，但现在的页面还是”死的”——点按钮没反应、输内容不校验、切换标签要刷新。想让网页”活”起来、能跟人互动，就缺最后一块拼图：JavaScript（简称 JS）。

打个比方：盖房子时，HTML 是钢筋水泥搭出的毛坯房（结构），CSS 是刷墙、铺地板、挂窗帘（外观），而 JS 是房子里的水电开关、智能门锁、声控灯——它决定”按下开关灯亮不亮""开门有没有反应”。没有 JS 的网页，就像一个装修再漂亮却不通水电的样板间，好看但不能用。

简单说，HTML 是骨架、CSS 是外观、JS 是行为。它负责”点击后发生什么""数据从哪来""页面怎么跟着变”。

JS 能在哪跑

JS 最早是为浏览器发明的，所以你每天都在用的浏览器里就有一个 JS 引擎（Chrome 的 V8、Safari 的 JavaScriptCore、Firefox 的 SpiderMonkey）。你在网页里写的 JS，浏览器当场就能执行，不需要你额外安装任何东西。

后来有人把 V8 引擎搬出了浏览器，于是 JS 也能在服务器端跑（这就是 Node.js）、在桌面/手机 App 里跑、甚至写小程序。但对初学者来说，**先把它当成”写在网页里的脚本语言”**就够了——本篇所有例子都不需要装任何环境，浏览器自带。

小知识：所谓”引擎”，就是一段能把你写的 JS 代码翻译成机器能执行指令的程序。不同浏览器用的引擎名字不同，但跑出来的结果基本一样，所以我们不用操心它。

第一段代码：console.log

学任何语言都从”打印一句话”开始，就像学外语先学”你好”。在 JS 里，打印（把内容输出到控制台）用 console.log：

console.log('你好，世界');
console.log(1 + 2);

把这两行直接复制到浏览器控制台（后面教你怎么打开），你会看到：

你好，世界
3

第一行原样打印了字符串，第二行先把 1 + 2 算成 3 再打印。这说明 JS 不只会”显示文字”，还会”算算术”。

console 是浏览器提供的一个”控制台”对象，.log 是它的方法（你可以先把它理解成”贴在 console 身上的一个功能按钮”，按下去就打印）。那打印出来去哪看？答案是开发者工具的控制台。打开方式：

Windows / Linux：按 F12 或 Ctrl + Shift + I
Mac：按 Cmd + Option + I

打开后切到 Console（控制台） 标签页，你 console.log 的内容就显示在那里。这是你以后调试 JS 最重要的窗口，请养成”边写边看控制台”的习惯——它就像厨师尝菜用的勺子，随时看看味道对不对。

你可以现在就试：在控制台里直接输入 2 * 3 回车，会立刻得到 6。控制台不仅能打印，还能当计算器、当练习场，随时敲随时跑。

把 JS 写进网页

浏览器里能跑了，但真正做网页时我们要把 JS 写进 HTML 文件。有两种写法。

第一种：内联，直接写在 HTML 里

用 <script> 标签把代码包起来，浏览器读到它就会执行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 JS 页面</title>
</head>
<body>
  <h1>我的页面</h1>

  <script>
    console.log('这段 JS 随页面一起执行');
    alert('欢迎来到我的网页！');
  </script>
</body>
</html>

alert 会弹出一个带确定按钮的小窗口，这也是 JS 跟用户”说话”最简单的方式。把上面这段存成 .html 文件双击打开，就能看到效果。

第二种：外部文件（强烈推荐）

当代码变多，把 JS 单独存成 .js 文件，再用 <script> 引入，结构更清爽：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部 JS 示例</title>
</head>
<body>
  <h1>我的页面</h1>
  <script src="main.js"></script>
</body>
</html>

// main.js
console.log('逻辑都写在这里，结构和行为分家，清爽');

外部文件的写法让 HTML 管结构、JS 管行为，各司其职。项目一大，你能很快找到”交互逻辑在哪”，而不是在长长的 HTML 里翻找。

重要细节：<script> 默认放在 </body> 之前（也就是所有 HTML 元素后面）。原因是：JS 执行时如果去找页面上的某个按钮，那个按钮必须已经存在，否则会找不到。把脚本放最后，保证执行时页面元素都加载好了。当然，现代写法也可以给 <script> 加 defer 属性放在 <head> 里，效果一样，但初学先记住”放最后最稳妥”。

让点击真的有反应

光打印还不够过瘾，来个真能互动的——点一下按钮，页面文字就变：

<button id="btn">点我</button>
<p id="msg">还没点呢</p>

<script>
  const btn = document.getElementById('btn');
  const msg = document.getElementById('msg');

  btn.addEventListener('click', () => {
    msg.textContent = '你点到我啦！';
  });
</script>

这段代码在做什么？我们拆开看：

document.getElementById('btn')：在页面里找 id 为 btn 的元素（就是那个按钮），把它装进变量 btn。
document.getElementById('msg')：同理找到那段文字 <p>。
btn.addEventListener('click', ...)：给按钮装一个”监听器”，意思是”当发生点击事件时，执行后面的函数”。
函数里 msg.textContent = '你点到我啦！'：把那段文字的内容改成新话。

点一下，下面的文字就从”还没点呢”变成”你点到我啦！“——这就是 JS 让页面”动”起来的最小示范。看不懂 document、addEventListener 这些细节没关系，后面会有专门讲 DOM 和事件的篇章，这里你只要感受一下”JS 能响应用户操作”就够了。

注释：写给人和未来的自己

代码是写给人看的，机器只是顺便执行。当一段逻辑比较绕，或者三个月后你自己回来看，可能完全忘了当时为什么这么写。注释就是给代码加的”便利贴”：

// 单行注释：这行不会执行，只是给人看的
const age = 18;   // 行尾注释也可以，说明这行在干啥

/*
  多行注释
  可以写一大段说明
  比如：下面这个函数用来计算折扣价
*/

注释的规矩：

单行注释用 //，从它到行尾都不执行。
多行注释用 /* 开头、*/ 结尾，中间随便写多少行。
注释不参与运行，纯粹是说明文字。好的注释解释”为什么这么写”，而不是把代码翻译一遍（代码本身已经说明”做了什么”）。

常见新手坑提醒

刚上手 JS，有几个坑几乎人人都踩过，提前告诉你：

中英文标点：JS 里所有符号（括号、分号、引号）都必须是英文半角。写成中文的 （ 或 ； 会直接报错。
引号要配对：'你好 只写了左引号没写右引号，JS 会一直等你把句子说完，结果后面的代码全乱套。
大小写敏感：Console 和 console 是两个不同的东西，Console.log 会报错（正确是 console.log）。JS 对大小写极其敏感。
脚本放错位置：把 <script> 放在 <head> 里又没加 defer，执行时页面元素还没加载，选不到元素。

这一篇你该记住的

HTML 是骨架、CSS 是外观、JS 是行为，负责让网页”活”起来、能交互。
JS 跑在浏览器的 JS 引擎里，不需要额外安装；console.log() 用来打印，F12 打开控制台看输出。
把 JS 写进网页有两种：内联 <script> 直接写，或外部 .js 文件用 <script src> 引入（推荐，结构清晰）。
脚本默认放 </body> 前，保证执行时元素已加载。
最小交互：getElementById 选元素 + addEventListener('click', 函数) 监听点击 + 改元素内容。
注释用 // 或 /* */；注意英文标点、引号配对、大小写。

下一篇我们讲变量与数据类型——程序怎么”记住”一个值、JS 里能装哪些类型的数据，以及最容易踩的类型转换坑。

前端开发