JavaScript DOM經典編程藝術

JavaScript DOM經典編程藝術

《JavaScriptDOM經典編程藝術》是2011年人民郵電出版社出版的圖書,作者是JeremyKeith。

基本介紹

  • 書名:JavaScript DOM經典編程藝術
  • 又名:DOM Scripting: Web Design with JavaScript and the Document Object Model
  • 作者:(英)Jeremy Keith (加)Jeffrey Sambells
  • 譯者:楊濤、王建橋、楊曉雲
  • ISBN:9787115249999
  • 頁數:286
  • 出版社:人民郵電出版社
  • 出版時間:2011 年4月
  • 開本:16開
  • 叢書名:圖靈程式設計叢書
  • 版次:2-1
編輯推薦,作譯者,目錄,譯者序,前言,媒體評論,序言,

編輯推薦

Amazon超級暢銷書最新版,釋放JavaScript和DOM編程的驚人潛力,涵蓋HTML5及jQuery
內容簡介
《javascript dom編程藝術:第2版》講述了javascript、dom 和html5 的基礎知識,著重介紹dom 編程技術背後的思路和原則:平穩退化、漸進增強和以用戶為中心等。這些概念對於任何前端web 開發工作都非常重要。本書將這些概念貫穿在書中的所有代碼示例中,以便呈現用來創建圖片庫頁面的腳本、用來創建動畫效果的腳本和用來豐富頁面元素呈現效果的腳本,最後結合所講述的內容創建了一個實際的網站。
《javascript dom編程藝術:第2版》適合web 設計師和開發人員閱讀。

作譯者

Jeremy Keith 國際知名的Web設計師,Web標準項目組成員,DOM Scripting任務組負責人之一,任職於Web諮詢公司Clearleft。除本書外,還著有HTML5 for Web Designers、Bulletproof Ajax。可通過其個人網站與他聯繫。
Jeffrey Sambells 資深平面設計師,Web開發人員,創辦了軟體公司We-Create並擔任研發總監。除本書外,還著有《JavaScript高級程式設計》和 Beginning Google Maps Applications with PHP and Ajax等多部暢銷書。

目錄

《javascript dom編程藝術:第2版》
第1章 javascript簡史 1
1.1 javascript的起源 1
1.2 dom 2
1.3 瀏覽器戰爭 3
1.3.1 dhtml 3
1.3.2 瀏覽器之間的衝突 3
1.4 制定標準 4
1.4.1 瀏覽器以外的考慮 4
1.4.2 瀏覽器戰爭的結局 5
1.4.3 嶄新的起點 5
1.5 小結 6
第2章 javascript語法 8
2.1 準備工作 8
2.2 語法 10
2.2.1 語句 10
2.2.2 注釋 10
2.2.3 變數 11
2.2.4 數據類型 14
2.2.5 數組 16
.2.2.6 對象 18
2.3 操作 19
2.4 條件語句 21
2.4.1 比較操作符 22
2.4.2 邏輯操作符 23
2.5 循環語句 24
2.5.1 while循環 24
2.5.2 for循環 25
2.6 函式 26
2.7 對象 29
2.7.1 內建對象 30
2.7.2 宿主對象 31
2.8 小結 31
第3章 dom 32
3.1 文檔:dom中的“d” 32
3.2 對象:dom中的“o” 32
3.3 模型:dom中的“m” 33
3.4 節點 35
3.4.1 元素節點 35
3.4.2 文本節點 35
3.4.3 屬性節點 36
3.4.4 css 36
3.4.5 獲取元素 38
3.4.6 盤點知識點 42
3.5 獲取和設定屬性 43
3.5.1 getattribute 43
3.5.2 setattribute 44
3.6 小結 45
第4章 案例研究:javascript圖片庫 46
4.1 標記 46
4.2 javascript 48
4.2.1 非dom解決方案 49
4.2.2 最終的函式代碼清單 50
4.3 套用這個javascript函式 50
4.4 對這個函式進行擴展 52
4.4.1 childnodes屬性 53
4.4.2 nodetype屬性 54
4.4.3 在標記里增加一段描述 54
4.4.4 用javascript改變這段描述 55
4.4.5 nodevalue屬性 56
4.4.6 firstchild和lastchild屬性 56
4.4.7 利用nodevalue屬性刷新這段描述 57
4.5 小結 60
第5章 最佳實踐 61
5.1 過去的錯誤 61
5.1.1 不要怪罪javascript 61
5.1.2 flash的遭遇 62
5.1.3 質疑一切 63
5.2 平穩退化 63
5.2.1 “javascript:”偽協定 64
5.2.2 內嵌的事件處理函式 65
5.2.3 誰關心這個 65
5.3 向css學習 66
5.3.1 結構與樣式的分離 66
5.3.2 漸進增強 67
5.4 分離javascript 68
5.5 向後兼容 70
5.5.1 對象檢測 70
5.5.2 瀏覽器嗅探技術 71
5.6 性能考慮 72
5.6.1 儘量少訪問dom和儘量減少標記 72
5.6.2 合併和放置腳本 73
5.6.3 壓縮腳本 73
5.7 小結 74
第6章 案例研究:圖片庫改進版 75
6.1 快速回顧 75
6.2 它支持平穩退化嗎 76
6.3 它的javascript與html標記是分離的嗎 77
6.3.1 添加事件處理函式 77
6.3.2 共享onload事件 82
6.4 不要做太多的假設 84
6.5 最佳化 86
6.6 鍵盤訪問 88
6.7 把javascript與css結合起來 90
6.8 dom core和html-dom 93
6.9 小結 94
第7章 動態創建標記 96
7.1 一些傳統方法 96
7.1.1 document.write 96
7.1.2 innerhtml屬性 98
7.2 dom方法 101
7.2.1 createelement方法 101
7.2.2 appendchild方法 102
7.2.3 createtextnode方法 103
7.2.4 一個更複雜的組合 105
7.3 重回圖片庫 107
7.3.1 在已有元素前插入一個新元素 108
7.3.2 在現有方法後插入一個新元素 109
7.3.3 圖片庫二次改進版 111
7.4 ajax 114
7.4.1 xmlhttprequest對象 115
7.4.2 漸進增強與ajax 119
7.4.3 hijax 120
7.5 小結 121
第8章 充實文檔的內容 122
8.1 不應該做什麼 122
8.2 把“不可見”變成“可見” 123
8.3 內容 123
8.3.1 選用html、xhtml還是html5 124
8.3.2 css 126
8.3.3 javascript 127
8.4 顯示“縮略語列表” 127
8.4.1 編寫displayabbreviations函式 128
8.4.2 創建標記 130
8.4.3 一個瀏覽器“地雷” 135
8.5 顯示“文獻來源連結表” 138
8.6 顯示“快捷鍵清單” 143
8.7 檢索和添加信息 146
8.8 小結 147
第9章 css-dom 148
9.1 三位一體的網頁 148
9.1.1 結構層 148
9.1.2 表示層 148
9.1.3 行為層 149
9.1.4 分離 150
9.2 style屬性 150
9.2.1 獲取樣式 151
9.2.2 設定樣式 156
9.3 何時該用dom腳本設定樣式 158
9.3.1 根據元素在節點樹里的位置來設定樣式 158
9.3.2 根據某種條件反覆設定某種樣式 161
9.3.3 回響事件 165
9.4 classname屬性 167
9.5 小結 171
第10章 用javascript實現動畫效果 172
10.1 動畫基礎知識 172
10.1.1 位置 172
10.1.2 時間 175
10.1.3 時間遞增量 175
10.1.4 抽象 178
10.2 實用的動畫 184
10.2.1 提出問題 184
10.2.2 解決問題 186
10.2.3 css 187
10.2.4 javascript 189
10.2.5 變數作用域問題 192
10.2.6 改進動畫效果 193
10.2.7 添加安全檢查 196
10.2.8 生成html標記 198
10.3 小結 200
第11章 html5 201
11.1 html5簡介 201
11.2 來自朋友的忠告 203
11.3 幾個示例 204
11.3.1 canvas 205
11.3.2 音頻和視頻 209
11.3.3 表單 215
11.4 html5還有其他特性嗎 219
11.5 小結 219
第12章 綜合示例 220
12.1 項目簡介 220
12.1.1 原始資料 220
12.1.2 站點結構 220
12.1.3 頁面結構 221
12.2 設計 222
12.3 css 223
12.3.1 顏色 225
12.3.2 布局 226
12.3.3 版式 228
12.4 標記 229
12.5 javascript 230
12.5.1 頁面突出顯示 231
12.5.2 javascript幻燈片 235
12.5.3 內部導航 239
12.5.4 javascript圖片庫 242
12.5.5 增強表格 245
12.5.6 增強表單 249
12.5.7 壓縮代碼 263
12.6 小結 264
附錄 javascript庫 265

譯者序

網上的生活越來越豐富多彩。從最初的(X)HTML網頁,到一度熱炒的DHTML概念,再到近幾年流行起來的CSS,網站和網頁的設計工作變得越來越簡便,網上的內容越來越富於變化和色彩。但是,很多網頁設計者和網民朋友都不太喜歡JavaScript,這主要有以下幾方面原因。第一,很多網頁設計者認為JavaScript的可用性很差——早期的瀏覽器彼此很少兼容,如果想讓自己編寫出來的JavaScript腳本在多種瀏覽器環境裡運行,就必須編寫許多用來探測瀏覽器的具體品牌和具體版本的測試及分支代碼(術語稱之為“瀏覽器嗅探”代碼)。這樣的腳本往往到處是if...else語句,既不容易閱讀,又不容易複查和糾錯,更難以做到讓同一個腳本適用於所有的瀏覽器。第二,對廣大的網民來說,JavaScript網頁的可訪問性很差——瀏覽器會時不時地彈出一個報錯視窗甚至導致系統當機,讓人乘興而來、敗興而去。第三,JavaScript被很多網站用來實現彈出廣告視窗的功能,人們厭煩這樣的廣告,也就“恨”屋及烏地厭煩起JavaScript來了。第四,“JavaScript”這個名字里的“Java”往往讓人們誤以為其源於Java語言,而實際接觸之後才發現它們根本沒有任何聯繫。與Java語言相比,JavaScript語言要簡單得多。很多程式設計師寧肯鑽研Java,也不願意去了解JavaScript的功能和用法。
不管什麼原因,JavaScript曾經不受歡迎的確是一個事實。
現在,情況發生了極大的變化。因為幾項新技術的出現,JavaScript的春天似乎來了。首先,W3C(全球資訊網聯盟)推出的標準化DOM(Document Object Model,文檔對象模型)已經一統江湖,目前市場上常見的瀏覽器可以說沒有不支持的。這對網頁設計者來說意味著可以用簡單的“對象檢測”代碼來取代那些繁複的瀏覽器嗅探代碼,而按照DOM編寫出來的JavaScript頁面不像過去那樣容易出問題,這對網民來說意味著瀏覽體驗變得流暢了。其次,最近興起的Ajax技術以DOM和JavaScript語言(以及CSS和XHTML)為基本要素,基於Ajax技術的網站離不開JavaScript和DOM腳本。
其實,人們對JavaScript的惡劣印象在很大程度上來源於早期的程式設計師對這種語言的濫用。如果程式設計師在編寫JavaScript腳本的時候能夠把問題考慮得面面俱到,就可以避免許多問題,但可惜的是如此優秀的程式設計師太少了。事實上,即使是在JavaScript已經開始流行起來的今天,如果程式設計師在編寫JavaScript腳本的時候不遵守相關的標準和編程準則,也仍會導致各種各樣的問題。
在2002年前後,CSS也是一種不太受人們歡迎的Web顯示語言,除了用它來改變一下字型,幾乎沒有人用它來乾其他的事情。但沒過多久,人們對利用CSS設計網頁布局的興趣就一發而不可收拾,整個潮流也從那時扭轉了過來。現在,掌握CSS已經成為許多公司在招聘網站開發人員時的一項要求。
目前,DOM編程技術的現狀與CSS技術在2002年時的境況頗有幾分相似。受Google Maps和Flickr等著名公司利用DOM編程技術推出的Gmail、Google Suggest等新型服務的影響和帶動, DOM編程人才的需求正日益增加。有越來越多的人開始迷上了腳本編程技術,並開始學習如何利用DOM技術去改善而不是妨礙網站的可用性和可訪問性。
本書的作者Jeremy Keith是Web標準計畫DOM Scripting任務組的負責人之一,他在這本書里通過大量示例證明了這樣一個事實:只要運用得當,並且注意避開那些“經典的”JavaScript陷阱,DOM編程技術就可以成為Web開發工具箱裡又一件功能強大甚至是不可或缺的好東西。
本書並不是一本參考大全類型的圖書,作者只重點介紹了幾種最有用的DOM方法和屬性。本書的精華在於作者在書中提到的關於JavaScript和DOM腳本編程工作的基本原則、良好習慣和正確思路。如果讀者能通過書中的幾個案例真正領悟這些原則、習慣和思路,就一定能讓自己的編程技術再上一個台階。
這是一本非常實用的好書,是一本值得一讀再讀的好書。作為本書的譯者,我們相信它會讓每位讀者、自建網站的設計者和來到自建網站的訪問者都受益匪淺。
參加本書翻譯的人員還有韓蘭、李京山、胡晉平、高文雅。

前言

這是一本講述一種程式設計語言的書,但它不是專門寫給程式設計師的,而主要是寫給Web設計師的。具體地說,本書是為那些喜歡使用CSS和HTML並願意遵守編程規範的Web設計師們編寫的。
本書由代碼和概念兩大部分構成。不要被那些代碼嚇倒,我知道它們乍看起來很唬人,可只要抓住了代碼背後的概念,就會發現你是在用一種新語言去閱讀和編寫代碼。
學習一種新的程式設計語言看起來可能很難,但事實卻並非如此。DOM腳本看起來似乎比CSS更複雜,可只要領悟了它的語法,你就會發現自己又掌握了一樣功能強大的Web開發工具。歸根結底,代碼都是思想和概念的體現。
我在這裡要告訴大家一個秘密:其實沒人能把一種程式設計語言的所有語法和關鍵字都記住。如果有拿不準的地方,查閱參考書就全解決了。但本書不是一本參考大全。本書只介紹最基本的JavaScript語法。
本書的真正目的是讓大家理解DOM腳本編程技術背後的思路和原則,或許你對其中一部分早就熟悉了。平穩退化、漸進增強、以用戶為中心的設計對任何前端Web開發工作都非常重要。這些思路貫穿在本書的所有代碼示例中。
你將會看到用來創建圖片庫頁面的腳本、用來創建動畫效果的腳本和用來豐富頁面元素呈現效果的腳本。如果你願意,完全可以把這些例子剪貼到自己的代碼中,但更重要的是理解這些代碼背後的“如何”和“為什麼”。
如果你已經在使用CSS和HTML來把設計思路轉化為活生生的網頁,就應該知道Web標準有多么重要。還記得你是在何時發現自己只需修改一個CSS檔案就可以改變整個網站的視覺效果嗎?DOM技術有著同樣強大的威力。不過,能力越大,責任也就越大。因此,我不僅想讓你看到用DOM腳本實現的超酷效果,更想讓你看到怎樣才能利用DOM腳本編程技術以一種既方便自己更體貼用戶的方式去充實和完善網頁。
如果需要本書所討論的相關代碼 ,到網站搜尋本書的主頁就可以查到。還可以在這個網站找到friends of ED出版社的所有其他好書,內容涉及Web標準、Flash、DreamWeaver以及許多細分的計算機領域。
你對JavaScript的探索不應該在合上本書時就停止下來。

媒體評論

《JavaScript DOM編程藝術:第2版》不愧為經典。文筆清新,深入淺出,不知不覺讓你掌握優秀的編程原則,明白為什麼要遵守標準。
——Slashdot
我要隆重推薦本書。它前所未有地演示了DOM腳本編程的真正潛力。無論你是JavaScript新手還是專家,本書都絕對值得你擁有。
——Garrett Dimon,Digital-Web com雜誌專欄作家

序言

第2版已經出版了。
首先,我要澄清一點:雖然我的名字印在了封面上,但我並沒有參與這個版本的修訂工作。這個新版本完全出自Jeffrey Sambells之手。出版社因為出新版的事找過我,但我的時間確實安排不開了。因此,看到自己的名字忝列其間,心中不禁頓生愧意。
我很高興地向讀者朋友們報告,新版本中所有的修訂都非常符合我的期望——英文原書的封面除外。但不管怎么說,第二版的內容真的是太好了!在上一版的基礎上,新版經過了擴展,涵蓋了如下三個新領域:
·HTML5
·Ajax
·JavaScript庫(尤其是jQuery)
相比之下,新版的內容又擴充了不少,但整本書仍然一直在強調最佳實踐(特別是漸進增強),這正是讓我喜出望外的地方。
新版本中的代碼示例全部換成用HTML5標記來寫了。有關Ajax的示例代碼也精簡得當,儘管簡略,但上下文仍然能夠傳達出我在Bulletproof Ajax 中提出的觀點:永遠不要假設Ajax(或JavaScript,等等)一定可用。
最讓我高興的一點,就是新版本增加了主要介紹jQuery的章節。這一章把本書前面的典型代碼示例,使用jQuery重寫了一遍。這樣一來,正好解釋了人們對為什麼使用庫的種種疑問。它讓你先理解了底層代碼的工作原理,然後再告訴你使用庫為什麼能節省時間和精力。
總而言之,這本書新增的內容都十分精彩,對讀者絕對有用。為了儘量多展示一些jQuery的方法,也限於篇幅,這一版以介紹庫的附錄代替了上一版介紹DOM方法的附錄。這多少讓我感到有一些遺憾,不過,我會爭取在自己的部落格上公布第1版的附錄。
最後,我還是要給第2版再豎豎大拇指,另外再給讀者一點建議。如果你買過本書第1版,恐怕找一些專門講HTML5、Ajax或jQuery的書看會比較好。但如果你就是想知道怎么才能正確地使用JavaScript,那這個經過擴展的新版本就是你的最佳選擇。
Jeremy Keith
2011年1月3日
致謝
沒有我的朋友和同事Andy Budd 與Richard Rutter的幫助,本書的面世就無從談起。Andy在我們的家鄉Brighton開設了一個名為Skillswap。的免費培訓網站。在2004年7月,Richard和我在那裡做了一次關於JavaScript和DOM的聯合演講。演講結束後,我們來到附近的一家小酒館,在那裡,Andy建議我把演講的內容擴展成一本書,也就是本書的第1版。
如果沒有兩方面的幫助,我大概永遠也學不會編寫JavaScript代碼。一方面是幾乎每個Web瀏覽器里都有“view source”(查看原始碼)選項。謝謝你,“view source”。另一方面是那些多年來一直在編寫讓人嘆為觀止的代碼並解說重要思路的JavaScript大師們。Scott Andrew、Aaron Boodman、Steve Champeon、Peter-Paul Koch、Stuart Langridge和Simon Willison只是我現在能想到的幾位。感謝你們所有人的分享精神。
感謝Molly Holzschlag與我分享她的經驗和忠告,感謝她對本書初稿給予反饋意見。感謝Derek Featherstone與我多次愉快地討論JavaScript問題,我喜歡他思考和分析問題的方法。
我還要特別感謝Aaron Gustafson,他在我寫作本書期間向我提供了許多寶貴的反饋和靈感。
在寫作第1版期間,我有幸參加了兩次非常棒的盛會:在德克薩斯州Austin舉辦的“South by Southwest”和在倫敦舉辦的@media。我要感謝這兩次盛會的組織者Hugh Forrest和Patrick Griffiths,是他們讓我有機會結識那么多最友善的人——我從沒想過我能有機會與他們成為朋友和同事。
最後,我要感謝我的妻子Jessica Spengler,不僅因為她永遠不變的支持,還因為她在本書初稿的校對工作中做出的專業幫助。謝謝你,我的人生伴侶。
——Jeremy Keith

相關詞條

熱門詞條

聯絡我們