JavaScript前端開發(fā)案例教程

第1章 JavaScript快速入門 1
1．1　初識(shí)JavaScript　2
1．1．1　什么是JavaScript　2
1．1．2　JavaScript的由來　3
1．1．3　JavaScript的特點(diǎn)　4
1．1．4　JavaScript與ECMAScript的關(guān)系　4
1．2　開發(fā)工具　5
1．2．1　瀏覽器　5
1．2．2　代碼編輯器　6
1．2．3　【案例】第一個(gè)JavaScript程序　7
1．3　JavaScript入門　9
1．3．1　JavaScript引入方式　9
1．3．2　常用輸出語句　11
1．3．3　注釋　12
1．3．4　數(shù)據(jù)與運(yùn)算　12
1．3．5　函數(shù)　14
1．3．6　對象　15
1．3．7　事件　17
1．3．8　【案例】改變網(wǎng)頁背景色　18
動(dòng)手實(shí)踐：驗(yàn)證用戶輸入的密碼　19
本章小結(jié)　20
課后練習(xí)　20

第2章　基本語法　21
2．1　變量　22
2．1．1　標(biāo)識(shí)符　22
2．1．2　關(guān)鍵字與保留字　22
2．1．3　變量的使用　23
2．1．4　變量的賦值　23
2．2　數(shù)據(jù)類型　24
2．2．1　數(shù)據(jù)類型分類　24
2．2．2　基本數(shù)據(jù)類型　24
2．2．3　數(shù)據(jù)類型檢測　26
2．2．4　數(shù)據(jù)類型轉(zhuǎn)換　27
2．3　表達(dá)式　29
2．4　運(yùn)算符　29
2．4．1　算術(shù)運(yùn)算符　29
2．4．2　字符串運(yùn)算符　30
2．4．3　賦值運(yùn)算符　30
2．4．4　比較運(yùn)算符　31
2．4．5　邏輯運(yùn)算符　32
2．4．6　三元運(yùn)算符　32
2．4．7　位運(yùn)算符　33
2．4．8　運(yùn)算符優(yōu)先級(jí)　35
2．4．9　【案例】計(jì)算圓的周長和面積　35
2．5　流程控制　36
2．5．1　選擇結(jié)構(gòu)　36
2．5．2　循環(huán)結(jié)構(gòu)　39
2．5．3　跳轉(zhuǎn)語句　42
2．5．4　【案例】打印金字塔　43
動(dòng)手實(shí)踐：九九乘法表　45
本章小結(jié)　46
課后練習(xí)　46

第3章　數(shù)組　48
3．1　初識(shí)數(shù)組　49
3．2　創(chuàng)建數(shù)組　49
3．3　數(shù)組的基本操作　50
3．3．1　獲取數(shù)組長度　50
3．3．2　數(shù)組的訪問與遍歷　51
3．3．3　元素的添加與修改　52
3．3．4　元素的刪除　53
3．3．5　【案例】查找最大值與最小值　54
3．4　常見二維數(shù)組操作　55
3．4．1　創(chuàng)建與遍歷　55
3．4．2　【案例】二維數(shù)組轉(zhuǎn)置　56
3．5　數(shù)組排序　57
3．5．1　冒泡排序　57
3．5．2　插入排序　58
3．6　常見數(shù)組方法　60
3．6．1　棧方法　60
3．6．2　檢索方法　61
3．6．3　數(shù)組轉(zhuǎn)字符串　63
3．6．4　其他方法　63
3．6．5　【案例】猴子選大王　65
動(dòng)手實(shí)踐：省份城市的三級(jí)聯(lián)動(dòng)　66
本章小結(jié)　69
課后練習(xí)　70

第4章　函數(shù)　71
4．1　函數(shù)的定義與調(diào)用　72
4．1．1　初識(shí)函數(shù)　72
4．1．2　參數(shù)設(shè)置　73
4．1．3　函數(shù)的調(diào)用　74
4．1．4　【案例】字符串大小寫轉(zhuǎn)換　75
4．2　變量的作用域　76
4．3　匿名函數(shù)　78
4．3．1　函數(shù)表達(dá)式　78
4．3．2　匿名函數(shù)　78
4．3．3　回調(diào)函數(shù)　79
4．4　嵌套與遞歸　81
4．4．1　函數(shù)嵌套與作用域鏈　81
4．4．2　遞歸調(diào)用　82
4．4．3　【案例】求斐波那契數(shù)列第N項(xiàng)
的值　83
4．5　閉包函數(shù)　83
4．5．1　什么是閉包函數(shù)　83
4．5．2　閉包函數(shù)的實(shí)現(xiàn)　84
動(dòng)手實(shí)踐：網(wǎng)頁計(jì)算器　85
本章小結(jié)　86
課后練習(xí)　86

第5章　對象　88
5．1　面向?qū)ο蟾攀觥?9
5．1．1　面向過程與面向?qū)ο蟆?9
5．1．2　面向?qū)ο蟮奶卣鳌?9
5．2　自定義對象　91
5．2．1　對象的定義　91
5．2．2　訪問對象成員　92
5．2．3　對象成員遍歷　92
5．2．4　深拷貝與淺拷貝　93
5．3　構(gòu)造函數(shù)　94
5．3．1　為什么使用構(gòu)造函數(shù)　94
5．3．2　JavaScript內(nèi)置的構(gòu)造函數(shù)　95
5．3．3　自定義構(gòu)造函數(shù)　95
5．3．4　私有成員　96
5．3．5　函數(shù)中的this指向　97
5．4　內(nèi)置對象　98
5．4．1　String對象　98
5．4．2　Number對象　100
5．4．3　Math對象　100
5．4．4　Date對象　101
5．4．5　【案例】制作年歷　102
5．5　錯(cuò)誤處理與代碼調(diào)試　105
5．5．1　錯(cuò)誤處理　105
5．5．2　錯(cuò)誤對象　106
5．5．3　錯(cuò)誤類型　107
5．5．4　代碼調(diào)試　107
5．6　原型與繼承　109
5．6．1　原型　109
5．6．2　繼承　110
5．6．3　靜態(tài)成員　113
5．6．4　屬性搜索原則　113
5．6．5　原型鏈　114
動(dòng)手實(shí)踐：表單生成器　118
本章小結(jié)　123
課后練習(xí)　123

第6章　BOM　125
6．1　什么是BOM對象　126
6．2　window對象　126
6．2．1　全局作用域　126
6．2．2　彈出對話框和窗口　127
6．2．3　窗口位置和大小　130
6．2．4　框架操作　132
6．2．5　定時(shí)器　132
6．2．6　【案例】限時(shí)秒殺　134
6．3　location對象　136
6．3．1　更改URL　136
6．3．2　獲取URL參數(shù)　137
6．3．3　【案例】定時(shí)跳轉(zhuǎn)　138
6．4　history對象　139
6．4．1　歷史記錄跳轉(zhuǎn)　139
6．4．2　無刷新更改URL地址　140
6．5　navigator對象　141
6．6　screen對象　142
動(dòng)手實(shí)踐：紅綠燈倒計(jì)時(shí)　143
本章小結(jié)　145
課后練習(xí)　145

第7章　DOM　147
7．1　DOM對象簡介　148
7．1．1　什么是DOM　148
7．1．2　DOM HTML節(jié)點(diǎn)樹　148
7．1．3　DOM對象的繼承關(guān)系　149
7．2　HTML元素操作　150
7．2．1　獲取操作的元素　150
7．2．2　元素內(nèi)容　154
7．2．3　【案例】改變盒子大小　155
7．2．4　元素屬性　156
7．2．5　元素樣式　158
7．2．6　【案例】標(biāo)簽欄切換效果　161
7．3　文檔節(jié)點(diǎn)操作　162
7．3．1　獲取節(jié)點(diǎn)　162
7．3．2　節(jié)點(diǎn)追加　164
7．3．3　節(jié)點(diǎn)刪除　165
7．3．4　【案例】列表的增刪和移動(dòng)　166
動(dòng)手實(shí)踐：購物車　171
本章小結(jié)　176
課后練習(xí)　176

第8章　事件　178
8．1　事件處理　179
8．1．1　事件概述　179
8．1．2　事件的綁定方式　180
8．2　事件對象　182
8．2．1　獲取事件對象　182
8．2．2　常用屬性和方法　183
8．2．3　【案例】緩動(dòng)的小球　186
8．3　事件分類　188
8．3．1　頁面事件　188
8．3．2　焦點(diǎn)事件　189
8．3．3　鼠標(biāo)事件　191
8．3．4　【案例】鼠標(biāo)拖曳特效　193
8．3．5　鍵盤事件　195
8．3．6　表單事件　197
動(dòng)手實(shí)踐：圖片放大特效　198
本章小結(jié)　202
課后練習(xí)　202

第9章　正則表達(dá)式　204
9．1　認(rèn)識(shí)正則表達(dá)式　205
9．1．1　什么是正則表達(dá)式　205
9．1．2　如何使用正則　205
9．1．3　獲取正則對象　206
9．2　字符類別與集合　207
9．2．1　字符類別　207
9．2．2　字符集合　208
9．2．3　【案例】限定輸入內(nèi)容　208
9．3　字符限定與分組　211
9．3．1　字符限定　211
9．3．2　括號(hào)字符　212
9．3．3　正則運(yùn)算符優(yōu)先級(jí)　214
9．3．4　【案例】內(nèi)容查找與替換　214
9．4　與正則相關(guān)的方法　215
9．4．1　RegExp類中的方法　216
9．4．2　String類中的方法　217
動(dòng)手實(shí)踐：表單驗(yàn)證　217
本章小結(jié)　222
課后練習(xí)　223

第10章　Ajax　224
10．1　Web基礎(chǔ)知識(shí)　225
10．1．1　Web服務(wù)器　225
10．1．2　HTTP　225
10．2　Web服務(wù)器搭建　228
10．2．1　PHP開發(fā)環(huán)境　229
10．2．2　前后端交互　230
10．3　Ajax入門　232
10．3．1　什么是Ajax　232
10．3．2　創(chuàng)建Ajax對象　233
10．3．3　Ajax向服務(wù)器發(fā)送請求　233
10．3．4　處理服務(wù)器返回的信息　236
10．4　數(shù)據(jù)交換格式　238
10．4．1　XML數(shù)據(jù)格式　239
10．4．2　JSON數(shù)據(jù)格式　240
10．4．3　【案例】無刷新分頁　242
10．5　跨域請求　250
10．5．1　Ajax跨域問題　250
10．5．2　JSONP實(shí)現(xiàn)跨域請求　251
10．6　擴(kuò)展技術(shù)　254
10．6．1　Cookie　254
10．6．2　FormData　255
10．6．3　Promise　256
10．6．4　WebSocket　260
動(dòng)手實(shí)踐：進(jìn)度條文件上傳　262
本章小結(jié)　265
課后練習(xí)　266

第11章　jQuery　267
11．1　jQuery快速入門　268
11．1．1　什么是jQuery　268
11．1．2　下載jQuery　268
11．1．3　使用jQuery　270
11．2　元素操作　271
11．2．1　jQuery對象　271
11．2．2　jQuery選擇器　271
11．2．3　元素遍歷　278
11．2．4　元素內(nèi)容　279
11．2．5　元素樣式　280
11．2．6　元素篩選　281
11．2．7　元素屬性　283
11．2．8　【案例】折疊菜單　283
11．3　文檔節(jié)點(diǎn)操作　285
11．3．1　節(jié)點(diǎn)追加　285
11．3．2　節(jié)點(diǎn)替換　286
11．3．3　節(jié)點(diǎn)刪除　286
11．3．4　節(jié)點(diǎn)復(fù)制　287
11．3．5　【案例】左移與右移　287
11．4　事件操作　289
11．4．1　常用事件　289
11．4．2　頁面加載事件　292
11．4．3　事件綁定與切換　292
11．4．4　【案例】手風(fēng)琴效果　294
11．5　動(dòng)畫特效　295
11．5．1　常用動(dòng)畫　295
11．5．2　自定義動(dòng)畫　297
11．5．3　【案例】無縫輪播圖　299
11．6　jQuery操作Ajax　302

11．7　插件機(jī)制　307
11．7．1　自定義插件　307
11．7．2　jQuery插件庫　308
11．7．3　jQuery UI　309
11．7．4　【案例】自定義全選與反選
插件　311
本章小結(jié)　314
課后練習(xí)　314

第12章　網(wǎng)頁版2048小游戲　315
12．1　游戲功能展示　316
12．2　實(shí)現(xiàn)步驟分析　317
12．3　游戲功能實(shí)現(xiàn)　317
12．3．1　設(shè)計(jì)游戲界面　317
12．3．2　控制游戲數(shù)值　319
12．3．3　實(shí)現(xiàn)單元格移動(dòng)　323
12．3．4　設(shè)置游戲分?jǐn)?shù)　326
12．3．5　判斷勝利和失敗　327
12．3．6　重新開始游戲　330
本章小結(jié)　330
課后練習(xí)　331