JavaScript 入门教程：从基础到异步编程

JavaScript 入门教程：从基础到异步编程

1. JavaScript 基础语法

1.1 变量和数据类型

• 变量: 用var、let或const关键字声明变量，例如：

  var age = 25; // 使用 var 声明全局变量
  let name = "Alice"; // 使用 let 声明局部变量
  const PI = 3.14159; // 使用 const 声明常量
  

• 数据类型: JavaScript 中常用的数据类型包括：

  • 数字 (Number): 整数和浮点数，例如： 10, 3.14
  • 字符串 (String): 用单引号或双引号包裹的文本，例如： "Hello world!", 'JavaScript'
  • 布尔值 (Boolean): 代表真或假，只有 true 或 false 两种值
  • 数组 (Array): 有序的数据集合，例如： [1, 2, 3, 4], ["apple", "banana", "orange"]
  • 对象 (Object): 无序的数据集合，包含键值对，例如： { name: "John", age: 30 }
  • null: 表示空值
  • undefined: 表示变量未被赋值

1.2 运算符

• 算术运算符: + (加), - (减), * (乘), / (除), % (取模)
• 比较运算符: == (等于), != (不等于), > (大于), < (小于), >= (大于等于), <= (小于等于)
• 逻辑运算符: && (逻辑与), || (逻辑或), ! (逻辑非)
• 赋值运算符: = (赋值), +=, -=, *=, /=, %=, **=
• 其他运算符: typeof (获取数据类型), instanceof (判断对象类型)

1.3 控制语句

• 条件语句: if 语句用于根据条件执行不同的代码块。

  if (age >= 18) {
    console.log("成年人");
  } else {
    console.log("未成年人");
  }
  

• 循环语句:

  • for 循环用于重复执行代码块，直到满足条件。

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

  • while 循环用于重复执行代码块，直到条件为假。

  let i = 0;
  while (i < 5) {
    console.log(i);
    i++;
  }
  

  • do...while 循环至少执行一次代码块，然后检查条件。

  let i = 0;
  do {
    console.log(i);
    i++;
  } while (i < 5);
  

1.4 函数

• 定义函数: 用 function 关键字定义函数，例如：

  function greet(name) {
    console.log("Hello, " + name + "!");
  }
  greet("Alice"); // 调用函数
  

• 函数参数: 函数可以接受参数，并在函数内部使用。

• 函数返回值: 函数可以使用 return 语句返回值。

  function sum(a, b) {
    return a + b;
  }
  let result = sum(2, 3); // result 为 5
  

2. DOM 操作

2.1 获取元素

• 通过 ID 获取元素: 使用 document.getElementById("elementId")
• 通过标签名获取元素: 使用 document.getElementsByTagName("tagName") 返回一个包含所有匹配元素的 HTMLCollection 对象。
• 通过类名获取元素: 使用 document.getElementsByClassName("className") 返回一个包含所有匹配元素的 HTMLCollection 对象。
• 通过选择器获取元素: 使用 document.querySelector("selector") 获取第一个匹配的元素，document.querySelectorAll("selector") 获取所有匹配的元素。

2.2 操作元素属性

• 修改元素的属性: 使用 element.属性名 = 新值 方式修改。

  let heading = document.getElementById("myHeading");
  heading.innerHTML = "新的标题";
  heading.style.color = "red";
  

• 获取元素的属性: 使用 element.属性名 方式获取。

2.3 创建和插入元素

• 创建元素: 使用 document.createElement("tagName") 创建元素节点。
• 创建文本节点: 使用 document.createTextNode("text") 创建文本节点。
• 添加子节点: 使用 element.appendChild(node) 添加子节点。
• 插入节点: 使用 element.insertBefore(newElement, existingElement) 在现有节点之前插入新节点。
• 删除节点: 使用 element.removeChild(node) 删除子节点。

2.4 事件处理

• 添加事件监听器: 使用 element.addEventListener("eventName", function) 添加事件监听器。

  let button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    alert("按钮被点击了！");
  });
  

• 常见的事件类型: click、mouseover、mouseout、keydown、keyup、submit 等。

3. 异步编程

3.1 回调函数

• 回调函数是在异步操作完成后执行的函数。

  function fetchData(callback) {
    setTimeout(function() {
      let data = "数据";
      callback(data);
    }, 2000); // 模拟延迟获取数据
  }
  
  fetchData(function(data) {
    console.log(data); // 2 秒后输出 "数据"
  });
  

3.2 Promise

• Promise 对象代表异步操作的结果，有三种状态：
  • pending: 正在执行异步操作
  • fulfilled: 异步操作成功
  • rejected: 异步操作失败

  function fetchData() {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        let data = "数据";
        resolve(data); // 成功获取数据
        // reject(Error("获取数据失败")); // 失败获取数据
      }, 2000);
    });
  }
  
  fetchData().then(function(data) {
    console.log(data); // 2 秒后输出 "数据"
  }).catch(function(error) {
    console.error(error); // 处理错误
  });
  

3.3 async/await

• async 关键字用于声明异步函数，await 关键字用于等待 Promise 对象的结果。

  async function fetchData() {
    try {
      let data = await new Promise(function(resolve, reject) {
        setTimeout(function() {
          resolve("数据");
        }, 2000);
      });
      console.log(data); // 2 秒后输出 "数据"
    } catch (error) {
      console.error(error);
    }
  }
  
  fetchData();
  

总结

本教程介绍了 JavaScript 的基础语法、DOM 操作、事件处理和异步编程等内容，并提供了一些实例代码。学习 JavaScript 可以帮助您构建交互式网站和网页应用，进而实现各种有趣的功能。在实际开发中，还需要根据具体需求学习更多更高级的知识，例如：

• 模块化: 使用 import 和 export 导入和导出模块。
• 类和面向对象编程: 使用类和面向对象编程思想构建更复杂的功能。
• 框架和库: 学习使用流行的 JavaScript 框架和库，例如 React、Vue、Angular 等，简化开发流程，提高开发效率。

希望本教程能帮助您入门 JavaScript！