JavaScript：变量、函数与 DOM 操作

这一课你将能做到

1. 用变量、函数、条件判断和循环写出可复用的逻辑代码
2. 用 DOM API 读取和修改页面内容，实现点击按钮更新文字
3. 用事件监听和 ES6+ 语法（箭头函数、解构、模板字符串）写出符合现代规范的代码

为什么要学

HTML 给结构，CSS 给样式，JavaScript 给行为。没有 JS，网页就是一张静止的画；有了 JS，它可以响应点击、提交表单、拉取数据、动态更新内容。现代前端工程师写的代码，80% 以上是 JavaScript。

对初学者来说，JS 的门槛在于它同时有「命令式编程」（一步步告诉电脑怎么做）和「声明式/函数式」两种风格，浏览器环境还引入了异步、事件循环等概念。但入门阶段只需要掌握基础语法和 DOM 操作，就能做出真正有交互的页面。

先建立图像

浏览器内部执行 JS 的流程：

你写的 .js 文件
    ↓
浏览器解析 → 变量提升 → 执行代码 → 操作 DOM/发请求
    ↓
DOM 树发生变化 → 浏览器重绘页面 → 用户看到变化

JS 是单线程的，同一时间只能做一件事，但事件循环让它看起来像「同时做多件事」。这个概念后面会深入，入门阶段先记住：代码从上到下执行，事件回调在主线空闲时执行。

跟着做

步骤 1：变量、数据类型与运算符

新建 script.js，在 index.html 的 </body> 前引入：

<script src="script.js"></script>

// 变量声明：const 不可重新赋值，let 可重新赋值
const siteName = "学习站";
let visitCount = 0;

// 基本数据类型
const isActive = true;          // 布尔
const price = 199.9;            // 数字（JS 不区分 int 和 float）
const description = "前端课程";   // 字符串
const tags = ["html", "css", "js"]; // 数组
const user = {                  // 对象
    name: "张三",
    age: 25,
    isVip: false
};

// 模板字符串：反引号 + ${}
const greeting = `欢迎来到 ${siteName}，当前访客数 ${visitCount}`;
console.log(greeting);

// 运算符
visitCount++;                   // 自增
const total = price * 1.2;      // 算术
const canAccess = user.isVip || price === 0; // 逻辑
const hasTag = tags.includes("css"); // 数组方法

建议：默认用 const，只有需要重新赋值时才用 let。不要用 var，它有作用域提升问题，在现代代码中已淘汰。

步骤 2：函数与箭头函数

// 传统函数声明
function add(a, b) {
    return a + b;
}

// 函数表达式
const multiply = function (a, b) {
    return a * b;
};

// 箭头函数（现代项目最常用）
const divide = (a, b) => a / b;

// 多行箭头函数需要 return
const formatUser = (user) => {
    const level = user.age >= 18 ? "成年" : "未成年";
    return `${user.name}（${level}）`;
};

console.log(add(2, 3));          // 5
console.log(formatUser(user));   // 张三（成年）

箭头函数和传统函数有一个关键区别：this 的绑定方式不同。入门阶段先记住：回调函数（比如事件监听、数组方法）优先用箭头函数，类方法或需要动态 this 时用传统函数。

步骤 3：条件判断与循环

// if / else
function getDiscount(user) {
    if (user.isVip) {
        return 0.8;
    } else if (user.age >= 60) {
        return 0.9;
    } else {
        return 1.0;
    }
}

// 三元表达式（简短条件）
const statusText = user.isVip ? "VIP 用户" : "普通用户";

// 循环
for (let i = 0; i < tags.length; i++) {
    console.log(tags[i]);
}

// 数组高阶方法（现代写法，推荐）
tags.forEach((tag) => console.log(tag));

const upperTags = tags.map((tag) => tag.toUpperCase());
console.log(upperTags); // ["HTML", "CSS", "JS"]

const longTags = tags.filter((tag) => tag.length > 2);
console.log(longTags);  // ["html", "css"]