JavaScript笔记|青训营

49 阅读2分钟

JavaScript是一种高级、解释型的编程语言,广泛应用于网页开发,它赋予网页动态、交互性和丰富的用户体验。 1. JavaScript的基础 JavaScript是一门直译式语言,即代码不需要经过编译过程,可以直接在浏览器上运行。它主要用于网页的前端开发,但也可以应用于服务器端,称为Node.js。

2. 在HTML中使用JavaScript 通过<script>标签将JavaScript代码嵌入到HTML页面中。

htmlCopy code
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript笔记</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        // 这里是您的JavaScript代码
    </script>
</body>
</html>

3. 变量和数据类型 在JavaScript中,可以使用varletconst声明变量。常用的数据类型包括字符串、数字、布尔值、数组和对象。

javascriptCopy code
// 声明变量并赋值
let name = "John";
const age = 30;
var isStudent = true;

// 数组和对象
let numbers = [1, 2, 3, 4, 5];
let person = { name: "Alice", age: 25 };

4. 控制结构 JavaScript支持条件语句和循环语句,可以控制程序的流程。

javascriptCopy code
// 条件语句
if (age < 18) {
    console.log("未成年");
} else {
    console.log("成年人");
}

// 循环语句
for (let i = 0; i < 5; i++) {
    console.log("循环次数:" + i);
}

5. 函数 函数是一组可重复使用的代码块,可以带有参数和返回值。

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

// 调用函数
let message = greet("Alice");
console.log(message); // 输出:Hello, Alice!

6. 事件处理 JavaScript使网页变得生动有趣,可以通过事件处理来响应用户的交互。

htmlCopy code
<button onclick="alert('按钮被点击')">点击我</button>

7. DOM操作 DOM(文档对象模型)是网页的编程接口,通过JavaScript可以操作HTML元素和样式。

htmlCopy code
<p id="demo">这是一个段落</p>

<script>
    // 获取元素并修改内容
    let paragraph = document.getElementById("demo");
    paragraph.innerHTML = "修改后的内容";
</script>

8. 异步编程 JavaScript是单线程执行的,但通过异步编程可以处理耗时的操作,如网络请求和文件读取。

javascriptCopy code
// 使用Promise处理异步任务
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("数据加载成功");
        }, 2000);
    });
}

fetchData().then(data => {
    console.log(data); // 输出:数据加载成功
});

9. 错误处理 在编程中,错误是常见的。JavaScript提供try...catch块来捕获和处理异常。

javascriptCopy code
try {
    // 可能会引发错误的代码
    let result = 10 / 0;
} catch (error) {
    console.log("出现错误:" + error.message);
}

10. 闭包 闭包是指函数可以访问并操作其词法作用域外的变量。

javascriptCopy code
function outer() {
    let count = 0;

    function inner() {
        count++;
        console.log("计数:" + count);
    }

    return inner;
}

let counter = outer();
counter(); // 输出:计数:1
counter(); // 输出:计数:2