跳转至

6.0 Client Javascript

1. The purpose and overall structure of the DOM (but not the keywords)

Purpose (目的): DOM 是一个至关重要的界面，它允许脚本 (如 JavaScript) 动态访问和操作 HTML 文档的 content (内容)、structure (结构) 和 style (样式)。这种能力使得创建动态网页和促进客户端编程成为可能。 它充当 HTML 文档和编程语言之间的 API (Application Programming Interface)。 通过 DOM，可以处理文档，并且此处理产生的任何更改都可以反映在呈现的网页中。

Overall Structure (总体结构): DOM 将 HTML 文档表示为一个对象的树形结构 (tree structure)。 此树的根通常是 Document object (文档对象)，然后分支到诸如 <html>、<head> 和 <body> 之类的元素，反映了 HTML 文档的层次结构。 HTML 文档中的每个元素都对应于此树中的一个“element object (元素对象)”。 HTML 元素的 attributes (属性) (例如 id、class、src) 成为这些 JavaScript 元素对象的命名属性。

2. The purpose and overall structure of the BOM

Purpose (目的): BOM 允许 JavaScript 与浏览器本身进行交互，超越当前 HTML 文档的内容。 它提供了对非当前渲染页面特定的浏览器功能和信息的访问。 开发人员可以使用 BOM 根据不同的浏览器上下文和功能定制 Web 应用程序。

Overall Structure (总体结构): DOM 被认为是更大的 BOM 的一部分。 BOM 中的核心对象是 window object (窗口对象)，它代表浏览器窗口或标签页。 BOM 包括与以下相关的对象和属性：

  • 正在使用的浏览器类型。
  • 用户的浏览历史 (例如 window.history)。
  • 浏览器存储的 Cookies。
  • 屏幕尺寸和显示信息 (例如 window.screen)。
  • Geolocation (地理位置) 数据 (需用户许可)。
  • 本地浏览器存储。
  • 当前 URL (例如 window.location)。
  • 关于浏览器应用程序本身的信息 (例如 window.navigator)。 与 DOM 不同，BOM 不受严格标准的约束，但大多数浏览器都支持一组通用功能。

3. The different ways that the DOM may be used to edit the page

(考试不要求记住具体的关键词)

Dynamic Content and Structure Updates: DOM 允许脚本在网页加载后动态更改其内容、结构和样式。

Accessing Elements (访问元素):

  • 可以根据元素的标签类型及其在集合中的位置 (例如，第一个图像) 来查找元素。
  • 如果元素具有 name 属性 (通常在表单中)，则可以访问它们。
  • 一种常见的方法是通过其唯一的 id 属性访问元素。
  • 某些元素，如复选框或单选按钮，可能有特定的访问方式，通常作为组或数组的一部分。

Traversing the DOM Tree (遍历 DOM 树): 一旦访问了某个元素，脚本就可以导航到其相关元素，例如其父元素、子元素或兄弟元素。这允许以编程方式探索页面结构，即使事先不知道确切的布局。

Modifying the DOM Tree (修改 DOM 树):

  • 可以创建新元素并将其插入到文档中。
  • 可以移动、替换或从文档中删除现有元素。
  • 这意味着可以使用 JavaScript 动态构建整个部分甚至整个文档。
  • 还有一些直接的文档写入方法可用于将 HTML 内容输出到文档流中。现代前端框架在很大程度上依赖这些功能来动态构建用户界面。

4. Web Storage 和 Cookies

Purpose (目的): HTTP 是一种无状态协议 (stateless protocol)，意味着每个请求都是独立的，默认情况下请求之间不保留任何信息。Web storage 和 cookies 是在客户端存储数据的机制，允许 Web 应用程序记住有关用户或其会话的信息。

Cookies:

  • Cookie 是浏览器存储的一个小数据片段 (最大 4KB)，通常包含键值对的文本文件。
  • 当前网页的 Cookies 可通过 JavaScript 中的 document.cookie 访问。
  • 它们会随每个后续到该域的 HTTP 请求一起发送回服务器。
  • Cookies 可以有过期日期，过期后将被删除；如果未设置日期，它们通常是会话 cookies，并在浏览器关闭时删除。
  • 出于安全原因，Cookies仅限于创建它们的域。

Web Storage (Local Storage and Session Storage):

  • Web Storage 为客户端存储提供了一种比 cookies 更现代、更大 (例如 5-10MB) 且通常更安全的替代方案。
  • 它提供了一个键值字典，其中值存储为字符串。所有值都会自动转换为字符串。
  • Local Storage: 即使在浏览器窗口关闭并重新打开后，数据仍然存在。它对于存储用户偏好或需要持续超出单个会话的应用程序状态非常有用。
  • Session Storage: 仅在当前浏览器会话期间 (即，当标签页或窗口打开时) 存储数据。会话结束时数据将被清除。
  • 与 cookies 不同，web storage 数据不会随每个 HTTP 请求自动传输；它主要供客户端使用。
  • Web storage 也受同源策略限制。

5. 事件驱动编程 (Event-Driven Programming) 的目的和结构

Purpose (目的): Event-driven programming (事件驱动编程) 是一种编程范式，其中程序执行的流程由事件决定。这些事件可以是用户操作 (如鼠标点击或按键)、传感器输出或来自其他程序或系统部分的消息。 它是 Web 开发中的一个基本概念，尤其是在客户端，用户交互决定了应用程序的行为。它支撑着像 AJAX 和 JavaScript 回调这样的技术。

Structure (结构): 通常，一个事件驱动程序包含一个 event loop (事件循环)，它持续等待事件发生。 当检测到事件 (event detection) 时，会执行一段相应的代码，称为 event handler (事件处理程序) 或 event listener (事件监听器)，以响应该特定事件 (event handling)。 系统通常包括 event emitters (事件源) 和将有关事件的信息传递给处理程序的 event objects (事件对象)。

6. 事件驱动编程在浏览器中的实现方式 (事件注册, 事件流)

Browser's Role (浏览器角色): Web 浏览器本身管理一个 event loop (事件循环)，监听各种事件。这些包括用户交互 (例如，点击、键盘输入) 和浏览器生成的事件 (例如，页面加载完成、来自服务器的响应)。 当事件发生时，浏览器确定是否有任何事件监听器注册在该相关 HTML 元素上针对该事件，然后调用它们。

Event Listener Registration (事件监听器注册): 为了让浏览器知道为某个事件执行哪个代码，必须将 event listeners (事件监听器) 注册 (即附加) 到特定 HTML 元素的特定事件类型上。 注册事件处理程序主要有三种方式：

  1. HTML 事件属性：直接在 HTML 标记中将 JavaScript 代码分配给像 onclick 这样的属性 (例如 <button onclick="myFunction()">)。
  2. DOM 元素属性：将 JavaScript 函数分配给 DOM 元素的事件属性 (例如 element.onclick = myFunction;)。使用此方法时，重要的是脚本可以访问函数定义和元素对象，并且您分配的是对函数的引用，而不是调用它。
  3. addEventListener() 方法：这是最灵活且推荐的方法 (例如 element.addEventListener('click', myFunction, false);)。它允许为同一事件添加多个监听器，对事件流 (捕获阶段与冒泡阶段) 提供更多控制，并促进 JavaScript 逻辑与 HTML 结构的更好分离。

Event Flow (事件流): 当事件发生在 HTML 元素 (目标节点) 上时，它不仅影响该单个元素。其在 DOM 树中的祖先元素也可以对该事件做出反应。这些元素接收事件的顺序称为 event flow (事件流)，它有三个阶段：

  1. Capturing Phase (捕获阶段): 事件从 window (或文档根) 向下传播到目标元素的父元素。在祖先元素上为捕获阶段注册的事件监听器被触发。
  2. Target Phase (目标阶段): 事件到达目标元素本身。在目标元素上注册的事件监听器被触发。
  3. Bubbling Phase (冒泡阶段): 事件从目标元素的父元素向上冒泡回 window。在祖先元素上为冒泡阶段 (大多数方法的默认设置) 注册的事件监听器被触发。 默认情况下，大多数事件处理发生在冒泡阶段。 某些事件，如 focus、blur、load 和 unload，不会冒泡。 一个包含事件详细信息 (例如，鼠标事件的鼠标坐标，或目标元素) 的 event object (事件对象) 会自动作为参数传递给事件处理函数。 可以使用事件对象上的 stopPropagation() 等方法来阻止事件在链中进一步传播。

7. 理解一些常见事件的目的

  • click: 当用鼠标点击元素时触发。
  • load: 当整个页面及其所有资源 (图像、样式表、脚本) 完成加载时触发。
  • mouseover / mouseout: 分别在鼠标指针进入或离开元素边界时触发。
  • mousemove: 当鼠标指针在元素上移动时重复触发。
  • keydown / keyup / keypress: 响应键盘按键操作 (键按下、键释放、字符键按下) 而触发。
  • focus / blur: 分别在元素获得或失去键盘焦点时触发 (例如，点击文本字段或从中切出)。
  • change: 当输入元素、选择框或文本区域的值更改并且元素失去焦点时触发。
  • submit: 在 <form> 元素即将提交时触发。此事件通常用于在将数据发送到服务器之前执行客户端表单验证。如果验证失败，可以阻止提交。
  • unload: 当页面即将卸载时触发 (例如，导航离开或关闭标签页/窗口时)。

8. jQuery 的目的

jQuery 是一个流行的 JavaScript 库，旨在简化客户端 HTML DOM 操作和事件处理，以及其他常见的 JavaScript 任务，如 AJAX 交互和动画。 其主要目标是使其更容易、更简洁地编写与网页交互的 JavaScript 代码，其口号是 "write less, do more (写得更少，做得更多)"。 它旨在解决早期 Web 开发中核心 JavaScript DOM 操作的冗长和跨浏览器不一致性问题。 jQuery 提供以下功能：

  • 选择和操作 DOM 元素。
  • 修改 CSS 样式。
  • 处理 HTML 事件。
  • 创建效果和动画。
  • 发出 AJAX 请求。

关于代码的考试要求说明: 对于考试，你需要能够 阅读和修复 与 DOM 和 BOM 操作相关的 JavaScript 代码。你 不需要 从头开始编写这些 JavaScript 代码。 你 不需要 阅读、修复或编写 jQuery 代码。