內容簡介
本書是一本前端程式設計師面試筆試的應試類用書,在內容上,除了講解如何解答前端程式設計師面試筆試問題,還引入了相關知識點輔以說明,讓讀者能夠更加容易理解。
本書包括前端程式設計師面試筆試過程中各類知識點,在題目的廣度上,蒐集了近3年來多家IT企業針對前端崗位的筆試面試真題。在講解的深度上,本書由淺入深,庖丁解牛式地分析每一個知識點,並提煉歸納,同時,引入相關知識點,並對其進行深度剖析,讓讀者不僅能夠理解這個知識點,還能在遇到相似問題的時候,也能遊刃有餘地解決。本書根據知識點進行分類,結構合理,條理清晰,便於讀者學習與查閱。
目錄
序
前言
面試筆試經驗技巧篇
經驗技巧1 如何巧妙地回答面試官的問題?··················· 2
經驗技巧2 如何回答技術性的問題?···························· 2
經驗技巧3 如何回答非技術性問題?···························· 4
經驗技巧4 如何回答快速估算類問題?························· 5
經驗技巧5 如何回答算法設計問題?···························· 5
經驗技巧6 如何回答系統設計題?······························· 7
經驗技巧7 如何解決求職中的時間衝突問題?················ 9
經驗技巧8 如果面試問題曾經遇到過,是否要告訴面試官?··············································································· 10
經驗技巧9 被企業拒絕後是否可以再申請?················· 10
經驗技巧10 如何應對自己不會回答的問題?················ 11
經驗技巧11 如何應對面試官的“激將法”語言?·········· 11
經驗技巧12 如何處理與面試官持不同觀點這個問題?··· 12
經驗技巧13 職場暗語有哪些?·································· 12
經驗技巧14 當前市場對前端工程師的需求如何?待遇如何?··············································································· 15
經驗技巧15 前端工程師未來的發展方向如何?············· 15
經驗技巧16 前端工程師有哪些可供選擇的職業發展道路?··············································································· 16
經驗技巧17 企業在招聘時,對前端工程師通常有何要求?前端工程師的日常工作是什麼?···································· 16
經驗技巧18 要想成為一名出色的前端工程師,需要掌握哪些必備的知識?有哪些好的書籍
或網站可供推薦學習?···························· 17
面試筆試技術攻克篇
第1章 HTML基礎·················································· 20
1.1 HTML························································· 20
1.2 HTML5······················································· 21
1.2.1 HTML5新特性········································· 21
1.2.2 Web App、Hybrid App和Native App················ 21
1.3 DOCTYPE··················································· 23
1.3.1 語法····················································· 23
1.3.2 常用聲明················································ 23
1.3.3 瀏覽器渲染模式········································ 24
1.4 XHTML······················································· 25
1.4.1 XHTML規範··········································· 25
1.4.2 HTML與XHTML的區別····························· 25
1.5 語義化························································ 26
1.5.1 語義化的元素··········································· 26
1.5.2 微格式··················································· 27
1.6 HTML實體·················································· 28
1.6.1 HTML實體的定義····································· 28
1.6.2 可轉義的字元或符號··································· 29
第2章 HTML元素和高級功能·································· 30
2.1 元素基礎····················································· 30
2.1.1 元素的分類············································· 30
2.1.2 元素屬性················································ 31
2.2 套用CSS樣式·············································· 32
2.2.1 內聯樣式················································ 32
2.2.2 內嵌樣式················································ 32
2.2.3 外部樣式················································ 33
2.3 嵌入JavaScript·············································· 33
2.3.1 內聯腳本················································ 33
2.3.2 外部腳本················································ 34
2.3.3 元素屬性················································ 35
2.4 meta元素····················································· 36
2.4.1 charset··················································· 36
2.4.2 name····················································· 36
2.4.3 http-equiv··············································· 37
2.5 超連結························································ 38
2.5.1 href······················································ 38
2.5.2 target···················································· 38
2.5.3 其他屬性················································ 39
2.6 圖像···························································· 39
2.6.1 屬性····················································· 40
2.6.2 分區回響圖············································· 40
2.6.3 插圖元素················································ 41
2.7 收集用戶數據··············································· 42
2.7.1 文本····················································· 42
2.7.2 日期與數值············································· 43
2.7.3 按鈕和其他············································· 44
2.7.4 給表單控制項分組········································ 45
2.8 表格·························································· 46
2.8.1 表格的組成············································· 46
2.8.2 屬性····················································· 47
2.9 iframe·························································· 48
2.9.1 iframe屬性············································· 48
2.9.2 iframe用途············································· 49
2.10 多媒體······················································· 50
2.10.1 使用多媒體元素的優勢······························· 50
2.10.2 video··················································· 51
2.10.3 audio··················································· 52
2.11 繪圖·························································· 53
2.11.1 點陣圖圖像與矢量圖形································· 53
2.11.2 canvas·················································· 53
2.11.3 SVG···················································· 54
2.12 數據存儲···················································· 55
2.12.1 Cookie················································· 55
2.12.2 Web存儲·············································· 56
2.12.3 userData················································ 56
第3章 CSS基礎····················································· 57
3.1 CSS3··························································· 57
3.1.1 CSS3新特性············································ 57
3.1.2 漸進增強················································ 58
3.2 盒模型························································ 59
3.2.1 盒模型··················································· 60
3.2.2 box-sizing··············································· 60
3.2.3 盒子的顯示類型········································ 61
3.3 元素盒類型·················································· 62
3.3.1 list-item················································· 62
3.3.2 表格相關的屬性值····································· 63
3.3.3 run-in···················································· 63
3.3.4 inline-block············································· 63
3.3.5 伸縮盒··················································· 64
3.4 BFC···························································· 65
3.4.1 創建BFC················································ 65
3.4.2 BFC的用途············································· 66
3.5 使用CSS選擇器··········································· 68
3.5.1 基本選擇器············································· 68
3.5.2 關係選擇器············································· 69
3.5.3 偽選擇器················································ 69
3.5.4 選擇器分組············································· 70
3.6 內容生成····················································· 71
3.6.1 計數器··················································· 71
3.6.2 引用屬性值和圖像····································· 72
3.6.3 添加文本················································ 73
3.7 層疊···························································· 73
3.8 單位···························································· 76
3.8.1 絕對長度單位··········································· 76
3.8.2 相對長度單位··········································· 76
3.8.3 其他單位················································ 78
3.9 百分數························································ 78
3.9.1 定位····················································· 79
3.9.2 寬和高··················································· 79
3.9.3 外邊距和內邊距········································ 80
3.9.4 框線圓角和位移········································ 80
3.9.5 字型大小················································ 81
3.10 顏色·························································· 82
3.10.1 顏色名稱··············································· 82
3.10.2 RGB顏色·············································· 82
3.10.3 HSL顏色·············································· 83
3.10.4 Web安全色··········································· 83
第4章 CSS屬性····················································· 84
4.1 浮動···························································· 84
4.1.1 浮動範圍················································ 84
4.1.2 創建BFC················································ 85
4.1.3 負外邊距················································ 85
4.1.4 清除浮動················································ 86
4.2 定位···························································· 88
4.2.1 相對定位················································ 88
4.2.2 絕對定位················································ 89
4.2.3 固定定位················································ 89
4.2.4 偏移屬性················································ 90
4.2.5 z-index·················································· 91
4.3 框線···························································· 92
4.3.1 外觀····················································· 92
4.3.2 寬度····················································· 92
4.3.3 顏色····················································· 93
4.3.4 圓角····················································· 93
4.3.5 陰影····················································· 95
4.3.6 outline··················································· 95
4.4 文本屬性····················································· 96
4.4.1 overflow················································· 96
4.4.2 text-decoration·········································· 97
4.4.3 white-space············································· 97
4.4.4 文本換行················································ 98
4.5 字型···························································· 99
4.5.1 字型系列·············································· 100
4.5.2 Web字型·············································· 100
4.6 垂直對齊···················································· 102
4.6.1 行內非替換元素······································ 102
4.6.2 行內替換元素········································· 103
4.6.3 垂直對齊·············································· 104
4.7 背景·························································· 105
4.7.1 起始點和裁剪背景區································· 105
4.7.2 背景圖像尺寸········································· 107
4.7.3 背景圖像附著········································· 108
4.7.4 背景圖像定位········································· 109
4.7.5 background············································ 110
4.8 變形、過渡和動畫········································ 111
4.8.1 變形···················································· 111
4.8.2 過渡···················································· 112
4.8.3 動畫···················································· 114
4.9 媒體查詢···················································· 117
4.9.1 使用方法·············································· 117
4.9.2 媒體類型·············································· 117
4.9.3 媒體特性·············································· 118
4.9.4 操作符················································· 119
4.9.5 支持度················································· 119
第5章 CSS套用··················································· 121
5.1 CSS Hack··················································· 121
5.1.1 瀏覽器前綴············································ 121
5.1.2 條件注釋·············································· 121
5.1.3 CSS屬性級前綴······································ 122
5.2 布局·························································· 123
5.2.1 浮動布局·············································· 123
5.2.2 定位布局·············································· 124
5.2.3 流式布局·············································· 124
5.2.4 彈性布局·············································· 125
5.2.5 多列布局·············································· 125
5.2.6 等高布局·············································· 127
5.3 CSS Reset··················································· 129
5.3.1 全局重置·············································· 129
5.3.2 Reset.css··············································· 129
5.3.3 Normalize.css·········································· 130
5.4 伸縮盒布局················································· 131
5.4.1 主軸和側軸············································ 132
5.4.2 對齊方式·············································· 133
5.4.3 伸縮性················································· 135
5.4.4 顯示順序·············································· 137
5.4.5 新舊版本屬性對照···································· 137
5.5 居中·························································· 138
5.5.1 水平居中·············································· 139
5.5.2 垂直居中·············································· 140
5.6 CSS預處理器············································· 142
5.6.1 變數與運算············································ 142
5.6.2 選擇器嵌套············································ 143
5.6.3 控制語句·············································· 143
5.6.4 混合和函式············································ 144
5.6.5 繼承···················································· 144
5.7 Bootstrap···················································· 145
5.7.1 柵格系統·············································· 146
5.7.2 排版···················································· 148
5.7.3 顏色···················································· 148
5.7.4 表格···················································· 149
5.7.5 表單···················································· 150
5.7.6 組件···················································· 151
第6章 計算機網路················································ 153
6.1 TCP/IP······················································· 153
6.1.1 協定···················································· 153
6.1.2 TCP/IP················································· 154
6.2 HTTP························································ 155
6.2.1 URI和URL··········································· 156
6.2.2 HTTP協定············································ 156
6.2.3 HTTP報文············································ 157
6.2.4 HTTP首部············································ 158
6.2.5 快取···················································· 160
6.3 RESTful架構風格········································ 162
6.3.1 REST·················································· 162
6.3.2 約束條件·············································· 162
6.4 TCP·························································· 163
6.4.1 連線管理·············································· 163
6.4.2 確認應答·············································· 164
6.4.3 視窗控制·············································· 166
6.4.4 重傳控制·············································· 166
6.5 HTTPS······················································· 167
6.5.1 加密···················································· 168
6.5.2 數字簽名·············································· 169
6.5.3 數字證書·············································· 169
6.5.4 安全通信機制········································· 170
6.6 HTTP/2.0···················································· 171
6.6.1 二進制分幀層········································· 171
6.6.2 多路通信·············································· 172
6.6.3 請求優先權············································ 173
6.6.4 伺服器推送············································ 173
6.6.5 首部壓縮·············································· 173
第7章 JavaScript語言············································ 175
7.1 JavaScript概述············································ 175
7.1.1 ECMAScript··········································· 175
7.1.2 DOM··················································· 176
7.1.3 BOM··················································· 176
7.2 基本語法···················································· 177
7.2.1 字元集················································· 177
7.2.2 標識符、關鍵字和保留字···························· 177
7.2.3 數據類型·············································· 178
7.2.4 運算符················································· 179
7.2.5 表達式················································· 181
7.2.6 語句···················································· 181
7.3 數字和字元串·············································· 183
7.3.1 數字···················································· 183
7.3.2 字元串················································· 185
7.4 強制類型轉換·············································· 188
7.4.1 轉換為數字············································ 188
7.4.2 轉換為字元串········································· 190
7.4.3 轉換為布爾值········································· 191
7.4.4 相等運算符············································ 191
7.5 全局對象···················································· 192
7.5.1 全局對象·············································· 193
7.5.2 包裝對象·············································· 193
7.5.3 處理URI的全局函式································ 194
7.6 對象(Object)············································ 195
7.6.1 創建···················································· 195
7.6.2 原型和原型鏈········································· 195
7.6.3 屬性···················································· 196
7.6.4 可擴展性·············································· 200
7.7 JSON························································· 202
7.7.1 語法···················································· 203
7.7.2 序列化················································· 204
7.7.3 解析···················································· 205
7.8 日期和時間(Date)····································· 206
7.8.1 UTC和GMT·········································· 206
7.8.2 構造函式·············································· 206
7.8.3 靜態方法·············································· 207
7.8.4 日期格式化方法······································ 208
7.8.5 其他日期方法········································· 208
7.9 正則表達式(RegExp)································ 209
7.9.1 創建···················································· 209
7.9.2 語法···················································· 210
7.9.3 String中的方法······································· 212
7.9.4 RegExp中的方法····································· 214
7.10 數組(Array)··········································· 215
7.10.1 創建·················································· 215
7.10.2 數組操作············································· 215
7.10.3 數組方法············································· 216
7.10.4 類數組對象和字元串································ 220
7.11 函式(Function)······································· 221
7.11.1 作用域················································ 222
7.11.2 函式基本概念········································ 223
7.11.3 閉包·················································· 227
7.11.4 函式式編程·········································· 228
7.12 this·························································· 230
7.13 即時函式·················································· 232
7.13.1 塊級作用域·········································· 233
7.13.2 循環·················································· 233
7.13.3 可讀性和undefined·································· 233
7.13.4 類庫封裝············································· 234
7.14 檢測類型和對象········································· 234
7.14.1 檢測數據的類型····································· 235
7.14.2 對象之間的關聯性·································· 236
7.15 Node.js····················································· 237
7.15.1 安裝Node············································ 237
7.15.2 npm··················································· 238
第8章 客戶端中的JavaScript··································· 239
8.1 BOM························································· 239
8.1.1 Window················································ 239
8.1.2 Location··············································· 242
8.1.3 Navigator·············································· 243
8.1.4 History················································· 245
8.2 DOM························································· 247
8.2.1 節點···················································· 247
8.2.2 操作元素·············································· 250
8.3 元素的屬性、尺寸和坐標······························ 256
8.3.1 特性和屬性············································ 256
8.3.2 尺寸···················································· 258
8.3.3 坐標···················································· 261
8.4 控制CSS樣式············································· 264
8.4.1 內聯樣式·············································· 264
8.4.2 獲取CSS屬性········································ 264
8.4.3 設定CSS屬性········································ 265
8.4.4 讀寫CSS類··········································· 265
8.4.5 計算樣式·············································· 266
8.5 事件·························································· 267
8.5.1 術語···················································· 267
8.5.2 註冊事件·············································· 268
8.5.3 事件傳播·············································· 271
8.5.4 事件對象·············································· 272
8.5.5 模擬事件·············································· 273
8.6 表單·························································· 275
8.6.1 表單···················································· 275
8.6.2 單選框和複選框······································ 277
8.6.3 選擇框················································· 278
8.6.4 上傳按鈕·············································· 280
8.7 Ajax·························································· 282
8.7.1 1級XMLHttpRequest································ 282
8.7.2 2級XMLHttpRequest································ 285
8.7.3 跨域通信·············································· 288
8.8 jQuery························································ 290
8.8.1 jQuery基礎············································ 290
8.8.2 操作元素·············································· 291
8.8.3 元素的屬性············································ 295
8.8.4 事件···················································· 298
8.8.5 Ajax···················································· 299
8.8.6 動畫···················································· 300
8.8.7 工具函式·············································· 301