一、了解JavaScript
1.1 JavaScript是什么？
js是一种用来给网页增加交互性的编程语言 ，但是我们常常会看到js被称为**"脚本语言"**，这其实是因为其更适合编写脚本而不是程序。这实际上并么有根本性的差异，JS脚本也是一种程序（就像Python），它们包含在HTML页面内部（内部script或行内script）或者外部（单独一个js文件）。在HTML页面中，因为脚本包裹在script标签中，所以在用户的屏幕上是不显示的。
javascript
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>JavaScriptr是什么？</h1>
<script>
console.log("这部分就是JavaScript!!!")
</script>
</body>
</html>1.2 JavaScript可以做什么？
JavaScript 早已超越了最初作为"浏览器脚本语言"的定位，演变为一门能够覆盖从前端用户界面到后端服务器、从移动应用到桌面应用、甚至物联网设备的全栈通用编程语言。在前端，它是构建动态交互网页的核心，负责处理用户事件、数据可视化及单页应用的路由与状态管理；借助 Node.js，它在后端同样表现出色，可用于搭建高并发的 API 服务、实时聊天系统或处理文件系统与数据库操作。此外，通过 Electron 和 React Native 等框架，开发者能用同一套 JavaScript 代码开发跨平台的桌面软件和移动应用。在新兴领域，JavaScript 也广泛应用于游戏开发、机器学习模型部署（如 TensorFlow.js）以及物联网设备的控制脚本。可以说，只要有用户交互或数据处理的需求，几乎都能看到 JavaScript 的身影，使其成为当今互联网世界中最具影响力和生态活力的编程语言之一。
1.3 jQuery
jQuery 是一个于2006年推出的快速、简洁的 JavaScript 库，其核心设计理念是"Write Less, Do More"（写更少的代码，做更多的事）。它主要致力于解决不同浏览器之间的兼容性差异，并大幅简化对网页元素的操控。通过引入类似 CSS 的强大选择器，开发者可以轻松地选中页面中的任意元素，并对其进行增删、修改属性或内容等操作。同时，jQuery 提供了极其简洁的链式语法和内置的动画效果函数（如淡入淡出、滑动），让创建丰富的页面动态交互变得轻而易举。凭借其易学性和强大的 DOM 处理能力，jQuery 曾长期是前端开发的事实标准，极大地推动了早期 Web 交互体验的发展。
1.4 Ajax
Ajax，全称 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），是一种用于创建快速动态网页的技术。它的核心在于通过 JavaScript 向服务器发送 HTTP 请求并获取数据，而无需刷新整个页面。这种机制打破了传统 Web 应用每次操作都必须等待服务器返回完整 HTML 页面的限制，使得网页能够在后台静默地与服务器通信，从而实现了页面的局部更新，极大地提升了用户体验和应用的交互性。
在技术实现上，Ajax 并非单一的技术，而是一个组合概念。它主要依赖于浏览器提供的 XMLHttpRequest 对象（或其现代替代者 Fetch API）来建立与服务器的连接。当触发某个事件（如点击按钮）时，JavaScript 会创建一个异步请求，将数据发送到指定的服务器端脚本（如 PHP、Java 或 Node.js）。服务器处理完请求后，仅返回所需的数据（通常是 JSON 或 XML 格式），JavaScript 接收到数据后，再通过 DOM 操作动态地更新页面的特定区域，整个过程对用户来说是无缝且即时的。
如今，虽然 XML 的使用频率已大幅下降，JSON 成为了数据交换的主流格式，但 Ajax 所代表的"异步数据交互"思想已成为现代 Web 开发的基石。我们日常使用的 Gmail 邮件加载、微博下拉刷新、地图应用平移加载新区域等功能，都是基于这一原理实现的。无论是传统的 jQuery 库，还是现代流行的 Vue、React 等框架，其内部的数据获取机制本质上都是在运用 Ajax 技术，它彻底改变了互联网应用的形态，使其更接近原生桌面应用的流畅体验。
1.5 组合式语言
JavaScript 之所以被称为一门"组合式语言"，首先源于其高度灵活的语言结构与范式融合能力。它并非严格遵循某一种编程范式，而是将命令式、面向对象和函数式编程的特性巧妙地编织在一起。开发者可以在同一个项目中，根据需要自由选择最适合的代码风格：既可以使用 for 循环以指令的方式逐步完成任务，也可以利用原型链构建复杂的对象层次结构来模拟经典面向对象，还可以大量运用高阶函数、闭包和不可变数据等函数式特性来处理数据流和状态变更。这种"混合与匹配"的能力，使得 JS 能够适应从简单脚本到大型复杂架构的各种开发场景。
其次，JS 的组合性体现在其与宿主环境和生态系统无缝集成的能力上。作为一门解释型语言，JS 本身只定义了核心语法，其功能边界由运行环境决定。在浏览器中，它能与 HTML（结构）、CSS（表现）以及浏览器 API（如 DOM、Canvas、Fetch）深度组合，创造出丰富的交互式用户界面。在 Node.js 环境下，它又能与文件系统、网络模块、操作系统接口等后端能力组合，胜任服务端开发。更重要的是，通过其庞大的生态系统（NPM），JS 可以与数以百万计的第三方库和框架（如 React 组件、Express 中间件、Three.js 着色器）进行组合，像搭积木一样快速构建功能各异的应用程序。
最后，JS 的组合性还表现在其模块化与代码组织哲学上。ES6 模块系统允许开发者将功能拆解为独立、可复用的单元，并在需要时精确地导入和组合它们。这种"分治"思想鼓励将复杂问题化解为一系列小而美的模块，再通过明确的依赖关系将它们组装成完整的系统。无论是将一个 UI 拆分为多个可组合的 React 组件，还是将一个后端服务拆分为 Express 路由、控制器和服务层的组合，JS 都为此提供了优雅的语法和工具支持。正是这种在语言层面、环境层面和工程层面的多重组合能力，赋予了 JavaScript 无与伦比的适应性和创造力，使其成为当今最富有表现力的语言之一。
1.6 面向对象
JavaScript 是一门基于原型的面向对象语言。这意味着它拥有面向对象编程的三大核心支柱------封装、继承和多态，但其实现方式与传统的"基于类"的语言（如 Java、C++）截然不同。在 JS 的世界里，"万物皆对象"，每个对象都可以直接作为另一个对象的"原型"。当我们访问一个对象的属性或方法时，如果该对象自身不存在，JavaScript 引擎就会沿着一条看不见的"原型链"向上查找，直到找到目标或到达链的尽头。这种灵活的机制，让对象可以直接从其他对象"克隆"并扩展功能，形成了一种动态、灵活的继承体系。
在 ES6 之前，JS 主要通过函数和原型链来实现面向对象编程，这种方式对于初学者来说有些晦涩难懂。因此，ES6 引入了 class 关键字，它更像是一个语法糖，让 JS 的面向对象写法看起来更符合传统程序员的直觉。我们可以用 class 来定义"类"，用 constructor 定义构造函数，并用 extends 来实现继承。然而，无论我们使用多么标准的 class 语法，其底层机制依然是原型继承。这种设计既保留了 JS 动态语言的灵活性，又大大降低了大型项目中进行面向对象设计的门槛。
这种独特的面向对象模型赋予了 JavaScript 极强的适应性和可扩展性。在浏览器端，我们可以利用原型链和闭包来高效地组织和操作 DOM 元素，构建复杂的交互逻辑；在 Node.js 后端，它使得我们可以轻松创建可复用的模块和中间件。无论是使用经典的构造函数模式，还是现代的 ES6 类语法，开发者都能利用 JS 的面向对象特性来管理日益复杂的代码结构，实现高内聚、低耦合的设计目标，这正是 JS 能够支撑起从简单网页到庞大企业级应用的关键原因之一。
1.7 DOM & BOM
DOM（Document Object Model，文档对象模型）和 BOM（Browser Object Model，浏览器对象模型）是 JavaScript 在浏览器环境中得以施展魔法的两大基石，它们共同构成了网页与外部脚本交互的桥梁，但它们的职责范围和工作方式有着根本的不同。简单来说，DOM 是关于"文档"的，而 BOM 是关于"浏览器"的。
DOM 是浏览器将一份 HTML 或 XML 文档解析后生成的一棵可编程的树形结构对象。 它将文档中的每一个部分------从根部的 标签到每一个文本节点、注释乃至属性------都抽象为一个独立的"节点"（Node），并为这些节点提供了丰富的属性和方法。这使得 JavaScript 能够以对象化的方式精准地"读取"和"修改"页面的任何内容。例如，开发者可以通过 document.getElementById('myId') 选中一个特定的元素节点，然后动态地改变它的文本内容（element.textContent = '新内容'）、修改其样式（element.style.color = 'red'），甚至删除或创建全新的元素节点并将其插入到树中的任意位置。DOM 操作是构建一切动态网页、单页应用（SPA）和交互动画的核心基础，它将原本静态的标记语言变成了一个活生生的、可被程序实时操控的界面。
与 DOM 聚焦于文档内容不同，BOM 提供了一组与浏览器窗口本身及其外部环境进行交互的对象和接口。我们可以将浏览器窗口视为 BOM 的根节点。在 BOM 的顶层是 window 对象，它既是 JavaScript 的全局对象，也代表了浏览器的一个实例。通过 window，我们可以控制浏览器的方方面面：使用 window.location 对象来获取或改变当前页面的 URL，实现跳转；通过 window.history 对象在用户的浏览历史中前进或后退；利用 window.navigator 对象探测用户代理、语言等信息；甚至可以调用 window.open() 打开一个新窗口或标签页，或用 window.close() 关闭它。BOM 还包括 alert(), confirm(), prompt() 等直接与用户对话的弹出框方法。需要注意的是，BOM 并非由官方标准明确定义，其具体实现因浏览器厂商而异，HTML5 规范的出现才逐渐将其主要部分标准化，使其行为更加统一可靠。
在实际开发中，DOM 和 BOM 的界限有时会变得模糊，因为它们协同工作来完成复杂的任务。例如，当我们需要实现一个"回到顶部"的功能时，既要用到 BOM 的 window.scrollTo() 方法来控制滚动条，也可能要用到 DOM 来获取页面总高度的计算结果。理解这两者的区别与联系至关重要：当你想要改变页面上看得见的东西（内容、结构、样式）时，你主要是在和 DOM 打交道；而当你需要与浏览器窗口或设备进行交互（导航、历史、弹窗、获取设备信息）时，你则是在运用 BOM。正是这两大模型的完美结合，才赋予了 JavaScript 如此强大的能力，使其从一个简单的脚本语言成长为驱动现代 Web 体验的核心引擎。