JavaScript零基础入门实战教程

# JavaScript 零基础案例练习

## 1. 初识 JavaScript

### 1.1 Hello World
```javascript
console.log("Hello, World!");

1.2 变量声明

let message = "Welcome to JavaScript!";
console.log(message);

2. 数据类型与运算符

2.1 数字运算

let num1 = 5;
let num2 = 10;
let sum = num1 + num2;
console.log("Sum:", sum);

2.2 字符串拼接

let firstName = "Alice";
let lastName = "Johnson";
let fullName = firstName + " " + lastName;
console.log("Full Name:", fullName);

3. 控制结构

3.1 条件语句

let age = 18;
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

3.2 循环语句

for (let i = 1; i <= 5; i++) {
    console.log("Number:", i);
}

4. 函数与作用域

4.1 定义函数

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

4.2 匿名函数

let multiply = function(a, b) {
    return a * b;
};
console.log("Product:", multiply(3, 4));

5. 数组与对象

5.1 数组操作

let fruits = ["Apple", "Banana", "Cherry"];
fruits.push("Date");
console.log("Fruits:", fruits.join(", "));

5.2 对象操作

let person = {
    name: "Eva",
    age: 25,
    job: "Developer"
};
console.log("Person:", JSON.stringify(person));

6. DOM 操作

6.1 更改元素内容

document.getElementById("demo").innerHTML = "Hello, DOM!";

6.2 添加事件监听

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

7. 异步编程

7.1 使用 Promise

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("Promise resolved");
    }, 2000);
});
promise.then(function(value) {
    console.log(value);
});

7.2 使用 Async/Await

async function fetchData() {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
}
fetchData();

8. 综合案例

8.1 计算器

function calculate(operation, a, b) {
    switch (operation) {
        case "add":
            return a + b;
        case "subtract":
            return a - b;
        case "multiply":
            return a * b;
        case "divide":
            return a / b;
        default:
            return "Invalid operation";
    }
}
console.log("Addition:", calculate("add", 5, 3));
console.log("Subtraction:", calculate("subtract", 5, 3));

8.2 待办事项列表

let todos = [];
function addTodo(task) {
    todos.push(task);
    console.log("Todo added:", task);
}
function listTodos() {
    console.log("Todos:", todos.join(", "));
}
addTodo("Learn JavaScript");
addTodo("Practice Coding");
listTodos();