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

第　1章 初識JavaScript

1.1　JavaScript簡介　2

1.1.1　JavaScript的發(fā)展概況和特點　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】：隨機抽獎小程序　7

【知識點提煉】　8

【訓(xùn)練1】　8

第　2章 JavaScript語言基礎(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)識符　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求圓的周長　16

2.3　運算符　17

2.3.1　算術(shù)運算符　18

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

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

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

2.3.3　賦值運算符　20

【同步案例2-6】：賦值運算符使用示例　21

2.3.4　邏輯運算符　22

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

2.3.5　條件運算符　23

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

2.3.6　其他運算符　24

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

2.4　表達式　25

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

【知識點提煉】　27

【訓(xùn)練2】　28

第3章　流程控制語句

3.1　消息對話框　31

3.1.1　警示對話框　31

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

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

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

3.1.3　提示對話框　33

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

3.2　注釋　34

3.2.1　單行注釋符　34

3.2.2　多行注釋符　35

3.3　條件分支語句　35

3.3.1　if語句　35

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

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

3.3.2　switch語句　40

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

3.3.3　if語句嵌套　42

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

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

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

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

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

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

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

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

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

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

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

3.5　continue和break語句　51

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

break來控制程序是否繼續(xù)運行　51

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

【知識點提煉】　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】：定義一個函數(shù)，能夠在頁面上輸出字符串　62

【同步案例4-4】：定義函數(shù)，實現(xiàn)計算商品總價　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)計商品的總價　65

【同步案例4-8】：通過函數(shù)返回值求出兩個數(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ù)值實現(xiàn)不同層數(shù)的三角形“*”圖案的函數(shù)　70

【知識點提煉】　71

【訓(xùn)練4】　72

第5章　對象

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

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

5.1.2　對象　75

5.1.3　類　76

5.1.4　JavaScript對象框架　76

5.2　內(nèi)置對象　76

5.2.1　Object對象類　77

5.2.2　Date對象類　77

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

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

5.2.3　String對象類　80

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

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

5.2.4　Math對象　93

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

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

5.2.5　Number對象　96

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

5.3　自定義對象　97

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

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

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

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

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

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

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

5.3.4　通過Function對象定義方法　105

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

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

5.3.5　通過原型對象（prototype）定義方法　108

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

5.3.6　通過for…in語句訪問對象的屬性　110

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

5.3.7　with語句訪問對象的屬性和方法　111

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

5.3.8　繼承　112

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

5.4　數(shù)組對象　114

5.4.1　什么是數(shù)組　114

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

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

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

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

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

5.4.4　數(shù)組的訪問　118

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

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

5.6　【綜合案例6】：倒計時廣告牌　122

【知識點提煉】　124

【訓(xùn)練5】　124

第6章　BOM和DOM

6.1　認(rèn)識BOM　127

6.2　Window對象　127

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

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

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

6.3　Navigator對象　132

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

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

6.4　Document對象　135

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

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

6.5　DOM對象　138

6.5.1　什么是DOM　138

6.5.2　DOM的節(jié)點樹　138

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

6.6　DOM對象的分類　140

6.7　訪問DOM對象　143

6.7.1　訪問集合對象的方法　143

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

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

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

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

6.8　操縱DOM對象　146

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

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

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

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

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

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

6.8.4　移動DOM元素節(jié)點　151

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

第　一個元素移到末尾　151

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

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

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

【知識點提煉】　156

【訓(xùn)練6】　157

第7章　事件及事件處理

7.1　事件的概念　160

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

7.1.2　事件綁定　161

【同步案例7-1】：單擊頁面上兩個按鈕，顯示不同的問候語　162

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

7.2　事件對象　165

7.2.1　Event對象　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)移入和移出時在頁面顯示不同的圖形　169

7.4　處理鍵盤事件　170

7.4.1　鍵盤事件　170

7.4.2　鍵盤的鍵碼值　170

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

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

7.5　處理頁面事件　174

7.5.1　頁面加載與卸載事件　174

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

7.5.2　頁面大小事件　177

7.6　處理文本編輯事件　178

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

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

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

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

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

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

【知識點提煉】　184

【訓(xùn)練7】　185

第8章　表單和表單對象

8.1　表單和表單對象　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)建會員注冊表單　190

8.2　訪問表單和表單元素　192

8.2.1　通過表單的ID來訪問表單　192

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

8.2.2　通過表單名稱來訪問表單　193

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

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

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

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

8.3　操作表單對象　197

8.3.1　禁用和啟用表單對象　197

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

8.3.2　表單對象獲得和失去焦點　198

【同步案例8-7】：表單對象獲得失去焦點示例　198

8.3.3　提交表單　199

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

8.3.4　重置表單　201

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

8.3.5　驗證表單　202

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

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

【知識點提煉】　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對象的常用屬性　210

9.2.3　XMLHttpRequest對象的常用方法　210

9.2.4　FormData對象　211

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

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

9.3.2　通過FormData上傳文件　214

【知識點提煉】　216

【訓(xùn)練9】　216

第　10章 JavaScript特效

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

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

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

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

10.2　頁面文本特效　224

10.2.1　以打字效果滾動顯示文本　224

10.2.2　隨機顯示文字牌　226

10.2.3　自動滾屏的文本　227

10.3　圖形特效　229

10.3.1　自動變形的圖片特效　229

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

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