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

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

第2章　基本語(yǔ)法　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ù)類(lèi)型　24
2．2．1　數(shù)據(jù)類(lèi)型分類(lèi)　24
2．2．2　基本數(shù)據(jù)類(lèi)型　24
2．2．3　數(shù)據(jù)類(lèi)型檢測(cè)　26
2．2．4　數(shù)據(jù)類(lèi)型轉(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ì)算圓的周長(zhǎng)和面積　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)語(yǔ)句　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ù)組長(zhǎng)度　50
3．3．2　數(shù)組的訪問(wèn)與遍歷　51
3．3．3　元素的添加與修改　52
3．3．4　元素的刪除　53
3．3．5　【案例】查找最大值與最小值　54
3．4　常見(jiàn)二維數(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　常見(jiàn)數(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　【案例】字符串大小寫(xiě)轉(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)頁(yè)計(jì)算器　85
本章小結(jié)　86
課后練習(xí)　86

第5章　對(duì)象　88
5．1　面向?qū)ο蟾攀觥?9
5．1．1　面向過(guò)程與面向?qū)ο蟆?9
5．1．2　面向?qū)ο蟮奶卣鳌?9
5．2　自定義對(duì)象　91
5．2．1　對(duì)象的定義　91
5．2．2　訪問(wèn)對(duì)象成員　92
5．2．3　對(duì)象成員遍歷　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)置對(duì)象　98
5．4．1　String對(duì)象　98
5．4．2　Number對(duì)象　100
5．4．3　Math對(duì)象　100
5．4．4　Date對(duì)象　101
5．4．5　【案例】制作年歷　102
5．5　錯(cuò)誤處理與代碼調(diào)試　105
5．5．1　錯(cuò)誤處理　105
5．5．2　錯(cuò)誤對(duì)象　106
5．5．3　錯(cuò)誤類(lèi)型　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對(duì)象　126
6．2　window對(duì)象　126
6．2．1　全局作用域　126
6．2．2　彈出對(duì)話框和窗口　127
6．2．3　窗口位置和大小　130
6．2．4　框架操作　132
6．2．5　定時(shí)器　132
6．2．6　【案例】限時(shí)秒殺　134
6．3　location對(duì)象　136
6．3．1　更改URL　136
6．3．2　獲取URL參數(shù)　137
6．3．3　【案例】定時(shí)跳轉(zhuǎn)　138
6．4　history對(duì)象　139
6．4．1　歷史記錄跳轉(zhuǎn)　139
6．4．2　無(wú)刷新更改URL地址　140
6．5　navigator對(duì)象　141
6．6　screen對(duì)象　142
動(dòng)手實(shí)踐：紅綠燈倒計(jì)時(shí)　143
本章小結(jié)　145
課后練習(xí)　145

第7章　DOM　147
7．1　DOM對(duì)象簡(jiǎn)介　148
7．1．1　什么是DOM　148
7．1．2　DOM HTML節(jié)點(diǎn)樹(shù)　148
7．1．3　DOM對(duì)象的繼承關(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í)踐：購(gòu)物車(chē)　171
本章小結(jié)　176
課后練習(xí)　176

第8章　事件　178
8．1　事件處理　179
8．1．1　事件概述　179
8．1．2　事件的綁定方式　180
8．2　事件對(duì)象　182
8．2．1　獲取事件對(duì)象　182
8．2．2　常用屬性和方法　183
8．2．3　【案例】緩動(dòng)的小球　186
8．3　事件分類(lèi)　188
8．3．1　頁(yè)面事件　188
8．3．2　焦點(diǎn)事件　189
8．3．3　鼠標(biāo)事件　191
8．3．4　【案例】鼠標(biāo)拖曳特效　193
8．3．5　鍵盤(pán)事件　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　獲取正則對(duì)象　206
9．2　字符類(lèi)別與集合　207
9．2．1　字符類(lèi)別　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　【案例】?jī)?nèi)容查找與替換　214
9．4　與正則相關(guān)的方法　215
9．4．1　RegExp類(lèi)中的方法　216
9．4．2　String類(lèi)中的方法　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開(kāi)發(fā)環(huán)境　229
10．2．2　前后端交互　230
10．3　Ajax入門(mén)　232
10．3．1　什么是Ajax　232
10．3．2　創(chuàng)建Ajax對(duì)象　233
10．3．3　Ajax向服務(wù)器發(fā)送請(qǐng)求　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　【案例】無(wú)刷新分頁(yè)　242
10．5　跨域請(qǐng)求　250
10．5．1　Ajax跨域問(wèn)題　250
10．5．2　JSONP實(shí)現(xiàn)跨域請(qǐng)求　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快速入門(mén)　268
11．1．1　什么是jQuery　268
11．1．2　下載jQuery　268
11．1．3　使用jQuery　270
11．2　元素操作　271
11．2．1　jQuery對(duì)象　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　頁(yè)面加載事件　292
11．4．3　事件綁定與切換　292
11．4．4　【案例】手風(fēng)琴效果　294
11．5　動(dòng)畫(huà)特效　295
11．5．1　常用動(dòng)畫(huà)　295
11．5．2　自定義動(dòng)畫(huà)　297
11．5．3　【案例】無(wú)縫輪播圖　299
11．6　jQuery操作Ajax　302

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

第12章　網(wǎng)頁(yè)版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　重新開(kāi)始游戲　330
本章小結(jié)　330
課后練習(xí)　331