js基础代码

当提到JavaScript的基础代码时，可以涵盖很多方面，包括变量、条件语句、循环、函数等。变量和数据类型:

javascript
// 定义变量
let myVar = 10;

// 字符串
let myString = "Hello, World!";

// 数字
let myNumber = 3.14;

// 布尔值
let myBoolean = true;

// 数组
let myArray = [1, 2, 3, 4];

// 对象
let myObject = { key: "value", anotherKey: 123 };

条件语句:

javascript
let condition = true;

if (condition) {
    console.log("条件为真");
} else {
    console.log("条件为假");
}

循环:

javascript
// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while 循环
let counter = 0;
while (counter < 5) {
    console.log(counter);
    counter++;
}

函数:

javascript
// 定义函数
function greet(name) {
    console.log("Hello, " + name + "!");
}

// 调用函数
greet("Alice");

事件处理:

javascript
// 获取一个按钮元素
let myButton = document.getElementById("myButton");

// 添加点击事件处理程序
myButton.addEventListener("click", function() {
    console.log("按钮被点击了！");
});

面向对象编程:

javascript
// 定义一个类
class Animal {
    constructor(name) {
        this.name = name;
    }

    // 类方法
    speak() {
        console.log(this.name + ' makes a sound.');
    }
}

// 创建一个类的实例
let myDog = new Animal('Dog');

// 调用实例方法
myDog.speak();

异步编程:

javascript
// 异步函数
function fetchData() {
    return new Promise((resolve, reject) => {
        // 模拟异步操作
        setTimeout(() => {
            let data = "Async data";
            resolve(data);
        }, 2000);
    });
}

// 使用异步函数
fetchData().then((result) => {
    console.log(result);
}).catch((error) => {
    console.error(error);
});

DOM 操作:

javascript
// 获取元素
let myElement = document.getElementById("myElement");

// 修改元素内容
myElement.innerHTML = "New content";

// 添加 CSS 类
myElement.classList.add("highlight");

// 添加事件处理程序
myElement.addEventListener("mouseover", function() {
    console.log("Mouse over the element");
});

AJAX 请求:

javascript
// 创建一个 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();

// 配置请求
xhr.open("GET", "https://api.example.com/data", true);

// 设置回调函数
xhr.onload = function() {
    if (xhr.status == 200) {
        console.log(xhr.responseText);
    } else {
        console.error("Failed to fetch data");
    }
};

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

这些示例覆盖了JavaScript的一些高级主题，但仍然只是冰山一角。深入学习JavaScript可能涉及到更复杂的概念，如闭包、原型链、模块化等。建议通过实践、阅读文档和参与项目来巩固和拓展你的JavaScript知识。