摘要：这一章是关于发送 HTML 表单的：带有或不带文件，带有其他字段等。 FormData 对象可以提供帮助。你可能已经猜到了，它是表示 HTML 表单数据的对象。 构造函数是： let formData = new FormData([form]); 如果提供了 HTML form 元素，它会自动捕获 阅读全文

摘要：JavaScript 可以将网络请求发送到服务器，并在需要时加载新信息。 例如，我们可以使用网络请求来： 提交订单， 加载用户信息， 从服务器接收最新的更新， ……等。 ……所有这些都没有重新加载页面！ 对于来自 JavaScript 的网络请求，有一个总称术语 “AJAX”（Asynchronou 阅读全文

摘要：File 对象继承自 Blob，并扩展了与文件系统相关的功能。 有两种方式可以获取它。 第一种，与 Blob 类似，有一个构造器： new File(fileParts, fileName, [options]) fileParts —— Blob/BufferSource/String 类型值的数 阅读全文

摘要：arrayBuffer 和视图（view）都是 ECMA 标准的一部分，是 JavaScript 的一部分。 在浏览器中，还有其他更高级的对象，特别是 Blob，在 File API 中有相关描述。 Blob 由一个可选的字符串 type（通常是 MIME 类型）和 blobParts 组成 —— 阅读全文

摘要：如果二进制数据实际上是一个字符串怎么办？例如，我们收到了一个包含文本数据的文件。 内建的 TextDecoder 对象在给定缓冲区（buffer）和编码格式（encoding）的情况下，允许将值读取为实际的 JavaScript 字符串。 首先我们需要创建： let decoder = new Te 阅读全文

摘要：在 Web 开发中，当我们处理文件时（创建，上传，下载），经常会遇到二进制数据。另一个典型的应用场景是图像处理。 这些都可以通过 JavaScript 进行处理，而且二进制操作性能更高。 不过，在 JavaScript 中有很多种二进制数据格式，会有点容易混淆。仅举几个例子： ArrayBuffer 阅读全文

摘要：“点击劫持”攻击允许恶意页面 以用户的名义 点击“受害网站”。 许多网站都被黑客以这种方式攻击过，包括 Twitter、Facebook 和 Paypal 等许多网站。当然，它们都已经被修复了。 原理 原理十分简单。 我们以 Facebook 为例，解释点击劫持是如何完成的： 访问者被恶意页面吸引。 阅读全文

摘要：“同源（Same Origin）”策略限制了窗口（window）和 frame 之间的相互访问。 这个想法出于这样的考虑，如果一个用户有两个打开的页面：一个来自 john-smith.com，另一个是 gmail.com，那么用户将不希望 john-smith.com 的脚本可以读取 gmail.c 阅读全文

摘要：弹窗（popup）是向用户显示其他文档的最古老的方法之一。 基本上，你只需要运行： window.open('https://javascript.info/') ……它将打开一个具有给定 URL 的新窗口。大多数现代浏览器都配置为在新选项卡中打开 url，而不是单独的窗口。 弹窗自古以来就存在。最 阅读全文

摘要：浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于 事件循环 的。 理解事件循环的工作方式对于代码优化很重要，有时对于正确的架构也很重要。 在本章中，我们首先介绍事件循环工作方式的理论细节，然后介绍该知识的实际应用。 事件循环 事件循环 的概念非常简单。它是一个在 Jav 阅读全文

摘要：在本章中，我们将介绍文档中的选择以及在表单字段（如 <input>）中的选择。 JavaScript 可以访问现有的选择，选择/取消全部或部分 DOM 节点的选择，从文档中删除所选部分，将其包装到一个标签（tag）中，等。 你可以在本章末尾的“总结”部分找到一些常见的使用方式。可能就已经满足了你当前 阅读全文

摘要：MutationObserver 是一个内建对象，它观察 DOM 元素，并在检测到更改时触发回调。 我们将首先看一下语法，然后探究一个实际的用例，以了解它在什么地方有用。 语法 MutationObserver 使用简单。 首先，我们创建一个带有回调函数的观察器： let observer = ne 阅读全文

摘要：浏览器允许我们跟踪外部资源的加载 —— 脚本，iframe，图片等。 这里有两个事件： onload —— 成功加载， onerror —— 出现 error。 加载脚本 假设我们需要加载第三方脚本，并调用其中的函数。 我们可以像这样动态加载它： let script = document.crea 阅读全文

摘要：现代的网站中，脚本往往比 HTML 更“重”：它们的大小通常更大，处理时间也更长。 当浏览器加载 HTML 时遇到 <script>...</script> 标签，浏览器就不能继续构建 DOM。它必须立刻执行此脚本。对于外部脚本 <script src="..."></script> 也是一样的：浏 阅读全文

摘要：HTML 页面的生命周期包含三个重要事件： DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。 load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。 beforeun 阅读全文

摘要：提交表单时，会触发 submit 事件，它通常用于在将表单发送到服务器之前对表单进行校验，或者中止提交，并使用 JavaScript 来处理表单。 form.submit() 方法允许从 JavaScript 启动表单发送。我们可以使用此方法动态地创建表单，并将其发送到服务器。 让我们看看它们的更多 阅读全文

摘要：事件：change 当元素更改完成时，将触发 change 事件。 对于文本输入框，当其失去焦点时，就会触发 change 事件。 例如，当我们在下面的文本字段中键入内容时 —— 不会触发 change 事件。但是，当我们将焦点移到其他位置时，例如，点击按钮 —— 就会触发 change 事件： < 阅读全文

摘要：当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦（focus）。还有一个 HTML 特性（attribute）autofocus 可以让焦点在网页加载时默认落在一个元素上，此外还有其它途径可以获得焦点。 聚焦到一个元素通常意味着：“准备在此处接受数据”，所以，这正是我们可以运行 阅读全文

摘要：表单（form）以及例如 <input> 的控件（control）元素有许多特殊的属性和事件。 当我们学习了这些相关内容后，处理表单会变得更加方便。 导航：表单和元素 文档中的表单是特殊集合 document.forms 的成员。 这就是所谓的“命名的集合”：既是被命名了的，也是有序的。我们既可以使 阅读全文

摘要：scroll 事件允许对页面或元素滚动作出反应。我们可以在这里做一些有用的事情。 例如： 根据用户在文档中的位置显示/隐藏其他控件或信息。 当用户向下滚动到页面末端时加载更多数据。 这是一个显示当前滚动的小函数： window.addEventListener('scroll', function( 阅读全文