### JavaScript 教学知识点概述
#### 一、JavaScript 基础概念
- **定义**：JavaScript 是一种轻量级的编程语言，主要用于网页开发，为网页添加交互性。
- **发展历程**：由 Netscape 公司的 Brendan Eich 在 1995 年创造。最初被称为 LiveScript，后来被命名为 JavaScript。
- **用途**：
- 客户端脚本：用于浏览器端执行，例如表单验证、动态内容生成等。
- 服务器端脚本：通过 Node.js 可以在服务器端运行 JavaScript。
- 游戏开发：如 Phaser 框架。
- 应用程序开发：如 Electron 框架。
#### 二、JavaScript 语法基础
- **变量声明**：使用 `var`、`let` 和 `const` 关键字来声明变量。
```javascript
var name = "张三";
let age = 18;
const PI = 3.14;
```
- **数据类型**：
- 原始类型（Primitive Types）：`Number`、`String`、`Boolean`、`Undefined`、`Null`、`Symbol`（ES6 新增）、`BigInt`（ES10 新增）。
- 对象类型（Object Types）：`Object`、`Array`、`Function`、`Date` 等。
- **运算符**：
- 算术运算符：加 (`+`)、减 (`-`)、乘 (`*`)、除 (`/`)、取余 (`%`)。
- 比较运算符：等于 (`==`)、严格等于 (`===`)、不等于 (`!=`)、严格不等于 (`!==`)、大于 (`>`)、小于 (`<`)。
- 逻辑运算符：与 (`&&`)、或 (`||`)、非 (`!`)。
- **控制结构**：
- 条件语句：`if...else`、`switch...case`。
- 循环语句：`for`、`while`、`do...while`。
- 跳转语句：`break`、`continue`。
- **函数**：JavaScript 中的函数是一种对象，可以作为值进行传递。
```javascript
function sayHello(name) {
console.log("Hello, " + name);
}
sayHello("张三");
```
#### 三、DOM 操作
- **文档对象模型**（Document Object Model）是 HTML 或 XML 文档的结构化表示形式，它将文档表示为一个节点树。
- **常用方法**：
- 获取元素：`document.getElementById()`、`document.querySelector()`。
- 添加元素：`document.createElement()`、`parent.appendChild(child)`。
- 修改元素：`element.innerHTML`、`element.style`。
- 删除元素：`parent.removeChild(child)`。
- **事件处理**：
- 监听事件：`element.addEventListener()`。
- 触发事件：`element.dispatchEvent(event)`。
- 移除事件监听器：`element.removeEventListener()`。
#### 四、BOM 概念
- **浏览器对象模型**（Browser Object Model）提供了独立于内容之外的与浏览器窗口进行交互的对象，其核心对象是 window。
- **常用属性与方法**：
- `window.location`：获取或设置当前页面的 URL。
- `window.alert()`、`window.confirm()`、`window.prompt()`：弹出提示框、确认框、输入框。
- `window.open()`、`window.close()`：打开新窗口、关闭窗口。
- `window.history`：操作浏览器的历史记录。
- `window.screen`：获取屏幕信息。
- `window.setTimeout()`、`window.setInterval()`：定时器。
#### 五、JavaScript 高级特性
- **闭包**：当一个函数返回后仍然能够访问其作用域内的变量时，就形成了闭包。
```javascript
function outer() {
var count = 0;
return function inner() {
count++;
console.log(count);
};
}
var increment = outer();
increment(); // 1
increment(); // 2
```
- **原型链**：JavaScript 的继承机制是基于原型的，每个对象都有一个原型对象，可以访问原型上的属性和方法。
- **异步编程**：
- `callback` 函数：作为参数传递给其他函数，在特定时间点执行。
- `Promise`：处理异步操作的结果。
- `async/await`：使异步代码更像同步代码。
- **模块化**：
- `CommonJS`：Node.js 中使用的模块系统。
- `ES6 Modules`：ECMAScript 2015 引入的标准模块系统。
- **ES6+ 新特性**：
- `let` 和 `const`：块级作用域变量。
- `arrow function`：箭头函数简化了函数的定义。
- `template literals`：模板字符串简化了字符串拼接。
- `destructuring`：解构赋值简化了变量赋值过程。
以上是对 JavaScript 的基础知识和高级特性的详细介绍，希望能够帮助大家更好地理解和学习这门重要的编程语言。
