Web Development: JavaScript Basics and DOM Manipulation

# 1. JavaScript基础

## 1.1 JavaScript简介

JavaScript是一种脚本语言，广泛用于Web开发中。它可以在网页中添加交互性和动态性，使用户和网页进行互动。JavaScript可以通过内嵌在HTML中或外部引入的方式进行使用。

// 在HTML内嵌中使用JavaScript
<script>
    console.log("Hello, JavaScript!");
</script>

// 通过外部引入的方式使用JavaScript
<script src="script.js"></script>

## 1.2 变量和数据类型

在JavaScript中，我们可以使用变量来存储和操作数据。JavaScript有几种不同的数据类型，包括数字、字符串、布尔值、数组和对象等。

// 声明和初始化变量
let age = 25;

// 字符串类型
let name = "John";

// 布尔值类型
let isStudent = true;

// 数组类型
let numbers = [1, 2, 3, 4, 5];

// 对象类型
let person = {
    name: "John",
    age: 25,
    isStudent: true
};

## 1.3 运算符和表达式

JavaScript支持各种运算符和表达式，用于进行算术运算、逻辑运算和比较运算等。

// 算术运算
let sum = 10 + 5;
let difference = 10 - 5;
let product = 10 * 5;
let quotient = 10 / 5;
let remainder = 10 % 5;

// 逻辑运算
let isAdult = age >= 18 && age < 60;
let isNewUser = !isExistingUser;

// 比较运算
let isGreater = 10 > 5;
let isEqual = 10 == 5;

## 1.4 控制流程

JavaScript提供了几种控制流程语句，用于根据条件执行不同的代码块或循环执行代码。

// 条件语句 - if语句
if (isAdult) {
    console.log("You are an adult.");
} else {
    console.log("You are not an adult.");
}

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

// 循环语句 - while循环
let i = 0;
while (i < numbers.length) {
    console.log(numbers[i]);
    i++;
}

在本章中，我们介绍了JavaScript的基础知识，包括简介、变量和数据类型、运算符和表达式，以及控制流程。这些知识对于理解JavaScript的工作原理和进行后续的DOM操作至关重要。在接下来的章节中，我们将深入研究JavaScript函数、DOM操作和事件处理等内容。

# 2. 章节二：JavaScript函数

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

在JavaScript中，函数是一种可执行的代码块，可以实现特定功能并返回一个值。我们可以通过以下几种方式定义一个函数，并在需要的时候调用它。

#### 2.1.1 函数声明

函数声明是用关键字`function`开头，后面跟着函数名和一对圆括号。函数体包含在一对花括号内。

// 函数声明的方式
function greet() {
  console.log("Hello, World!");
}

// 调用函数
greet();

#### 2.1.2 函数表达式

函数表达式是将函数赋值给一个变量或常量。函数表达式可以匿名，也可以命名。

// 匿名函数表达式
var greet = function() {
  console.log("Hello, World!");
};

// 调用函数
greet();

// 命名函数表达式
var sayHello = function greet() {
  console.log("Hello, World!");
};

// 调用函数
sayHello();

### 2.2 参数和返回值

参数是函数定义的一部分，用于接收外部传递给函数的值。返回值是函数在执行完毕后返回给调用者的值。

#### 2.2.1 参数

在函数声明和函数表达式中，可以通过在函数名后的圆括号中定义参数。参数可以是多个，多个参数之间用逗号分隔。

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John");

#### 2.2.2 返回值

使用`return`关键字可以将函数的执行结果返回给调用者。

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

var sum = add(3, 4);
console.log(sum); // 输出：7

### 2.3 匿名函数和箭头函数

#### 2.3.1 匿名函数

在函数表达式中，我们可以使用匿名函数来定义一个没有函数名的函数。

var greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet("John");

#### 2.3.2 箭头函数

箭头函数是ES6新增的一种函数表达式的简洁语法。它使用箭头符号`=>`来定义函数，可以更简洁地写出一个函数。

var greet = name => {
  console.log("Hello, " + name +