圖書簡介
《JavaScript實戰：JavaScript、jQuery、HTML5、Node.js實例大全》從最流行的前端套用場景出發，結合當下熱門技術(AJAX、jQuery UI、瀑布流、HTML5、Node.js、CSS3)，用最淺顯的例子帶領大家走向IT前沿。
《JavaScript實戰：JavaScript、jQuery、HTML5、Node.js實例大全》分為5篇共24章：第一篇介紹JavaScript的基礎知識，用原生的JavaScript做表單驗證、照片展示、抽象樹控制項等;第二篇認識HTML5的流行特性，如新表單驗證、CSS3動畫、離線API及多媒體;第三篇學習強大的Canvas，它是網頁遊戲的基礎;第四篇學習用jQuery 3.x進行實戰開發;第五篇通過Node.js了解JavaScript強大的後端開發功能。
《JavaScript實戰：JavaScript、jQuery、HTML5、Node.js實例大全》是了解JavaScript技術最好的圖書，其豐富的參考資料和指南能夠成為讀者必要的參考工具，成為前端開發初學者絕佳的選擇。
作者介紹
張澤娜，深資Web開發工程師，從99年始混跡於網路，精通Web前端開發和伺服器腳本語言技術，善於撲捉潛力技術，是為數不多的程式設計師兼心理諮詢師。有10年以上Web開發經驗，具有7年以上前端系統架構和技術團隊帶領經驗，追求高效編程、快樂編程。
編輯推薦
Web前端時代來臨，市場選擇了Node.js，選擇了JavaScript，而今JavaScript變身為前後台通殺的程式語言，必將成為與Java、PHP、Python同等分量的語言。JavaScript能夠做到的事情越來越多，想使用JavaScript做更多事情的人也將越來越多。
本書使用JavaScript發展歷史上的經典範例講述JavaScript最重要的原生基礎，結合當前Web前端件開發實踐，選用jQuery和CSS3講解主流套用，展望未來前端技術的發展，加入HTML5和Node.js這兩項潛力技術，緊緊把握移動端和服務端這兩個熱門發展方向。內容圖文並茂，能使讀者耳目一新；行文妙趣怡然，閱讀輕鬆愜意；案例、代碼精雕細琢，易於復用和擴展。
圖書目錄
第一篇 JavaScript實戰篇
第1章 JavaScript概述 3
1.1 認識JavaScript 3
1.1.1 瀏覽器戰爭 3
1.1.2 寄生語言 5
1.1.3 DHTML、DOM和W3C 5
1.1.4 動態語言和靜態語言 6
1.2 配置JavaScript開發環境 7
1.2.1 EditPlus 7
1.2.2 Adobe Dreamweaver 8
1.2.3 Sublime Text 9
1.2.4 JetBrains WebStorm 9
1.2.5 Aptana Studio 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.1 input、textarea、hidden和button 23
2.2.2 checkbox、radio和select 26
2.3 用正則來校驗複雜的格式要求 30
2.3.1 認識JavaScript正則 30
2.3.2 JavaScript正則符號及其說明 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.1 HTML、CSS和JavaScript的分層關係 42
3.1.2 照片展示功能設計 42
3.2 照片載入與定位 43
3.2.1 HTML代碼 43
3.2.2 CSS代碼 43
3.2.3 JavaScript代碼 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.1 AJAX是技術不是程式語言 53
4.1.2 同步與異步 54
4.1.3 AJAX與JSON 55
4.1.4 AJAX是如何工作的 56
4.2 XMLHttpRequest對象的常見方法和屬性 58
4.2.1 XMLHttpRequest對象方法 59
4.2.2 XMLHttpRequest對象屬性 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.4 JavaScript繼承 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.2 HTML5的前世今生 104
7.1.3 HTML5理念 106
7.2 HTML5的新特性 106
7.2.1 語義化 106
7.2.2 CSS3 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.10 XMLHttpRequest Level 2 111
7.2.11 新的HTML Forms 111
7.2.12 其他特性及未來發展 111
7.3 有哪些瀏覽器支持HTML5 112
7.4 如何書寫HTML5 113
7.4.1 HTML5和XHTML的對比 113
7.4.2 HTML5書寫的誤區 114
7.5 相關參考 115
第8章 煥然一新的表單 116
8.1 E-mail和URL類型的輸入元素 116
8.1.1 各瀏覽器核心一覽 116
8.1.2 各瀏覽器對E-mail和URL類型的支持情況 117
8.1.3 全球頂級域名 118
8.1.4 E-mail類型的使用 120
8.1.5 URL類型的使用 121
8.2 數值輸入 122
8.2.1 各瀏覽器對number類型的支持情況 122
8.2.2 number類型的屬性與使用 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.3 datalist讓input自動提示更智慧型 126
8.5 相關參考 127
第9章 在Web頁面中輕鬆控制多媒體視頻和音樂 128
9.1 在頁面中插入視頻和音頻 128
9.1.1 容器和編解碼器 128
9.1.2 使用HTML5 Video和Audio API的好處 130
9.1.3 瀏覽器支持性檢測 131
9.1.4 使用video/audio元素 131
9.1.5 使用source元素來兼容 132
9.2 video/audio元素的屬性 133
9.2.1 通過HTML設定的屬性 133
9.2.2 通過JavaScript設定的屬性 134
9.3 video/audio元素的事件 135
9.3.1 video/audio元素的主要事件 135
9.3.2 設定當前播放位置 136
9.4 video/audio元素的方法 137
9.4.1 通過JavaScript控制的方法 137
9.4.2 滑鼠懸停播放，移開暫停 138
9.5 綜合套用——打造屬於自己的視頻播放器 138
9.5.1 界面設計 138
9.5.2 CSS3+HTML布局 139
9.5.3 用JavaScript控制播放器 141
9.6 相關參考 147
第10章 用CSS3畫一個哆啦A夢 148
10.1 CSS3簡介 148
10.1.1 CSS3歷史情況 148
10.1.2 CSS3的支持情況 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.2 Web儲存和套用快取 185
12.2.1 本地存儲(LocalStorage) 185
12.2.2 會話存儲(SessionStorage) 186
12.2.3 應用程式快取 186
12.2.4 搭建支持套用快取的伺服器 187
12.2.5 神奇的manifest file檔案清單 188
12.3 HTML5本地存儲 190
12.3.1 Web IndexedDB 190
12.3.2 Web SQL Database 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.1 SVG的歷史 201
13.1.2 SVG的優缺點 202
13.1.3 SVG的Hello World 203
13.1.4 SVG的調用方式 204
13.2 SVG形狀 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.3 SVG濾鏡 208
13.3.1 高斯模糊濾鏡(feGaussianBlur) 209
13.3.2 色彩轉換濾鏡(feColorMatrix) 209
13.3.3 位移濾鏡(feOffset) 210
13.4 SVG漸變 211
13.4.1 線性漸變(linearGradient) 211
13.4.2 放射漸變(radialGradient) 212
13.5 製作簡單的SVG動畫——太陽系 213
13.5.1 SVG繪製的太陽和地球公轉軌跡 214
13.5.2 貼圖地球和地月系統 214
13.5.3 太陽系 215
13.6 相關參考 216
第三篇 HTML5 Canvas實戰篇
第14章 Canvas的初步套用—再畫一個哆啦A夢 219
14.1 什麼是Canvas 219
14.1.1 Canvas起源 219
14.1.2 Canvas的支持情況 220
14.1.3 Canvas優缺點及與SVG的對比 220
14.1.4 Canvas與JavaScript 221
14.1.5 Canvas的發展 222
14.1.6 Canvas標籤的使用 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.2 Canvas給視頻加字幕 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.1 jQuery的歷史 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的擴展——jQuery UI外掛程式 280
17.3.2 下載jQuery UI外掛程式 281
17.3.3 簡單套用jQuery UI外掛程式 284
17.3.4 其他UI框架 286
17.4 相關參考 290
第18章 用動態效果來回響瀏覽者 291
18.1 jQuery庫基礎 291
18.1.1 jQuery庫的核心方法——$() 291
18.1.2 jQuery庫延遲等待載入模式 293
18.1.3 jQuery對象與DOM對象間的轉換 294
18.2 基礎選擇器 295
18.2.1 簡單選擇器 295
18.2.2 進階選擇器 298
18.2.3 高級選擇器 303
18.3 過濾選擇器 307
18.3.1 jQuery所支持的過濾器 307
18.3.2 頁面中的經典導航條 310
18.4 操作DOM對象 313
18.4.1 jQuery關於元素的操作 313
18.4.2 關於表的經典效果 315
18.4.3 jQuery關於節點的操作 317
18.4.4 超級連結提示效果 319
18.4.5 圖片預覽效果 320
18.5 回響事件 323
18.5.1 綁定和刪除事件 323
18.5.2 jQuery所支持的事件和事件類型 325
18.5.3 表單動態效果 328
18.6 實現動態效果 334
18.6.1 jQuery庫所支持的動畫方法 334
18.6.2 實現可摺疊的列表 336
18.6.3 淡入淡出效果 338
18.7 相關參考 340
第19章 用戶互動操作、進度條和滑動條美化頁面 341
19.1 頁面中的互動操作 341
19.1.1 jQuery UI所支持的拖動組件 341
19.1.2 jQuery UI所支持的拖放組件 343
19.1.3 模擬Windows系統“資源回收筒” 345
19.2 頁面中的進度條效果 349
19.2.1 jQuery UI所支持的進度條工具集 349
19.2.2 實現進度條效果 350
19.3 頁面中滑動條效果 352
19.3.1 jQuery UI所支持的滑動條工具集 352
19.3.2 實現圖片滑塊滾動條效果 354
19.3.3 實現簡單顏色調色器 357
19.4 相關參考 359
第20章 用工具集實現酷炫的頁面 360
20.1 實現“手風琴”效果 360
20.1.1 jQuery UI所支持的摺疊面板工具集 360
20.1.2 實現經典的導航選單 362
20.2 設計頁面中各種對話框效果 363
20.2.1 jQuery UI所支持的對話框工具集 364
20.2.2 實現彈出和確認信息對話框效果 365
20.3 處理頁面中的日期 368
20.3.1 jQuery UI所支持的日期選擇器工具集 368
20.3.2 實現日期輸入框 371
20.3.3 實現選取時間段功能 372
20.4 實現幻燈和分頁效果 374
20.4.1 jQuery UI所支持的選項卡工具集 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.1 Node.js是平台 385
21.1.2 Node.js不是萬能的 386
21.2 獲取、安裝和配置Node.js 388
21.2.1 Node.js的獲取 388
21.2.2 Node.js的安裝 389
21.2.3 Node.js的配置 390
21.3 Node.js與其他伺服器腳本語言的比較 391
21.4 Node.js與客戶端JavaScript腳本的比較 392
21.5 相關參考 393
第22章 構造一個最簡單的Web伺服器 394
22.1 Node.js中腳本檔案的組織 395
22.1.1 CommonJS規範 395
22.1.2 Node.js中的模組 395
22.1.3 HTTP協定 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.1 Express與Connect 414
23.1.2 在Node.js環境下安裝Express 415
23.1.3 用Express搭建簡單Web套用 416
23.2 Express的程式控制 418
23.2.1 模板引擎ejs 418
23.2.2 中間件(middleware) 422
23.3 Express的請求解析 423
23.3.1 路由routes 423
23.3.2 Request對象 424
23.4 Express的回響控制 425
23.4.1 write、end、send輸出回響到客戶端 426
23.4.2 JSON、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.2 HTML5中的Web Socket 432
24.2.1 Web Socket協定 432
24.2.2 Nginx對Web Socket的支持 433
24.2.3 Web Socket常用API 433
24.3 在Node.js中運算元據庫 434
24.3.1 操作MS SQL Server 434
24.3.2 操作MySQL 436
24.3.3 操作MongoDB 440
24.4 完善聊天系統 442
24.4.1 聊天室客戶端 442
24.4.2 Socket.IO 常見API 443
24.5 相關參考 444
