⚡ 第三课：JavaScript — 让网页"活"起来

JavaScript（简称 JS）是一门编程语言，运行在浏览器里。

还记得前两课的比喻吗？

技术	比喻	负责什么
HTML	🏠 房子的结构	墙、门、窗放在哪里
CSS	🎨 房子的装修	颜色、大小、好不好看
JavaScript	🔌 房子的电器	开灯、按门铃、空调调温

HTML 搭骨架，CSS 做美化，JS 让一切动起来——响应用户操作、改变内容、做计算。

📍 1. JavaScript 写在哪里？

方式一：写在 HTML 的 `<script>` 标签里（推荐放 `</body>` 前面）

你正在看的这个页面就是用这种方式，翻到最下面看看 👇

方式二：写在标签的 `onclick` 等属性里

<button onclick="alert('你好！')">点我</button>

方式三：单独的 .js 文件

<script src="script.js"></script> — 和外部 CSS 一样，多页面共享。

📦 2. 变量 — 给数据起名字

变量就像一个有名字的盒子，可以把数据放进去、随时拿出来用。

            let name = "小明";

            let age = 18;

            let isStudent = true;

let = 声明变量（创建一个盒子）

"小明" / 18 / true = 放进去的值

🔤 JS 里三种常见数据类型：
"文字" = 字符串（String）— 文字要加引号
18 = 数字（Number）— 数字不加引号
true / false = 布尔值（Boolean）— 对/错

⚙️ 3. 函数 — 把操作打包成一个指令

函数就像一个机器：你给它输入，它按你设定的方式处理，然后输出结果。

            function sayHello(name) {

              alert("你好，" + name + "！");

            }

            sayHello("小明");  // 👈 调用函数，弹出"你好，小明！"

function = 声明"这是一个函数"

sayHello = 函数名（自己起）

(name) = 参数（传入的东西）

{ ... } = 函数体（具体做什么）

点击按钮，调用 sayHello() 函数 👇

🔍 4. DOM 操作 — 用 JS 控制 HTML 元素

DOM = Document Object Model。简单说就是：JS 可以找到页面上的任意元素并修改它。

三步走：

① 找到元素：document.querySelector("#id名")

② 修改内容：.textContent = "新内容"

③ 修改样式：.style.color = "red"

            // 找到 id 为 "demo" 的元素，改它的文字

            let el = document.querySelector("#demo");

            el.textContent = "被改了！";

            el.style.color = "red";

🎮 5. 互动演示 — 这些全是用 JS 做的

以下每个例子都是真实的 JavaScript，点击试试看！

例子 ①：计数器

10

例子 ②：点击按钮改文字颜色

我会变色！

例子 ③：输入你的名字，点按钮打招呼

例子④：点击按钮切换背景颜色

🛠️ 6. 动手试一试！

✏️ 三个小挑战：
① 找到本文件里的 <script> 标签，把计数器初始值从 0 改成 10
② 给打招呼功能加一句，让它也显示"今天天气真好！"
③ 自己写一个新按钮，点击后把页面背景变成黑色

操作方式：

用记事本打开 C:\Users\HP\lesson1\lesson3-js.html
找到 <script> 标签（文件底部）
改代码 → 保存 → 刷新浏览器看效果

📋 7. 今日总结

概念	是什么	怎么写
变量	存数据的盒子	`let name = "小明";`
函数	打包好的操作	`function hi() { alert("Hi"); }`
找元素	选中页面元素	`document.querySelector("#id")`
改内容	修改文字	`el.textContent = "新内容";`
改样式	修改 CSS	`el.style.color = "red";`
事件	用户做了什么	`onclick="函数名()"`

🎉 你已经学完了前端三大件！
HTML（结构）+ CSS（样式）+ JavaScript（交互）= 任何网页的基础。
之后学的所有东西（框架、库、工具）都是在这三个上面搭建的。

✅ 下一步？

现在你具备了做简单交互页面的能力！

下一课可以学：

📐	CSS Flexbox 布局	让元素整齐排列，做真正的网页排版
🔄	JavaScript 条件与循环	`if/else`、`for` 循环，让程序有逻辑
📝	做一个完整小项目	比如：待办事项清单、计算器、个人主页

告诉我你想学哪个，或者直接说"下一课" 🚀