JavaScript基础语法与DOM操作

# 1. JavaScript基础语法介绍

JavaScript作为一门前端开发的重要语言，在Web开发中发挥着不可替代的作用。本章将为你介绍JavaScript的基础语法，让你轻松入门这门语言。

## 1.1 什么是JavaScript

JavaScript是一种高级的、解释性的编程语言，通常用于网页开发中实现交互效果。它与HTML和CSS共同构成了现代Web应用的基础。

## 1.2 JavaScript的数据类型

JavaScript有多种数据类型，包括基本数据类型（例如数字、字符串、布尔值）、对象和函数等。了解不同的数据类型有助于我们更好地处理数据。

## 1.3 变量和常量的声明

在JavaScript中，我们可以使用`var`、`let`和`const`关键字来声明变量和常量。这些关键字有各自的作用范围和规则，正确地使用它们能够提高代码的质量。

## 1.4 条件语句与循环语句

条件语句（如`if...else`、`switch`）和循环语句（如`for`、`while`）是控制程序流程的重要工具，我们可以利用它们实现不同的逻辑功能和循环操作。

在接下来的章节中，我们将进一步深入探讨JavaScript的函数与作用域、对象与数组、DOM操作基础以及事件处理与事件委托等内容。

# 2. 函数与作用域

JavaScript中函数是一个重要的概念，它不仅可以用来封装代码，还可以实现代码的复用和模块化。在这一章节中，我们将深入了解函数的定义、作用域、参数传递以及this关键字的应用。

### 2.1 函数的定义与调用

函数是一段可以重复使用的代码块，通过函数的定义，我们可以将具有特定功能的代码块封装起来，然后在需要的地方进行调用。JavaScript中函数的定义可以通过function关键字来实现，如下所示：

// 定义一个简单的函数
function greet() {
    console.log("Hello, World!");
}

// 调用函数
greet();

代码执行结果：控制台输出 "Hello, World!"

### 2.2 函数的参数与返回值

函数不仅可以在内部执行操作，还可以接受参数和返回值。参数可以在函数定义时指定，而返回值可以通过return语句来返回。下面是一个计算两个数相加的函数示例：

function add(a, b) {
    return a + b;
}

// 调用函数并输出结果
console.log(add(2, 3)); // 控制台输出 5

### 2.3 函数的作用域与闭包

JavaScript中的作用域可以分为全局作用域和局部作用域。当在函数内部定义变量时，这些变量属于函数的局部作用域。而闭包是指函数可以访问定义在外部函数作用域的变量。下面是一个闭包的示例：

function outerFunction() {
    var outerVar = 'I am from outer function';
    function innerFunction() {
        console.log(outerVar);
    }

    return innerFunction;
}

var innerFunc = outerFunction();
innerFunc(); // 控制台输出 'I am from outer function'

### 2.4 this关键字的应用

在JavaScript中，this关键字是一个非常重要的概念，它代表当前对象的引用。在函数中，this指向调用该函数的对象。下面是一个简单的示例：

var person = {
    name: 'Alice',
    greet: function() {
        console.log("Hello, I'm " + this.name);
    }
};

person.greet(); // 控制台输出 'Hello, I'm Alice'

通过本章节的学习，我们深入了解了函数的定义与调用、函数的参数与返回值、作用域与闭包以及this关键字的应用。这些是JavaScript中函数与作用域的重要知识点，对于编写可维护性高、结构清晰的代码非常重要。

# 3. JavaScript中的对象与数组

在JavaScript中，对象和数组是两种非常重要且常用的数据类型，它们可以用来存储和操作各种数据。在本章中，我们将深入探讨对象和数组的相关内容，包括对象的创建与使用、原型与继承、数组的定义与常见操作方法以及JSON与对象序列化等方面的知识。

#### 3.1 对象的创建与使用

在JavaScript中，对象是由一组键值对（properties）组成的数据集合，每个键值对中的键都是一个字符串（也称为属性名），值可以是任意的数据类型，包括数字、字符串、数组、甚至是另一个对象。对象可以通过对象字面量的方式进行创建，示例如下：

// 创建一个空对象
let person = {};

// 添加属性到对象中
person.name = "Alice";
person.age = 30;

// 访问对象属性
console.log(person.name);  // 输出：Alice
console.log(person.age);   // 输出：30

#### 3.2 原型与继承

在JavaScript中，每个对象都有一个原型对象（prototype），通过原型链的方式实现对象之间的继承关系。当我们访问一个对象的属性或方法时，如果该对象本身没有该属性或方法，JavaScript会沿着原型链向上查找，直到找到为止。下面是一个简单的原型继承示例：

// 定义一个父对象
let parent = {
    greet: function() {
        console.log("Hello, I'm the parent!");
    }
};