掌握 JavaScript：让网页真正"活"起来

<!-- index.html -->
<script>
    console.log("Hello JavaScript");
</script>

① 创建 index.html，写入基础 HTML 骨架
② 创建 app.js，写 console.log("hi");
③ 在 HTML 里通过 <script src="app.js"></script> 引入
④ 安装扩展 Live Server，右键 "Open with Live Server"
⑤ 修改代码自动刷新

// 单行注释

/*
 多行注释
 常用于函数说明
*/

function greet(name) {
    // 内部注释
    return `你好，${name}`;
}

let x = 10;            // 推荐加分号
let y = 20             // 不加分号 ASI 会自动插入（不推荐依赖）
console.log(x + y);

const PI = 3.14159;          // 常量：不会变
let age  = 18;               // 变量：可能会改
const name = "张三";         // 默认常量优先

// const 对象的内部属性仍可改（绑定不可变）
const user = { name: "Alice" };
user.name = "Bob";        // ✅ OK
user = {};                       // ❌ TypeError

if (true) {
    let x = 10;
    var y = 20;
}
console.log(x);  // ❌ ReferenceError: x is not defined
console.log(y);  // ✅ 20（var 泄漏到外层）

console.log(typeof 42);           // "number"
console.log(typeof "hi");         // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);          // "object" ← 历史遗留 bug!
console.log(typeof [1,2,3]);        // "object"
console.log(typeof function(){});  // "function"

// 基本类型：拷贝值
let a = 10;
let b = a;
b = 20;
console.log(a);   // 10（a 没受影响）

// 引用类型：拷贝地址
const arr1 = [1, 2];
const arr2 = arr1;
arr2.push(3);
console.log(arr1);  // [1, 2, 3] ← 注意！

Number("123");      // 123
Number("abc");      // NaN (Not a Number)
Number(true);       // 1
Number(null);       // 0
Number(undefined);  // NaN

String(123);       // "123"
String(true);       // "true"

Boolean(0);         // false
Boolean("");        // false
Boolean("hi");      // true
Boolean(null);      // false

console.log("10" + 5);    // "105" （+ 遇到字符串变拼接）
console.log("10" - 5);    // 5    （- 强制转数字）
console.log("10" * "2");  // 20   （* 强制转数字）
console.log(null + 1);    // 1    （null → 0）
console.log(undefined + 1); // NaN

// == 会做隐式转换
"10" == 10          // true  （字符串转数字）
null == undefined    // true
true == 1            // true

// === 严格比较，类型不同直接 false
"10" === 10         // false
null === undefined   // false

let a = 10, b = 3;
a + b     // 13  加
a - b     // 7   减
a * b     // 30  乘
a / b     // 3.3333  除
a % b     // 1   取余
a ** b    // 1000 幂（ES6）

let n = 5;
console.log(n++);  // 5  （先返回再加）
console.log(n);    // 6
console.log(++n);  // 7  （先加再返回）

let age = 20, hasID = true;

age >= 18 && hasID          // 与
age >= 18 || hasID          // 或
!hasID                           // 非

// 短路运算常用：
const name = input || "匿名";    // input 为空时给默认值

let result = age >= 18 ? "成年" : "未成年";
console.log(result);   // "成年"

let score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

let day = 3;
let name;

switch (day) {
    case 1: name = "周一"; break;
    case 2: name = "周二"; break;
    case 3: name = "周三"; break;
    default: name = "未知";
}

console.log(name);  // "周三"

for (let i = 0; i < 5; i++) {
    console.log(i);   // 0 1 2 3 4
}

// while：条件为真才执行
let n = 0;
while (n < 3) {
    console.log(n);
    n++;
}

// do...while：先执行一次，再判断
let m = 10;
do {
    console.log(m);
} while (m < 3);   // 输出 10，循环结束

// break：跳出整个循环
for (let i = 0; i < 10; i++) {
    if (i === 5) break;
    console.log(i);   // 0 1 2 3 4
}

// continue：跳过本次循环
for (let i = 0; i < 5; i++) {
    if (i === 2) continue;
    console.log(i);   // 0 1 3 4
}

const arr = ["a", "b", "c"];

for (const v of arr) {         // 遍历值（数组/可迭代对象）
    console.log(v);
}

const obj = { x: 1, y: 2 };
for (const k in obj) {        // 遍历键（对象）
    console.log(k, obj[k]);
}

const s1 = "hello";
const s2 = 'world';
const s3 = `多行
字符串`;
console.log(s3.length);   // 不计入首尾换行的实际字符数

const name = "Alice";
const age = 18;

// 拼接（推荐）
const msg = `姓名：${name}，年龄：${age}`;
console.log(msg);   // "姓名：Alice，年龄：18"

// 多行
const html = `
  <div>
    <h1>${name}</h1>
  </div>
`;

// 表达式直接执行
const price = `总金额：¥${(99 * 3).toFixed(2)}`;  // "总金额：¥297.00"

const scores = [90, 85, 78, 92];

scores[0];            // 90 第一个元素
scores[scores.length - 1];  // 92 最后一个
scores.length;         // 4

// 修改
scores[1] = 88;

// 创建
const arr1 = [1, 2, 3];
const arr2 = new Array(3);     // 长度 3 的空数组
const arr3 = Array.from("hi");  // ["h", "i"]

const arr = [1, 2, 3, 4, 5];

arr.splice(1, 2);    // 从索引 1 起删 2 个 → [1, 4, 5]
arr.splice(1, 0, 99); // 在索引 1 处插入 99 → [1, 99, 4, 5]

const a = [1,2], b = [3,4];
a.concat(b);  // [1, 2, 3, 4]（不动 a）

const scores = [90, 85, 78];

// 方式 1：传统 for
for (let i = 0; i < scores.length; i++) {
    console.log(scores[i]);
}

// 方式 2：for...of（拿到值）
for (const s of scores) {
    console.log(s);
}

// 方式 3：forEach（提供值+索引+数组）
scores.forEach((s, i) => {
    console.log(`第${i+1}名：${s}分`);
});

const scores = [90, 85, 78, 92, 60];

// map：每人加 5 分
const newScores = scores.map(x => x + 5);
// [95, 90, 83, 97, 65]

// filter：取出 90 分以上
const high = scores.filter(x => x >= 90);
// [90, 92]

// reduce：求总分（初始值为 0）
const total = scores.reduce((sum, x) => sum + x, 0);
// 405

// reduce 求平均
const avg = total / scores.length;   // 81

// 综合练习：找出最高分
const top = scores.reduce((best, x) => x > best ? x : best, -Infinity);

const arr = [3, 1, 4, 1, 5, 9];

arr.sort((a, b) => a - b);  // 数字排序 [1,1,3,4,5,9]
arr.reverse();             // 反转
arr.find(x => x > 3);      // 4 第一个满足
arr.findIndex(x => x > 3); // 2
arr.every(x => x > 0);     // true 全员满足
arr.some(x => x > 5);       // true 至少一个
arr.join("-");            // "3-1-4-1-5-9"

const student = {
    name: "张三",
    age: 18,
    score: 95,
    introduce() {
        return `我叫${this.name}，` +
               `考${this.score}分`;
    }
};

// 访问
student.name;            // "张三"
student["name"];        // "张三"（动态键名）

// 修改
student.age = 19;

// 删除
delete student.score;

// 调用方法
console.log(student.introduce());

const obj = { a: 1, b: 2 };

Object.keys(obj);         // ["a", "b"]
Object.values(obj);       // [1, 2]
Object.entries(obj);      // [["a",1], ["b",2]]
Object.fromEntries(...).keys();  // 反向
Object.assign({}, obj, {c:3}); // 拷贝合并

// 拷贝（浅拷贝）
const copy = { ...obj };
copy.a = 99;
console.log(obj.a);  // 1

const [a, b, c] = [10, 20, 30];
console.log(a, b, c);   // 10 20 30

// 跳过/默认值
const [x, , y = 99] = [1, 2];
console.log(x, y);   // 1 99

// 交换变量
let m = 1, n = 2;
[m, n] = [n, m];   // m=2, n=1

const student = { name: "张三", age: 18, score: 95 };

const { name, age } = student;
console.log(name, age);   // "张三" 18

// 重命名 + 默认值
const { name: userName, grade = "A" } = student;
console.log(userName, grade);   // "张三" "A"

// 函数参数解构
function show({ name, age }) {
    console.log(`${name}，${age}岁`);
}
show(student);

// 1. 函数声明（hoisting 友好）
function add(a, b) {
    return a + b;
}

// 2. 函数表达式
const sub = function(a, b) {
    return a - b;
};

// 3. 箭头函数（见下章）
const mul = (a, b) => a * b;

function greet(name = "游客", ...others) {
    console.log(`你好 ${name}`);
    console.log("others:", others);
}
greet("Alice", "Bob", "Carol");   // others: ["Bob","Carol"]

function apply(fn, a, b) {
    return fn(a, b);
}
apply(add, 2, 3);          // 5
apply(mul, 2, 3);          // 6

// 完整写法
const add = (a, b) => {
    return a + b;
};

// 单行返回（隐式 return）
const add = (a, b) => a + b;

// 单个参数
const double = x => x * 2;

// 无参数
const hello = () => "Hello!";

// 经典坑：回调中 this 丢失
const timer = {
    sec: 0,
    start() {
        setInterval(() => {    // 箭头函数继承外层 this
            this.sec++;
            console.log(this.sec);
        }, 1000);
    }
};
timer.start();

// 闭包：用函数"包住"一个状态
function createCounter() {
    let count = 0;          // 私有
    return () => ++count;       // 闭包
}

const cnt = createCounter();
console.log(cnt());  // 1
console.log(cnt());  // 2
console.log(cnt());  // 3
console.log(count);   // ❌ ReferenceError

const a = [1, 2];
const b = [...a, 3, 4];      // [1, 2, 3, 4]

const obj1 = { x: 1 };
const obj2 = { ...obj1, y: 2 };  // { x:1, y:2 }

Math.max(...a);             // 2
console.log(...a);              // 1 2

// 函数参数
function sum(...nums) { return nums.reduce((s,n)=>s+n, 0); }
sum(1,2,3,4);   // 10

const map = new Map();

map.set("name", "张三");
map.set("age", 18);
map.set(obj, "对象当键也可以");

console.log(map.get("name"));   // "张三"
console.log(map.has("age"));   // true
console.log(map.size);         // 3

// 遍历
for (const [k, v] of map) {
    console.log(k, "=>", v);
}

const set = new Set([1, 2, 3, 3, 2, 1]);
console.log([...set]);   // [1, 2, 3]

set.add(4);
set.has(3);     // true

// 数组去重
const arr = [1,1,2,2,3];
const unique = [...new Set(arr)];   // [1,2,3]

class Student {
    constructor(name, age) {
        this.name = name;
        this.age  = age;
    }

    introduce() {
        return `我是${this.name}，` +
               `${this.age}岁`;
    }
}

const s = new Student("张三", 18);
console.log(s.introduce());

class CollegeStudent extends Student {
    constructor(name, age, major) {
        super(name, age);   // 调用父类构造
        this.major = major;
    }

    introduce() {
        return super.introduce() +
               `，专业：${this.major}`;
    }
}

const cs = new CollegeStudent("李四", 20, "计算机");
console.log(cs.introduce());

class User {
    // 私有字段（# 开头，外部访问报错）
    #password;

    constructor(name, pwd) {
        this.name = name;
        this.#password = pwd;
    }

    check(pwd) {
        return pwd === this.#password;
    }

    static create(name) {       // 类方法，不需 new
        return new User(name, "123456");
    }
}

const u1 = User.create("Alice");
console.log(u1.check("123456"));   // true

class Animal {}
const a = new Animal();

console.log(a.__proto__ === Animal.prototype);  // true
console.log(Animal.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__);   // null（链终点）

try {
    const data = JSON.parse('{"name": "Alice"');  // 错误字符串
} catch (err) {
    console.error("解析失败：", err.message);
} finally {
    console.log("无论是否出错，都会执行");
}

function divide(a, b) {
    if (b === 0) throw new Error("除数不能为 0");
    return a / b;
}

try {
    divide(10, 0);
} catch (e) {
    console.log(e.message);   // "除数不能为 0"
}

const fetchData = () =>
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("数据");
        }, 1000);
    });

fetchData()
    .then(data  => console.log("成功：", data))
    .catch(err  => console.error("失败：", err))
    .finally(() => console.log("结束"));

fetch("/api/user/1")
    .then(r => r.json())           // 解析 JSON
    .then(user => fetch(`/api/posts?uid=${user.id}`))
    .then(r => r.json())
    .then(posts => console.log(posts))
    .catch(err => console.error(err));

// 等所有完成
Promise.all([
    fetch("/api/a"),
    fetch("/api/b"),
    fetch("/api/c")
])
.then(arr => Promise.all(arr.map(r => r.json())))
.then(data => console.log(data));

// 任一成功即可
Promise.race([req1, req2]).then(useFastest);

// 全部完成（含失败）
Promise.allSettled([...]).then(showAll);

async function getStudents() {
    try {
        const res = await fetch("/api/students");
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const list = await res.json();
        return list;
    } catch (err) {
        console.error("加载失败：", err);
    }
}

console.log(getStudents());  // 返回 Promise

<h1 id="title">Hello</h1>
<button id="btn">改文字</button>
<script>
    const title = document.getElementById("title");
    const btn   = document.getElementById("btn");

    btn.addEventListener("click", () => {
        title.textContent = "Hello JavaScript";
        title.style.color = "#F7DF1E";
    });
</script>

const one   = document.querySelector("#title");
const all   = document.querySelectorAll("li.item");
const cards = [...all];

const el = document.getElementById("title");

el.textContent = "纯文本";          // 推荐：纯文本
el.innerHTML   = "<b>含 HTML</b>"; // 可写 HTML（注意 XSS）

const input = document.querySelector("input");
input.value = "hello";                // 表单值

const img = document.querySelector("img");

img.setAttribute("src", "/a.jpg");
img.getAttribute("alt");
img.removeAttribute("title");

// 标准属性更直接
img.src = "/a.jpg";
img.id  = "avatar";

const box = document.getElementById("box");

// 内联样式（注意命名：backgroundColor）
box.style.color           = "red";
box.style.backgroundColor = "#222";
box.style.fontSize        = "20px";

// class 控制（推荐！样式写在 CSS 里）
box.classList.add("active");
box.classList.remove("hide");
box.classList.toggle("open");
console.log(box.classList.contains("active"));

<!-- index.html -->
<input id="name" placeholder="姓名">
<input id="score" type="number" placeholder="分数">
<button id="add">添加学生</button>
<ul id="list"></ul>

<script>
    const list = document.getElementById("list");
    document.getElementById("add").addEventListener("click", () => {
        const name  = document.getElementById("name").value;
        const score = document.getElementById("score").value;
        if (!name) return;

        const li = document.createElement("li");
        li.textContent = `${name} - ${score}分`;

        const del = document.createElement("button");
        del.textContent = "删除";
        del.addEventListener("click", () => li.remove());

        li.appendChild(del);
        list.appendChild(li);
    });
</script>

const btn = document.getElementById("btn");

btn.addEventListener("click", function(event) {
    console.log("按钮被点击");
    console.log(event.target);  // 触发元素
    console.log(event.type);    // "click"
});

// 移除监听
function onClick() { console.log("a"); }
btn.addEventListener("click", onClick);
btn.removeEventListener("click", onClick);

event.target           // 触发事件的元素
event.currentTarget   // 绑定事件的元素
event.type             // 事件类型
event.preventDefault()// 阻止默认行为（如表单提交）
event.stopPropagation()// 停止冒泡

// 键盘事件
input.addEventListener("keydown", e => {
    if (e.key === "Enter") console.log("按了回车");
    if (e.ctrlKey && e.key === "s")
        alert("Ctrl+S");
});

// 1000 个 li，只需要 1 个监听
const ul = document.getElementById("list");
ul.addEventListener("click", e => {
    if (e.target.tagName === "LI") {
        console.log("点了：", e.target.textContent);
    }
});

// 第三个参数 true = 走捕获阶段（默认 false 走冒泡）
el.addEventListener("click", handler, true);

location.href             // 当前完整 URL
location.reload()        // 刷新
location.assign("/home")  // 跳转

history.back()           // 后退
history.forward()       // 前进
history.go(- 2)           // 退回 2 步

alert("提示")         // 警告框
confirm("确定吗?")   // 确认框（返回布尔）
prompt("姓名：")     // 输入框（返回字符串）

let sec = 10;
const h = document.getElementById("h");

const timer = setInterval(() => {
    h.textContent = `剩余 ${sec} 秒`;
    if (--sec === 0) {
        clearInterval(timer);   // 停止
        h.textContent = "时间到！";
    }
}, 1000);

// 单次延迟
const t = setTimeout(() => console.log("1 秒后"), 1000);
clearTimeout(t);  // 取消

fetch("/api/students")
    .then(r => {
        if (!r.ok) throw new Error(String(r.status));
        return r.json();
    })
    .then(data => console.log(data))
    .catch(err => console.error(err));

async function load() {
    try {
        const r = await fetch("/api/students");
        const data = await r.json();
        console.log(data);
    } catch (e) {
        console.error(e);
    }
}

fetch("/api/students", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "张三", score: 95 })
})
.then(r => r.json())
.then(d => console.log("已添加", d));

const obj = { name: "张三", age: 18 };

const json = JSON.stringify(obj);
console.log(json);   // '{"name":"张三","age":18}'

const back = JSON.parse(json);
console.log(back.name);   // "张三"

const KEY = "notes";

function save() {
    const text = document.getElementById("content").value;
    const list = JSON.parse(localStorage.getItem(KEY) || "[]");
    list.push({ text, at: Date.now() });
    localStorage.setItem(KEY, JSON.stringify(list));
    render();
}

function render() {
    const list = JSON.parse(localStorage.getItem(KEY) || "[]");
    const ul = document.getElementById("notes");
    ul.innerHTML = "";
    list.forEach(n => {
        const li = document.createElement("li");
        li.textContent = n.text;
        ul.appendChild(li);
    });
}

sessionStorage.setItem("temp", "标签页一关就清");

<form id="f">
    <input name="email">
    <input name="pwd" type="password">
    <button>提交</button>
</form>
<script>
document.getElementById("f").addEventListener("submit", e => {
    e.preventDefault();   // 阻止页面刷新
    const data = Object.fromEntries(new FormData(e.target));
    console.log(data);   // { email: "...", pwd: "..." }
});
</script>

const emailRe = /^[\w.+-]+@[\w-]+\.[a-zA-Z]{2,}$/;
const phoneRe = /^1[3-9]\d{9}$/;
const userRe  = /^[a-zA-Z][\w]{3,15}$/;

emailRe.test("alice@school.edu");   // true
phoneRe.test("13800138000");       // true

console.log("a1b2c3".match(/\d+/g));  // ["1","2","3"]

"a,b,c".replace(/,/g, "-");   // "a-b-c"

function validate({ email, phone }) {
    const errors = {};
    if (!/^[\w.+-]+@[\w-]+\.[a-zA-Z]{2,}$/.test(email))
        errors.email = "邮箱格式不对";
    if (!/^1[3-9]\d{9}$/.test(phone))
        errors.phone = "手机号 11 位";
    return errors;
}

const data = [
    { name: "张三", age: 18, score: 95 },
    { name: "李四", age: 19, score: 82 }
];

console.log("普通日志", data);
console.table(data);           // 表格化展示
console.error("报错信息");
console.warn("警告");
console.dir(data);             // 显示对象结构
console.time("耗时");
// ...
console.timeEnd("耗时");

export function add(a, b) { return a + b; }
export default function sub(a, b) { return a - b; }

import { add } from "./math.js";
import sub from "./math.js";
console.log(add(2, 3), sub(5, 2));

<script type="module" src="app.js"></script>

npm init -y                      # 生成 package.json
npm install lodash               # 装到 dependencies
npm install --save-dev eslint    # 装到 devDependencies
npm run dev                      # 运行 package.json 的 scripts

// 栈
const stack = [];
stack.push(1);  stack.push(2);
stack.pop();        // 2

// 队列：shift 是 O(n)，用 index 优化
const q = [];
let head = 0;
q.push(1); q.push(2);
const first = q[head++];   // 1

// 二分查找
function binarySearch(arr, target) {
    let l = 0, r = arr.length - 1;
    while (l <= r) {
        const m = (l + r) >>> 1;
        if (arr[m] === target) return m;
        if (arr[m] <  target) l = m + 1;
        else                 r = m - 1;
    }
    return -1;
}

// 冒泡排序
function bubble(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] > arr[j+1])
                [arr[j], arr[j+1]] = [arr[j+1], arr[j]];
        }
    }
    return arr;
}