1 淺嚐JavaScript
JavaScript的運作方式
你要如何編寫JavaScript
如何將JavaScript放入你的頁面
如何撰寫一個述句(statement)
變數(variables)與值(values)
常數(constants),另一種變數
重複執行任務
while迴圈如何運作
使用JavaScript做決定
接觸使用者並與他們溝通
仔細檢視console.log
開啟主控台(console)
編寫一個實際的JavaScript應用程式
如何在我的頁面中加入程式碼?
2 撰寫真實程式碼:繼續深入讓我們打造一個戰艦(Battleship)遊戲
首先是高階的設計
逐步解析虛擬程式碼(pseudocode)
在我們繼續之前,別忘了HTML!
撰寫Simple Battleship的程式碼
現在我們來編寫遊戲邏輯
做一點品質管控(quality assurance)
完成Simple Battleship遊戲
產生隨機數字(random number)的步驟
恭喜你完成第一個真正的JavaScript程式,並簡短談談程式碼的重複使用
3 函式介紹:邁向函式化之路這段程式碼到底有什麼問題?
你可以傳入什麼給函式?
JavaScript是藉由值傳遞(pass-by-value)的
奇怪的函式
函式也能回傳東西
追蹤帶有return述句的函式
全域(global)變數和區域(local)變數
了解區域和全域變數的範疇(scope)
別忘了宣告你的區域變數!
變數的短暫生命
4 資料排排站:
你能幫助Bubbles-R-Us泡泡公司嗎?
如何在JavaScript中表示多個值
陣列如何運作
Phrase-O-Matic片語產生器
回到Bubbles-R-Us...
迭代陣列還有一種更好的方法
使用後置遞增運算子(post-increment operator)重製for迴圈
從頭建立陣列(並為之添加東西)
快速瀏覽一下程式碼
撰寫printAndGetHighScore函式
使用printAndGetHighScore重構(refactor)程式碼
全部整合在一起
5 了解物件:物件村之旅
思考特性(properties)...
如何建立物件
到底什麼是「物件導向」?
特性如何運作
變數如何存放物件?好奇的人想知道...
比較原始型別值(primitives)與物件
使用物件做到更多事
這輛計程車符合資格嗎?
讓我們再談談如何將物件傳給函式
Auto-O-Matic
如何為你的物件添加行為(behavior)
改善drive方法
為什麼drive方法不知道started特性?
「this」如何運作
方法簡寫(method shorthand)
行為如何影響狀態(state)
現在讓我們用狀態影響行為
恭喜你完成第一個物件!
6 與網頁互動:認識DOM
JavaScript實際上是如何與你頁面互動的
如何製作你自己的DOM
初嚐DOM
使用getElementById獲取元素
我究竟從DOM得到了什麼?
尋找你內在的HTML
更改DOM時會發生什麼事
在頁面完全載入之前,別想執行我的程式碼!
你說「事件處理器(event handler)」,我說「回呼(callback)」
如何使用setAttribute設定屬性(attribute)
屬性的更多樂趣!
那麼DOM還有什麼用呢?
7 型別、相等性、轉換,以及那些有的沒的:認真的型別
小心,你可能意外碰到undefined...
如何使用null
處理NaN
了解相等性運算子(又稱為==)
相等性如何轉換其運算元
如何得到更嚴格的相等性
更多的型別轉換
如何判斷兩個物件是否相等
truthy就在眼前...
JavaScript會將什麼視為falsey
字串的祕密生活
字串如何能夠同時像是原始型別值(primitive)和物件
範本字面值(template literals)如何運作
字串之特性與方法的五分鐘導覽
椅子爭奪戰
8 全面整合:建造一個App
建立一個真正的戰艦遊戲
回到HTML和CSS
建立HTML頁面:整體全貌
新增一些樣式(style)
使用hit和miss類別
設計遊戲
實作視圖(view)
模型(model)
你需要一艘更大的船...和遊戲棋盤
實作控制器(controller)
處理玩家的猜測
取得玩家的猜測
如何放置船艦
恭喜,是時候創業了
9 處理事件:進入非同步世界
何謂事件?
何謂事件處理器(event handler)?
建立事件處理器
透過製作遊戲來了解事件...
實作遊戲
讓我們加入更多影像
如何為所有影像重複使用相同的處理器
事件物件(event object)如何運作
讓事件物件發揮作用
事件和佇列(queues)
setTimeout如何運作
完成影像遊戲
10 匿名函式與高階函式:解放函式
function關鍵字神祕的雙重身分
如果函式是值,我們就能把它們指定給變數
看看函式的另一面...
如何使用匿名函式(anonymous function)
我們可以使用箭號函式(arrow functions)讓程式碼更簡短
建立箭號函式
Webville Cola
了解陣列的sort方法
回到Webville Cola
介紹高階函式(higher-order functions)
使用高階函式進行過濾
別忘了你的匿名和箭號函式
使用reduce得到總銷售箱數
鏈串map、filter和reduce
以forEach進行迭代
11 現代語法、語彙範疇與closure:函式真功夫
認真研究函式語法
分散你的引數
關於函式有些事情我們還沒告訴你...
函式宣告會被「拉升(hoisted)」
我們已經完成函式宣告,現在要做的是其他的事情
我們需要談談範疇
讓函式超越全域範疇
溫習語彙範疇(lexical scope)
再次看看我們的外層(outer)和內層(inner)函式
使用範疇進行封裝(encapsulation)
兩條重要的JavaScript範疇規則
如何製作一個closure
使用closure實作魔法計數器(magic counter)
使用closure實作計數器
makeTimer的運作方式
實作onlyOnceMaker
12 進階的物件建構:創造物件
使用物件字面值建立物件
使用物件的慣例
介紹類別
如何定義類別
如何從類別建立出物件
類別的運作方式
讓我們加入一些方法
生產的時間到了!
基本的Car類別
使用extends實作Taxi類別
新增方法到Taxi類別
實作RocketCar類別
使用物件字面值來整理我們的建構器
改造Car建構器
存取器(accessor)特性
使用取值器(getter)
若無設值器(setter),取值器又有何用?
靜態特性和方法
計算我們的車子產量
A 漏網之魚:十大遺珠之憾
#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)
為了保護您的權益,「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨,請在商品鑑賞期內寄回,且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。