JavaScript 編程精解中文第三版十3、瀏覽器中的 JavaScript

時間 2019-11-16

標籤 javascript 編程中文第三瀏覽器欄目 JavaScript 简体版

原文原文鏈接

來源： ApacheCN『JavaScript 編程精解中文第三版』翻譯項目
原文：JavaScript and the Browserjavascript

譯者：飛龍html

協議：CC BY-NC-SA 4.0java

自豪地採用谷歌翻譯git

部分參考了《JavaScript 編程精解（第 2 版）》github

Web 背後的夢想是公共信息空間，其中咱們經過共享信息進行交流。其廣泛性相當重要：超文本連接可指向任何東西，不管是我的的，本地的仍是全球的，不管是草稿仍是高度潤色的。apache

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 文檔以下所示：

<!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 的解析過程容錯性很是強。當應有的標籤丟失時，瀏覽器會從新構建這些標籤。標籤的從新構建已經標準化，你能夠認爲全部現代瀏覽器的行爲都是一致的。

下面的文件與以前版本顯示效果相同：

<!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 代碼。

<h1>Testing alert</h1>
<script>alert("hello!");</script>

當瀏覽器在讀取 HTML 時，一旦遇到<script>標籤就會執行該代碼。這個頁面在打開時會彈出一個對話框 - alert函數相似prompt，由於它彈出一個小窗口，但只顯示一條消息而不請求輸入。

在 HTML 文檔中包含大程序是不切實際的。<script>標籤能夠指定一個src屬性，從一個 URL 獲取腳本文件（包含 JavaScript 程序的文本文件）。

<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屬性。該屬性的值將在點擊按鈕時運行。

<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。若是您今天開始學習網絡開發，請認爲本身是幸運的。主流瀏覽器的最新版本行爲很是一致，而且錯誤相對較少。

這並非說就沒有問題了。某些使用網絡的人，出於惰性或公司政策，被迫使用舊版本的瀏覽器。直到這些瀏覽器徹底退出市場以前，爲舊版本瀏覽器編寫網站仍須要掌握不少不常見的特性，瞭解舊瀏覽器的缺陷和特殊之處。本書不會討論這些特殊的特性，而着眼於介紹現代且健全的網絡程序設計風格。