如果把网页比作一个人：
- HTML 是骨架：决定哪里是头、哪里是手。
- CSS 是皮肤和衣服：决定长得好不好看。
- JavaScript（简称 JS）是肌肉和神经：决定网页能不能“动”起来。
没有 JS，网页就是一张静态海报；有了 JS，网页就变成了可以互动的游戏、能验证密码的表单、能滑动加载的瀑布流。
趣味科普：1995 年，网景公司的程序员仅用 10天 就写出了 JS 的初版。为了蹭当时 Java 语言的热度，起名叫 JavaScript，但实际上它俩毫无关系（就像“雷锋”和“雷峰塔”）。如今，JS 已经成为能写网页、做手机 APP、写后端服务的“全栈霸主”。
核心前置知识：小白必懂的 3 个概念
在动手写代码前，必须先搞懂这 3 个“绕不开”的基础概念。
1. 变量：装数据的“带标签盒子”
变量的作用是给数据起个名字，方便反复使用。
| 声明关键字 | 特点 | 适用场景 | 示例 |
|---|---|---|---|
const | 不可变（常量） | 声明后不会再改变的数据 | const name = "张三"; |
let | 可变（变量） | 声明后可能会被修改的数据 | let age = 20; age = 21; |
2. DOM：网页的“结构图纸”
DOM（文档对象模型） 是浏览器把 HTML 转换成的一棵“对象树”。 JS 看不懂 HTML 代码，但它能看懂 DOM 树。JS 拿着这张图纸，就能精准找到网页上的任何元素并修改它。
graph TD
HTML((html)) --> HEAD((head))
HTML --> BODY((body))
HEAD --> TITLE[title: 网页标题]
BODY --> H1[h1: 标题文字]
BODY --> IMG[img: 图片]
BODY --> BUTTON[button: 按钮]
style HTML fill:#f9f2f4,stroke:#d04437,stroke-width:2px
style BODY fill:#e6f2ff,stroke:#007bff,stroke-width:2px
style H1 fill:#d9ead3,stroke:#93c47d
style IMG fill:#d9ead3,stroke:#93c47d
3. 事件监听：给网页安上“传感器”
让 JS 盯着用户的动作（点击、滑动、输入），一旦触发，就执行对应的代码。
- 核心语法：
addEventListener("事件类型", 触发后执行的代码)
综合实战：打造你的第一个交互网页
我们将通过一个综合案例，一次性掌握 改文字、换图片、存数据 三大核心技能。
步骤 1：搭建 HTML 骨架
新建 index.html，注意 <script> 标签里的 defer 属性，这是新手避坑的关键！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的交互网页</title>
<!-- 引入 JS。defer 表示“后台加载，等 HTML 渲染完再执行”，防止 JS 找不到元素 -->
<script defer src="main.js"></script>
</head>
<body>
<h1>原来的标题</h1>
<img src="images/firefox-icon.png" alt="火狐图标" id="myImg">
<button id="changeUserBtn">切换用户</button>
</body>
</html>
步骤 2：编写 JS 代码
新建 main.js，把下面的代码复制进去。我们分三步来实现交互：
魔法 1：自动修改标题（DOM 操作）
// 1. 找元素：用 querySelector 找到 <h1>
const myHeading = document.querySelector("h1");
// 2. 改内容：修改它的文字属性
myHeading.textContent = "Hello World！";
魔法 2：点击切换图片（事件监听 + 属性修改）
// 1. 找元素：找到图片
const myImage = document.querySelector("#myImg");
// 2. 听事件：监听点击动作
myImage.addEventListener("click", () => {
// 3. 做处理：获取当前图片路径
const currentSrc = myImage.getAttribute("src");
// 4. 更页面：判断并切换路径
if (currentSrc === "images/firefox-icon.png") {
myImage.setAttribute("src", "images/firefox2.png"); // 换新图
} else {
myImage.setAttribute("src", "images/firefox-icon.png"); // 换回原图
}
});
魔法 3：记住用户的名字（本地存储 + 弹窗）
这里我们会用到浏览器的“小仓库”——localStorage。它能把数据存在用户电脑上，刷新网页也不会丢。
const myButton = document.querySelector("#changeUserBtn");
// 定义一个设置名字的函数
function setUserName() {
// prompt 会弹出一个输入框
const userName = prompt("请输入你的名字：");
if (!userName) {
setUserName(); // 如果没输入，就重新弹窗要求输入
} else {
// 存数据：把名字存进本地仓库，贴上标签叫 "savedName"
localStorage.setItem("savedName", userName);
// 模板字符串：用反引号 ` 和 ${} 把变量塞进句子里
myHeading.textContent = `JS 太酷了，${userName}！`;
}
}
// 页面刚打开时的判断逻辑
if (!localStorage.getItem("savedName")) {
setUserName(); // 没存过，弹窗让用户输入
} else {
const savedName = localStorage.getItem("savedName"); // 存过，直接取出来
myHeading.textContent = `JS 太酷了，${savedName}！`;
}
// 点击按钮时，重新设置名字
myButton.addEventListener("click", () => {
setUserName();
});
总结：JS 交互的“万能 4 步曲”
不管是做简单的按钮点击，还是复杂的网页游戏，JS 的核心交互逻辑永远逃不开这 4 步。把这张图印在脑子里，你就算真正入门了！
graph TD
A[1. 找元素<br>querySelector] -->|找到目标| B[2. 听事件<br>addEventListener]
B -->|用户触发| C[3. 做处理<br>逻辑判断/存取数据]
C -->|计算完毕| D[4. 更页面<br>修改 DOM/样式]
style A fill:#ffe6cc,stroke:#ff9900
style B fill:#e6f2ff,stroke:#007bff
style C fill:#e6ffe6,stroke:#28a745
style D fill:#f9f2f4,stroke:#d04437
新手避坑指南
- 报错
Cannot read properties of null（找不到元素）：- 原因：JS 执行时，HTML 还没加载完。
- 解决：检查
<script>标签有没有加defer属性，或者把<script>放到</body>标签的前面。
- 名字存了但刷新后不显示：
- 原因：存数据（
setItem）和取数据（getItem）时，用的“标签名（key）”拼写不一致。 - 解决：仔细检查字符串，比如是不是把
savedName错拼成了saveName。
- 原因：存数据（
