← 代码俱乐部 · 工匠层 03 / 8

第 03 节 · 让它会动：JavaScript

按钮被点了会怎样？JavaScript 让网页"活"过来。

步骤

在 <body> 里加：
```
<button onclick="hello()">点我</button>
<p id="msg"></p>
```
第 1 块 · HTML 的按钮和消息位置

<button onclick="hello()">点我</button> = 做一个按钮，当被点击时调用 hello 函数。<p id="msg"></p> = 做一个空的段落，给它一个名字 "msg"（后面 JavaScript 会用这个名字往里面填内容）。

👉 试改：把"点我"改成"开始"或"按一下"，看按钮文字怎么变。
```
<script>
  function hello() {
    document.getElementById('msg').textContent = '你点了我！';
  }
</script>
```
第 2 块 · JavaScript 函数让网页活过来

<script> 标签里面是 JavaScript。function hello() { ... } = 定义一个叫 "hello" 的函数（就是"一组命令"）。document.getElementById('msg') = 在网页里找到 id 是 "msg" 的那个元素。.textContent = '你点了我！' = 把这个元素的内容改成这段字。

💡 这就是"交互"的核心：用户点按钮（HTML）→ 触发函数（JavaScript）→ 改变网页内容（DOM）。三步一轮回。

👉 试改：把 '你点了我！' 改成你想说的任何话。保存刷新，点按钮试试。
📋 看 / 复制完整代码
```
<button onclick="hello()">点我</button>
<p id="msg"></p>
<script>
  function hello() {
    document.getElementById('msg').textContent = '你点了我！';
  }
</script>
```
刷新。点按钮 → "你点了我！" 出现了。
改 '你点了我！' 成你想说的话。改 '点我' 成你想要的按钮文字。
挑战：让按钮每次点击显示不同的话。
提示：用一个数组 + 随机数。让 Qwen 帮你写。

动手练习 1：点击按钮改变颜色

动手按钮会变魔术

任务：改改下面的代码。现在点这个按钮，网页的背景就会变色。试试改变 JavaScript 里的颜色代码。可以用 'tomato'、'lightblue'、'gold' 或 '#ff6699' 这样的颜色码。

参考答案

一个改进版，加了多个按钮和更好的样式：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
      transition: background 0.5s;
    }
    button {
      padding: 12px 24px;
      margin: 5px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background: #667eea;
      color: white;
    }
    button:hover {
      background: #764ba2;
    }
  </style>
</head>
<body>
  <h1>选一个你喜欢的颜色</h1>
  <p>点下面的按钮，背景会变颜色。</p>
  
  <button onclick="document.body.style.background = '#ff6b6b';">红</button>
  <button onclick="document.body.style.background = '#ffd93d';">黄</button>
  <button onclick="document.body.style.background = '#6bcf7f';">绿</button>
  <button onclick="document.body.style.background = '#4ecdc4';">青</button>

  <script>
    // JavaScript 让网页"活"过来
    // onclick 就是"点击后要干什么"的规则
  </script>
</body>
</html>

关键：onclick="..." 就是 JavaScript。当用户点按钮时，document.body.style.background 就改变网页的背景颜色。

动手练习 2：一个计数器

动手做一个计数器

任务：完成这个计数器。每次点"加 1"，数字就增加 1。现在它已经可以用了，试试点按钮。你也可以改变功能 —— 比如改成加 5、或者加一个"减 1"的按钮。

参考答案

一个功能完整的计数器，加了样式和减法功能。注意代码结构 —— 每个功能都有自己的函数：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
      text-align: center;
      background: #f5f5f5;
    }
    #count-display {
      font-size: 64px;
      color: #667eea;
      margin: 30px 0;
      font-weight: bold;
    }
    button {
      padding: 12px 24px;
      font-size: 16px;
      margin: 5px;
      border: none;
      border-radius: 5px;
      background: #667eea;
      color: white;
      cursor: pointer;
    }
    button:hover {
      background: #764ba2;
    }
  </style>
</head>
<body>
  <h1>我的计数器</h1>
  <div id="count-display">0</div>
  
  <button onclick="add()">+1</button>
  <button onclick="subtract()">-1</button>
  <button onclick="reset()">重置</button>

  <script>
    let count = 0;
    
    function add() {
      count = count + 1;
      update();
    }
    
    function subtract() {
      count = count - 1;
      update();
    }
    
    function reset() {
      count = 0;
      update();
    }
    
    function update() {
      document.getElementById('count-display').innerText = count;
    }
  </script>
</body>
</html>

进阶：注意我把"更新显示"提取出来写成一个单独的 update() 函数。这样代码不重复，更好维护。这就是"代码重构"。

动手练习 3：随机颜色生成器

动手每次点击都出现不同颜色

任务：完成这个随机颜色生成器。每次点击"生成颜色"，背景就会变成一个随机颜色。关键是用 JavaScript 的随机数函数。代码框已经有个开始的结构，你需要补完 getRandomColor() 函数。

参考答案

代码已经给你写好了。核心是这一行生成随机颜色的 JavaScript：

let color = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');

让我们拆解一下：

Math.random() 生成 0-1 的小数
乘以 16777215（=0xFFFFFF，最大颜色值）得到 0-16777215 的数
.toString(16) 转成 16 进制（颜色码的格式）
.padStart(6, '0') 补齐到 6 位（比如 'ff' 变成 '0000ff'）
前面加 '#' 就是完整的颜色码了

这里用到了很多 JavaScript 的高级概念，慢慢理解也没关系。关键是每点一下按钮，就能看到新颜色。

小测验：JavaScript 是干什么的

小测你理解 JavaScript 了吗？

下面哪个说法最对？

JavaScript 是用来写 HTML 的。
JavaScript 让网页能"听"用户的动作（点击、输入等），然后"做出反应"。
JavaScript 和 Python 是同一个东西。

解释：HTML + CSS 只能做"静态"网页。JavaScript 让网页"活"起来 —— 用户点了，它就反应；用户输入了，它就处理。这才是真正的"交互"。

小测 document.getElementById() 有什么用？

下面哪个说法最对？

document.getElementById() 可以找到网页上某个特定的元素（比如一个 div 或 p），这样我们就可以改它。
document.getElementById() 是用来删除网页上的所有元素的。
document.getElementById() 只能找 HTML 元素，找不到 CSS。

解释：在计数器的例子里，我们用 document.getElementById('count-display') 找到了那个显示数字的 div。然后用 .innerText = count 改了它显示的内容。这就是 JavaScript 和 HTML 配合的方式。

这一节学到什么

HTML 给"长什么样"。CSS 给"好不好看"。JavaScript 给"会不会反应"。三个一起，是真正的网页。

第 03 节 · 让它会动：JavaScript

步骤

第 1 块 · HTML 的按钮和消息位置

第 2 块 · JavaScript 函数让网页活过来

动手练习 1：点击按钮改变颜色

动手练习 2：一个计数器

动手练习 3：随机颜色生成器

小测验：JavaScript 是干什么的

这一节学到什么