## 十三、瀏覽器中的 JavaScript
> 原文：[JavaScript and the Browser](https://eloquentjavascript.net/13_browser.html)
>
> 譯者：[飛龍](https://github.com/wizardforcel)
>
> 協議：[CC BY-NC-SA 4.0](http://creativecommons.org/licenses/by-nc-sa/4.0/)
>
> 自豪地采用[谷歌翻譯](https://translate.google.cn/)
>
> 部分參考了[《JavaScript 編程精解（第 2 版）》](https://book.douban.com/subject/26707144/)
> 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 文檔如下所示：
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
```
標簽包裹在尖括號之間（`<`和`>`，小于和大于號），提供關于文檔結構的信息。其他文本則是純文本。
文檔以`<!doctype html>`開頭，告訴瀏覽器將頁面解釋為現代 HTML，以別于過去使用的各種方言。
HTML 文檔有頭部（head）和主體（body）。頭部包含了文檔信息，而主體則包含文檔自身。在本例中，頭部將文檔標題聲明為`"My home page"`，并使用 UTF-8 編碼，它是將 Unicode 文本編碼為二進制的方式。文檔的主體包含標題（`<h1>`，表示一級標題，`<h2>`到`<h6>`可以產生不同等級的子標題）和兩個段落（`<p>`）。
標簽有幾種形式。一個元素，比如主體、段落或鏈接以一個起始標簽（比如`<p>`）開始，并以一個閉合標簽（比如`</p>`）結束。一些起始標簽，比如一個鏈接（`<a>`），會包含一些額外信息，其形式是`name="value"`這種鍵值對，我們稱之為屬性。在本例中，使用屬性`href="http://eloquentjavascript.net"`指定鏈接的目標，其中`href`表示“超文本鏈接（Hypertext Reference）”。
某些類型的標簽不會包含任何元素，這種標簽不需要閉合。元數據標簽`<meta charset="utf-8">`就是一個例子。
> 譯者注：最好還是這樣閉合它們：`<meta charset="utf-8" />`。
盡管 HTML 中尖括號有特殊含義，但為了在文檔的文本中包含這些符號，可以引入另外一種形式的特殊標記方法。普通文本中的起始尖括號寫成`<`（less than），而閉合尖括號寫成`>`（greater than）。在 HTML 中，我們將一個`&`字符后跟著一個單詞和分號（`;`）這種寫法稱為一個實體，瀏覽器會使用實體編碼對應的字符替換它們。
與之類似的是 JavaScript 字符串中反斜杠的使用。由于 HTML 中的實體機制賦予了`&`特殊含義，因此我們需要使用`&`來表示一個`&`字符。在屬性的值（包在雙引號中）中使用`"`可以插入實際的引號字符。
HTML 的解析過程容錯性非常強。當應有的標簽丟失時，瀏覽器會重新構建這些標簽。標簽的重新構建已經標準化，你可以認為所有現代瀏覽器的行為都是一致的。
下面的文件與之前版本顯示效果相同：
```html
<!doctype html>
<meta charset=utf-8>
<title>My home page</title>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.
<p>I also wrote a book! Read it
<a href=http://eloquentjavascript.net>here</a>.
```
`<html>`、`<head>`和`<body>`標簽可以完全丟棄。瀏覽器知道`<meta>`和`<title>`屬于頭部，而`<h1>`屬于主體。此外，我再也不用明確關閉某個段落，因為新段落開始或文檔結束時，瀏覽器會隱式關閉段落標簽。目標鏈接兩邊的引號也可以丟棄。
本書的示例通常都會省略`<html>`、`<head>`和`<body>`標簽，以保持源代碼簡短，避免太過雜亂。但我會明確關閉所有標簽并在屬性兩旁包含引號。
本書也會經常忽略`doctype`和`charset`聲明。這并不是鼓勵大家省略它們。當你忘記它們時，瀏覽器往往會做出荒謬的事情。 您應該認為`doctype`和`charset`元數據隱式出現在示例中，即使它們沒有實際顯示在文本中。
## HTML 和 JavaScript
對于本書來說，最重要的一個 HTML 標簽是`<script>`。該標簽允許我們在文檔中包含一段 JavaScript 代碼。
```html
<h1>Testing alert</h1>
<script>alert("hello!");</script>
```
當瀏覽器在讀取 HTML 時，一旦遇到`<script>`標簽就會執行該代碼。這個頁面在打開時會彈出一個對話框 - `alert`函數類似`prompt`，因為它彈出一個小窗口，但只顯示一條消息而不請求輸入。
在 HTML 文檔中包含大程序是不切實際的。`<script>`標簽可以指定一個`src`屬性，從一個 URL 獲取腳本文件（包含 JavaScript 程序的文本文件）。
```html
<h1>Testing alert</h1>
<script src="code/hello.js"></script>
```
這里包含的文件`code/hello.js`是和上文中相同的一段程序，`alert("hello")`。當一個頁面將其他 URL 引用為自身的一部分時（比如圖像文件或腳本），網頁瀏覽器將會立即獲取這些資源并將其包含在頁面中。
即使`script`標簽引用了一個文本文件，且并未包含任何代碼，你也必須使用`</script>`來閉合標簽。如果你忘記了這點，瀏覽器會將剩余的頁面會作為腳本的一部分進行解析。
你可以在瀏覽器中加載ES模塊（參見第 10 章），向腳本標簽提供`type ="module"`屬性。 這些模塊可以依賴于其他模塊，通過將相對于自己的 URL 用作`import`聲明中的模塊名稱。
某些屬性也可以包含 JavaScript 程序。下面展示的`<button>`標簽（顯示一個按鈕）有一個`onclick`屬性。該屬性的值將在點擊按鈕時運行。
```html
<button onclick="alert('Boom!');">DO NOT PRESS</button>
```
需要注意的是，我們在`onclick`屬性的字符串中使用了單引號，這是因為我們在使用了雙引號來引用整個屬性。我們也可以使用`"`。
## 沙箱
直接執行從因特網中下載的程序存在潛在危險。你不了解大多數的網頁開發者，他們不一定都心懷善意。一旦運行某些不懷好意的人提供的程序，你的電腦可能會感染病毒，這些程序還會竊取數據會并盜走賬號。
但網絡的吸引力就在于你可以瀏覽網站，而不必要信任所有網站。這就是為什么瀏覽器嚴重限制了 JavaScript 程序的能力—— JavaScript 無法查看電腦中的任何文件，也無法修改與其所在頁面無關的數據。
我們將這種隔離程序運行環境的技術稱為沙箱。以該思想編寫的程序在沙箱中運行，不會對計算機造成任何傷害。但是你應該想象，這種特殊的沙箱上面有一個厚鋼筋籠子，所以在其中運行的程序實際上不會出去。
實現沙箱的難點是：一方面我們要給予程序一定的自由使得程序能有實際用處，但又要限制程序，防止其執行危險的行為。許多實用功能（比如與服務器通信或從剪貼板讀取內容）也會存在問題，有些侵入者可以利用這些功能來侵入你的計算機。
時不時會有一些人想到新方法，突破瀏覽器的限制，并對你的機器造成傷害，從竊取少量的私人信息到掌握執行瀏覽器的整個機器。瀏覽器開發者的對策是修補漏洞，然后一切都恢復正常。直到下一次問題被發現并廣為傳播之前，某些政府或秘密組織可以私下利用這些漏洞。
## 兼容性與瀏覽器之爭
在 Web 技術發展的早期，一款名為 Mosaic 的瀏覽器統治了整個市場。幾年之后，這種平衡被 Netscape 公司打破，隨后又被微軟的 Internet Explorer 排擠出市場。無論什么時候，當一款瀏覽器統治了整個市場，瀏覽器供應商就會覺得他們有權利單方面為網絡研發新的特性。由于大多數人都使用相同的瀏覽器，因此網站會開始使用這些獨有特性，也就不再考慮其他瀏覽器的兼容性問題了。
這是兼容性的黑暗時代，我們通常稱之為瀏覽器之爭。網絡開發者總是為缺乏統一的 Web 標準，而需要去考慮兩到三種互不兼容的平臺而感到煩惱。讓事情變得更糟糕的是 2003 年左右使用的瀏覽器充滿了漏洞，當然不同瀏覽器的漏洞都不一樣。網頁編寫者的生活頗為艱辛。
Mozilla Firefox，作為 Netscape 瀏覽器的非盈利性分支，在20世紀初末期開始挑戰 Internet Explorer 的霸主地位。因為當時微軟并未特別關心與其競爭，導致 Firefox 迅速占領了很大的市場份額。與此同時，Google 發布了它的 Chrome 瀏覽器，而 Apple 的 Safari 也得到普及，導致現在成為四個主要選手的競爭，而非一家獨大。
新的參與者對標準有著更認真的態度，和更好的工程實踐，為我們減少了不兼容性和錯誤。 微軟看到其市場份額極速下降，在其 Edge 瀏覽器中采取了這些態度，取代了 Internet Explorer。 如果您今天開始學習網絡開發，請認為自己是幸運的。 主流瀏覽器的最新版本行為非常一致，并且錯誤相對較少。
這并不是說就沒有問題了。某些使用網絡的人，出于惰性或公司政策，被迫使用舊版本的瀏覽器。直到這些瀏覽器完全退出市場之前，為舊版本瀏覽器編寫網站仍需要掌握很多不常見的特性，了解舊瀏覽器的缺陷和特殊之處。本書不會討論這些特殊的特性，而著眼于介紹現代且健全的網絡程序設計風格。
