JavaScript 教程¶

什么是 JavaScript？¶

JavaScript 是网页的编程语言，让网页具有交互功能。它与 HTML（结构）、CSS（样式）并称 Web 三大核心技术。

JavaScript 可以在浏览器中运行（前端），也可以在服务器上运行（Node.js）。

基本语法¶

变量声明¶

// var（旧，不推荐）
var name = "小明";

// let（推荐）：可重新赋值
let age = 18;
age = 19;

// const（推荐）：不可重新赋值
const PI = 3.14159;

声明方式	作用域	可修改	提升
`var`	函数作用域	可	会提升
`let`	块级作用域	可	暂存死区
`const`	块级作用域	不可	暂存死区

数据类型¶

// 基本类型
let num = 42;           // 数字（整数 + 浮点数）
let str = "字符串";      // 字符串（单引号/双引号/反引号）
let bool = true;        // 布尔值（true/false）
let undef = undefined;  // 未定义
let n = null;           // 空值
let sym = Symbol();     // 唯一标识符
let big = 123n;         // 大整数

// 引用类型
let arr = [1, 2, 3];                    // 数组
let obj = { name: "小明", age: 18 };    // 对象

类型转换¶

// 字符串 → 数字
Number("42");       // 42
parseInt("42px");   // 42
+"42";              // 42

// 数字 → 字符串
String(42);         // "42"
(42).toString();    // "42"
`${42}`;            // "42"

运算符¶

// 算术：+ - * / % **（幂）
// 比较：== === != !== > < >= <=
// 逻辑：&& || !
// 赋值：= += -= *= /=
// 三元：condition ? value1 : value2

// 严格相等 vs 抽象相等
0 == false   // true（类型转换后相等）
0 === false  // false（类型不同）

控制流¶

// if 语句
if (age >= 18) {
    console.log("成年人");
} else if (age >= 6) {
    console.log("未成年人");
} else {
    console.log("儿童");
}

// switch 语句
switch (day) {
    case 1: console.log("周一"); break;
    case 2: console.log("周二"); break;
    default: console.log("其他");
}

// 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

let arr = [10, 20, 30];
for (let item of arr) {
    console.log(item);
}

let obj = {a: 1, b: 2};
for (let key in obj) {
    console.log(key, obj[key]);
}

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

函数¶

函数声明¶

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

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

// 箭头函数（ES6）
const subtract = (a, b) => a - b;

// 默认参数
function greet(name = "游客") {
    return `你好，${name}！`;
}

// 剩余参数
function sum(...numbers) {
    return numbers.reduce((acc, n) => acc + n, 0);
}

高阶函数¶

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

// map：映射
const doubled = numbers.map(n => n * 2);  // [2, 4, 6, 8, 10]

// filter：过滤
const evens = numbers.filter(n => n % 2 === 0);  // [2, 4]

// reduce：归约
const sumAll = numbers.reduce((acc, n) => acc + n, 0);  // 15

// forEach：遍历
numbers.forEach(n => console.log(n));

对象与数组¶

对象操作¶

const person = {
    name: "小明",
    age: 18,
    greet() {  // 方法简写
        console.log(`你好，我是${this.name}`);
    }
};

// 访问属性
person.name;           // "小明"
person["name"];        // "小明"

// 增删改
person.height = 175;   // 新增
delete person.age;     // 删除
person.name = "小红";  // 修改

// 解构赋值
const { name, age } = person;

数组操作¶

const arr = [1, 2, 3];

arr.push(4);          // 末尾添加：[1,2,3,4]
arr.pop();            // 移除末尾：[1,2,3]
arr.unshift(0);       // 开头添加：[0,1,2,3]
arr.shift();          // 移除开头：[1,2,3]
arr.slice(1, 3);      // 截取：[2,3]
arr.splice(1, 1);     // 删除索引1处的元素
arr.indexOf(2);       // 查找索引：1
arr.includes(3);      // 是否包含：true
arr.join("-");        // 连接字符串："1-2-3"

// 展开运算符
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];  // [1,2,3,4]

DOM 操作¶

DOM（Document Object Model）是 HTML 文档的编程接口，通过 JavaScript 可以动态修改页面内容。

获取元素¶

// 单个元素
const title = document.querySelector("#title");
const firstBtn = document.querySelector(".btn");

// 多个元素（NodeList）
const buttons = document.querySelectorAll(".btn");
const divs = document.getElementsByTagName("div");

修改内容与样式¶

// 修改文本
title.textContent = "新标题";
title.innerHTML = "<em>新标题</em>";

// 修改样式
title.style.color = "red";
title.style.fontSize = "24px";  // CSS属性用驼峰命名

// 操作类名
title.classList.add("active");
title.classList.remove("hidden");
title.classList.toggle("visible");
title.classList.contains("active");  // true/false

// 修改属性
const link = document.querySelector("a");
link.href = "https://example.com";
link.setAttribute("target", "_blank");
link.getAttribute("href");

创建和删除元素¶

// 创建元素
const newDiv = document.createElement("div");
newDiv.textContent = "新创建的元素";
newDiv.classList.add("box");

// 插入
document.body.appendChild(newDiv);
parent.insertBefore(newDiv, referenceNode);
parent.append(newDiv);        // 更现代的方式
parent.prepend(newDiv);       // 插入到开头

// 删除
newDiv.remove();              // 直接删除
parent.removeChild(newDiv);   // 通过父元素删除

事件处理¶

事件监听¶

const btn = document.querySelector("button");

// 方式一：addEventListener（推荐）
btn.addEventListener("click", function(event) {
    console.log("按钮被点击了！");
    console.log(event.target);  // 触发事件的元素
});

// 方式二：onclick（一次只能绑定一个）
btn.onclick = function() {
    console.log("点击！");
};

常用事件¶

事件	触发条件
`click`	鼠标点击
`dblclick`	鼠标双击
`mouseover`	鼠标移入
`mouseout`	鼠标移出
`keydown`	键盘按下
`keyup`	键盘释放
`submit`	表单提交
`change`	值改变
`input`	输入中
`scroll`	滚动
`load`	页面加载完成

事件对象¶

document.addEventListener("click", function(event) {
    event.preventDefault();    // 阻止默认行为（如链接跳转）
    event.stopPropagation();   // 阻止事件冒泡
    console.log(event.clientX, event.clientY);  // 鼠标坐标
});

事件委托¶

利用事件冒泡，在父元素上统一处理子元素的事件：

document.querySelector("ul").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        console.log("列表项被点击：", event.target.textContent);
    }
});

ES6+ 特性¶

模板字符串¶

const name = "小明";
const age = 18;
console.log(`你好，我叫${name}，今年${age}岁`);

// 多行字符串
const html = `
    <div>
        <h1>${name}</h1>
        <p>年龄：${age}</p>
    </div>
`;

解构赋值¶

// 数组解构
const [x, y, z] = [1, 2, 3];
const [first, ...rest] = [1, 2, 3, 4];  // first=1, rest=[2,3,4]

// 对象解构
const { name, age, city = "北京" } = person;
const { name: userName } = person;  // 重命名

箭头函数¶

// 简化函数写法
const add = (a, b) => a + b;
const square = x => x * x;
const noParam = () => console.log("无参数");

// 注意：箭头函数没有自己的 this
const obj = {
    name: "obj",
    regular: function() { console.log(this.name); },  // this → obj
    arrow: () => { console.log(this.name); }           // this → 外层
};

Promise 与异步¶

// Promise
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("数据加载完成");
        }, 1000);
    });
};

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error));

// async/await（更简洁）
async function loadData() {
    try {
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.error("加载失败", error);
    }
}

// Fetch API（网络请求）
async function getUsers() {
    const response = await fetch("https://api.example.com/users");
    const data = await response.json();
    console.log(data);
}

模块化¶

// math.js - 导出
export function add(a, b) { return a + b; }
export const PI = 3.14;
export default class Calculator { ... }

// main.js - 导入
import Calculator, { add, PI } from "./math.js";

综合练习¶

动手实践

实现一个待办事项列表（Todo List）： 1. 输入框输入任务文字 2. 点击"添加"按钮添加到列表中 3. 点击列表项标记为已完成（添加删除线样式） 4. 点击"删除"按钮移除任务 5. 显示未完成的任务数量

学习建议¶

在浏览器控制台练习：按 F12 打开开发者工具，在 Console 面板练习
多看 MDN 文档：MDN JavaScript 指南
动手做项目：从小项目开始（计算器、时钟、Todo List）
学习调试：使用 console.log()、断点调试等工具