JavaScript 基础入门

如果把网页比作一个人：

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 属性，这是新手避坑的关键！

html 复制代码

<!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 操作）

javascript 复制代码

// 1. 找元素：用 querySelector 找到 <h1>
const myHeading = document.querySelector("h1");

// 2. 改内容：修改它的文字属性
myHeading.textContent = "Hello World！";

魔法 2：点击切换图片（事件监听 + 属性修改）

javascript 复制代码

// 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。它能把数据存在用户电脑上，刷新网页也不会丢。

javascript 复制代码

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 步。把这张图印在脑子里，你就算真正入门了！

新手避坑指南

报错 Cannot read properties of null（找不到元素） ：
- 原因：JS 执行时，HTML 还没加载完。
- 解决：检查 <script> 标签有没有加 defer 属性，或者把 <script> 放到 </body> 标签的前面。
名字存了但刷新后不显示 ：
- 原因：存数据（setItem）和取数据（getItem）时，用的"标签名（key）"拼写不一致。
- 解决：仔细检查字符串，比如是不是把 savedName 错拼成了 saveName。