1. JavaScript 简介

1.1 什么是 JavaScript？

JavaScript 是一种轻量级的编程语言，主要运行在浏览器中，负责实现网页的交互功能。它是由 Netscape 公司于 1995 年发明的，目前已经成为网页开发的核心技术之一。

1.2 JavaScript 的特点

  • 动态性：JavaScript 是一种动态类型语言，允许在运行时进行类型转换。
  • 跨平台性：JavaScript 代码可以在任何支持 JavaScript 的浏览器中运行。
  • 事件驱动：JavaScript 使用事件驱动模型，可以响应用户的操作（如点击、键盘输入等）。

2. 基本语法

2.1 变量和数据类型

JavaScript 中的变量使用 var、let 或 const 关键字声明，数据类型有数字、字符串、布尔值、对象等。

let age = 25; // 数字
let name = '张三'; // 字符串
let isStudent = true; // 布尔值
let person = {name: '李四', age: 30}; // 对象

2.2 运算符

JavaScript 支持各种运算符，如算术运算符、关系运算符、逻辑运算符等。

let a = 5;
let b = 10;
console.log(a + b); // 15
console.log(a > b); // false

2.3 控制流

JavaScript 使用 if、else、switch、for、while 等语句控制程序流程。

let x = 5;
if (x > 3) {
  console.log('x 大于 3');
} else {
  console.log('x 不大于 3');
}

3. 函数

3.1 函数定义

JavaScript 中的函数使用 function 关键字定义，可以接受参数并返回值。

function sayHello(name) {
  console.log('Hello, ' + name);
}

sayHello('张三'); // 输出：Hello, 张三

3.2 函数调用

函数可以通过函数名直接调用，也可以通过变量调用。

let func = function() {
  console.log('我是一个匿名函数');
};

func(); // 输出：我是一个匿名函数

4. 对象

4.1 对象创建

JavaScript 中的对象使用 {} 创建，可以包含属性和方法。

let person = {
  name: '李四',
  age: 30,
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

person.sayHello(); // 输出：Hello, 李四

4.2 属性访问

对象的属性可以通过点语法或方括号语法访问。

console.log(person.name); // 输出：李四
console.log(person['age']); // 输出：30

5. 数组

5.1 数组创建

JavaScript 中的数组使用 [] 创建，可以存储任意类型的数据。

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

5.2 数组方法

JavaScript 提供了丰富的数组方法，如 push、pop、map、filter 等。

numbers.push(6); // 数组变为 [1, 2, 3, 4, 5, 6]
numbers.pop(); // 数组变为 [1, 2, 3, 4, 5]
let evenNumbers = numbers.filter(num => num % 2 === 0); // evenNumbers 变为 [2, 4]

6. 事件处理

6.1 事件监听

JavaScript 可以监听元素上的事件，并在事件发生时执行相应的函数。

<button id="myButton">点击我</button>

<script>
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('按钮被点击了');
});
</script>

6.2 事件冒泡和捕获

事件在 DOM 树中传播，分为冒泡阶段和捕获阶段。可以通过 addEventListener 的第三个参数控制事件处理器的绑定阶段。

<div id="container">
  <div id="child">子元素</div>
</div>

<script>
let container = document.getElementById('container');
container.addEventListener('click', function() {
  console.log('容器被点击了');
}, true); // 在捕获阶段处理事件

7. 高级特性

7.1 闭包

闭包是 JavaScript 中一个非常重要的概念，允许函数访问外部函数的变量。

function outerFunction() {
  let outerVariable = '外部变量';
  return function innerFunction() {
    console.log(outerVariable);
  };
}

let myFunction = outerFunction();
myFunction(); // 输出：外部变量

7.2 生成器

生成器函数可以暂停执行，并在需要时恢复执行，返回一个迭代器。

function* generator() {
  yield '第一项';
  yield '第二项';
  yield '第三项';
}

let myGenerator = generator();
console.log(myGenerator.next().value); // 输出：第一项
console.log(myGenerator.next().value); // 输出：第二项
console.log(myGenerator.next().value); // 输出：第三项

7.3 模块化

模块化是 JavaScript 的一种编程范式，可以将代码组织成模块，方便复用和维护。

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

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

8. 总结

JavaScript 是一种功能强大的编程语言，广泛应用于网页开发领域。本文介绍了 JavaScript 的基本语法、函数、对象、数组、事件处理等基本概念，并探讨了闭包、生成器、模块化等高级特性。通过学习本文，读者可以快速入门 JavaScript，为后续的学习打下坚实基础。