Categories
Books JavaScript Programming Web Design

DOM Scripting

Update(2008/5/27): 手上多了本全新的 DOM Scripting 書,欲售 $1000,請參考Y! 拍賣 or 直接聯絡我。

想好好學 Javascript 想好久了,記得很早前是唸過 Javascript 設計風格,回想起來好像是完全不同年代,現代的 Javascript 要 unobtrusive ,跟 css 一樣能夠跟 markup 分離出來。前些日子有念一下 DHTML Utopia,可是那本code好亂,雜雜的並不是很好念,所以念了幾章就停住了。

在消化眾多 Ajax 書籍之前,我另選了這本重新進入 Javascript 的世界,書的前言是說寫給 web designer 而不限於 programming 出身,所以整本書多花了些篇幅在講很基本的 programming 的地方,像是 if 啦 while 啦、提醒你 = 跟 == 的不同等,還有重複前文的code很多(怕你忘記找不到?)。除了這個有點囉唆的缺點,這本書的章節編排非常好,非常循序漸進,不會一下子塞太多東西給你,讓你記不住不知道怎麼用。另外不只是單純 coding,也含有大量網頁標準的概念。

這本書提到的 DOM Methods 跟 Properties ,其實還蠻少的,範例也都非常好懂,整本書 follow 很好的網頁標準觀念,強調 separate behavior from structure, progressive enhancement,graceful degradation 等,告訴你為什麼?好處壞處?什麼時候用? 最後的整合範例也很精采實用,貫徹 unobtrusive 的概念,完全都不需要動到 markup。

  • 利用DOM 操作把動作加到node的event上。
  • 漸進式的增強,重要內容仍以markup呈現,javascript只是增強內容,關閉javascript仍可以優雅的退化。
  • CSS-DOM的三個時機 : 1.在任意 node tree上加style (因為CSS有時無法做到) 2.重複的 styling (如表格偶數行上色) 3. 回應某個event的 stying (像是因為 :hover 在IE支援超連結a標籤而已,所以必須用 DOM 來達成)。 4.animation(用 setTimeout 遞迴呼叫)

書末講到 future,當然要提到目前最紅的Ajax,這裡有一個大難題,Ajax要怎麼能夠 degrade gracefully呢? 如果我們一開始設計網站的時候,就完全使用Ajax,將很難有 non-Ajax 版本,我們看到Google的那些東西 Javascript 都是必要的! 作者提倡Hijax( progress enhancement using Ajax),即使關閉 Javascript 仍能夠運作。

最後作者搬出了 Tim Berners (WWW發明人) 的話作尾:

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

隨著 Web 越來越 Application platform,還要能夠保持最大的 universality,作者說 at all costs! 會不會太理想了呢?

anyway… 強烈推薦這本書當作 DOM Scripting入門喔,很好讀。這本書讓我想起以前初學CSS念 Designing CSS Web Pages的感覺,簡單卻十分powerful。

3 replies on “DOM Scripting”

[…] 正是我夢幻想要的啊!! 看完 DOM Scripting之後,對 Unobtrusive Javascript (可以參考 Jeremy Keith’s Behavioural Separation 的介紹) 念之不忘,想說 Rails 要怎麼支援 unobtrusive 跟degrades gracefully 的特性呢? 因為我們看到 Rails 內建的 helper 都是寫在HTML裡成 onclick = ‘xxx’ ,如支援 Ajax 的 link_to_remote 就是用 href=”ihower.idv.tw/blog/#” mce_href=”ihower.idv.tw/blog/#” onclick=’new Ajax.Request(…)’ 云云。 […]

Leave a Reply

Your email address will not be published. Required fields are marked *