Web開發權威指南 下載 mobi epub pdf 電子書 在線閱讀 2026

編輯推薦

專業——源自大名鼎鼎的Big Nerd Ranch訓練營實戰課程，該訓練營已經為微軟、Google、Facebook等行業巨頭培養瞭眾多專業人纔。
領-先——涵蓋前端開發先進的技術，實現精彩Web應用。
實戰——4大Web開發實戰項目，以項目驅動講解，以實踐ying領理論。
梯度——從基礎的交互式網頁到實時聊天應用，由淺入深，橫跨大前端。

內容簡介

本書在知名培訓機構Big Nerd Ranch培訓教材的基礎上編寫而成，囊括瞭JavaScript、HTML5、CSS3等現代前端開發人員急需的技術關鍵點，包括響應式UI，訪問遠程Web服務，用Ember.js構建應用，等等。此外，還會介紹如何使用前沿開發工具來調試和測試代碼，並且充分利用Node.js和各種開源的npm模塊的強大功能來進行開發。
全書分四部分，每部分獨立完成一個項目，由淺入深、循序漸進，在構建一係列應用的過程中，介紹Web開發的核心概念和API。
無論是否擁有Web開發經驗，抑或擁有其他平颱的開發背景，隻要對當今流行的工具和開發實踐充滿興趣，這本書都能讓你受益匪淺。

作者簡介

Chris Aquino，Web開發專傢，Big Nerd Ranch講師。作為開發者，他希望能給用戶提供有意義的數據體驗；作為主管和講師，他緻力於幫助他的團隊和學生構建齣更好的Web。平時喜歡發條玩具、濃縮咖啡和格式燒烤

Todd Gandee，前端工程師，Big Nerd Ranch講師。擁有十餘年的Web顧問經驗，專業技能嫻熟。業餘時間喜歡跑步、騎行以及攀岩。

目錄

第一部分 瀏覽器編程基礎
第1章　配置開發環境　　2
1．1 安裝Google Chrome　　2
1．2 安裝並配置Atom　　3
1．3 文檔和參考資料　　6
1．4 命令行速成　　8
1．4．1 查看當前工作目錄　　9
1．4．2 新建目錄　　10
1．4．3 切換目錄　　10
1．4．4 列齣目錄中的文件　　11
1．4．5 獲取管理員權限　　12
1．4．6 退齣程序　　13
1．5 安裝Node．js和browser-sync　　14
1．6 延展閱讀：Atom 的替代工具　　15
第2章　開始第一個項目　　17
2．1 搭建Ottergram　　18
2．1．1 開始寫HTML　　19
2．1．2 鏈接到樣式錶　　22
2．1．3 添加內容　　22
2．1．4 添加圖片　　23
2．2 瀏覽網頁　　25
2．3 Chrome開發者工具　　27
2．4 延展閱讀：CSS 版本　　29
2．5 延展閱讀：favicon．ico　　29
2．6 中級挑戰：添加favicon．ico　　30
第3章　樣式　　31
3．1 創建基本樣式　　32
3．2 為HTML文件添加樣式　　33
3．3 樣式的構成　　34
3．4 第一條樣式規則　　35
3．5 樣式繼承　　38
3．6 圖片自適應　　45
3．7 顔色　　47
3．8 調整空白　　49
3．9 添加字體　　53
3．10 初級挑戰：更改顔色　　56
3．11 延展閱讀：優先級！當選擇器發生衝突瞭……　　56
第4章　flexbox響應式布局　　58
4．1 界麵拓展　　59
4．1．1 添加大圖　　59
4．1．2 縮略圖水平布局　　61
4．2 flexbox　　63
4．2．1 創建flex容器　　64
4．2．2 改變flex-direction　　65
4．2．3 flex項目中的元素分組　　66
4．2．4 flex縮寫屬性　　68
4．2．5 flex項目的排序與對齊方式　　69
4．2．6 居中顯示大圖　　73
4．3 絕對定位與相對定位　　75
第5章　使用媒體查詢完成自適應布局　　82
5．1 重置視口　　83
5．2 添加媒體查詢　　85
5．3 初級挑戰：屏幕方嚮　　89
5．4 延展閱讀：flexbox布局通用解決方案與bug　　89
5．5 高級挑戰：聖杯布局　　89
第6章　JavaScript事件處理　　90
6．1 準備錨標簽　　91
6．2 第一個腳本　　94
6．3 Ottergram中的JavaScript 描述　　95
6．4 聲明字符串變量　　96
6．5 操作控製颱　　97
6．6 訪問DOM元素　　99
6．7 編寫setDetails函數　　104
6．8 從函數返迴值　　108
6．9 添加事件監聽器　　110
6．10 訪問所有縮略圖　　115
6．11 迭代縮略圖數組　　117
6．12 中級挑戰：劫持鏈接　　118
6．13 高級挑戰：隨機的水獺　　119
6．14 延展閱讀：嚴格模式　　119
6．15 延展閱讀：閉包　　119
6．16 延展閱讀：NodeList對象和HTMLCollection 對象　　120
6．17 延展閱讀：JavaScript類型　　122
第7章　使用CSS營造視覺效果　　123
7．1 隱藏及顯示大圖　　123
7．1．1 創建隱藏大圖的樣式　　125
7．1．2 用JavaScript 隱藏大圖　　127
7．1．3 監聽鍵盤事件　　128
7．1．4 重新顯示大圖　　131
7．2 使用CSS過渡改變狀態　　132
7．2．1 變形　　133
7．2．2 添加CSS過渡效果　　135
7．2．3 使用定時函數　　138
7．2．4 基於類的過渡效果　　139
7．2．5 通過JavaScript觸發過渡效果　　140
7．3 自定義定時函數　　141
7．4 延展閱讀：強製類型轉換的規則　　143
第二部分 模塊、對象及錶單
第8章　模塊、對象和方法　　146
8．1 模塊　　146
8．1．1 模塊模式　　147
8．1．2 通過IIFE修改對象　　149
8．2 搭建我們的CoffeeRun吧　　151
8．3 創建數據存儲模塊　　152
8．4 在命名空間上添加一個模塊　　153
8．5 構造函數　　154
8．5．1 構造函數的原型　　155
8．5．2 為構造函數添加方法　　157
8．6 創建Truck模塊　　159
8．6．1 添加訂單　　160
8．6．2 刪除訂單　　161
8．7 調試　　163
8．7．1 使用開發者工具定位bug　　165
8．7．2 使用bind 設置this　　169
8．8 在頁麵加載時初始化CoffeeRun　　170
8．9 初級挑戰：使用非星迷熟悉的餐車ID　　173
8．10 延展閱讀：模塊私有數據　　173
8．11 中級挑戰：私有化數據　　174
8．12 延展閱讀：在forEach的迴調函數中設置this　　174
第9章　Bootstrap簡介　　175
9．1 添加Bootstrap　　175
9．2 創建訂單錶單　　177
9．2．1 添加文本輸入字段　　178
9．2．2 提供單選按鈕　　182
9．2．3 添加下拉菜單　　183
9．2．4 添加範圍滑塊　　185
9．2．5 添加提交按鈕和重置按鈕　　185
第10章　使用JavaScript 處理錶單　　187
10．1 創建FormHandler 模塊　　188
10．1．1 jQuery簡介　　189
10．1．2 導入jQuery　　189
10．1．3 使用selector參數配置FormHandler 實例　　190
10．2 添加提交處理程序　　192
10．2．1 提取數據　　193
10．2．2 接受並調用迴調函數　　195
10．3 使用FormHandler　　196
10．4 UI 優化　　198
10．5 初級挑戰：添加超級尺寸　　199
10．6 中級挑戰：當滑塊滑動時顯示其數值　　199
10．7 高級挑戰：添加選擇　　200
第11章　從數據到DOM　　201
11．1 建立清單　　202
11．2 創建CheckList模塊　　203
11．3 創建行構造函數　　204
11．4 在提交時創建清單行　　209
11．5 通過單擊行完成訂單　　212
11．5．1 創建CheckList．prototype．removeRow方法　　213
11．5．2 刪除被覆蓋的條目　　213
11．5．3 編寫addClickHandler方法　　214
11．5．4 調用addClickHandler　　216
11．6 初級挑戰：在描述中加入濃度信息　　217
11．7 中級挑戰：不同口味，不同顔色　　217
11．8 高級挑戰：允許編輯訂單　　217
第12章　錶單校驗　　218
12．1 required屬性　　218
12．2 使用正則錶達式校驗錶單　　220
12．3 約束校驗API　　220
12．3．1 監聽input事件　　222
12．3．2 將input事件和有效性校驗綁定　　223
12．3．3 觸發有效性檢查　　224
12．4 美化有效元素和無效元素　　225
12．5 中級挑戰：為脫咖啡因咖啡進行自定義校驗　　227
12．6 延展閱讀：Webshim 庫　　227
第13章　Ajax　　229
13．1 XMLHttpRequest對象　　230
13．2 RESTful Web服務　　230
13．3 RemoteDataStore模塊　　231
13．4 嚮服務器發送數據　　232
13．4．1 使用jQuery的$．post 方法　　233
13．4．2 添加迴調函數　　233
13．4．3 檢查Ajax的請求和響應　　234
13．5 從服務器檢索數據　　237
13．5．1 查看響應數據　　237
13．5．2 添加迴調函數　　238
13．6 從服務器刪除數據　　240
13．7 用RemoteDataStore替換DataStore　　241
13．8 中級挑戰：校驗遠端服務器　　243
13．9 延展閱讀：Postman　　243
第14章　Deferred和Promise　　244
14．1 Promise和Deferred　　245
14．2 返迴Deferred　　246
14．3 通過then注冊迴調函數　　247
14．4 使用then處理失敗的情況　　248
14．5 在僅支持迴調函數的API上使用Deferred　　250
14．6 為DataStore配置Promise　　254
14．6．1 創建並返迴Promise　　255
14．6．2 resolve一個Promise　　256
14．6．3 將其他DataStore方法Promise 化　　256
14．7 中級挑戰：迴退到Datastore　　259
第三部分 實時數據傳輸
第15章　Node．js入門　　262
15．1 Node和npm　　263
15．1．1 npm init　　264
15．1．2 npm腳本　　265
15．2 Hello， World　　265
15．3 添加一個npm腳本　　267
15．4 用文件提供服務　　268
15．4．1 用fs 模塊讀取文件　　269
15．4．2 處理請求URL　　269
15．4．3 使用path模塊　　271
15．4．4 創建自定義模塊　　272
15．4．5 使用自定義模塊　　272
15．5 錯誤處理　　273
15．6 延展閱讀：npm模塊注冊　　274
15．7 初級挑戰：創建自定義錯誤頁麵　　275
15．8 延展閱讀：MIME類型　　275
15．9 中級挑戰：動態提供MIME類型　　276
15．10 高級挑戰：將錯誤處理放到單獨的模塊中　　276
第16章　使用WebSocket進行實時通信　　277
16．1 配置WebSocket　　278
16．2 測試WebSocket服務器　　280
16．3 創建聊天服務器的功能　　281
16．4 第一次聊天！　　283
16．5 延展閱讀：WebSocket庫socket．io　　283
16．6 延展閱讀：WebSocket服務　　284
16．7 初級挑戰：我重復瞭我的消息嗎？　　284
16．8 中級挑戰：Speakeasy　　284
16．9 高級挑戰：聊天機器人　　284
第17章　藉助Babel使用ES6　　285
17．1 編譯JavaScript的工具　　286
17．2 Chattrbox客戶端應用程序　　288
17．3 邁齣Babel的第一步　　289
17．4 使用Browserify 打包模塊　　291
17．5 新增ChatMessage 類　　294
17．6 創建ws-client 模塊　　297
17．6．1 處理連接　　298
17．6．2 處理事件並發送消息　　299
17．6．3 發齣和迴應一條消息　　301
17．7 延展閱讀：將其他語言編譯成JavaScript　　302
17．8 初級挑戰：默認導入名稱　　303
17．9 中級挑戰：提醒連接關閉　　303
17．10 延展閱讀：變量提升　　303
17．11 延展閱讀：箭頭函數　　305
第18章　繼續ES6 探索之旅　　306
18．1 將jQuery 安裝成一個Node 模塊　　307
18．2 創建ChatForm 類　　307
18．3 創建ChatList 類　　310
18．8 初級挑戰：給消息添加特效　　320
18．9 中級挑戰：緩存消息　　320
18．10 高級挑戰：獨立的聊天室　　321
第四部分 應用架構
第19章　初識MVC和Ember　　324
19．1 Tracker　　325
19．2 Ember：一款MVC 框架　　326
19．2．1 安裝Ember　　327
19．2．2 創建Ember應用　　328
19．2．3 啓動服務器　　329
19．3 安裝外部庫和插件　　330
19．4 修改配置　　332
19．5 延展閱讀：npm和Bower 的安裝命令　　335
19．6 初級挑戰：限製引入　　336
19．7 中級挑戰：添加Font Awesome 庫　　336
19．8 高級挑戰：自定義NavBar　　336
第20章　路由選擇、路由錶、模型　　337
20．1 Ember生成器　　338
20．2 嵌套路由　　342
20．3 Ember Inspector　　344
20．4 指派模型　　344
20．5 beforeModel　　347
20．6 延展閱讀：setupController和afterModel　　347
第21章　模型和數據綁定　　349
21．1 定義模型　　349
21．2 創建記錄　　351
21．3 get和set　　353
21．4 計算屬性　　354
21．5 延展閱讀：檢索數據　　357
21．6 延展閱讀：保存或刪除數據　　358
21．7 初級挑戰：修改計算屬性　　358
21．8 中級挑戰：對新的目擊記錄進行標記　　358
21．9 高級挑戰：添加稱呼　　359
18．4 使用Gravatar　　312
18．5 請求用戶名　　314
18．6 使用會話存儲　　316
18．7 格式化和更新消息時間戳　　318
第22章　數據——適配器、序列化器和變換器　　360
22．1 適配器　　362
22．2 內容安全策略　　365
22．3 序列化器　　366
22．4 變換器　　368
22．5 延展閱讀：Ember CLI Mirage　　368
22．6 中級挑戰：內容安全　　369
22．7 高級挑戰：Mirage　　369
第23章　視圖與模闆　　370
23．1 Handlebars　　371
23．2 模型　　371
23．3 輔助方法　　371
23．3．1 條件語句　　372
23．3．2 {{#each}}循環　　373
23．3．3 元素屬性賦值　　375
23．3．4 鏈接　　377
23．4 自定義輔助方法　　380
23．5 初級挑戰：為鏈接添加鼠標懸浮的內容　　382
23．6 中級挑戰：修改日期格式　　383
23．7 高級挑戰：創建一個自定義縮略圖輔助方法　　383
第24章　控製器　　384
24．1 新建目擊記錄　　385
24．2 編輯目擊記錄　　392
24．3 刪除目擊記錄　　395
24．4 路由動作　　396
24．5 初級挑戰：目擊記錄詳情頁　　398
24．6 中級挑戰：目擊日期　　398
24．7 高級挑戰：添加和刪除目擊者　　398
第25章　組件　　399
25．1 迭代器組件　　399
25．2 “擰乾”組件的“水分”　　403
25．3 數據嚮下，動作嚮上　　404
25．4 類名綁定　　405
25．5 數據嚮下　　406
25．6 動作嚮上　　409
25．7 初級挑戰：自定義提示信息　　411
25．8 中級挑戰：將導航條轉化為組件　　411
25．9 高級挑戰：提示框數組　　412
第26章　後記　　413
26．1 最後的挑戰　　413
26．2 插播一個廣告　　413
26．3 感謝你　　414

《精通前端設計藝術：從像素到交互的完美蛻變》 內容簡介 在這本《精通前端設計藝術》中，我們踏上一場深入探究前端開發精髓的旅程，旨在將技術實踐與藝術美學完美融閤。本書並非僅僅羅列代碼和工具，而是緻力於勾勒齣構建響應式、用戶友好且極具吸引力數字體驗的完整藍圖。我們從最基礎的視覺元素齣發，循序漸進地引導讀者掌握現代前端開發的方方麵麵，直至能夠獨立設計和實現復雜、動態的Web應用。 第一部分：視覺基石——構建令人印象深刻的界麵 第一章：像素的語言——理解與運用色彩、排版和圖像 我們首先深入理解“像素”作為數字世界最基本單位的含義，以及它如何構成我們所見的一切。本章將詳細闡述色彩理論在Web設計中的應用，包括色彩心理學、和諧配色方案的創建、以及如何利用色彩來引導用戶注意力、傳達品牌情感。讀者將學習到如何使用專業的色彩工具，如Adobe Color、Coolors等，來生成富有邏輯且美觀的配色方案。 排版是另一個至關重要的視覺元素。本章將探討字體選擇的原則，從襯綫體、無襯綫體到腳本體、顯示體，分析它們各自的特點和適用場景。我們將深入講解字號、行高、字間距、段落縮進等排版屬性的設置，以及如何通過排版來提升文本的可讀性和視覺層次。讀者將學會如何運用Google Fonts、Adobe Fonts等資源，並理解響應式排版的概念，確保在不同屏幕尺寸下都能獲得最佳閱讀體驗。 圖像在Web界麵中扮演著吸引眼球、傳遞信息的重要角色。本章將介紹不同圖像格式（JPEG, PNG, GIF, SVG）的優劣勢及其選擇標準，並探討圖像壓縮技術，以平衡視覺質量和加載速度。我們還會深入講解圖像在設計中的構圖原則、視覺焦點、以及如何巧妙地運用圖標和插畫來增強界麵的錶現力和信息傳達效率。學習如何使用Photoshop、Illustrator等工具進行基本的圖像編輯和優化，以及瞭解矢量圖（SVG）在響應式設計中的強大優勢。 第二章：構圖的智慧——掌握布局、網格係統和響應式設計 本章將聚焦於界麵布局的藝術。我們將從經典的設計構圖原則入手，如三分法、黃金比例、對稱與非對稱等，並分析它們在Web設計中的應用。讀者將深入理解網格係統（Grid System）的強大之處，學習如何構建穩定、靈活且易於維護的柵格布局，從基礎的兩列、三列布局到更復雜的自定義網格。我們將重點介紹CSS Grid Layout和Flexbox等現代CSS布局模塊，講解它們的語法、屬性以及如何通過它們實現各種復雜的頁麵結構。 響應式設計是現代Web開發的基石。本章將詳細講解“移動優先”（Mobile First）的設計理念，以及如何通過媒體查詢（Media Queries）來創建適應不同屏幕尺寸的自適應布局。讀者將學習到如何設計流體柵格、彈性圖片，以及如何針對不同設備優化用戶體驗。我們將探討如何在設計初期就考慮不同斷點（Breakpoints）下的布局變化，確保網站在桌麵、平闆、手機等各種設備上都能呈現齣最佳效果。 第三章：交互的靈魂——賦予界麵生命力的動畫與動態效果 一個優秀的Web界麵不僅需要視覺上的美感，更需要生動的交互體驗。本章將深入探討Web動畫的原理和應用。我們將從CSS Transitions和Animations開始，講解如何創建平滑的過渡效果和關鍵幀動畫，以及如何通過這些基礎動畫來增強用戶反饋、引導用戶操作。 隨後，我們將進階到JavaScript驅動的動畫技術，包括使用requestAnimationFrame進行性能優化的復雜動畫，以及介紹一些流行的JavaScript動畫庫，如GSAP（GreenSock Animation Platform）和Framer Motion，它們能夠幫助開發者輕鬆實現更具錶現力和交互性的動畫效果，如頁麵加載動畫、滾動觸發動畫、鼠標懸停效果等。 除瞭視覺上的動畫，本章還將深入探討用戶交互的設計。我們將講解如何設計清晰的用戶流程、直觀的導航、以及有效的錶單驗證。我們還將介紹微交互（Microinteractions）的概念，即那些微小但能極大提升用戶滿意度的交互細節，例如按鈕點擊的反饋、加載狀態的顯示、信息提示的彈齣等。學習如何運用JavaScript來捕捉用戶事件，並根據用戶的行為觸發相應的反饋和動畫，從而營造流暢、愉悅的數字互動體驗。 第二部分：技術的實踐——掌握核心前端工具與框架 第四章：HTML的骨架——構建語義化、可訪問的Web結構 HTML（HyperText Markup Language）是Web內容的骨架。本章將帶領讀者深入理解HTML5的最新標準，強調語義化標簽的重要性。我們將詳細講解`

`, `