Web 前端：JavaScript 学习指南

JavaScript 是 Web 前端开发的核心语言，它让网页具备交互性。与 HTML 和 CSS 配合使用，JavaScript 让开发者能够创建动态网页、控制页面元素、处理事件、与服务器交互等。下面将带你全面了解 JavaScript 的基本概念、语法和常见应用，帮助你掌握这门语言。

1. JavaScript 基础语法

1.1 变量声明

在 JavaScript 中，变量声明有三种方式：

  • var：ES5 中用来声明变量，但其作用域是函数级别的，不推荐使用。
  • let：ES6 引入的，块级作用域声明变量，避免了 var 的一些问题。
  • const：ES6 引入的，声明常量，声明后不可修改。
var name = "John";   // var 声明（不推荐使用）
let age = 30;        // let 声明（块级作用域）
const pi = 3.14;     // const 声明（常量）

1.2 数据类型

JavaScript 有七种原始数据类型：

  • Number：数字类型
  • String：字符串类型
  • Boolean：布尔类型（true 或 false）
  • Object：对象类型
  • Array：数组类型（对象的一种特殊形式）
  • Null：空值类型
  • Undefined：未定义类型
let num = 42;              // Number
let str = "Hello, World";  // String
let isTrue = true;         // Boolean
let person = { name: "John", age: 30 }; // Object
let colors = ["red", "green", "blue"]; // Array
let empty = null;          // Null
let notAssigned;           // Undefined

1.3 操作符

JavaScript 提供了各种操作符来进行基本的运算：

  • 算数操作符：+, -, *, /, %, ++, --
  • 比较操作符：==, ===, !=, !==, >, <, >=, <=
  • 逻辑操作符：&&, ||, !
  • 赋值操作符：=, +=, -=, *=, /=
  • 三元运算符：condition ? expr1 : expr2
let x = 10, y = 5;
let sum = x + y;       // 15
let isEqual = (x == y); // false
let isGreater = (x > y); // true
let isAdult = age >= 18 ? "Yes" : "No"; // 三元运算符

1.4 条件语句

常见的条件语句有 if、else、else if 和 switch。

// if-else 语句
if (age > 18) {
    console.log("Adult");
} else {
    console.log("Not Adult");
}

// switch 语句
let day = 2;
switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    default:
        console.log("Invalid day");
}

1.5 循环语句

JavaScript 提供了多种循环语句，常用的有 for、while 和 do-while。

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

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

// do-while 循环
let j = 0;
do {
    console.log(j); // 输出 0 到 4
    j++;
} while (j &lt; 5);

2. 函数与作用域

2.1 函数声明

在 JavaScript 中，函数是可以重用的代码块，声明方式有两种：函数声明和函数表达式。

// 函数声明
function greet(name) {
    return "Hello, " + name;
}
console.log(greet("John")); // 输出 "Hello, John"

// 函数表达式
const add = function(a, b) {
    return a + b;
};
console.log(add(5, 3)); // 输出 8

2.2 箭头函数

ES6 引入了箭头函数，使函数声明更加简洁。

// 箭头函数
const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 输出 6

2.3 作用域

JavaScript 具有 全局作用域 和 局部作用域。变量声明的方式（var、let、const）决定了变量的作用域。

let globalVar = "I am global";

function testScope() {
    let localVar = "I am local";
    console.log(globalVar); // 访问全局变量
    console.log(localVar);  // 访问局部变量
}

testScope();
console.log(globalVar); // 可以访问全局变量
// console.log(localVar); // 报错，localVar 不在外部作用域中

3. DOM 操作与事件

JavaScript 主要用于操作 DOM（文档对象模型），并响应用户事件。

3.1 DOM 选择器

常用的 DOM 选择器有：

  • document.getElementById()
  • document.getElementsByClassName()
  • document.getElementsByTagName()
  • document.querySelector()
  • document.querySelectorAll()
let elem = document.getElementById("myId");
let elems = document.getElementsByClassName("myClass");
let elem = document.querySelector("div.myClass");  // 使用 CSS 选择器

3.2 修改元素内容

使用 JavaScript 修改 DOM 元素内容、样式等：

// 修改文本内容
document.getElementById("myId").innerText = "Hello, World!";

// 修改 HTML 内容
document.getElementById("myId").innerHTML = "&lt;b>Bold Text&lt;/b>";

// 修改元素样式
document.getElementById("myId").style.color = "blue";

3.3 事件处理

JavaScript 可以响应用户的鼠标、键盘等事件。

// 单击按钮时执行的函数
document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
};

// 使用 addEventListener 方法
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

4. 异步编程与 AJAX

4.1 回调函数

回调函数是 JavaScript 异步编程的常见方式。

function fetchData(callback) {
    setTimeout(function() {
        callback("Data fetched");
    }, 1000);
}

fetchData(function(data) {
    console.log(data); // 输出 "Data fetched"
});

4.2 Promise

Promise 是 JavaScript 的一种异步编程方式，允许你更优雅地处理异步代码。

let myPromise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("Operation successful");
    } else {
        reject("Operation failed");
    }
});

myPromise
    .then(result => console.log(result))  // 输出成功结果
    .catch(error => console.log(error));  // 输出错误信息

4.3 async/await

async/await 是 ES8 引入的语法糖，使异步编程更像同步编程。

async function fetchData() {
    let result = await myPromise;
    console.log(result);
}

fetchData();  // 输出 "Operation successful"

4.4 AJAX 请求

AJAX（异步 JavaScript 和 XML）使得网页能够异步与服务器交换数据，不需要重新加载页面。

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

5. ES6 新特性

5.1 模板字面量

模板字面量使用反引号（`）来创建字符串，并可以嵌入变量。

let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, John!"

5.2 **解构赋

值**

解构赋值让你可以快速地从对象或数组中提取数据。

// 数组解构
let [a, b] = [1, 2];
console.log(a, b);  // 输出 1 2

// 对象解构
let person = { name: "John", age: 30 };
let { name, age } = person;
console.log(name, age);  // 输出 "John" 30

5.3 模块化

ES6 引入了模块化支持，使用 export 和 import 来导出和导入模块。

// math.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(2, 3));  // 输出 5

总结

JavaScript 是 Web 前端开发的核心，了解 JavaScript 的基础语法、函数、DOM 操作、异步编程、事件处理和 ES6 新特性，可以让你高效地开发现代网页应用。掌握这些知识后，你可以利用 JavaScript 创建动态、交互性强的网页，提升用户体验，并为前端框架如 React、Vue 或 Angular 的学习打下基础。