深入淺出 JavaScript 程式設計 第二版

【簡介】
當你的大腦遇上JavaScript。此時此刻你正在努力學習，但你的腦袋卻幫了個倒忙，確保這些知識不會留下深刻印象。你的大腦想的是：「最好留些空間給更重要的事情，比如該躲避哪些野獸，或是全裸滑雪到底是不是個糟糕的主意」。那麼，要如何哄騙你的大腦，讓它以為學會JavaScript是攸關性命的大事呢？

這本書是為誰而寫的？
我們知道你在想什麼
後設認知（metacognition）
讓你的大腦屈服
讀我
技術審閱團隊
致謝


【1　淺嚐JavaScript：讓我們先踩踩水】

JavaScript賦予你超能力。JavaScript是Web真正的程式語言，可讓你在網頁中加入行為。有了JavaScript，你就可以接觸使用者、對感興趣的事件做出反應、從Web抓取資料用於你的網頁、在那些網頁中直接繪製圖形，還有更多其他功能，不再只有枯燥、無趣的靜態頁面。一旦你了解JavaScript，你就能為你的使用者創造嶄新的行為。
你也將成為搶手的人才。JavaScript不僅是最流行的程式語言之一，所有的現代瀏覽器都支援JavaScript，而且在瀏覽器以外的許多環境中也都有使用。稍後再詳述；現在，讓我們開始吧！

JavaScript的運作方式
你要如何編寫JavaScript
如何將JavaScript放入你的頁面
JavaScript，你已經走了很長一段路...
如何撰寫一個述句（statement）
變數（variables）與值（values）
常數（constants），另一種變數
遠離那個鍵盤！
表達你自己
重複執行任務
while迴圈如何運作
使用JavaScript做決定
還有，當你需要做很多決定時
接觸使用者並與他們溝通
仔細檢視console.log
開啟主控台（console）
編寫一個實際的JavaScript應用程式
如何在我的頁面中加入程式碼？（讓我數數看有幾種方法！）
我們得把你們兩個分開


【2　撰寫真實程式碼：繼續深入】

你已經知道變數、型別、運算式...我們可以繼續往下說了。重點是，你已經知道了一些關於JavaScript的事情。事實上，你所知的已經足夠寫出一些真正的程式碼了。也就是可以做一些有趣的事情的程式碼、有人會想要使用的程式碼。你所欠缺的是編寫程式碼的真實經驗，而我們現在就要在此補救這一點。如何彌補？就是要一頭栽進去，用JavaScript寫個輕鬆好玩的小遊戲。雖然這目標很有野心，但我們會循序漸進地實現它。來吧，讓我們開始動手，如果你想藉此打造下一家新創公司，我們絕不會擋路，這些程式碼都是你的。

讓我們打造一個戰艦（Battleship）遊戲
首先是高階的設計
逐步解析虛擬程式碼（pseudocode）
哦，在我們繼續之前，別忘了HTML！
撰寫Simple Battleship的程式碼
現在我們來編寫遊戲邏輯
步驟1：設置迴圈，取得一些輸入
prompt的運作方式
步驟2：檢查使用者的猜測
添加命中偵測程式碼
步驟3：嘿，你擊沉了我的戰艦！
步驟4：提供一些賽後分析
做一點品質管控（quality assurance）
我們可以聊聊你那囉嗦的表達方式嗎...
完成Simple Battleship遊戲
產生隨機數字（random number）的步驟
恭喜你完成第一個真正的JavaScript程式，並簡短談談程式碼的重複使用


【3　函式介紹：邁向函式化之路】

為你的第一項超能力做好準備。你已經掌握了一些程式設計的技巧；現在是使用函式（functions）來真正推動事情發展的時候了。函式讓你可以寫出適用於各種不同情況的程式碼、可以一再重複使用的程式碼、更容易管理的程式碼、能夠進行抽象化並提供一個簡單名稱的程式碼，讓你可以忘記所有的複雜性，繼續處理重要的事情。你會發現函式不僅是你從指令稿寫手（scripter）轉型為程式設計師（programmer）的大門，也是JavaScript程式設計風格的關鍵。在本章中，我們將從最基本的知識開始，也就是函式的運轉機制，了解從內到外實際上是如何運作的，然後你將在本書其餘的章節中不斷磨練你的函式技巧。所以，現在就開始打好基礎吧！

這段程式碼到底有什麼問題？
對了，我們有碰巧提到「函式」嗎？
好吧，但它實際上是如何運作的？
你可以傳入什麼給函式？
JavaScript是藉由值傳遞（pass-by-value）的
奇怪的函式
函式也能回傳東西
追蹤帶有return述句的函式
全域（global）變數和區域（local）變數
了解你區域和全域變數的範疇（scope）
故事還沒說完
別忘了宣告你的區域變數！
變數的短暫生命


【4　資料排排站：陣列登場】

JavaScript不只有數字、字串和Boolean值。到目前為止，你一直在使用原始型別（primitives，字串、數字和Boolean值，例如「Fido」、23和true）撰寫JavaScript程式碼。你可以使用原始型別做很多事情，但到了某個時候，你還是得處理更多的資料。比方說，購物車中的所有項目，或播放清單中的所有歌曲，或一組恆星及其視星等（apparent magnitude），或整個產品目錄。為此，你需要一點額外的火力。這類有序資料的首選型別是JavaScript的陣列（array），在本章中，我們將介紹如何將資料放入陣列、如何傳遞它，以及如何對其進行運算。在接下來的章節中，我們將探討其他幾種將資料結構化的方式，但讓我們先從陣列開始。

你能幫助Bubbles-R-Us泡泡公司嗎？
如何在JavaScript中表示多個值
陣列如何運作
那個陣列到底有多大？
Phrase-O-Matic片語產生器
同時，回到Bubbles-R-Us...
如何迭代陣列
但等等，迭代陣列還有一種更好的方法
又到了這個時候...我們能談談你囉嗦的表達方式嗎？
使用後置遞增運算子（post-increment operator）重製for迴圈
從頭建立陣列（並為之添加東西）
勝出的是...
快速瀏覽一下程式碼
撰寫printAndGetHighScore函式
使用printAndGetHighScore重構（refactor）程式碼
全部整合在一起


【5　了解物件：物件村之旅】

到目前為止，你一直在你的程式碼中使用原始型別和陣列。而且你以相當程序化（procedural）的方式進行程式碼編寫，使用簡單的述句、條件式、for/while迴圈搭配函式，但這並不完全是物件導向（objectoriented）的。事實上，這根本不算物件導向！你確實在不知不覺中用了一些物件，但你自己還沒有寫出任何的物件。現在是時候離開這無聊的程序城，創造一些你自己的物件（objects）了。在本章中，你會發現為什麼使用物件會讓你的生活變得非常美好──嗯，至少是在程式設計的層面上變得美好（我們真的無法在一本書中幫你同時提升時尚品味和JavaScript技能）。事前警告：一旦你發現了物件的好，你就再也回不去了。當你抵達那裡時，請寄張明信片給我們。

有人說了「物件」嗎？
思考特性（properties）...
如何建立物件
到底什麼是「物件導向」？
特性如何運作
變數如何存放物件？好奇的人想知道...
比較原始型別值（primitives）與物件
使用物件做到更多事
這輛計程車符合資格嗎？
讓我們再談談如何將物件傳給函式
Auto-O-Matic
乖乖聽話！或者說，如何為你的物件添加行為（behavior）
改善drive方法
呃，等等，別那麼快...
為什麼drive方法不知道started特性？
「this」如何運作
方法簡寫（method shorthand）
行為如何影響狀態（state）
現在讓我們用狀態影響行為
恭喜你完成第一個物件！
知道嗎？你身邊到處都是物件！


【6　與網頁互動：認識DOM】

你在JavaScript方面已經有了長足的進步。事實上，你已經從新手進化為指令稿寫手，再進化為程式設計師（programmer）了。但是，還缺少一些東西。要真正開始運用JavaScript技能，你需要知道如何與你程式碼所在的網頁互動。只有做到這一點，你才能編寫出動態（dynamic）的頁面，這些頁面在載入之後會做出反應、進行回應和自我更新。那麼你要如何與網頁互動呢？使用DOM，也就是文件物件模型（document object model）。在本章中，我們將分解DOM，並示範如何以JavaScript使用它，教會你的網頁一些新的花招。

在上一章中，我們留給你一個小小的挑戰...
所以這段程式碼在做什麼？
JavaScript實際上是如何與你頁面互動的
如何製作你自己的DOM
初嚐DOM
使用getElementById獲取元素
我究竟從DOM得到了什麼？
尋找你內在的HTML
更改DOM時會發生什麼事
在頁面完全載入之前，別想執行我的程式碼！
你說「事件處理器（event handler）」，我說「回呼（callback）」
為何要停在這？讓我們更進一步...
如何使用setAttribute設定屬性（attribute）
屬性的更多樂趣！
言歸正傳，回到太陽系...
那麼DOM還有什麼用呢？


【7　型別、相等性、轉換，以及那些有的沒的：認真的型別】

是時候認真對待我們的型別了。JavaScript的一大優點在於，你能在不了解大量語言細節的情況下，做到很多事情。但是，若要真正掌握這門語言，獲得升遷，並去追求你在人生中真正想做的事情，就必須精通型別（types）。還記得我們在第1章是怎麼說JavaScript的嗎？它可沒有那種含著銀湯匙出生、經過學術界同儕審查的語言定義。是沒錯，但缺乏學術背景並沒有阻止Steve Jobs和Bill Gates成就事業，也阻止不了JavaScript。這確實意謂著JavaScript並沒有...嗯，最經過深思熟慮的型別系統，而我們也會在過程中發現一些特異之處。不過別擔心，在本章中我們會把那些問題都解決，很快你就能避免在型別上的那些尷尬時刻了。

真相就在那裡...
小心，你可能意外碰到undefined...
如何使用null
處理NaN
變得更奇怪了...
我們要坦白一件事
了解相等性運算子（又稱為==）
相等性如何轉換其運算元
如何得到更嚴格的相等性
更多的型別轉換
如何判斷兩個物件是否相等
truthy就在眼前...
JavaScript會將什麼視為falsey
字串的祕密生活
字串如何能夠同時像是原始型別值（primitive）和物件
範本字面值（template literals）如何運作
字串之特性與方法的五分鐘導覽
椅子爭奪戰


【8　全面整合：建造一個App】

繫好你的工具腰帶。也就是裝載你所有的程式編寫新技能、DOM知識，甚至還有一些HTML和CSS的工具腰帶。在本章中，我們要把所有東西都整合在一起，來建立我們第一個真正的Web應用程式（application）。不再是只有一艘戰艦和單一列藏身處的愚蠢玩具遊戲。在本章中，我們要建構整個體驗（experience）：一個大而美觀的遊戲版面、多艘戰艦，以及直接在網頁上進行的使用者輸入。我們會使用HTML建立遊戲的頁面結構，使用CSS設定遊戲的視覺樣式，並撰寫JavaScript程式碼來控制遊戲的行為。準備好了嗎？這一章我們要全力衝刺，徹底放手一搏，在這裡寫下一些認真的程式碼。

這一次，讓我們建立一個真正的戰艦遊戲
退後一步...回到HTML和CSS
建立HTML頁面：整體全貌
新增一些樣式（style）
使用hit和miss類別
設計遊戲
實作視圖（view）
模型（model）
你需要一艘更大的船...和遊戲棋盤
我們要如何表示那些船艦
全都整合在一起
等等，我們能再談談你囉嗦的表達方式嗎？
擊殺的視圖...
實作控制器（controller）
處理玩家的猜測
取得玩家的猜測
如何放置船艦
避免碰撞！
恭喜，是時候創業了！


【9　處理事件：進入非同步世界】

翻開本章之後，你會發現自己就像綠野仙蹤的桃樂絲一樣，一轉眼已經不在堪薩斯（Kansas）了。到目前為止，你所寫的程式碼通常都是從上到下執行的──當然，你的程式碼可能會比較複雜一點，也會使用一些函式、物件和方法，但到了某個時間點，程式碼就只會按部就班地執行。很抱歉這麼晚才告訴你，其實JavaScript程式碼通常不是這樣寫的。取而代之，大多數的JavaScript都是為了對事件（events）做出反應而寫的。什麼樣的事件？比方說使用者點擊你的網頁、有資料透過網路抵達了、瀏覽器中的計時器到期、DOM中發生變化...等，這些只是少數幾個例子。事實上，在瀏覽器的幕後，一直都有各種事件在發生。在本章中，我們將重新思考JavaScript程式的編寫方式，並探討我們應該如何以及為何要寫出對事件做出反應的程式碼。

何謂事件？
何謂事件處理器（event handler）？
建立事件處理器
透過製作遊戲來了解事件...
實作遊戲
讓我們加入更多影像
如何為所有影像重複使用相同的處理器
事件物件（event object）如何運作
讓事件物件發揮作用
事件和佇列（queues）
setTimeout如何運作
完成影像遊戲


【10　匿名函式與高階函式：解放函式】

掌握函式，所向披靡。每種技藝、工藝和學科都有一個關鍵原則，可以區分出中階玩家和頂尖高手──談到JavaScript時，差別在於對函式的真正了解。函式是JavaScript的基礎，我們用來設計和組織程式碼的許多技巧都取決於函式的進階知識和使用。通往這種層次函式應用的學習之路，既有趣又時常會讓人絞盡腦汁，所以準備好了嗎...接下來的兩章會有點像是威利．旺卡（Willy Wonka）的巧克力工廠冒險之旅──學習JavaScript函式更多知識的過程中，你會遇到一些瘋狂、古怪且奇妙的事情。

function關鍵字神祕的雙重身分
函式也是值
如果函式是值，我們就能把它們指定給變數
我們有提到函式在JavaScript中擁有
一等公民（first class）的地位嗎？
看看函式的另一面...
如何使用匿名函式（anonymous function）
我們得再談談你的囉嗦程度
我們可以使用箭號函式（arrow functions）讓程式碼更簡短
建立箭號函式
Webville Cola
了解陣列的sort方法
全部整合在一起
同時，回到Webville Cola
介紹高階函式（higher-order functions）
使用高階函式進行過濾
別忘了你的匿名和箭號函式
使用reduce得到總銷售箱數
鏈串map、filter和reduce
以forEach進行迭代


【11　現代語法、語彙範疇與closure：函式真功夫】

你已經征服了函式，但還有更多要學習的。本章將更進一步，我們要認真了。我們將教你如何運用處理引數（arguments）、參數（parameters）和指定（assignments）的進階技巧來提升你的語法技能。接著，我們會再看看範疇（scope），以及JavaScript如何管理範疇的一些細節。這段探索範疇奧妙之處的旅程，將帶領我們進入closure（閉包）的核心──這個概念經常蒙上神祕的面紗，但卻是精通JavaScript的關鍵。到頭來，你會發現自己運用JavaScript表達的能力，超乎你原先的想像。

認真研究函式語法
分散你的引數
關於函式有些事情我們還沒告訴你...
函式宣告會被「拉升（hoisted）」
我們已經完成函式宣告，現在要做的是其他的事情
我們需要談談範疇
讓函式超越全域範疇
溫習語彙範疇（lexical scope）
再次看看我們的外層（outer）和內層（inner）函式
使用範疇進行封裝（encapsulation）
兩條重要的JavaScript範疇規則
解開謎團
如何製作一個closure
使用closure實作魔法計數器（magic counter）
揭開神祕面紗...
使用closure實作計數器
makeTimer的運作方式
實作onlyOnceMaker


【12　進階的物件建構：創造物件】

到目前為止，我們一直在手工製作物件。對於所有的物件，我們都使用物件字面值（object literal）來指定每一個特性。小規模進行的話，這沒啥問題，但對於認真的程式碼，我們需要更好的東西。這就是類別（classes）的用武之地。藉由類別，我們可以更輕鬆地創建物件，而且我們可以建立出遵循相同設計藍圖（design blueprint）的物件，也就是說，我們可以使用類別來確保每個物件都有相同的特性，並包含相同的方法。而有了類別之後，我們就能寫出更簡潔的物件程式碼，而且在建立大量物件時，更不容易出錯。那麼，讓我們開始吧...

使用物件字面值建立物件
使用物件的慣例
介紹類別
如何定義類別
如何從類別建立出物件
類別的運作方式
讓我們加入一些方法
生產的時間到了！
基本的Car類別
使用extends實作Taxi類別
新增方法到Taxi類別
實作RocketCar類別
使用物件字面值來整理我們的建構器
改造Car建構器
存取器（accessor）特性
使用取值器（getter）
若無設值器（setter），取值器又有何用？
靜態特性和方法
計算我們的車子產量


【A　漏網之魚：十大遺珠之憾（我們沒講到的主題）】

我們已經涵蓋了很多內容，而你幾乎快讀完這本書了。我們會想念你的，但在讓你離開之前，如果沒有更多一點的準備工作，我們不放心把你送到外面的世界。我們不可能在這相對較小型的一章中包含你會需要知道的一切。事實上，我們原本確實放入了所有你需要知道的JavaScript程式設計知識（其他章節尚未提及的），方法是將字體縮小到0.00004。雖然全部都寫進去了，但是沒人有辦法讀。所以我們丟掉了大部分的內容，將最好的部分保留在這個「十大」附錄中。

#1 模組（modules）
#2 JSON
#3 Promise（承諾）
#4 解構指定（destructuring assignment）
#5 Symbol（符號）和BigInt（大整數）
#6 Map（映射）與Set（集合）
#7 使用DOM執行更多操作
#8 window物件
#9 伺服端（server-side）JavaScript
#10 遞迴（recursion）