JavaScript基础概念和语法

1. Hello World 程序

让我们从经典的 "Hello World" 程序开始。这个程序将在浏览器的控制台输出 "Hello, World!"。

console.log("Hello, World!");

2. 变量和数据类型

JavaScript是一种弱类型语言，你可以直接为变量分配值而无需显式声明类型。

// 整数变量
let age = 25;

// 浮点数变量
let height = 1.75;

// 字符串变量
let name = "John Doe";

3. 数组和循环

使用数组来存储一组数据，然后使用循环遍历它们。

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

for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

4. 函数

定义和调用函数是JavaScript中的重要概念。

// 定义函数
function greet(name) {
    return "Hello, " + name + "!";
}

// 调用函数
let greeting = greet("Alice");
console.log(greeting);

5. 条件语句

JavaScript中的条件语句允许你根据不同的条件执行不同的代码块。

let temperature = 25;

if (temperature > 20) {
    console.log("It's a warm day!");
} else {
    console.log("It's a cool day!");
}

6. 对象和属性

使用对象来组织和存储相关的数据。

let person = {
    name: "John Doe",
    age: 30,
    occupation: "Developer"
};

console.log(person.name);

7. 对象和方法

在对象中定义方法，实现更复杂的功能。

let calculator = {
    add: function(a, b) {
        return a + b;
    },
    multiply: function(a, b) {
        return a * b;
    }
};

console.log(calculator.add(5, 3)); // 输出 8
console.log(calculator.multiply(2, 4)); // 输出 8

8. 异步编程和回调函数

JavaScript常用于处理异步操作，例如从服务器获取数据。

// 模拟异步请求
function fetchData(callback) {
    setTimeout(function() {
        let data = "Data from server";
        callback(data);
    }, 2000);
}

// 调用异步函数
fetchData(function(result) {
    console.log(result);
});

9. Promise 和异步/等待

使用Promise和异步/等待来更优雅地处理异步操作

function fetchData() {
    return new Promise(resolve => {
        setTimeout(() => {
            let data = "Data from server";
            resolve(data);
        }, 2000);
    });
}

// 使用异步/等待
async function fetchDataAsync() {
    let result = await fetchData();
    console.log(result);
}

fetchDataAsync();

10. DOM 操作

JavaScript通过DOM（文档对象模型）与网页交互，动态改变页面内容。

<!-- HTML部分 -->
<button id="myButton">点击我</button>
<p id="output">等待点击...</p>

<!-- JavaScript部分 -->
<script>
    // 获取按钮和输出元素
    let button = document.getElementById("myButton");
    let output = document.getElementById("output");

    // 添加点击事件
    button.addEventListener("click", function() {
        output.innerHTML = "按钮被点击了！";
    });
</script>

11. AJAX 和 Fetch

使用AJAX或Fetch进行异步数据请求，更新页面内容。

// 使用Fetch获取JSON数据
fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error:", error));

12. 框架和库

介绍一些流行的JavaScript框架和库，如React、Vue和Angular。

// 使用React创建组件
import React from 'react';

class MyComponent extends React.Component {
    render() {
        return <h1>Hello, React!</h1>;
    }
}

这些是一些JavaScript的高级概念，涵盖了异步编程、DOM操作以及一些流行的框架和库。希望这有助于你更深入地了解JavaScript

感谢你读到这里！