9- 【JavaWeb】JavaScript 基础

1. 基本语法

变量声明

JavaScript 中可以使用 var、let 和 const 来声明变量。var 是旧的方式，let 和 const 是较新的方式，通常推荐使用 let 和 const。

// 使用 let 声明的变量可以被重新赋值
let name = "Alice";
name = "Bob";

// 使用 const 声明的变量不能被重新赋值
const age = 25;
// age = 30; // 这将导致错误

console.log(name); // 输出: Bob
console.log(age); // 输出: 25

数据类型

JavaScript 有几种基本数据类型：

• 数字: 整数或浮点数
• 字符串: 一系列字符
• 布尔值: true 或 false
• 数组: 有序的元素集合
• 对象: 键值对的集合

let number = 42; // 数字
let string = "Hello, world!"; // 字符串
let boolean = true; // 布尔值
let array = [1, 2, 3, 4, 5]; // 数组
let object = { name: "Alice", age: 25 }; // 对象

console.log(number); // 输出: 42
console.log(string); // 输出: Hello, world!
console.log(boolean); // 输出: true
console.log(array[2]); // 输出: 3 (访问数组的第三个元素)
console.log(object.name); // 输出: Alice (访问对象的属性)

2. 逻辑运算和流程控制

逻辑运算

逻辑运算符用于进行布尔运算：

let a = true;
let b = false;

console.log(a && b); // 逻辑与: false，因为 b 是 false
console.log(a || b); // 逻辑或: true，因为 a 是 true
console.log(!a); // 逻辑非: false，因为 a 是 true

流程控制

JavaScript 提供了条件判断和循环控制来决定程序的执行流程：

• 条件语句

let number = 10;

if (number > 0) {
    console.log("Number is positive");
} else if (number < 0) {
    console.log("Number is negative");
} else {
    console.log("Number is zero");
}

• switch 语句

适用于根据不同的条件执行不同的代码块：

let day = 3;

switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    default:
        console.log("Other day");
}

• 循环

循环结构用于重复执行代码块：

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

// while 循环
let i = 0;
while (i < 5) {
    console.log(i); // 输出 0 到 4
    i++;
}

3. 函数定义

函数是用来封装代码块的结构，便于重复使用：

函数声明

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

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

函数表达式

函数可以赋值给变量：

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

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

箭头函数

箭头函数是更简洁的函数语法：

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

console.log(multiply(4, 5)); // 输出: 20

4. 数组和对象

数组

数组是有序的元素集合：

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // 输出: banana (访问数组的第二个元素)
fruits.push("date"); // 向数组末尾添加元素
console.log(fruits.length); // 输出: 4 (数组的长度)

对象

对象是键值对的集合：

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

console.log(person.name); // 输出: John (访问对象的属性)
console.log(person.greet()); // 输出: Hello, John (调用对象的方法)

5. 事件处理

在网页中，事件处理是与用户交互的关键：

<button id="myButton">Click mebutton>

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

6. 发送 XHR 请求

XMLHttpRequest (XHR) 用于从服务器获取数据：

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true); // 第一个参数是请求方法，第二个参数是 URL

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let data = JSON.parse(xhr.responseText); // 解析 JSON 数据
        console.log(data); // 输出数据
    }
};

xhr.send(); // 发送请求