JavaScript基础学习

JavaScript 零基础详细学习指南

JavaScript（简称JS）是现代Web开发的核心技术之一，广泛应用于前端和后端开发。无论你是想打造动态网页、开发移动应用，还是进入全栈开发领域，掌握JavaScript都是必不可少的。本指南将带领你从零基础开始，逐步深入学习JavaScript的核心概念和实用技能。每个章节都配有详细的解释和代码示例，帮助你牢固掌握基础知识。

什么是JavaScript？
准备学习环境
JavaScript基础语法
控制结构
- 4.1 条件语句
- 4.2 循环语句
函数
对象与数组
作用域与闭包
- 7.1 全局与局部作用域
- 7.2 闭包的概念与应用
ES6及以后版本的新特性
异步编程
DOM操作
错误处理与调试
- 11.1 try...catch
- 11.2 使用浏览器开发者工具
高级主题
实践项目
学习资源
总结与下一步

1. 什么是JavaScript？

JavaScript是一种高级、解释型编程语言，最初由Netscape公司开发，主要用于网页的交互效果。随着Node.js的出现，JavaScript也广泛应用于服务器端开发，成为一种全栈开发语言。JavaScript能够在浏览器中运行，操作网页内容，实现动态效果，同时也可以用于构建桌面和移动应用。

JavaScript的特点

轻量级：适合快速开发和迭代。
跨平台：在不同操作系统和浏览器中运行。
动态类型：变量类型在运行时确定。
面向对象：支持对象、继承和多态。
函数式编程：支持高阶函数和闭包。

应用场景

前端开发：实现网页的动态效果和交互功能。
后端开发：使用Node.js构建服务器端应用。
移动应用开发：使用框架如React Native。
桌面应用开发：使用Electron构建跨平台桌面应用。

2. 准备学习环境

在开始学习JavaScript之前，需要准备一个适合编写和运行JavaScript代码的开发环境。

2.1 选择编辑器

推荐使用 Visual Studio Code (VS Code)，功能强大，支持丰富的扩展插件，如代码高亮、自动完成、调试等。

安装步骤：

访问 VS Code官网。
根据操作系统下载相应的安装包。
安装并启动VS Code。

2.2 安装浏览器

JavaScript主要在浏览器中运行，因此需要安装一个现代浏览器：

Google Chrome：内置强大的开发者工具，适合调试。
Mozilla Firefox：也有优秀的开发者工具。
Microsoft Edge、Safari等。

推荐： Google Chrome。

2.3 设置开发者工具

现代浏览器都内置了开发者工具，用于调试JavaScript代码。

在Chrome中打开开发者工具：

按 F12 或 Ctrl + Shift + I（Windows/Linux）/Cmd + Option + I（Mac）。
切换到“Console”（控制台）或“Sources”（源代码）标签进行调试。

2.4 安装Node.js（可选）

如果你计划进行服务器端开发或使用JavaScript构建工具，建议安装Node.js。

下载地址：Node.js官网
安装验证：
```
node -v
npm -v
```
以上命令应返回已安装的Node.js和npm版本号。

3. JavaScript基础语法

掌握JavaScript的基础语法是学习其他高级概念的前提。本章将详细介绍变量与常量、数据类型和运算符。

3.1 变量与常量

在JavaScript中，变量用于存储数据。自ES6（ECMAScript 2015）以来，引入了let和const，取代了传统的var。

3.1.1 `var`

作用域：函数作用域，容易造成变量提升和作用域混淆。
重新声明和赋值：允许。

示例：

function varTest() {
    var x = 1;
    if (true) {
        var x = 2; // 同一作用域内重新声明
        console.log(x); // 输出: 2
    }
    console.log(x); // 输出: 2
}

varTest();

3.1.2 `let`

作用域：块级作用域（如if、for等）。
重新声明：不允许，但可以重新赋值。

示例：

function letTest() {
    let y = 1;
    if (true) {
        let y = 2; // 不同作用域
        console.log(y); // 输出: 2
    }
    console.log(y); // 输出: 1
}

letTest();

// 重新赋值
let a = 10;
a = 20; // 合法
// let a = 30; // 错误: Identifier 'a' has already been declared
console.log(a); // 输出: 20

3.1.3 `const`

作用域：块级作用域。
重新赋值和重新声明：均不允许。
注意：对于对象和数组，const只保证变量绑定不变，内容可变。

示例：

const PI = 3.14159;
// PI = 3.14; // 错误: Assignment to constant variable.

// 对象
const person = { name: "Alice" };
person.name = "Bob"; // 合法，修改对象属性
// person = {}; // 错误: Assignment to constant variable.
console.log(person.name); // 输出: Bob

// 数组
const fruits = ["Apple", "Banana"];
fruits.push("Orange"); // 合法，修改数组内容
// fruits = ["Mango"]; // 错误: Assignment to constant variable.
console.log(fruits); // 输出: ["Apple", "Banana", "Orange"]

3.2 数据类型

JavaScript有几种基本的数据类型和复合数据类型。

3.2.1 基本数据类型

Number

包括整数和浮点数。
支持科学计数法。

示例：

let integer = 42;
let float = 3.14;
let scientific = 1.2e3; // 1200
console.log(integer, float, scientific); // 输出: 42 3.14 1200

String

用于表示文本。
可以使用单引号、双引号或反引号（模板字符串）。

示例：

let singleQuote = 'Hello';
let doubleQuote = "World";
let templateString = `Hello, ${doubleQuote}!`;
console.log(singleQuote, doubleQuote, templateString); // 输出: Hello World Hello, World!

Boolean

只有两个值：true 和 false。

示例：

let isJavaScriptFun = true;
let isRaining = false;
console.log(isJavaScriptFun, isRaining); // 输出: true false

Undefined

变量被声明但未赋值时的默认值。

示例：

let notAssigned;
console.log(notAssigned); // 输出: undefined

Null
- 表示“无”或“空”。
- 是一个显式赋值的空值。
示例：
```
let emptyValue = null;
console.log(emptyValue); // 输出: null
```

Symbol（ES6）

独一无二的标识符，常用于对象属性的唯一标识。

示例：

const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // 输出: false

BigInt（ES2020）

用于表示大于2^53 - 1的整数。

示例：

let bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); // 输出: 1234567890123456789012345678901234567890n

3.2.2 复合数据类型

Object

存储键值对集合。
可以包含各种类型的数据。

示例：

let person = {
    name: "John",
    age: 30,
    isEmployed: true
};
console.log(person.name, person.age, person.isEmployed); // 输出: John 30 true

Array

有序的数据集合，可以存储多种类型的元素。

示例：

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0], fruits[1], fruits[2]); // 输出: Apple Banana Cherry

Function

函数也是对象，可以作为变量传递和赋值。

示例：

function greet() {
    console.log("Hello!");
}
greet(); // 输出: Hello!

let sayHello = greet;
sayHello(); // 输出: Hello!

3.3 运算符

JavaScript支持多种运算符，用于执行不同的操作。

3.3.1 算术运算符

用于数学计算。

+：加法或字符串连接
-：减法
*：乘法
/：除法
%：取余
++：自增
--：自减

示例：

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333333333333335
console.log(a % b); // 1

a++;
console.log(a); // 11

b--;
console.log(b); // 2

// 字符串连接
let str1 = "Hello, ";
let str2 = "World!";
console.log(str1 + str2); // Hello, World!

3.3.2 赋值运算符

用于给变量赋值或更新变量的值。

=：基本赋值
+=：加法赋值
-=：减法赋值
*=：乘法赋值
/=：除法赋值
%=：取余赋值

示例：

let x = 5;
x += 3; // x = x + 3
console.log(x); // 8

x *= 2; // x = x * 2
console.log(x); // 16

x -= 4; // x = x - 4
console.log(x); // 12

3.3.3 比较运算符

用于比较两个值，返回布尔值true或false。

==：相等（类型转换后比较）
===：全等（严格比较，类型和值都相等）
!=：不等（类型转换后比较）
!==：不全等（严格比较）
>：大于
<：小于
>=：大于等于
<=：小于等于

示例：

let m = 10;
let n = "10";

console.log(m == n);  // true
console.log(m === n); // false
console.log(m != n);  // false
console.log(m !== n); // true

console.log(m > 5);  // true
console.log(m < 15); // true
console.log(m >= 10); // true
console.log(m <= 9);  // false

3.3.4 逻辑运算符

用于组合多个布尔条件。

&&：逻辑与（所有条件为真时返回true）
||：逻辑或（任一条件为真时返回true）
!：逻辑非（取反）

示例：

let isAdult = true;
let hasLicense = false;

console.log(isAdult && hasLicense); // false
console.log(isAdult || hasLicense); // true
console.log(!isAdult);             // false

3.3.5 其他运算符

typeof：返回变量的数据类型
instanceof：判断对象是否为特定类的实例
?:（三元运算符）：基于条件返回值

示例：

let num = 42;
let obj = {};

console.log(typeof num); // "number"
console.log(typeof obj); // "object"
console.log(num instanceof Number); // false

// 三元运算符
let age = 18;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // "Yes"

4. 控制结构

控制结构用于控制代码的执行流程，包括条件判断和循环。

4.1 条件语句

根据不同的条件执行不同的代码块。

4.1.1 `if` 语句

语法：

if (condition) {
    // 条件为真时执行
} else if (anotherCondition) {
    // 另一个条件为真时执行
} else {
    // 所有条件都不为真时执行
}

示例：

let score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 70) {
    console.log("中等");
} else {
    console.log("需要改进");
}
// 输出: 良好

4.1.2 `switch` 语句

适用于基于不同值执行不同代码块的情况。

语法：

switch (expression) {
    case value1:
        // 当 expression === value1 时执行
        break;
    case value2:
        // 当 expression === value2 时执行
        break;
    default:
        // 当没有匹配的 case 时执行
}

示例：

let day = 3;

switch (day) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    case 7:
        console.log("星期日");
        break;
    default:
        console.log("无效的星期数");
}
// 输出: 星期三

4.2 循环语句

用于重复执行代码块，直到满足特定条件。

4.2.1 `for` 循环

语法：

for (initialization; condition; increment) {
    // 循环体
}

示例：

for (let i = 0; i < 5; i++) {
    console.log("当前数字:", i);
}
// 输出:
// 当前数字: 0
// 当前数字: 1
// 当前数字: 2
// 当前数字: 3
// 当前数字: 4

4.2.2 `while` 循环

语法：

while (condition) {
    // 循环体
}

示例：

let i = 0;
while (i < 5) {
    console.log("当前数字:", i);
    i++;
}
// 输出与 for 循环相同

4.2.3 `do...while` 循环

语法：

do {
    // 循环体
} while (condition);

示例：

let i = 0;
do {
    console.log("当前数字:", i);
    i++;
} while (i < 5);
// 输出与 for 和 while 循环相同

4.2.4 `for...in` 和 `for...of` 循环

用于遍历对象属性和可迭代对象（如数组、字符串等）。

for...in 示例：

let person = { name: "Alice", age: 25, city: "New York" };

for (let key in person) {
    console.log(key + ": " + person[key]);
}
// 输出:
// name: Alice
// age: 25
// city: New York

for...of 示例：

let fruits = ["苹果", "香蕉", "橙子"];

for (let fruit of fruits) {
    console.log(fruit);
}
// 输出:
// 苹果
// 香蕉
// 橙子

注意： for...in 主要用于遍历对象属性，而 for...of 适用于遍历数组和其他可迭代对象。

5. 函数

函数是组织好的、可重复使用的，用于实现单一或相关联功能的代码段。函数提高了代码的可重用性和可维护性。

5.1 函数声明与调用

5.1.1 函数声明（Function Declaration）

定义一个命名的函数，具备提升特性（可在声明前调用）。

语法：

function functionName(parameters) {
    // 函数体
    return value;
}

示例：

function greet(name) {
    return "Hello, " + name + "!";
}

let message = greet("Bob");
console.log(message); // 输出: Hello, Bob!

5.1.2 函数表达式（Function Expression）

将函数赋值给变量，不具备提升特性。

语法：

const functionName = function(parameters) {
    // 函数体
    return value;
};

示例：

const greet = function(name) {
    return "Hello, " + name + "!";
};

console.log(greet("Alice")); // 输出: Hello, Alice!

5.2 匿名函数与箭头函数

5.2.1 匿名函数（Anonymous Function）

没有名字的函数，常用于回调函数。

示例：

setTimeout(function() {
    console.log("这是一个匿名函数的回调");
}, 1000);
// 输出（延迟1秒）: 这是一个匿名函数的回调

5.2.2 箭头函数（Arrow Function）

简化函数表达式的语法，并且不绑定自己的this。

语法：

const functionName = (parameters) => {
    // 函数体
    return value;
};

示例：

const add = (a, b) => {
    return a + b;
};

console.log(add(5, 3)); // 输出: 8

简写箭头函数

当函数体只有一行且返回一个表达式时，可以省略花括号和return关键字。

示例：

const multiply = (a, b) => a * b;

console.log(multiply(4, 3)); // 输出: 12

注意： 箭头函数没有自己的this，在某些情况下与普通函数行为不同。

5.3 高阶函数

高阶函数是指接受函数作为参数或返回函数的函数。

5.3.1 接受函数作为参数

示例：

function performOperation(a, b, operation) {
    return operation(a, b);
}

function subtract(a, b) {
    return a - b;
}

let result = performOperation(10, 5, subtract);
console.log(result); // 输出: 5

// 使用匿名函数
let result2 = performOperation(10, 5, function(a, b) {
    return a * b;
});
console.log(result2); // 输出: 50

5.3.2 返回函数

示例：

function createMultiplier(multiplier) {
    return function(x) {
        return x * multiplier;
    };
}

const double = createMultiplier(2);
console.log(double(5)); // 输出: 10

const triple = createMultiplier(3);
console.log(triple(5)); // 输出: 15

5.3.3 常见高阶函数

map：对数组中的每个元素执行函数，返回新数组。
filter：过滤数组中的元素，返回满足条件的新数组。
reduce：将数组中的元素归纳为单一值。

示例：

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

// map
let squares = numbers.map(num => num * num);
console.log(squares); // 输出: [1, 4, 9, 16, 25]

// filter
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

// reduce
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 输出: 15

6. 对象与数组

对象和数组是JavaScript中最常用的两种复合数据类型，用于存储和操作复杂数据。

6.1 对象

对象是键值对的集合，用于存储相关的数据和功能。

6.1.1 对象字面量

示例：

let person = {
    name: "John",
    age: 30,
    isEmployed: true,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

console.log(person.name); // 输出: John
person.greet(); // 输出: Hello, John

6.1.2 使用`new Object()`

示例：

let car = new Object();
car.make = "Toyota";
car.model = "Camry";
car.year = 2020;

console.log(car.make); // 输出: Toyota

6.1.3 构造函数

通过构造函数创建对象，并使用原型链实现继承。

示例：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    console.log("Hi, I'm " + this.name);
};

let alice = new Person("Alice", 25);
alice.greet(); // 输出: Hi, I'm Alice

6.2 数组

数组是有序的数据集合，用于存储一组相关的值。

6.2.1 数组字面量

示例：

let fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits[0]); // 输出: 苹果
console.log(fruits.length); // 输出: 3

6.2.2 使用`new Array()`

示例：

let numbers = new Array(1, 2, 3, 4, 5);
console.log(numbers); // 输出: [1, 2, 3, 4, 5]
console.log(numbers.length); // 输出: 5

6.2.3 空数组并动态添加元素

示例：

let colors = [];
colors.push("红色");
colors.push("绿色");
colors.push("蓝色");
console.log(colors); // 输出: ["红色", "绿色", "蓝色"]

// 删除最后一个元素
colors.pop();
console.log(colors); // 输出: ["红色", "绿色"]

6.2.4 常用数组方法

push：在数组末尾添加元素。
pop：删除数组末尾的元素。
shift：删除数组开头的元素。
unshift：在数组开头添加元素。
splice：添加或删除数组中的元素。
slice：返回数组的一个子集。
forEach：对数组的每个元素执行函数。
map：创建一个新数组，元素为原数组元素调用函数的结果。
filter：创建一个新数组，包含所有通过测试的元素。
reduce：将数组归纳为单一值。

示例：

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

// push 和 pop
numbers.push(6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]
numbers.pop();
console.log(numbers); // [1, 2, 3, 4, 5]

// shift 和 unshift
numbers.shift();
console.log(numbers); // [2, 3, 4, 5]
numbers.unshift(1);
console.log(numbers); // [1, 2, 3, 4, 5]

// splice
numbers.splice(2, 1, 99); // 从索引2删除1个元素，插入99
console.log(numbers); // [1, 2, 99, 4, 5]

// slice
let subset = numbers.slice(1, 3);
console.log(subset); // [2, 99]

// forEach
numbers.forEach(num => console.log(num));
// 输出:
// 1
// 2
// 99
// 4
// 5

// map
let squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9801, 16, 25]

// filter
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

// reduce
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 111

6.3 JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时易于机器解析和生成。

6.3.1 JSON语法

数据在名称/值对中
数据由逗号分隔
大括号保存对象
方括号保存数组

示例：

{
    "name": "Bob",
    "age": 28,
    "isEmployed": true,
    "skills": ["JavaScript", "HTML", "CSS"]
}

6.3.2 JSON与JavaScript对象的转换

JSON.parse：将JSON字符串解析为JavaScript对象。
JSON.stringify：将JavaScript对象转换为JSON字符串。

示例：

let jsonString = '{"name": "Bob", "age": 28, "city": "Chicago"}';

// 解析JSON字符串为对象
let obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: Bob

// 将对象转换为JSON字符串
let newJsonString = JSON.stringify(obj);
console.log(newJsonString); // 输出: {"name":"Bob","age":28,"city":"Chicago"}

6.3.3 JSON的用途

数据交换：在客户端和服务器之间传输数据。
存储配置：应用程序的配置文件常使用JSON格式。
API响应：大多数现代API使用JSON格式返回数据。

7. 作用域与闭包

理解作用域和闭包对于掌握JavaScript的高级概念至关重要。

7.1 全局与局部作用域

**作用域（Scope）**决定了变量和函数的可访问范围。

7.1.1 全局作用域

在代码任何地方都可访问的变量。

示例：

let globalVar = "我是全局变量";

function showGlobalVar() {
    console.log(globalVar); // 可以访问
}

showGlobalVar(); // 输出: 我是全局变量
console.log(globalVar); // 输出: 我是全局变量

7.1.2 局部作用域

仅在函数内部或代码块内可访问的变量。

示例：

function testScope() {
    let localVar = "我是局部变量";
    console.log(localVar); // 输出: 我是局部变量
}

testScope();
// console.log(localVar); // 错误: localVar未定义

if (true) {
    let blockVar = "我是块级变量";
    console.log(blockVar); // 输出: 我是块级变量
}
// console.log(blockVar); // 错误: blockVar未定义

注意： 使用let和const定义的变量具有块级作用域，而var定义的变量具有函数级作用域。

7.2 闭包的概念与应用

**闭包（Closure）**是指一个函数可以记住并访问其词法作用域，即使函数在其词法作用域之外执行。

7.2.1 闭包的基本示例

function makeAdder(x) {
    return function(y) {
        return x + y;
    };
}

let addFive = makeAdder(5);
console.log(addFive(3)); // 输出: 8

let addTen = makeAdder(10);
console.log(addTen(3)); // 输出: 13

解释： makeAdder函数返回一个内部函数，该内部函数可以访问makeAdder的参数x。即使makeAdder执行完毕，内部函数仍然可以访问x，形成闭包。

7.2.2 闭包的应用场景

数据隐藏与私有变量

function counter() {
    let count = 0; // 私有变量
    return function() {
        count++;
        return count;
    };
}

let increment = counter();
console.log(increment()); // 输出: 1
console.log(increment()); // 输出: 2
console.log(increment()); // 输出: 3

解释： count变量对外不可见，只能通过返回的函数进行访问和修改，实现数据隐藏。

函数工厂

创建具有特定行为的函数。

function createMultiplier(multiplier) {
    return function(x) {
        return x * multiplier;
    };
}

let double = createMultiplier(2);
console.log(double(5)); // 输出: 10

let triple = createMultiplier(3);
console.log(triple(5)); // 输出: 15

模块化编程

利用闭包封装模块，防止全局命名冲突。

const myModule = (function() {
    let privateVar = "I am private";
    
    function privateFunction() {
        console.log(privateVar);
    }
    
    return {
        publicMethod: function() {
            privateFunction();
        }
    };
})();

myModule.publicMethod(); // 输出: I am private
// myModule.privateVar; // undefined
// myModule.privateFunction(); // 错误

解释： privateVar和privateFunction通过闭包对外隐藏，只暴露publicMethod。

8. ES6及以后版本的新特性

ECMAScript（简称ES）是JavaScript的标准，ES6（ES2015）引入了许多新特性，极大地提升了语言的功能和可读性。本章将详细介绍这些新特性。

8.1 let与const

引入let和const替代var，提供块级作用域和更严格的变量控制。

8.1.1 let

特点：
- 块级作用域
- 不允许在同一作用域内重复声明
- 允许重新赋值

示例：

for (let i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
// console.log(i); // 错误: i未定义

8.1.2 const

特点：
- 块级作用域
- 不允许重新赋值或重复声明
- 对于对象和数组，const只保证变量绑定不变，内容可变

示例：

const PI = 3.14159;
// PI = 3.14; // 错误

const car = { brand: "Toyota" };
car.brand = "Honda"; // 合法
// car = {}; // 错误

const numbers = [1, 2, 3];
numbers.push(4); // 合法
// numbers = [5, 6, 7]; // 错误

8.2 模板字符串

使用反引号（`）创建多行字符串和嵌入表达式，提高字符串操作的灵活性。

8.2.1 基本用法

示例：

let name = "Charlie";
let age = 30;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// 输出: Hello, my name is Charlie and I am 30 years old.

8.2.2 多行字符串

示例：

let multiLine = `这是第一行
这是第二行
这是第三行`;

console.log(multiLine);
/*
输出:
这是第一行
这是第二行
这是第三行
*/

8.3 解构赋值

从数组或对象中提取值，赋值给变量，提高代码的简洁性和可读性。

8.3.1 数组解构

示例：

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出: 1 2 3

// 默认值
let [x, y, z = 10] = [4, 5];
console.log(x, y, z); // 输出: 4 5 10

// 交换变量
let m = 1, n = 2;
[m, n] = [n, m];
console.log(m, n); // 输出: 2 1

8.3.2 对象解构

示例：

let person = { name: "Dana", age: 22, city: "Paris" };

let { name, age } = person;
console.log(name, age); // 输出: Dana 22

// 重命名变量
let { name: personName, age: personAge } = person;
console.log(personName, personAge); // 输出: Dana 22

// 默认值
let { country = "Unknown" } = person;
console.log(country); // 输出: Unknown

8.4 展开运算符

展开数组或对象，复制或合并数据。

8.4.1 数组展开

示例：

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出: [1, 2, 3, 4, 5]

let arr3 = [0, ...arr1, 6];
console.log(arr3); // 输出: [0, 1, 2, 3, 6]

8.4.2 对象展开

示例：

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出: { a: 1, b: 2, c: 3 }

let obj3 = { d: 4, ...obj1 };
console.log(obj3); // 输出: { d: 4, a: 1, b: 2 }

注意： 当展开对象时，如果有重复的属性名，后面的会覆盖前面的。

let objA = { a: 1, b: 2 };
let objB = { b: 3, c: 4 };
let combined = { ...objA, ...objB };
console.log(combined); // 输出: { a: 1, b: 3, c: 4 }

8.5 模块化

模块化允许将代码拆分成独立的、可复用的模块，每个模块有自己的作用域。通过export和import实现模块化，提高代码组织和复用性。

8.5.1 导出模块

示例：

math.js

// 导出函数
export function add(a, b) {
    return a + b;
}

// 导出常量
export const PI = 3.14159;

// 导出默认模块
export default function subtract(a, b) {
    return a - b;
}

8.5.2 导入模块

示例：

main.js

// 导入命名导出
import { add, PI } from './math.js';
console.log(add(2, 3)); // 输出: 5
console.log(PI);        // 输出: 3.14159

// 导入默认导出
import subtract from './math.js';
console.log(subtract(5, 2)); // 输出: 3

// 导入所有命名导出
import * as math from './math.js';
console.log(math.add(4, 5)); // 输出: 9
console.log(math.PI);         // 输出: 3.14159
console.log(math.default(10, 4)); // 输出: 6

8.5.3 使用模块化的HTML

示例：

index.html

<!DOCTYPE html>
<html>
<head>
    <title>模块化示例</title>
</head>
<body>
    <script type="module" src="main.js"></script>
</body>
</html>

注意： 使用模块化时，需要在HTML中使用<script type="module">标签加载脚本。

8.6 类（Classes）

ES6引入了类的语法，使JavaScript支持更接近传统面向对象编程语言的语法。

8.6.1 定义类

示例：

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

    greet() {
        console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
    }
}

let alice = new Person("Alice", 25);
alice.greet(); // 输出: Hi, I'm Alice and I'm 25 years old.

8.6.2 继承

使用extends关键字实现类的继承。

示例：

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} 发出声音`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 调用父类构造函数
        this.breed = breed;
    }

    bark() {
        console.log(`${this.name} 吠叫`);
    }
}

let dog = new Dog("Buddy", "Golden Retriever");
dog.speak(); // 输出: Buddy 发出声音
dog.bark();  // 输出: Buddy 吠叫

8.6.3 静态方法

静态方法属于类本身，而不是实例。

示例：

class MathUtils {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtils.add(5, 3)); // 输出: 8

// let utils = new MathUtils();
// utils.add(5, 3); // 错误: utils.add is not a function

8.6.4 getter和setter

用于控制属性的访问和修改。

示例：

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    get area() {
        return this.width * this.height;
    }

    set area(value) {
        // 假设调整高度保持宽度不变
        this.height = value / this.width;
    }
}

let rect = new Rectangle(10, 5);
console.log(rect.area); // 输出: 50

rect.area = 100;
console.log(rect.height); // 输出: 10

9. 异步编程

JavaScript是一种单线程语言，异步编程允许在不阻塞主线程的情况下执行耗时操作，如网络请求和文件读取。

9.1 回调函数

将函数作为参数传递，待异步操作完成后调用。

9.1.1 基本示例

示例：

function fetchData(callback) {
    setTimeout(() => {
        let data = "这是异步获取的数据";
        callback(data);
    }, 1000);
}

fetchData(function(result) {
    console.log(result); // 输出: 这是异步获取的数据（延迟1秒）
});

9.1.2 回调地狱（Callback Hell）

当多个异步操作嵌套时，代码难以阅读和维护。

示例：

getData1(function(result1) {
    getData2(result1, function(result2) {
        getData3(result2, function(result3) {
            console.log(result3);
        });
    });
});

解决方法： 使用Promise或async/await。

9.2 Promise

Promise是一种表示异步操作最终完成或失败的对象，提供更优雅的链式处理方式。

9.2.1 Promise的基本用法

语法：

let promise = new Promise((resolve, reject) => {
    // 异步操作
    if (/* 成功 */) {
        resolve(value);
    } else {
        reject(error);
    }
});

示例：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let success = true;
            if (success) {
                resolve("Promise: 数据获取成功");
            } else {
                reject("Promise: 数据获取失败");
            }
        }, 1000);
    });
}

fetchData()
    .then(result => {
        console.log(result); // 输出: Promise: 数据获取成功
    })
    .catch(error => {
        console.error(error);
    });

9.2.2 链式调用

示例：

function fetchData1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(10), 1000);
    });
}

function fetchData2(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(data * 2), 1000);
    });
}

function fetchData3(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(data + 5), 1000);
    });
}

fetchData1()
    .then(result1 => {
        console.log(result1); // 10
        return fetchData2(result1);
    })
    .then(result2 => {
        console.log(result2); // 20
        return fetchData3(result2);
    })
    .then(result3 => {
        console.log(result3); // 25
    })
    .catch(error => {
        console.error(error);
    });

9.3 async/await

async和await基于Promise，使异步代码看起来更像同步代码，提高可读性。

9.3.1 基本用法

示例：

async function getData() {
    try {
        let result = await fetchData();
        console.log(result); // 输出: Promise: 数据获取成功
    } catch (error) {
        console.error(error);
    }
}

getData();

9.3.2 与Promise的结合

示例：

async function processData() {
    try {
        let data1 = await fetchData1();
        console.log(data1); // 10

        let data2 = await fetchData2(data1);
        console.log(data2); // 20

        let data3 = await fetchData3(data2);
        console.log(data3); // 25
    } catch (error) {
        console.error(error);
    }
}

processData();

9.4 Fetch API

Fetch API用于在浏览器中执行HTTP请求，替代传统的XMLHttpRequest。

9.4.1 基本用法

示例：

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应不是OK');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
        /*
        输出:
        {
          userId: 1,
          id: 1,
          title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
          body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum..."
        }
        */
    })
    .catch(error => {
        console.error('Fetch错误:', error);
    });

9.4.2 使用async/await

示例：

async function getPost() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!response.ok) {
            throw new Error('网络响应不是OK');
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Fetch错误:', error);
    }
}

getPost();

9.4.3 POST请求示例

示例：

async function createPost() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                title: 'foo',
                body: 'bar',
                userId: 1
            })
        });
        let data = await response.json();
        console.log(data);
        /*
        输出:
        {
          id: 101,
          title: "foo",
          body: "bar",
          userId: 1
        }
        */
    } catch (error) {
        console.error('Fetch错误:', error);
    }
}

createPost();

10. DOM操作

**DOM（Document Object Model）**是HTML和XML文档的编程接口，允许JavaScript动态地访问和修改文档内容和结构。

10.1 什么是DOM

DOM将网页表示为一个树状结构，每个节点代表文档的一部分，如元素、属性和文本。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>DOM示例</title>
</head>
<body>
    <h1 id="title">欢迎</h1>
    <p class="description">这是一个段落。</p>
    <button id="changeText">改变文本</button>

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

10.2 选择元素

使用选择器获取页面上的元素。

10.2.1 `document.getElementById`

通过元素的id选择元素。

示例：

let title = document.getElementById("title");
console.log(title.textContent); // 输出: 欢迎

10.2.2 `document.getElementsByClassName`

通过元素的class选择元素，返回HTMLCollection。

示例：

let descriptions = document.getElementsByClassName("description");
console.log(descriptions.length); // 输出: 1
console.log(descriptions[0].textContent); // 输出: 这是一个段落。

10.2.3 `document.getElementsByTagName`

通过元素的标签名选择元素，返回HTMLCollection。

示例：

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // 输出: 1
console.log(paragraphs[0].textContent); // 输出: 这是一个段落。

10.2.4 `document.querySelector`

返回匹配的第一个元素，支持CSS选择器。

示例：

let firstParagraph = document.querySelector("p");
console.log(firstParagraph.textContent); // 输出: 这是一个段落。

10.2.5 `document.querySelectorAll`

返回所有匹配的元素，返回NodeList。

示例：

let allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs.length); // 输出: 1
console.log(allParagraphs[0].textContent); // 输出: 这是一个段落。

10.3 操作元素

修改元素的内容、样式和属性。

10.3.1 修改文本内容

textContent：设置或获取元素的文本内容。
innerText：类似于textContent，但受到CSS样式的影响。
innerHTML：设置或获取元素的HTML内容。

示例：

let title = document.getElementById("title");
title.textContent = "欢迎来到JavaScript世界！";

let paragraph = document.querySelector("p");
paragraph.innerHTML = "<strong>这是一个加粗的段落。</strong>";

10.3.2 修改样式

通过style属性修改元素的样式。

示例：

let title = document.getElementById("title");
title.style.color = "red";
title.style.fontSize = "24px";

10.3.3 修改属性

使用setAttribute和getAttribute修改元素的属性。

示例：

let button = document.getElementById("changeText");
button.setAttribute("disabled", "true"); // 禁用按钮
console.log(button.getAttribute("disabled")); // 输出: true

10.4 事件处理

响应用户的交互，如点击、输入等。

10.4.1 添加事件监听器

使用addEventListener为元素添加事件监听器。

示例：

let button = document.getElementById("changeText");

button.addEventListener("click", () => {
    let title = document.getElementById("title");
    title.textContent = "文本已被改变！";
});

10.4.2 移除事件监听器

使用removeEventListener移除事件监听器。

示例：

function handleClick() {
    let title = document.getElementById("title");
    title.textContent = "文本已被改变！";
    button.removeEventListener("click", handleClick);
}

let button = document.getElementById("changeText");
button.addEventListener("click", handleClick);

10.5 动态创建与删除元素

动态添加或移除DOM元素，增强网页的互动性。

10.5.1 创建元素

使用document.createElement创建新元素，并使用appendChild添加到DOM中。

示例：

let newDiv = document.createElement("div");
newDiv.textContent = "这是一个新创建的div";
document.body.appendChild(newDiv);

10.5.2 删除元素

使用removeChild从DOM中删除元素。

示例：

document.body.removeChild(newDiv);

10.5.3 修改元素

可以修改元素的内容、属性和样式。

示例：

let paragraph = document.querySelector("p");
paragraph.style.color = "blue";
paragraph.textContent = "段落内容已更新。";

11. 错误处理与调试

在编写代码过程中，错误不可避免。掌握错误处理和调试技巧，可以帮助你快速定位和修复问题。

11.1 try...catch

用于捕获和处理运行时错误，防止程序崩溃。

11.1.1 基本用法

语法：

try {
    // 可能抛出错误的代码
} catch (error) {
    // 错误处理
} finally {
    // 无论是否发生错误都会执行的代码
}

示例：

try {
    let result = divide(10, 0);
    console.log(result);
} catch (error) {
    console.error("发生错误:", error.message);
} finally {
    console.log("执行结束");
}

function divide(a, b) {
    if (b === 0) {
        throw new Error("除数不能为零");
    }
    return a / b;
}
// 输出:
// 发生错误: 除数不能为零
// 执行结束

11.1.2 多重捕获

可以捕获不同类型的错误，进行不同的处理。

示例：

try {
    // 可能抛出不同类型错误的代码
} catch (error) {
    if (error instanceof TypeError) {
        console.error("类型错误:", error.message);
    } else if (error instanceof ReferenceError) {
        console.error("引用错误:", error.message);
    } else {
        console.error("其他错误:", error.message);
    }
} finally {
    console.log("无论如何都会执行");
}

11.2 使用浏览器开发者工具

现代浏览器提供强大的开发者工具，用于调试JavaScript代码。

11.2.1 控制台（Console）

输出日志：使用console.log, console.error, console.warn, console.info等方法输出信息。
执行代码：在控制台中直接输入和执行JavaScript代码。

示例：

let a = 10;
let b = 20;
console.log("a + b =", a + b); // 输出: a + b = 30
console.error("这是一个错误消息"); // 输出错误消息

11.2.2 断点调试（Breakpoints）

设置断点：在“Sources”标签中点击行号设置断点。
单步执行：逐行执行代码，观察变量变化。
监视变量：查看和监控变量的值。

示例：

function calculate() {
    let x = 5;
    let y = 10;
    let z = x + y;
    console.log(z);
}

calculate();

调试步骤：

打开开发者工具，切换到“Sources”标签。
找到并打开包含calculate函数的JavaScript文件。
在let z = x + y;行点击行号设置断点。
刷新页面，函数执行到断点处暂停。
使用“Step Over”（单步执行）和“Step Into”（进入函数）按钮逐步执行代码。
查看变量x, y, z的值。

11.2.3 网络（Network）监控

监控网络请求，如AJAX请求、资源加载等。

示例：

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(data => console.log(data));

调试步骤：

打开开发者工具，切换到“Network”标签。
执行上述代码。
在“Network”标签中查看请求详情，包括请求URL、响应状态、响应数据等。

11.2.4 元素（Elements）查看与修改

查看和修改DOM元素的结构和样式。

示例：

let title = document.getElementById("title");
title.style.color = "green";
title.textContent = "新的标题";

调试步骤：

打开开发者工具，切换到“Elements”标签。
选择需要查看或修改的元素。
在“Styles”面板中修改元素的CSS属性，实时查看效果。

11.3 调试技巧

使用console.log输出变量和状态
设置断点并单步执行代码
检查错误信息和堆栈跟踪
使用条件断点：仅在特定条件满足时暂停执行
监视表达式：在调试过程中持续跟踪某个表达式的值

示例：

function complexCalculation(a, b) {
    let result = a * b;
    console.log("Intermediate Result:", result);
    result += 100;
    console.log("Final Result:", result);
    return result;
}

complexCalculation(5, 10);
// 输出:
// Intermediate Result: 50
// Final Result: 150

12. 高级主题

本章将介绍一些JavaScript的高级主题，帮助你进一步提升编程能力。

12.1 原型与继承

JavaScript使用原型链实现继承，所有对象都有一个内部属性[[Prototype]]，指向其原型对象。

12.1.1 原型（Prototype）

每个JavaScript对象都有一个原型对象，通过原型对象可以共享属性和方法。

示例：

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} 发出声音`);
};

let animal = new Animal("Leo");
animal.speak(); // 输出: Leo 发出声音

console.log(animal.hasOwnProperty('name')); // 输出: true
console.log(animal.hasOwnProperty('speak')); // 输出: false

解释： speak方法定义在Animal.prototype上，所有Animal实例共享该方法，但name属性是实例自身的属性。

12.1.2 继承（Inheritance）

通过原型链实现对象间的继承。

示例：

function Dog(name, breed) {
    Animal.call(this, name); // 调用父类构造函数
    this.breed = breed;
}

// 继承Animal的原型
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 添加Dog特有的方法
Dog.prototype.bark = function() {
    console.log(`${this.name} 吠叫`);
};

let dog = new Dog("Buddy", "Golden Retriever");
dog.speak(); // 输出: Buddy 发出声音
dog.bark();  // 输出: Buddy 吠叫

解释： 使用Object.create创建新的原型对象，确保Dog继承自Animal。通过Dog.prototype.constructor修正构造函数指向。

12.2 正则表达式

正则表达式用于模式匹配和文本搜索、替换。

12.2.1 基本用法

示例：

let regex = /\d+/; // 匹配一个或多个数字
let str = "我有123个苹果";

console.log(regex.test(str)); // 输出: true
console.log(str.match(regex)); // 输出: ["123"]

12.2.2 常用正则表达式模式

\d：匹配数字（0-9）
\w：匹配字母、数字、下划线
\s：匹配空白字符（空格、制表符等）
.：匹配任意单个字符（除换行符）
^：匹配输入的开始
$：匹配输入的结束
*：匹配前一个字符零次或多次
+：匹配前一个字符一次或多次
?：匹配前一个字符零次或一次

示例：

let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
let email = "test@example.com";
console.log(emailRegex.test(email)); // 输出: true

let phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
let phone = "123-456-7890";
console.log(phoneRegex.test(phone)); // 输出: true

12.2.3 常用方法

test：测试字符串是否匹配正则表达式。
match：返回匹配结果。
replace：替换匹配的部分。
search：返回匹配的索引。

示例：

let str = "I have 2 apples and 3 oranges.";

let regex = /\d+/g; // 全局匹配所有数字
let matches = str.match(regex);
console.log(matches); // 输出: ["2", "3"]

let newStr = str.replace(/\d+/g, "many");
console.log(newStr); // 输出: I have many apples and many oranges.

let index = str.search(/apples/);
console.log(index); // 输出: 8

12.3 本地存储（LocalStorage & SessionStorage）

Web Storage API提供了在客户端存储数据的机制，包括localStorage和sessionStorage。

12.3.1 `localStorage`

特点：
- 数据持久化，关闭浏览器后数据仍然存在。
- 每个域名有独立的存储空间。
- 存储容量较大（通常5MB）。

示例：

// 存储数据
localStorage.setItem("username", "Alice");

// 获取数据
let user = localStorage.getItem("username");
console.log(user); // 输出: Alice

// 删除数据
localStorage.removeItem("username");

// 清空所有数据
localStorage.clear();

12.3.2 `sessionStorage`

特点：
- 数据在会话期间有效，关闭浏览器或标签页后数据消失。
- 每个标签页有独立的存储空间。
- 存储容量较大（通常5MB）。

示例：

// 存储数据
sessionStorage.setItem("sessionID", "abc123");

// 获取数据
let sessionID = sessionStorage.getItem("sessionID");
console.log(sessionID); // 输出: abc123

// 删除数据
sessionStorage.removeItem("sessionID");

// 清空所有数据
sessionStorage.clear();

12.3.3 使用JSON存储复杂数据

由于Web Storage API只能存储字符串，复杂数据需要序列化和反序列化。

示例：

let user = {
    name: "Bob",
    age: 28,
    skills: ["JavaScript", "HTML", "CSS"]
};

// 存储对象
localStorage.setItem("user", JSON.stringify(user));

// 获取对象
let storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // 输出: Bob
console.log(storedUser.skills); // 输出: ["JavaScript", "HTML", "CSS"]

12.4 异常处理

除了try...catch，JavaScript还提供其他机制来处理异常和错误。

12.4.1 自定义错误

可以创建自定义错误类型，提供更具体的错误信息。

示例：

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

function validateAge(age) {
    if (age < 0 || age > 120) {
        throw new ValidationError("年龄必须在0到120之间");
    }
    return true;
}

try {
    validateAge(150);
} catch (error) {
    if (error instanceof ValidationError) {
        console.error("验证错误:", error.message);
    } else {
        console.error("未知错误:", error);
    }
}
// 输出: 验证错误: 年龄必须在0到120之间

12.4.2 全局错误处理

可以捕获未处理的错误，防止程序崩溃。

示例：

window.onerror = function(message, source, lineno, colno, error) {
    console.error("全局错误捕获:", message, "在", source, "第", lineno, "行");
    // 可以进行日志记录或用户提示
};

// 触发错误
nonExistentFunction(); // 输出: 全局错误捕获: ... 在 ... 第 ... 行

13. 实践项目

通过实际项目练习，可以加深对JavaScript概念的理解和应用。以下是三个适合初学者的项目示例，配有详细的步骤和代码。

13.1 简单待办事项应用

功能需求：

添加待办事项
删除待办事项
标记待办事项为完成

13.1.1 创建HTML结构

index.html

<!DOCTYPE html>
<html>
<head>
    <title>待办事项应用</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        #todo-list { list-style-type: none; padding: 0; }
        .completed { text-decoration: line-through; color: gray; }
        button { margin-left: 10px; }
    </style>
</head>
<body>
    <h1>待办事项</h1>
    <input type="text" id="todo-input" placeholder="输入待办事项">
    <button id="add-button">添加</button>
    <ul id="todo-list"></ul>

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

13.1.2 编写JavaScript代码

script.js

document.addEventListener("DOMContentLoaded", () => {
    const todoInput = document.getElementById("todo-input");
    const addButton = document.getElementById("add-button");
    const todoList = document.getElementById("todo-list");

    // 添加待办事项
    addButton.addEventListener("click", addTodo);
    todoInput.addEventListener("keypress", (e) => {
        if (e.key === "Enter") addTodo();
    });

    function addTodo() {
        const text = todoInput.value.trim();
        if (text === "") return;

        const li = document.createElement("li");
        li.textContent = text;

        // 完成按钮
        const completeBtn = document.createElement("button");
        completeBtn.textContent = "完成";
        completeBtn.addEventListener("click", () => {
            li.classList.toggle("completed");
        });

        // 删除按钮
        const deleteBtn = document.createElement("button");
        deleteBtn.textContent = "删除";
        deleteBtn.addEventListener("click", () => {
            todoList.removeChild(li);
        });

        li.appendChild(completeBtn);
        li.appendChild(deleteBtn);
        todoList.appendChild(li);

        todoInput.value = "";
    }
});

功能解释：

添加待办事项：用户在输入框输入内容，点击“添加”按钮或按下回车键，将待办事项添加到列表中。
完成待办事项：点击“完成”按钮，待办事项的文本将变为灰色并加删除线，表示已完成。
删除待办事项：点击“删除”按钮，将待办事项从列表中移除。

13.2 交互式表单

功能需求：

用户输入姓名、邮箱和密码
实时验证输入内容
提交表单时显示用户输入的数据

13.2.1 创建HTML结构

index.html

<!DOCTYPE html>
<html>
<head>
    <title>交互式表单</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .error { color: red; font-size: 12px; }
        .success { color: green; font-size: 14px; }
        form div { margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>注册表单</h1>
    <form id="registration-form">
        <div>
            <label for="name">姓名:</label><br>
            <input type="text" id="name" name="name">
            <div id="name-error" class="error"></div>
        </div>
        <div>
            <label for="email">邮箱:</label><br>
            <input type="email" id="email" name="email">
            <div id="email-error" class="error"></div>
        </div>
        <div>
            <label for="password">密码:</label><br>
            <input type="password" id="password" name="password">
            <div id="password-error" class="error"></div>
        </div>
        <button type="submit">提交</button>
    </form>

    <div id="result" class="success"></div>

    <script src="form.js"></script>
</body>
</html>

13.2.2 编写JavaScript代码

form.js

document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById("registration-form");
    const nameInput = document.getElementById("name");
    const emailInput = document.getElementById("email");
    const passwordInput = document.getElementById("password");
    const resultDiv = document.getElementById("result");

    const nameError = document.getElementById("name-error");
    const emailError = document.getElementById("email-error");
    const passwordError = document.getElementById("password-error");

    // 实时验证
    nameInput.addEventListener("input", validateName);
    emailInput.addEventListener("input", validateEmail);
    passwordInput.addEventListener("input", validatePassword);

    // 表单提交
    form.addEventListener("submit", (e) => {
        e.preventDefault(); // 防止默认提交行为

        let isValid = validateName() & validateEmail() & validatePassword();

        if (isValid) {
            displayResult();
            form.reset();
        }
    });

    function validateName() {
        let name = nameInput.value.trim();
        if (name === "") {
            nameError.textContent = "姓名不能为空";
            return false;
        } else {
            nameError.textContent = "";
            return true;
        }
    }

    function validateEmail() {
        let email = emailInput.value.trim();
        // 简单的邮箱正则表达式
        let regex = /\S+@\S+\.\S+/;
        if (email === "") {
            emailError.textContent = "邮箱不能为空";
            return false;
        } else if (!regex.test(email)) {
            emailError.textContent = "邮箱格式不正确";
            return false;
        } else {
            emailError.textContent = "";
            return true;
        }
    }

    function validatePassword() {
        let password = passwordInput.value;
        if (password.length < 6) {
            passwordError.textContent = "密码长度至少为6个字符";
            return false;
        } else {
            passwordError.textContent = "";
            return true;
        }
    }

    function displayResult() {
        let name = nameInput.value.trim();
        let email = emailInput.value.trim();
        let password = passwordInput.value;

        resultDiv.innerHTML = `
            <h2>提交结果</h2>
            <p><strong>姓名:</strong> ${name}</p>
            <p><strong>邮箱:</strong> ${email}</p>
            <p><strong>密码:</strong> ${"*".repeat(password.length)}</p>
        `;
    }
});

功能解释：

实时验证：用户在输入框输入时，实时验证输入内容是否符合要求。
表单提交：在表单提交时，验证所有输入是否有效，若有效则显示用户输入的数据并重置表单。
错误提示：在输入框下方显示相应的错误提示信息。

13.3 天气应用（使用Fetch API）

功能需求：

用户输入城市名
获取并显示该城市的天气信息

13.3.1 创建HTML结构

index.html

<!DOCTYPE html>
<html>
<head>
    <title>天气应用</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #weather-result { margin-top: 20px; }
        .error { color: red; }
    </style>
</head>
<body>
    <h1>天气查询</h1>
    <input type="text" id="city-input" placeholder="输入城市名">
    <button id="search-button">查询</button>
    <div id="weather-result"></div>

    <script src="weather.js"></script>
</body>
</html>

13.3.2 编写JavaScript代码

weather.js

document.addEventListener("DOMContentLoaded", () => {
    const apiKey = "YOUR_API_KEY"; // 替换为你的API密钥
    const searchButton = document.getElementById("search-button");
    const cityInput = document.getElementById("city-input");
    const weatherResult = document.getElementById("weather-result");

    searchButton.addEventListener("click", getWeather);
    cityInput.addEventListener("keypress", (e) => {
        if (e.key === "Enter") getWeather();
    });

    async function getWeather() {
        const city = cityInput.value.trim();
        if (city === "") {
            weatherResult.innerHTML = "<p class='error'>请输入城市名</p>";
            return;
        }

        try {
            const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${apiKey}&units=metric`);
            if (!response.ok) throw new Error("城市未找到");
            const data = await response.json();
            displayWeather(data);
        } catch (error) {
            weatherResult.innerHTML = `<p class='error'>错误: ${error.message}</p>`;
        }
    }

    function displayWeather(data) {
        weatherResult.innerHTML = `
            <h2>${data.name} 的天气</h2>
            <p>温度: ${data.main.temp}°C</p>
            <p>天气: ${data.weather[0].description}</p>
            <p>湿度: ${data.main.humidity}%</p>
            <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="天气图标">
        `;
    }
});

功能解释：

API密钥：需要从 OpenWeatherMap 申请免费API密钥，并替换YOUR_API_KEY。
获取天气数据：使用Fetch API向OpenWeatherMap发送请求，获取指定城市的天气数据。
显示天气信息：将获取到的数据展示在页面上，包括温度、天气描述、湿度和天气图标。
错误处理：如果城市未找到或请求失败，显示相应的错误信息。

注意事项：

API限制：免费账户可能有请求次数限制，确保遵守API使用条款。
安全性：在实际项目中，避免在前端暴露API密钥，建议使用服务器端代理。

14. 学习资源

以下是一些推荐的学习资源，帮助你深入学习和掌握JavaScript。

14.1 在线教程

MDN Web 文档 - 权威的JavaScript参考资料。
JavaScript.info - 系统全面的JavaScript教程，适合从初学者到高级开发者。
W3Schools JavaScript Tutorial - 适合初学者的在线教程，配有示例和练习。

14.2 视频课程

The Net Ninja - JavaScript Tutorial for Beginners - 英文视频教程，内容详尽，适合初学者。
Traversy Media - Modern JavaScript From The Beginning - 深入浅出的现代JavaScript课程。
慕课网 JavaScript 入门课程 - 中文视频教程，适合初学者。

14.3 书籍

《JavaScript权威指南》（作者：David Flanagan） - 深入理解JavaScript语言的经典书籍，适合初学者和专业开发者。
《你不知道的JavaScript》（作者：Kyle Simpson） - 系列书籍，深入解析JavaScript的核心机制。
《JavaScript高级程序设计》（作者：Nicholas C. Zakas） - 系统介绍JavaScript高级概念和实践。

14.4 练习平台

LeetCode - 提供JavaScript编程题目，提升算法和编程能力。
FreeCodeCamp - 提供互动式的JavaScript课程和项目，适合通过实践学习。
Codewars - 通过解决挑战性编程问题来提升技能，支持多种编程语言，包括JavaScript。
HackerRank - 提供JavaScript编程挑战和练习，适合各个水平的开发者。

14.5 社区与论坛

Stack Overflow - 提问和回答JavaScript相关问题。
Reddit - r/javascript - 讨论JavaScript最新动态和技术。
Dev.to - 分享和阅读JavaScript相关文章和教程。

15. 总结与下一步

通过本指南的学习，你已经掌握了JavaScript的基础知识和核心概念，包括变量、数据类型、控制结构、函数、对象与数组、作用域与闭包、ES6新特性、异步编程和DOM操作等。接下来的学习建议如下：

15.1 关键学习点

实践为王：通过实际项目和编程练习，将所学知识应用到实际中。
深入理解概念：不仅要知道如何使用某个功能，更要理解其背后的原理。
学习框架与库：掌握如React、Vue、Angular等前端框架，提升开发效率。
版本控制：学习使用Git等版本控制工具，管理代码和协作开发。
持续学习：JavaScript生态系统不断发展，保持学习和更新知识。

15.2 学习建议

完成实践项目：尝试构建更多功能复杂的项目，如天气应用、博客系统等。
参与开源项目：在GitHub等平台参与开源项目，积累实际开发经验。
学习调试技巧：深入学习使用浏览器开发者工具和调试器，提高问题解决能力。
了解后端开发：学习Node.js，掌握JavaScript在服务器端的应用，迈向全栈开发。
优化代码质量：学习编写可维护、可扩展的代码，掌握设计模式和最佳实践。
学习测试：掌握单元测试和集成测试，确保代码的正确性和稳定性。

15.3 持续学习的路径

掌握基础：确保对JavaScript基础语法和概念有深入理解。
学习高级概念：深入学习原型链、闭包、异步编程等高级概念。
掌握前端框架：选择一个主流的前端框架（如React、Vue或Angular），深入学习和实践。
了解后端开发：学习Node.js及相关框架（如Express），构建全栈应用。
掌握工具链：学习使用Webpack、Babel等构建工具，提升开发效率。
参与社区：加入在线社区和论坛，参与讨论，获取最新资讯和最佳实践。

通过系统学习和持续实践，你将能够熟练掌握JavaScript，成为一名高效的Web开发者。记住，编程技能的提升离不开持续的学习与实践。祝你在JavaScript的学习之路上取得成功！

快速参考代码片段

1. 基本函数

// 普通函数
function multiply(a, b) {
    return a * b;
}

// 箭头函数
const divide = (a, b) => a / b;

console.log(multiply(4, 5)); // 20
console.log(divide(10, 2));  // 5

2. 对象与方法

let car = {
    brand: "Toyota",
    model: "Camry",
    year: 2020,
    getInfo: function() {
        return `${this.brand} ${this.model} (${this.year})`;
    }
};

console.log(car.getInfo()); // 输出: Toyota Camry (2020)

3. 数组操作

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

// 添加元素
numbers.push(6); // [1, 2, 3, 4, 5, 6]

// 删除最后一个元素
numbers.pop(); // [1, 2, 3, 4, 5]

// 遍历数组
numbers.forEach(num => console.log(num));
// 输出:
// 1
// 2
// 3
// 4
// 5

// 映射数组
let squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9, 16, 25]

// 过滤数组
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

// 归纳数组
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 15

4. Promise示例

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let success = true;
            success ? resolve("数据成功获取") : reject("数据获取失败");
        }, 1000);
    });
}

fetchData()
    .then(data => console.log(data)) // 输出: 数据成功获取
    .catch(err => console.error(err));

5. 异步函数示例

async function getData() {
    try {
        let data = await fetchData();
        console.log(data); // 输出: 数据成功获取
    } catch (error) {
        console.error(error);
    }
}

getData();

6. DOM操作示例

// 创建新元素
let newElement = document.createElement("p");
newElement.textContent = "这是一个新段落";
document.body.appendChild(newElement);

// 修改元素样式
newElement.style.color = "blue";

// 添加事件监听
newElement.addEventListener("click", () => {
    alert("段落被点击了！");
});

通过以上详细且丰富的讲解与代码示例，你可以更深入地理解和掌握JavaScript的各个知识点。记住，编程技能的提升离不开持续的实践与学习。祝你在JavaScript的学习之路上取得成功！

分享

JavaScript 零基础详细学习指南

目录

1. 什么是JavaScript？

JavaScript的特点

应用场景

2. 准备学习环境

2.1 选择编辑器

2.2 安装浏览器

2.3 设置开发者工具

2.4 安装Node.js（可选）

3. JavaScript基础语法

3.1 变量与常量

3.1.1 var

3.1.2 let

3.1.3 const

3.2 数据类型

3.2.1 基本数据类型

3.2.2 复合数据类型

3.3 运算符

3.3.1 算术运算符

3.3.2 赋值运算符

3.3.3 比较运算符

3.3.4 逻辑运算符

3.3.5 其他运算符

4. 控制结构

4.1 条件语句

4.1.1 if 语句

4.1.2 switch 语句

4.2 循环语句

4.2.1 for 循环

4.2.2 while 循环

4.2.3 do...while 循环

4.2.4 for...in 和 for...of 循环

5. 函数

5.1 函数声明与调用

5.1.1 函数声明（Function Declaration）

5.1.2 函数表达式（Function Expression）

5.2 匿名函数与箭头函数

5.2.1 匿名函数（Anonymous Function）

5.2.2 箭头函数（Arrow Function）

5.3 高阶函数

5.3.1 接受函数作为参数

5.3.2 返回函数

5.3.3 常见高阶函数

6. 对象与数组

6.1 对象

6.1.1 对象字面量

6.1.2 使用new Object()

6.1.3 构造函数

6.2 数组

6.2.1 数组字面量

6.2.2 使用new Array()

6.2.3 空数组并动态添加元素

6.2.4 常用数组方法

6.3 JSON

6.3.1 JSON语法

6.3.2 JSON与JavaScript对象的转换

6.3.3 JSON的用途

7. 作用域与闭包

7.1 全局与局部作用域

7.1.1 全局作用域

7.1.2 局部作用域

7.2 闭包的概念与应用

7.2.1 闭包的基本示例

7.2.2 闭包的应用场景

8. ES6及以后版本的新特性

8.1 let与const

8.1.1 let

8.1.2 const

8.2 模板字符串

8.2.1 基本用法

8.2.2 多行字符串

8.3 解构赋值

8.3.1 数组解构

8.3.2 对象解构

8.4 展开运算符

8.4.1 数组展开

8.4.2 对象展开

3.1.1 `var`

3.1.2 `let`

3.1.3 `const`

4.1.1 `if` 语句

4.1.2 `switch` 语句

4.2.1 `for` 循环

4.2.2 `while` 循环

4.2.3 `do...while` 循环

4.2.4 `for...in` 和 `for...of` 循环

6.1.2 使用`new Object()`

6.2.2 使用`new Array()`

10.2.1 `document.getElementById`

10.2.2 `document.getElementsByClassName`

10.2.3 `document.getElementsByTagName`

10.2.4 `document.querySelector`

10.2.5 `document.querySelectorAll`

12.3.1 `localStorage`

12.3.2 `sessionStorage`