JavaScript程序設計基礎與實戰

陳承歡，三級教授，高級工程師，軟件設計師，湖南省省級專業帶頭人，湖南省青年骨幹教師，武漢大學軟件工程專業，湖南鐵道職業技術學院教務處處長。2008年，曾赴澳大利亞坎培門理工學院培訓交流，2015年，曾赴加拿大聖力嘉學院培訓交流，2019年，曾赴英國、德國學習交流。主持開發職業教育特色教材50多本，其中國家級“十一五”規劃教材4本，國家級“十二五”規劃教材10本，國家級“十三五”規劃教材7本。國家精品課程與國家精品共享課程配套教材1本，國家職業教育資源庫配套教材3本。主持《網頁設計與制作》國家精品課程，主持《網頁設計與制作》國家精品共享課程，主持《計算機維護與維修》、《實用工具軟件應用》、《網頁樣式設計》3門國家資源庫課程。國家級教學成果獎二等獎1項，湖南省職業教育教學成果獎特等獎1項、三等獎1項，湖南省教育教學改革發展優秀成果獎參等獎1項。

模塊1　JavaScript知識入門及應用　1

知識啟航　1

1.1　JavaScript簡介　1

1.2　初識ECMAScript 6.0　2

1.3　JavaScript常用的開發工具和框架　2

1.4　ECMAScript的基本語法規則　3

1.5　JavaScript的註釋　6

1.6　在HTML文檔中嵌入JavaScript代碼的方法　6

1.7　JavaScript的功能展示　9

1.8　JavaScript的輸出　11

1.9　JavaScript的消息框　12

1.10　JavaScript庫　13

1.11　jQuery簡介　14

1.12　JavaScript和jQuery的使用比較　15

1.13　jQuery的選擇器　16

1.14　jQuery的鏈式操作　16

實戰演練　17

【任務1-1】使用JavaScript實現具有手風琴效果的橫向焦點圖片輪換　17

【任務1-2】使用jQuery實現動態改變購買數量　20

在線評測　22

模塊2　JavaScript編程基礎及應用　23

知識啟航　23

2.1　ECMAScript的關鍵字與保留字　23

2.2　JavaScript的常量　24

2.3　JavaScript的變量　27

2.4　JavaScript的數據類型　30

2.5　typeof運算符與數據類型的檢測　32

2.6　JavaScript數據類型的轉換　33

2.7　字符串的基本操作　34

2.8　JavaScript的運算符與表達式　35

實戰演練　39

【任務2-1】實現動態加載網頁內容　39

【任務2-2】實現文本圍繞鼠標指針旋轉　41

在線評測　43

模塊3　JavaScript流程控制及應用　44

知識啟航　44

3.1　JavaScript的條件語句　44

3.2　JavaScript的循環語句　48

實戰演練　54

【任務3-1】在不同的節日顯示對應的問候語　54

【任務3-2】在不同時間段顯示不同的問候語　55

【任務3-3】一周內每天顯示不同的圖片　56

【任務3-4】實現鼠標指針滑過時動態改變顯示內容及其外觀效果　57

【任務3-5】實現縱向焦點圖片輪換　59

在線評測　64

模塊4　JavaScript函數編程及應用　65

知識啟航　65

4.1　JavaScript的函數　65

4.2　JavaScript的計時方法　73

實戰演練　76

【任務4-1】實現動態改變樣式　76

【任務4-2】實現動態改變網頁字體大小及關閉網頁窗口　77

【任務4-3】實現滾動網頁標題欄中的文本　78

在線評測　80

模塊5　JavaScript對象編程及應用　81

知識啟航　81

5.1　JavaScript的字符串對象及方法　81

5.2　JavaScript的數值對象及方法　85

5.3　JavaScript的日期對象及方法　88

5.4　JavaScript的數組對象及方法　92

5.5　JavaScript的自定義對象　96

5.6　ES6使用class構造對象　100

5.7　JavaScript的this指針　102

5.8　JavaScript的正則表達式與應用　104

5.9　JavaScript的RegExp對象及其方法　106

5.10　支持正則表達式的String對象的方法　108

實戰演練　112

【任務5-1】在特定日期範圍內顯示打折促銷信息　112

【任務5-2】實現在線考試倒計時　113

【任務5-3】顯示常規格式的當前日期和時間　115

【任務5-4】采用多種方式顯示當前的日期及星期數　116

【任務5-5】顯示限定格式的日期　117

【任務5-6】驗證日期數據的有效性　118

在線評測　121

模塊6　JavaScript對象模型及應用　122

知識啟航　122

6.1　JavaScript的document對象及操作　122

6.2　JavaScript的瀏覽器對象及操作　128

6.3　JavaScript的尺寸與位置及其設置方法　131

6.3.1　網頁元素的寬度和高度　131

6.3.2　網頁元素的位置　135

6.3.3　通過網頁元素的樣式屬性style獲取或設置元素的尺寸和位置　140

實戰演練　141

【任務6-1】實現郵箱自動導航　141

【任務6-2】實現網頁內容折疊與展開　142

【任務6-3】實現註冊表單中的網頁特效　144

在線評測　150

模塊7　JavaScript事件處理及應用　151

知識啟航　151

7.1　認識JavaScript的事件　151

7.2　JavaScript的鼠標事件和鍵盤事件　152

7.3　頁面事件　152

7.4　表單及表單控件事件　152

7.5　編輯事件　153

7.6　event對象　153

7.7　DOM事件的使用比較　154

7.8　JavaScript的事件方法　156

實戰演練　156

【任務7-1】實現網頁中的橫向導航菜單　156

【任務7-2】實現網頁中圖片連續向上滾動　158

【任務7-3】實現下拉窗格的打開與自動隱藏　159

【任務7-4】實現限制圖片尺寸與滑動鼠標滾輪調整圖片尺寸　162

在線評測　163

模塊8　JavaScript編程技巧及應用　164

知識啟航　164

8.1　養成良好的JavaScript編程習慣　164

8.2　編寫JavaScript程序時可能存在的誤區　166

8.3　優化JavaScript代碼與提升程序性能　170

8.4　JavaScript的異常處理　171

8.5　JavaScript代碼的調試　173

8.6　變量的解構賦值　174

8.7　JSON及其使用方法　175

8.8　正確使用cookie　178

實戰演練　180

【任務8-1】應用HTML元素的樣式屬性實現橫向導航菜單　180

【任務8-2】實現獲取表單控件的設置值　182

【任務8-3】實現具有濾鏡效果的橫向焦點圖片輪換　186

【任務8-4】實現帶縮略圖且雙向移動的橫向焦點圖片輪換　190

【任務8-5】實現網頁圖片拖曳　193

在線評測　196