第一篇JavaScript實戰篇
第1章JavaScript概述 3
1.1認識JavaScript 3
1.1.1瀏覽器戰爭 3
1.1.2寄生語言 5
1.1.3DHTML、DOM和W3C 5
1.1.4動態語言和靜態語言 6
1.2配置JavaScript開發環境 7
1.2.1EditPlus 7
1.2.2AdobeDreamweaver 8
1.2.3SublimeText 9
1.2.4JetBrainsWebStorm 9
1.2.5AptanaStudio 10
1.3在Web頁面中使用JavaScript 12
1.3.1直接內嵌JavaScript代碼 12
1.3.2引用JavaScript文件 13
1.4高效率的開發 13
1.4.1熟悉語法 13
1.4.2自動完成 15
1.4.3使用成熟框架和便捷工具 16
1.5相關參考 17
第2章用JavaScript驗證表單 18
2.1最簡單的表單驗證——禁止空白的必填項目 18
2.1.1最簡單表單的HTML結構 19
2.1.2綁定驗證功能 20
2.1.3綁定驗證的另一種方式 21
2.2處理各種類型的表單元素 23
2.2.1input、textarea、hidden和button 23
2.2.2checkbox、radio和select 26
2.3用正則來校驗復雜的格式要求 30
2.3.1認識JavaScript正則 30
2.3.2JavaScript正則符號及其說明 31
2.3.3正則驗證輸入郵箱 33
2.4改善用戶體驗 34
2.4.1什么是用戶體驗 34
2.4.2表單的用戶體驗改善 35
2.5相關參考 40
第3章用JavaScript實現照片展示 41
3.1功能設計 41
3.1.1HTML、CSS和JavaScript的分層關系 42
3.1.2照片展示功能設計 42
3.2照片加載與定位 43
3.2.1HTML代碼 43
3.2.2CSS代碼 43
3.2.3JavaScript代碼 46
3.3響應鼠標動作 48
3.3.1響應小照片單擊動作 48
3.3.2響應小照片上一組或下一組單擊動作 49
3.4響應鍵盤動作 49
3.4.1常見鍵盤按鍵對應的ASCII碼值 49
3.4.2響應鍵盤動作 50
3.5代碼分離帶來的紅利 52
3.6相關參考 52
第4章AJAX——無刷新的用戶體驗 53
4.1認識AJAX 53
4.1.1AJAX是技術不是編程語言 53
4.1.2同步與異步 54
4.1.3AJAX與JSON 55
4.1.4AJAX是如何工作的 56
4.2XMLHttpRequest對象的常見方法和屬性 58
4.2.1XMLHttpRequest對象方法 59
4.2.2XMLHttpRequest對象屬性 61
4.3檢查待注冊的用戶名是否存在 63
4.3.1客戶端進行檢測 63
4.3.2服務器端獲取數據 64
4.4用AJAX提交數據給服務器 65
4.4.1客戶端部分 65
4.4.2服務端部分 67
4.5相關參考 68
第5章瀑布流布局 69
5.1瀑布流簡介 69
5.1.1瀑布流是不是萬金油 69
5.1.2穿過瀑布流看水簾洞 70
5.2固定列寬的簡單瀑布流實現 72
5.2.1簡單的HTML結構 73
5.2.2讓瀑布流動起來 74
5.3非固定列寬的復雜瀑布流 76
5.3.1非固定列寬瀑布流的爭議 76
5.3.2用Masonry實現任意非固定列寬瀑布流 77
5.4延遲加載圖片 79
5.4.1延遲加載是何方神圣 79
5.4.2延遲加載運用實例 80
5.5相關參考 83
第6章用戶控件的構造——目錄樹視圖 84
6.1功能設計 84
6.2樹視圖的最簡化實現 85
6.2.1樹視圖的HTML結構和數據結構 85
6.2.2用遞歸最簡化顯示樹 86
6.3類和抽象 89
6.3.1基于對象（Object-Based）和面向對象（Object-Oriented） 89
6.3.2用JavaScript創建一個類 89
6.3.3靜態屬性、方法和動態屬性、方法 90
6.3.4JavaScript繼承 91
6.3.5私有屬性和方法 92
6.3.6抽象 92
6.4復雜的樹視圖 93
6.4.1閉包隔離變量污染 93
6.4.2省去new關鍵字調用控件 93
6.4.3豐富控件方法 94
6.5相關參考 100
第二篇HTML5+CSS3實戰篇
第7章HTML5概述 103
7.1什么是HTML5 103
7.1.1差點夭折的HTML5 104
7.1.2HTML5的前世今生 104
7.1.3HTML5理念 106
7.2HTML5的新特性 106
7.2.1語義化 106
7.2.2CSS3 107
7.2.3本地存儲/離線應用 108
7.2.4音頻/視頻多媒體 109
7.2.5畫布Canvas 109
7.2.6本地文件訪問 109
7.2.7開放字體格式WOFF 109
7.2.8地理位置 110
7.2.9微數據 110
7.2.10XMLHttpRequestLevel2 111
7.2.11新的HTMLForms 111
7.2.12其他特性及未來發展 111
7.3有哪些瀏覽器支持HTML5 112
7.4如何書寫HTML5 113
7.4.1HTML5和XHTML的對比 113
7.4.2HTML5書寫的誤區 114
7.5相關參考 115
第8章煥然一新的表單 116
8.1E-mail和URL類型的輸入元素 116
8.1.1各瀏覽器內核一覽 116
8.1.2各瀏覽器對E-mail和URL類型的支持情況 117
8.1.3全球頂級域名 118
8.1.4E-mail類型的使用 120
8.1.5URL類型的使用 121
8.2數值輸入 122
8.2.1各瀏覽器對number類型的支持情況 122
8.2.2number類型的屬性與使用 122
8.3日期選擇器 123
8.3.1各瀏覽器對日期選擇器的支持情況 123
8.3.2日期選擇器類型與使用 123
8.4用datalist來實現自動提示 125
8.4.1各瀏覽器對datalist的支持情況 125
8.4.2各瀏覽器datalist的效果對比 125
8.4.3datalist讓input自動提示更智能 126
8.5相關參考 127
第9章在Web頁面中輕松控制多媒體視頻和音樂 128
9.1在頁面中插入視頻和音頻 128
9.1.1容器和編解碼器 128
9.1.2使用HTML5Video和AudioAPI的好處 130
9.1.3瀏覽器支持性檢測 131
9.1.4使用video/audio元素 131
9.1.5使用source元素來兼容 132
9.2video/audio元素的屬性 133
9.2.1通過HTML設置的屬性 133
9.2.2通過JavaScript設置的屬性 134
9.3video/audio元素的事件 135
9.3.1video/audio元素的主要事件 135
9.3.2設置當前播放位置 136
9.4video/audio元素的方法 137
9.4.1通過JavaScript控制的方法 137
9.4.2鼠標懸停播放，移開暫停 138
9.5綜合應用——打造屬于自己的視頻播放器 138
9.5.1界面設計 138
9.5.2CSS3+HTML布局 139
9.5.3用JavaScript控制播放器 141
9.6相關參考 147
第10章用CSS3畫一個哆啦A夢 148
10.1CSS3簡介 148
10.1.1CSS3歷史情況 148
10.1.2CSS3的支持情況 149
10.2陰影和文本陰影 149
10.2.1陰影（box-shadow） 150
10.2.2文本陰影（text-shadow） 151
10.3圓角 153
10.3.1圓角（border-radius）屬性 153
10.3.2圓角變圓與半圓 154
10.4漸變 154
10.4.1線性漸變 154
10.4.2放射漸變 156
10.5綜合應用——畫一個哆啦A夢 157
10.5.1頭部和臉部 158
10.5.2脖子和鈴鐺 162
10.5.3身體和四肢 163
10.5.4讓眼睛動起來 168
10.6相關參考 169
第11章酷炫的CSS3動畫效果—3D旋轉方塊 170
11.1文本描邊和文本填充色 170
11.1.1文本描邊（text-stroke） 171
11.1.2文本填充（text-fill-color） 171
11.2變形和變形原點 172
11.2.1變形（transform） 172
11.2.2變形原點（transform-origin） 175
11.3簡單應用——飛行旋轉文本 176
11.3.1過渡動畫（transition） 177
11.3.2自定義動畫（animation）和@keyframes 178
11.3.3飛行旋轉的文本 179
11.4綜合應用——3D旋轉方塊 181
11.5相關參考 183
第12章一個可以離線的內容管理系統 184
12.1功能設計 184
12.2Web儲存和應用緩存 185
12.2.1本地存儲（LocalStorage） 185
12.2.2會話存儲（SessionStorage） 186
12.2.3應用程序緩存 186
12.2.4搭建支持應用緩存的服務器 187
12.2.5神奇的manifestfile文件清單 188
12.3HTML5本地存儲 190
12.3.1WebIndexedDB 190
12.3.2WebSQLDatabase 193
12.4編寫內容管理系統 195
12.4.1可離線的HTML、JS和CSS 195
12.4.2添加數據 196
12.4.3列表和查詢數據 197
12.4.4更新數據 198
12.4.5刪除數據 199
12.4.6前端交互 199
12.5相關參考 200
第13章SVG動畫 201
13.1什么是SVG 201
13.1.1SVG的歷史 201
13.1.2SVG的優缺點 202
13.1.3SVG的HelloWorld 203
13.1.4SVG的調用方式 204
13.2SVG形狀 204
13.2.1矩形（rect） 205
13.2.2圓形（circle） 206
13.2.3橢圓（ellipse） 206
13.2.4線（line） 206
13.2.5折線（polyline） 207
13.2.6多邊形（polygon） 207
13.2.7路徑（path） 207
13.3SVG濾鏡 208
13.3.1高斯模糊濾鏡（feGaussianBlur） 209
13.3.2色彩轉換濾鏡（feColorMatrix） 209
13.3.3位移濾鏡（feOffset） 210
13.4SVG漸變 211
13.4.1線性漸變（linearGradient） 211
13.4.2放射漸變（radialGradient） 212
13.5制作簡單的SVG動畫——太陽系 213
13.5.1SVG繪制的太陽和地球公轉軌跡 214
13.5.2貼圖地球和地月系統 214
13.5.3太陽系 215
13.6相關參考 216
第三篇HTML5Canvas實戰篇
第14章Canvas的初步應用—再畫一個哆啦A夢 219
14.1什么是Canvas 219
14.1.1Canvas起源 219
14.1.2Canvas的支持情況 220
14.1.3Canvas優缺點及與SVG的對比 220
14.1.4Canvas與JavaScript 221
14.1.5Canvas的發展 222
14.1.6Canvas標簽的使用 222
14.2繪制形狀和文字 223
14.2.1直線（lineTo） 223
14.2.2矩形（rect） 225
14.2.3圓（arc） 227
14.2.4弧和圓角（arcTo） 227
14.2.5貝塞爾曲線（quadraticCurveTo） 229
14.2.6繪制文本（fillText）和strokeText 230
14.3顏色、風格和陰影 231
14.3.1線性漸變（createLinearGradient） 231
14.3.2放射漸變（createRadialGradient） 233
14.3.3陰影 234
14.4再畫一個哆啦A夢 235
14.4.1準備工作 235
14.4.2繪制頭和臉 235
14.4.3繪制眼睛和鼻子 236
14.4.4繪制嘴巴和胡須 237
14.5相關參考 238
第15章Canvas的高級應用—制作飛行游戲 239
15.1轉換 239
15.1.1放大和縮小 239
15.1.2平移和旋轉 241
15.1.3矩陣轉換 243
15.2合成 244
15.2.1用Photoshop控制圖形合成 244
15.2.2使用Canvas控制圖形合成 245
15.3碰撞檢測 247
15.3.1圓形碰撞檢測 247
15.3.2矩形碰撞檢測 248
15.4實現打飛機游戲 248
15.4.1打飛機游戲設計 249
15.4.2移動的星空 249
15.4.3加載資源 251
15.4.4我方戰機、敵機和子彈 251
15.4.5讓游戲動起來 254
15.5相關參考 255
第16章Canvas的另類應用—壓縮和解壓 256
16.1繪制圖片 256
16.1.1繪制外部載入的圖片 257
16.1.2Canvas給視頻加字幕 258
16.2像素級操作 259
16.2.1反轉顏色—底片效果 260
16.2.2灰度控制——黑白灰效果 261
16.2.3透明度控制 262
16.2.4倒影 264
16.3實現壓縮解壓功能 266
16.3.1載入位圖 266
16.3.2壓縮位圖 266
16.3.3保存到本地 267
16.4相關參考 268
第四篇jQuery實戰篇
第17章jQuery簡介 271
17.1什么是jQuery 271
17.1.1jQuery的歷史 272
17.1.2為什么要使用jQuery 273
17.2編寫jQuery代碼 275
17.2.1下載jQuery 275
17.2.2簡單應用jQuery 276
17.2.3調試jQuery程序 277
17.3基于jQuery的UI插件 280
17.3.1基于jQuery的擴展——jQueryUI插件 280
17.3.2下載jQueryUI插件 281
17.3.3簡單應用jQueryUI插件 284
17.3.4其他UI框架 286
17.4相關參考 290
第18章用動態效果來響應瀏覽者 291
18.1jQuery庫基礎 291
18.1.1jQuery庫的核心方法——$() 291
18.1.2jQuery庫延遲等待加載模式 293
18.1.3jQuery對象與DOM對象間的轉換 294
18.2基礎選擇器 295
18.2.1簡單選擇器 295
18.2.2進階選擇器 298
18.2.3高級選擇器 303
18.3過濾選擇器 307
18.3.1jQuery所支持的過濾器 307
18.3.2頁面中的經典導航條 310
18.4操作DOM對象 313
18.4.1jQuery關于元素的操作 313
18.4.2關于表的經典效果 315
18.4.3jQuery關于節點的操作 317
18.4.4超級鏈接提示效果 319
18.4.5圖片預覽效果 320
18.5響應事件 323
18.5.1綁定和刪除事件 323
18.5.2jQuery所支持的事件和事件類型 325
18.5.3表單動態效果 328
18.6實現動態效果 334
18.6.1jQuery庫所支持的動畫方法 334
18.6.2實現可折疊的列表 336
18.6.3淡入淡出效果 338
18.7相關參考 340
第19章用戶交互操作、進度條和滑動條美化頁面 341
19.1頁面中的交互操作 341
19.1.1jQueryUI所支持的拖動組件 341
19.1.2jQueryUI所支持的拖放組件 343
19.1.3模擬Windows系統“回收站” 345
19.2頁面中的進度條效果 349
19.2.1jQueryUI所支持的進度條工具集 349
19.2.2實現進度條效果 350
19.3頁面中滑動條效果 352
19.3.1jQueryUI所支持的滑動條工具集 352
19.3.2實現圖片滑塊滾動條效果 354
19.3.3實現簡單顏色調色器 357
19.4相關參考 359
第20章用工具集實現酷炫的頁面 360
20.1實現“手風琴”效果 360
20.1.1jQueryUI所支持的折疊面板工具集 360
20.1.2實現經典的導航菜單 362
20.2設計頁面中各種對話框效果 363
20.2.1jQueryUI所支持的對話框工具集 364
20.2.2實現彈出和確認信息對話框效果 365
20.3處理頁面中的日期 368
20.3.1jQueryUI所支持的日期選擇器工具集 368
20.3.2實現日期輸入框 371
20.3.3實現選取時間段功能 372
20.4實現幻燈和分頁效果 374
20.4.1jQueryUI所支持的選項卡工具集 374
20.4.2經典的選項卡效果 375
20.4.3實現幻燈效果 377
20.4.4實現分頁效果 379
20.5相關參考 382

第五篇Node.js實戰篇
第21章Node.js簡介 385
21.1什么是Node.js 385
21.1.1Node.js是平臺 385
21.1.2Node.js不是萬能的 386
21.2獲取、安裝和配置Node.js 388
21.2.1Node.js的獲取 388
21.2.2Node.js的安裝 389
21.2.3Node.js的配置 390
21.3Node.js與其他服務器腳本語言的比較 391
21.4Node.js與客戶端JavaScript腳本的比較 392
21.5相關參考 393
第22章構造一個最簡單的Web服務器 394
22.1Node.js中腳本文件的組織 395
22.1.1CommonJS規范 395
22.1.2Node.js中的模塊 395
22.1.3HTTP協議 396
22.2建立服務、路徑處理與響應 398
22.2.1用6行代碼創建的Web服務器 398
22.2.2讓Web服務器響應和處理不同路徑 399
22.3異步與文件處理 401
22.3.1智能的404提示 401
22.3.2文件格式MIME協議 404
22.3.3響應不同類型的文件 406
22.4處理文件上傳 409
22.4.1安裝并使用Node.js第三方模塊 409
22.4.2用node-formidable處理上傳圖片 411
22.5相關參考 413
第23章基于Express框架的HTTP服務器 414
23.1引入Express框架 414
23.1.1Express與Connect 414
23.1.2在Node.js環境下安裝Express 415
23.1.3用Express搭建簡單Web應用 416
23.2Express的程序控制 418
23.2.1模板引擎ejs 418
23.2.2中間件（middleware） 422
23.3Express的請求解析 423
23.3.1路由routes 423
23.3.2Request對象 424
23.4Express的響應控制 425
23.4.1write、end、send輸出響應到客戶端 426
23.4.2JSON、JSONP輸出響應到客戶端 427
23.4.3設置cookie 428
23.4.4其他響應控制 428
23.5相關參考 428
第24章構造一個基于Socket的聊天系統 429
24.1建立Socket服務器 429
24.1.1安裝Socket.IO 430
24.1.2聊天室服務端 431
24.2HTML5中的WebSocket 432
24.2.1WebSocket協議 432
24.2.2Nginx對WebSocket的支持 433
24.2.3WebSocket常用API 433
24.3在Node.js中操作數據庫 434
24.3.1操作MSSQLServer 434
24.3.2操作MySQL 436
24.3.3操作MongoDB 440
24.4完善聊天系統 442
24.4.1聊天室客戶端 442
24.4.2Socket.IO常見API 443
24.5相關參考 444