ppk on JavaScript

這是一本 JavaScript 傳奇，作者本身就非常有意思，聽 lukhnos 說才知道他以前主修歷史 :p 他的 quirksmode 有非常豐富的 Web Design 資源，就像歷史年代般一樣詳細的列出各家瀏覽器支援的程度，是公認的 JavaScript 專家。我們知道 JavaScript 算是個蠻 dirty 的語言，背負著歷史包袱及各家瀏覽器不同的實作歧異，加上近年來的 Web Standards、Usability 跟 Accessibility 等議題又增加了很多細節。這本書透過八個完整的真實 project貫穿本書來做範例講解，很適合唸完乖乖的 DOM Scripting 之後，繼續深入了解 JavaScript 以瀏覽器議題。

相關書評

• ppk on JavaScript (Book review)
• Digital Web Magazine – ppk on JavaScript

前兩章 Purpose 跟 Context 非常非常精采，作者就像說故事一樣娓娓道來，全貌性把 JavaScript 的來龍去脈講了一遍，Realazy有做了書摘( JavaScript的目的、背景一、背景二、背景三 )，我就不多詳述了。

第三章 Browsers 瀏覽器議題。各家瀏覽器介紹，以及常見的瀏覽器問題 1.瀏覽器不支援某些JavaScript功能 2.合法的規格解釋差異，但此種情況較少 3.瀏覽器故意有所差異，例如 IE用 srcElement 而其他符合標準的用 target，但通常只是名字不同而已，很容易處理 4.瀏覽器bug

作者花很多篇幅強調處理瀏覽器問題的最好方法就是 object detection，而千萬不要用 browser detection。例如他最得意的 DOM 支援檢查 :

var W3CDOM = document.createElement && document.getElementsByTagName; 

最後介紹一些簡單的 debug 方法: alert,confirm,error console 等

第四章 Preparation，即正式coding前的準備工作。先強調 HTML 跟 CSS 結構的重要、三種 Hooks 方式 1.ID 2. class 3.Custom attributes，其中需要特別注意的是客製屬性沒有辦法通過 valid (X)HTML 測驗，例如作者認為寫成 class=”validation=required numeric” 程式不好寫，而若只是寫 class=”required numeric” 則沒有語義，所以作者寧願寫成 validation=”required numeric”。這個議題可以參考作者的這篇 JavaScript Triggers。

接著介紹 initialization function 的常見任務跟載入 JavaScript 的問題。有 1.設定 event handlers 2.決定 vistor 狀態，如 cookies 3. 設定會存取的資源 4.產生HTML內容，例如基於 accessibility 的考量，如果有某些內容不能沒有 JavaScript 支援，那一開始就應該用 JavaScript來產生 5.建立方便存取的關聯變數 6.修改文件結構，例如為了 usability 暫時拿掉某些內容。

然後是 include JavaScript 的用法，最後探討 initialization 的載入問題，我們知道下載HTML時是依序載入執行，所以include JavaScript 時，HTML頁面還沒載入，這會讓DOM發生錯誤，所以得用 window.onload 的 event 來處理，進而使用 addEventSimple()/removeEventsimple() 之類的機制。另外一個常見問題就是網頁 image很多的時候，載入太久造成 load event會 delay 太久，而此時使用者趕著點還沒有 initialization 的頁面(例如還沒設定onclick event) 就糟啦。

第五章  JavaScript Core，即ECMAScript。注意到 Javascript 有很多部分還是由W3C來標準。這章又回頭從 hello world 開始講 syntax,data type,control structures,function,object。嗯，感覺很多講的太基本囉，會唸這本書的人應該都有程式設計經驗了吧，而有些特別的東西因為無關 Core 所以只能點到為止(例如 event propagation, W3C DOM nodeList不算是array)，詳細則需要延到後面章節。

有趣的是我現在才知道 JavaScript 的 object 可以看成 associative arrays 來使用，即 dot notation 可以改用 square bracket 來使用，例如 object.property 跟 object[‘property’] 是一樣的、object.method() 跟 object‘method’ 也是一樣，而用 array 的好處是可以彈性選擇要執行的 function (把 square bracket裡改成用變數)。

第六章則是跟瀏覽器相關的 object，統稱 Browser Object Model，這部份夾在 Core 跟 DOM 之間，只有 de facto Netscape 3 standard，而沒有正式標準。主要的東西是 (global) window object，探討 Cross-window communication: 如何處理 window.open 新開的視窗跟原視窗 opener。另外就是 Cookie, Location,History, document object……等既不是DOM又不是Core的東西。

(待續，最後的四章更深入技術議題，包括Events,DOM,CSS跟Ajax)

話說最近開始改唸 JavaScript了，Ruby&Rails 又只好先放著囉。