JavaScript前端開發(fā)程序設(shè)計(jì)教程（微課版）

第　1章 初識(shí)JavaScript

1.1　JavaScript簡(jiǎn)介　2

1.1.1　JavaScript的發(fā)展概況和特點(diǎn)　2

1.1.2　JavaScript的應(yīng)用　4

1.1.3　支持JavaScript的瀏覽器　4

1.2　編寫JavaScript的工具　5

1.3　JavaScript在HTML中的應(yīng)用　5

1.3.1　直接將JavaScript代碼嵌入HTML中　5

1.3.2　鏈接外部的JavaScript　6

1.3.3　直接在HTML標(biāo)簽中使用　7

1.4　【綜合案例1】：隨機(jī)抽獎(jiǎng)小程序　7

【知識(shí)點(diǎn)提煉】　8

【訓(xùn)練1】　8

第　2章 JavaScript語(yǔ)言基礎(chǔ)

2.1　數(shù)據(jù)類型　10

2.1.1　基本數(shù)據(jù)類型　10

2.1.2　引用數(shù)據(jù)類型　11

2.1.3　特殊數(shù)據(jù)類型　11

【同步案例2-1】：輸出JavaScript支持的最大數(shù)值和最小數(shù)值　12

2.2　變量與常量　13

2.2.1　標(biāo)識(shí)符　13

2.2.2　關(guān)鍵字　13

2.2.3　變量的定義和賦值　14

【同步案例2-2】：變量定義和賦值使用示例　15

2.2.4　變量的作用域　16

2.2.5　常量　16

【同步案例2-3】：通過常量PI求圓的周長(zhǎng)　16

2.3　運(yùn)算符　17

2.3.1　算術(shù)運(yùn)算符　18

【同步案例2-4】：計(jì)算賬單金額　18

2.3.2　關(guān)系運(yùn)算符　19

【同步案例2-5】：比較兩個(gè)數(shù)的大小　19

2.3.3　賦值運(yùn)算符　20

【同步案例2-6】：賦值運(yùn)算符使用示例　21

2.3.4　邏輯運(yùn)算符　22

【同步案例2-7】：邏輯運(yùn)算符與關(guān)系運(yùn)算符配合使用示例　22

2.3.5　條件運(yùn)算符　23

【同步案例2-8】：實(shí)現(xiàn)選擇正確或錯(cuò)誤結(jié)果的示例　23

2.3.6　其他運(yùn)算符　24

【同步案例2-9】：通過typeof測(cè)試變量類型示例　24

2.4　表達(dá)式　25

2.5　【綜合案例2】：挑選出隨機(jī)生成的兩個(gè)數(shù)中的最大數(shù)　26

【知識(shí)點(diǎn)提煉】　27

【訓(xùn)練2】　28

第3章　流程控制語(yǔ)句

3.1　消息對(duì)話框　31

3.1.1　警示對(duì)話框　31

【同步案例3-1】：打開頁(yè)面，首先彈出一個(gè)問候?qū)υ捒颉?1

3.1.2　確認(rèn)對(duì)話框　32

【同步案例3-2】：在對(duì)話框中通過單擊不同按鈕來(lái)顯示不同的內(nèi)容　32

3.1.3　提示對(duì)話框　33

【同步案例3-3】：根據(jù)提示輸入內(nèi)容并且在頁(yè)面上顯示　33

3.2　注釋　34

3.2.1　單行注釋符　34

3.2.2　多行注釋符　35

3.3　條件分支語(yǔ)句　35

3.3.1　if語(yǔ)句　35

【同步案例3-4】：通過if…else語(yǔ)句判斷兩個(gè)數(shù)中的最大值　38

【同步案例3-5】：判斷今天是星期幾　39

3.3.2　switch語(yǔ)句　40

【同步案例3-6】：通過switch語(yǔ)句判斷今天是星期幾　41

3.3.3　if語(yǔ)句嵌套　42

【同步案例3-7】：根據(jù)成績(jī)給出學(xué)生的考評(píng)等級(jí)　42

3.4　循環(huán)控制語(yǔ)句　44

3.4.1　for 循環(huán)語(yǔ)句　44

【同步案例3-8】：通過for循環(huán)求1到100的累加和　45

3.4.2　while循環(huán)語(yǔ)句　46

【同步案例3-9】：通過while循環(huán)求1到100的奇數(shù)累加和　46

3.4.3　do...while循環(huán)語(yǔ)句　48

【同步案例3-10】：通過do…while

循環(huán)求1到100的偶數(shù)累加和　48

3.4.4　循環(huán)語(yǔ)句嵌套　49

【同步案例3-11】：輸出“*”組成的直角三角形圖案　50

3.5　continue和break語(yǔ)句　51

【同步案例3-12】：通過continue和

break來(lái)控制程序是否繼續(xù)運(yùn)行　51

3.6　【綜合案例3】：隨機(jī)答題的小游戲　52

【知識(shí)點(diǎn)提煉】　54

【訓(xùn)練3】　54

第4章　JavaScript函數(shù)

4.1　什么是函數(shù)　58

4.2　預(yù)定義函數(shù)　58

4.2.1　什么是預(yù)定義函數(shù)　58

4.2.2　常用的預(yù)定義函數(shù)　58

【同步案例4-1】：isNaN()函數(shù)應(yīng)用示例　59

【同步案例4-2】：parseFloat()和parseInt()函數(shù)應(yīng)用示例　60

4.3　自定義函數(shù)　61

4.3.1　自定義函數(shù)的創(chuàng)建　61

【同步案例4-3】：定義一個(gè)函數(shù)，能夠在頁(yè)面上輸出字符串　62

【同步案例4-4】：定義函數(shù)，實(shí)現(xiàn)計(jì)算商品總價(jià)　62

4.3.2　自定義函數(shù)的調(diào)用　63

【同步案例4-5】：通過函數(shù)名直接調(diào)用函數(shù)示例　63

【同步案例4-6】：通過超鏈接調(diào)用函數(shù)示例　64

4.3.3　函數(shù)的參數(shù)和返回值　65

【同步案例4-7】：通過函數(shù)統(tǒng)計(jì)商品的總價(jià)　65

【同步案例4-8】：通過函數(shù)返回值求出兩個(gè)數(shù)中最大數(shù)　67

4.3.4　函數(shù)變量的作用域　68

【同步案例4-9】：函數(shù)的變量作用域示例　68

4.3.5　函數(shù)的嵌套　69

【同步案例4-10】：求出1+（1+2）+（1+2+3）+…+（1+2+…+n）的值　69

4.4　【綜合案例4】：編寫可以根據(jù)輸入數(shù)值實(shí)現(xiàn)不同層數(shù)的三角形“*”圖案的函數(shù)　70

【知識(shí)點(diǎn)提煉】　71

【訓(xùn)練4】　72

第5章　對(duì)象

5.1　面向?qū)ο蟪绦蛟O(shè)計(jì)　75

5.1.1　面向?qū)ο缶幊趟枷搿?5

5.1.2　對(duì)象　75

5.1.3　類　76

5.1.4　JavaScript對(duì)象框架　76

5.2　內(nèi)置對(duì)象　76

5.2.1　Object對(duì)象類　77

5.2.2　Date對(duì)象類　77

【同步案例5-1】：讀取當(dāng)前的日期并在頁(yè)面上顯示出來(lái)　79

【同步案例5-2】：計(jì)算自己活了多少天？　79

5.2.3　String對(duì)象類　80

【同步案例5-3】：設(shè)計(jì)一個(gè)提取字符串中數(shù)字的函數(shù)　91

【同步案例5-4】：輸入一個(gè)字符串，然后反向輸出到頁(yè)面上　92

5.2.4　Math對(duì)象　93

【同步案例5-5】：計(jì)算圓的面積　94

【同步案例5-6】：求圓周率的4次方，并取四舍五入整數(shù)顯示　95

5.2.5　Number對(duì)象　96

【同步案例5-7】：輸出JavaScript能夠處理的數(shù)值區(qū)間　96

5.3　自定義對(duì)象　97

5.3.1　通過Object類創(chuàng)建對(duì)象　97

【同步案例5-8】：通過Object創(chuàng)建對(duì)象示例　98

5.3.2　通過字面量創(chuàng)建對(duì)象　99

【同步案例5-9】：通過字面量對(duì)象創(chuàng)建對(duì)象示例　99

5.3.3　通過構(gòu)造函數(shù)（Constructor）創(chuàng)建對(duì)象　100

【同步案例5-10】：通過構(gòu)造函數(shù)

（Constructor）創(chuàng)建對(duì)象示例　104

5.3.4　通過Function對(duì)象定義方法　105

【同步案例5-11】：通過Function對(duì)象顯式地創(chuàng)建方法示例　106

【同步案例5-12】：通過Function對(duì)象隱式地創(chuàng)建方法示例　107

5.3.5　通過原型對(duì)象（prototype）定義方法　108

【同步案例5-13】：通過原型對(duì)象（prototype）訪問共享方法示例　108

5.3.6　通過for…in語(yǔ)句訪問對(duì)象的屬性　110

【同步案例5-14】：通過for…in語(yǔ)句循環(huán)遍歷對(duì)象的屬性　110

5.3.7　with語(yǔ)句訪問對(duì)象的屬性和方法　111

【同步案例5-15】：通過with語(yǔ)句循環(huán)遍歷對(duì)象的屬性　111

5.3.8　繼承　112

【同步案例5-16】：子類繼承父類的屬性和方法示例　112

5.4　數(shù)組對(duì)象　114

5.4.1　什么是數(shù)組　114

5.4.2　創(chuàng)建數(shù)組對(duì)象　114

【同步案例5-17】：創(chuàng)建一個(gè)具有4個(gè)元素的數(shù)組，并為各個(gè)元素賦值　115

5.4.3　數(shù)組的屬性和方法　115

【同步案例5-18】：對(duì)數(shù)組中的元素進(jìn)行排序　116

【同步案例5-19】：將兩個(gè)數(shù)組連接成一個(gè)數(shù)組　117

5.4.4　數(shù)組的訪問　118

【同步案例5-20】：使用for…in語(yǔ)句遍歷數(shù)組　119

5.5　【綜合案例5】：每天信息提示欄　120

5.6　【綜合案例6】：倒計(jì)時(shí)廣告牌　122

【知識(shí)點(diǎn)提煉】　124

【訓(xùn)練5】　124

第6章　BOM和DOM

6.1　認(rèn)識(shí)BOM　127

6.2　Window對(duì)象　127

【同步案例6-1】：在主窗口中通過單擊超鏈接打開新窗口　129

【同步案例6-2】：設(shè)置時(shí)間提醒器　130

【同步案例6-3】：延時(shí)5秒關(guān)閉窗口　131

6.3　Navigator對(duì)象　132

【同步案例6-4】：顯示當(dāng)前瀏覽器的信息　133

【同步案例6-5】：顯示當(dāng)前窗口占據(jù)顯示器的區(qū)域大小　134

6.4　Document對(duì)象　135

【同步案例6-6】：退出頁(yè)面時(shí)顯示瀏覽當(dāng)前頁(yè)面的時(shí)間　135

【同步案例6-7】：打開新窗口并輸出一則通知信息　137

6.5　DOM對(duì)象　138

6.5.1　什么是DOM　138

6.5.2　DOM的節(jié)點(diǎn)樹　138

6.5.3　DOM的節(jié)點(diǎn)類型　139

6.6　DOM對(duì)象的分類　140

6.7　訪問DOM對(duì)象　143

6.7.1　訪問集合對(duì)象的方法　143

【同步案例6-8】：顯示當(dāng)前HTML文檔中所有的標(biāo)簽名　143

6.7.2　訪問HTML當(dāng)前頁(yè)面指定元素的方法　144

【同步案例6-9】：動(dòng)態(tài)顯示實(shí)時(shí)時(shí)間　144

【同步案例6-10】：獲取當(dāng)前頁(yè)面上所有的超鏈接　145

6.8　操縱DOM對(duì)象　146

6.8.1　創(chuàng)建DOM元素節(jié)點(diǎn)　146

【同步案例6-11】：頁(yè)面上顯示歡迎詞　147

6.8.2　刪除DOM元素節(jié)點(diǎn)　147

【同步案例6-12】：刪除當(dāng)前頁(yè)面上所有的水平線　148

6.8.3　復(fù)制DOM元素節(jié)點(diǎn)　149

【同步案例6-13】：實(shí)現(xiàn)復(fù)制表單示例　149

6.8.4　移動(dòng)DOM元素節(jié)點(diǎn)　151

【同步案例6-14】：將當(dāng)前頁(yè)面上

第　一個(gè)元素移到末尾　151

6.8.5　替換DOM元素節(jié)點(diǎn)　153

【同步案例6-15】：替換元素節(jié)點(diǎn)示例　153

6.9　【綜合案例7】：創(chuàng)建根據(jù)不同來(lái)賓顯示不同內(nèi)容的歡迎欄　154

【知識(shí)點(diǎn)提煉】　156

【訓(xùn)練6】　157

第7章　事件及事件處理

7.1　事件的概念　160

7.1.1　認(rèn)識(shí)事件和事件處理　160

7.1.2　事件綁定　161

【同步案例7-1】：?jiǎn)螕繇?yè)面上兩個(gè)按鈕，顯示不同的問候語(yǔ)　162

【同步案例7-2】：使用動(dòng)態(tài)綁定顯示問候語(yǔ)　163

7.2　事件對(duì)象　165

7.2.1　Event對(duì)象　165

7.2.2　事件流　165

【同步案例7-3】：顯示觸發(fā)事件名稱　166

【同步案例7-4】：阻止事件的默認(rèn)行為　167

7.3　處理鼠標(biāo)事件　168

7.3.1　鼠標(biāo)事件　168

7.3.2　處理鼠標(biāo)事件　169

【同步案例7-5】：鼠標(biāo)移入和移出時(shí)在頁(yè)面顯示不同的圖形　169

7.4　處理鍵盤事件　170

7.4.1　鍵盤事件　170

7.4.2　鍵盤的鍵碼值　170

【同步案例7-6】：按下不同按鍵時(shí)顯示不同內(nèi)容的對(duì)話框　172

【同步案例7-7】：取消組合鍵的全選功能　173

7.5　處理頁(yè)面事件　174

7.5.1　頁(yè)面加載與卸載事件　174

【同步案例7-8】：網(wǎng)頁(yè)加載時(shí)對(duì)圖片進(jìn)行縮小設(shè)置　176

7.5.2　頁(yè)面大小事件　177

7.6　處理文本編輯事件　178

7.6.1　處理文本選中區(qū)域　178

【同步案例7-9】：頁(yè)面顯示鼠標(biāo)指向的單詞　179

7.6.2　文本的復(fù)制、剪切和粘貼操作　180

【同步案例7-10】：禁止復(fù)制粘貼方式輸入密碼　180

7.7　【綜合案例8】：顯示按鈕的說(shuō)明性文字　182

7.8　【綜合案例9】：實(shí)現(xiàn)返回首頁(yè)、后退和前進(jìn)按鈕示例　183

【知識(shí)點(diǎn)提煉】　184

【訓(xùn)練7】　185

第8章　表單和表單對(duì)象

8.1　表單和表單對(duì)象　188

8.1.1　定義表單　188

8.1.2　文本框　188

8.1.3　單選按鈕　189

8.1.4　復(fù)選框　189

8.1.5　列表或菜單　189

8.1.6　按鈕　190

【同步案例8-1】：創(chuàng)建會(huì)員注冊(cè)表單　190

8.2　訪問表單和表單元素　192

8.2.1　通過表單的ID來(lái)訪問表單　192

【同步案例8-2】：通過表單id屬性訪問表單示例　192

8.2.2　通過表單名稱來(lái)訪問表單　193

【同步案例8-3】：通過表單名稱name屬性訪問表單示例　193

【同步案例8-4】：隨機(jī)生成指定位數(shù)的驗(yàn)證碼　194

8.2.3　通過表單標(biāo)簽名來(lái)訪問表單　196

【同步案例8-5】：通過表單標(biāo)簽名訪問表單示例　196

8.3　操作表單對(duì)象　197

8.3.1　禁用和啟用表單對(duì)象　197

【同步案例8-6】：表單對(duì)象啟用禁用示例　197

8.3.2　表單對(duì)象獲得和失去焦點(diǎn)　198

【同步案例8-7】：表單對(duì)象獲得失去焦點(diǎn)示例　198

8.3.3　提交表單　199

【同步案例8-8】：表單提交案例　200

8.3.4　重置表單　201

【同步案例8-9】：重置表單示例　201

8.3.5　驗(yàn)證表單　202

【同步案例8-10】：驗(yàn)證表單文本框提交內(nèi)容的合法性　202

8.4　【綜合案例10】：在線調(diào)查問卷　203

【知識(shí)點(diǎn)提煉】　205

【訓(xùn)練8】　205

第9章　Ajax初步

9.1　什么是Ajax　209

9.2　Ajax編程基礎(chǔ)　209

9.2.1　初始化XMLHttpRequest　209

9.2.2　XMLHttpRequest對(duì)象的常用屬性　210

9.2.3　XMLHttpRequest對(duì)象的常用方法　210

9.2.4　FormData對(duì)象　211

9.3　Ajax應(yīng)用案例　211

9.3.1　不刷新頁(yè)面提交表單數(shù)據(jù)　211

9.3.2　通過FormData上傳文件　214

【知識(shí)點(diǎn)提煉】　216

【訓(xùn)練9】　216

第　10章 JavaScript特效

10.1　頁(yè)面導(dǎo)航欄特效　219

10.1.1　樹形目錄式導(dǎo)航菜單設(shè)計(jì)　219

10.1.2　帶有注釋的導(dǎo)航菜單設(shè)計(jì)　220

10.1.3　下拉式導(dǎo)航菜單設(shè)計(jì)　221

10.2　頁(yè)面文本特效　224

10.2.1　以打字效果滾動(dòng)顯示文本　224

10.2.2　隨機(jī)顯示文字牌　226

10.2.3　自動(dòng)滾屏的文本　227

10.3　圖形特效　229

10.3.1　自動(dòng)變形的圖片特效　229

10.3.2　鼠標(biāo)單擊切換圖片　230

10.3.3　網(wǎng)頁(yè)動(dòng)態(tài)選擇圖片　231