JavaScript 编程精解 中文第三版 十三、浏览器中的 JavaScript

来源： ApacheCN『JavaScript 编程精解 中文第三版』翻译项目

原文：JavaScript and the Browser

译者：飞龙

协议：CC BY-NC-SA 4.0

自豪地采用谷歌翻译

部分参考了《JavaScript 编程精解（第 2 版）》

Web 背后的梦想是公共信息空间，其中我们通过共享信息进行交流。 其普遍性至关重要：超文本链接可指向任何东西，无论是个人的，本地的还是全球的，无论是草稿还是高度润色的。

Douglas Crockford，《JavaScript 编程语言》（视频讲座）

本书接下来的章节将会介绍 Web 浏览器。可以说，没有浏览器，就没有 JavaScript。就算有，估计也不会有多少人去关心这门编程语言。

Web 技术自出现伊始，其演变方式和技术上就是以分散的方式发展的。许多浏览器厂商专门为其开发新的功能，有时这些新功能被大众采纳，有时这些功能被其他功能所代替，最终形成了一套标准。

这种发展模式是把双刃剑。一方面，不会有一个集中式的组织来管理技术的演进，取而代之的是一个包含多方利益集团的松散协作架构（偶尔会出现对立）。另一方面，互联网这种无计划的发展方式所开发出来的系统，其内部很难实现一致性。事实上，它的一些部分令人疑惑，并且毫无设计。

网络和 Internet

计算机网络出现在 20 世纪 50 年代。如果在两台或多台计算机之间铺设电缆，那么你可以通过这些电缆互相收发数据，并实现一些神奇的功能。

如果通过连接同一个建筑中的两台机器就可以实现一些神奇的功能，那么如果可以连接全世界的机器，就可以完成更伟大的工作了。20 世纪 80 年代，人们开发了相关技术来实现这个愿景，我们将其产生的网络称为 Internet。而 Internet 的表现名副其实。

计算机可以使用这种网络向其他计算机发送位数据。为了在传输位数据的基础上，实现计算机之间的有效通信，网络两端的机器必须知道这些位所表达的实际含义。对于给定的位序列，其含义完全取决于位序列描述的信息类型与使用的编码机制。

网络协议描述了一种网络通信方式。网络协议非常多，其中包括邮件发送、邮件收取和邮件共享，甚至连病毒软件感染控制计算机都有相应的协议。

例如，HTTP（超文本传输协议，Hypertext Transfer Protocol）是用于检索命名资源（信息块，如网页或图片）的协议。 它指定发出请求的一方应该以这样的一行开始，命名资源和它正在尝试使用的协议的版本。

GET /index.html HTTP/1.1

有很多规则，关于请求者在请求中包含更多信息的方式，以及另一方返回资源并打包其内容的方式。 我们将在第 18 章中更详细地观察 HTTP。

大多数协议都建立在其他协议之上。 HTTP 将网络视为一种流式设备，您可以将位放入这些设备，并使其按正确的顺序到达正确的目的地。 我们在第 11 章]中看到，确保这些事情已经是一个相当困难的问题。

TCP（传输控制协议，Transmission Control Protocol）就可以帮助我们解决该问题。所有连接到互联网的设备都会使用到这种协议，而多数互联网通信都构建在这种协议之上。

TCP 连接的工作方式是一台电脑必须等待或者监听，而另一台电脑则开始与之通信。一台机器为了同时监听不同类型的通信信息，会为每个监听器分配一个与之关联的数字（我们称之为端口）。大多数协议都指定了默认使用的端口。例如，当我们向使用 SMTP 协议发送一封邮件时，我们需要通过一台机器来发送邮件，而发送邮件的机器需要监听端口 25。

随后另一台机器连接到使用了正确端口号的目标机器上。如果可以连接到目标机器，而且目标机器在监听对应端口，则说明连接创建成功。负责监听的计算机名为服务器，而连接服务器的计算机名为客户端。

我们可以将该连接看成双向管道，位可以在其中流动，也就是说两端的机器都可以向连接中写入数据。当成功传输完这些位数据后，双方都可以读取另一端传来的数据。TCP 是一个非常便利的模型。我们可以说TCP就是一种网络的抽象。

Web

万维网（World Wide Web，不要将其与 Internet 混淆）是包含一系列协议和格式的集合，允许我们通过浏览器访问网页。词组中的 Web 指的是这些页面可以轻松地链接其他网页，因此最后可以连接成一张巨大的网，用户可以在网络中浏览。

你只需将一台计算机连接到 Internet 并使用 HTTP 监听 80 端口，就可以成为 Web 的一部分。其他计算机可以通过网络，并使用 HTTP 协议获取其他计算机上的文件。

网络中的每个文件都能通过 URL（统一资源定位符，Universal Resource Locator）访问，如下所示：

  http://eloquentjavascript.net/13_browser.html
 |      |                      |               |
 protocol       server               path

该地址的第一部分告诉我们 URL 使用的是 HTTP 协议（加密的 HTTP 连接则使用https://来表示）。第二部分指的是获取文件的服务器地址。第三部分是我们想要获取的具体文件（或资源）的路径。

连接到互联网的机器获得一个 IP 地址，该地址是一个数字，可用于将消息发送到该机器的，类似于"149.210.142.219"或"2001:4860:4860::8888"。 但是或多或少的随机数字列表很难记住，而且输入起来很笨拙，所以你可以为一个特定的地址或一组地址注册一个域名。 我注册了eloquentjavascript.net，来指向我控制的机器的 IP 地址，因此可以使用该域名来提供网页。

如果你在浏览器地址栏中输入上面提到的 URL，浏览器会尝试获取并显示该 URL 对应的文档。首先，你的浏览器需要找出域名eloquentjavascript.net指向的地址。然后使用 HTTP 协议，连接到该地址处的服务器，并请求/13_browser.html这个资源。如果一切顺利，服务器会发回一个文档，然后您的浏览器将显示在屏幕上。

HTML

HTML，即超文本标记语言（Hypertext Markup Language），是在网页中得到广泛使用的文档格式。HTML 文档不仅包含文本，还包含了标签，用于说明文本结构，描述了诸如链接、段落、标题之类的元素。

一个简短的 HTML 文档如下所示：

  
    
    
  
  
    
My home page
    
Hello, I am Marijn and this is my home page.
    
I also wrote a book! Read it
      here.
  

标签包裹在尖括号之间（<和>，小于和大于号），提供关于文档结构的信息。其他文本则是纯文本。

文档以开头，告诉浏览器将页面解释为现代 HTML，以别于过去使用的各种方言。

HTML 文档有头部（head）和主体（body）。头部包含了文档信息，而主体则包含文档自身。在本例中，头部将文档标题声明为"My home page"，并使用 UTF-8 编码，它是将 Unicode 文本编码为二进制的方式。文档的主体包含标题（

，表示一级标题，

到

可以产生不同等级的子标题）和两个段落（

）。

标签有几种形式。一个元素，比如主体、段落或链接以一个起始标签（比如

）开始，并以一个闭合标签（比如

）结束。一些起始标签，比如一个链接（），会包含一些额外信息，其形式是name="value"这种键值对，我们称之为属性。在本例中，使用属性href="http://eloquentjavascript.net"指定链接的目标，其中href表示“超文本链接（Hypertext Reference）”。

某些类型的标签不会包含任何元素，这种标签不需要闭合。元数据标签就是一个例子。

译者注：最好还是这样闭合它们： 。

尽管 HTML 中尖括号有特殊含义，但为了在文档的文本中包含这些符号，可以引入另外一种形式的特殊标记方法。普通文本中的起始尖括号写成<（less than），而闭合尖括号写成>（greater than）。在 HTML 中，我们将一个&字符后跟着一个单词和分号（;）这种写法称为一个实体，浏览器会使用实体编码对应的字符替换它们。

与之类似的是 JavaScript 字符串中反斜杠的使用。由于 HTML 中的实体机制赋予了&特殊含义，因此我们需要使用&来表示一个&字符。在属性的值（包在双引号中）中使用"可以插入实际的引号字符。

HTML 的解析过程容错性非常强。当应有的标签丢失时，浏览器会重新构建这些标签。标签的重新构建已经标准化，你可以认为所有现代浏览器的行为都是一致的。

下面的文件与之前版本显示效果相同：

My home page
Hello, I am Marijn and this is my home page.
I also wrote a book! Read it
  here.

、和标签可以完全丢弃。浏览器知道和