《從零開始學JavaScript》是化學工業出版社於2022年出版的書籍，作者是明日科技編著。
基本介紹
- 中文名：從零開始學JavaScript
- 作者：明日科技
- 語言：漢文
- 出版時間：2022年6月1日
- 出版社：化學工業出版社
- 頁數：365 頁
- ISBN：9787122405500
- 開本：16 開
- 裝幀：平裝
內容簡介,目錄,
內容簡介
本書從零基礎讀者的角度出發，通過通俗易懂的語言、豐富多彩的實例，循序漸進地讓讀者在實踐中學榆凶茅習JavaScript編程知識，並提升自己的實際開發能力。 全書共分為4篇25章，內容包括JavaScript簡介、JavaScript語言基礎、條件判斷語句、循環控制語句、函式、自定義對象、Math對象和Date對象、數組、String對象、JavaScript事件處理、文檔對象、表單項組員對象、圖像對象、文檔對象模型（DOM）、Window對象、Style對象、JavaScript中使用XML、Ajax技術、jQuery基礎、jQuery控制頁戀享采府面、jQuery的事件處理、jQuery的動畫效果、Vue.js基礎、幸運大抽獎潤才乎、51購商城等。書中知墊束騙祖識點講解細緻，側重介紹每個知識點的使用場景，涉及的代碼給出了詳細的注釋，可以使讀者輕鬆領會JavaScript程式開發的精髓，快速提高開發技能。同時，本書配套了大量教學視頻，掃碼即可觀看，還提供所有程式源檔案，方便讀者實踐。 本書適合JavaScript初學者、軟體開發入門者自學使用，也可用作高等院校相關專業的教材及參考書。
目錄
第1篇 基礎知識篇
第1章 JavaScript簡介 2 視頻講解：6節才紙兆，50分鐘
1.1 JavaScript簡述 3
1.2 WebStorm的下載與安裝 5
1.3 JavaScript在HTML中的使用 8
1.3.1 在頁面中直接嵌入JavaScript代碼 8
【實例1.1】 編寫第一個JavaScript程式 9
1.3.2 連結外部JavaScript檔案 11
【實例1.2】 調用外部JavaScript檔案 11
1.3.3 作為標籤的屬性值使用 12
1.4 JavaScript基本語法 13
本章知識思維導圖 15
第2章 JavaScript語言基礎 16 視頻講解：15節，135分鐘
2.1 數據類型 17
2.1.1 數值型 17
2.1.2 字元串型 19
【實例2.1】 輸出奧尼爾的中文名、英文名和別名 20
2.1.3 布爾型 21
2.1.4 特殊數據類型 22
2.2 變數 22
2.2.1 變數的命名 22
2.2.2 變數的聲明 23
2.2.3 變數的賦值 23
2.2.4 變數的類型 24
【實例2.2】 輸出球員信息 25
2.3 運算符 25
2.3.1 算術運算符 25
【實例2.3】 將華氏度轉換為攝氏度 26
2.3.2 字元串運算符 26
【實例2.4】 字元串運算符的使用 27
2.3.3 比較運算符 27
【實例2.5】 比較運算符的使用 28
2.3.4 賦值運算符 28
【實例2.6】 賦值運算符的使用 29
2.3.5 邏輯運算符 29
【實例2.7】 邏輯運算符的使用 30
2.3.6 條件運算符 30
【實例2.8】 條件運算符的使用 30
2.3.7 其他運算符 31
2.3.8 運算符優先權 32
【實例2.9】 運算符優先權的使用 33
2.4 表達式 33
2.5 數據類型的轉換規則 34
本章知識思維導圖 36
第3章 條拘臭件判斷語句 37 視頻講解：5節，49分鐘
3.1 if語句 38
3.1.1 簡單if語句 38
【實例3.1】 獲取3個數中的最大值 39
3.1.2 if…else語句 39
【實例3.2】 判斷2022年2月份的天數 40
3.1.3 if…else if語句 40
【實例3.3】 輸出考試成績對應的等級 41
3.1.4 if語句的嵌套 42
【實例3.4】 判斷女職工是否已經退休 42
3.2 switch語句 43
【實例3.5】 輸出獎項級別及獎品 44
本章知識思維導圖 45
第4章 循環控制語句 46 視頻講解：6節，56分鐘
4.1 循環語句 47
4.1.1 while語句 47
【實例4.1】 計算1500米比賽的完整圈數 48
4.1.2 do…while語句 48
【實例4.2】 計算1+2+…+100的和 49
4.1.3 for語句 49
【實例4.3】 計算100以內所有偶數的和 51
4.1.4 循環語句的嵌套 51
【實例4.4】 輸出乘法口訣表 51
4.2 跳轉語句 52
4.2.1 continue語句 52
【實例4.5】 輸出影廳座點陣圖 52
4.2.2 break語句 53
本章知識思維導圖 54
第5章 函式 55 視頻講解：13節，80分鐘
5.1 函式的定義和調用 56
5.1.1 函式的定義 56
5.1.2 函式的調用 57
5.2 函式的參數 58
【實例5.1】 輸出圖書名稱和圖書作者 59
5.3 函式的返回值 59
【實例5.2】 計算購物車中商品總價 60
5.4 嵌套函式 60
5.4.1 函式的嵌套定義 60
5.4.2 函式的嵌套調用 61
【實例5.3】 獲得選手的平均分 61
5.5 遞歸函式 62
5.6 變數的作用域 62
5.6.1 全局變數和局部變數 62
5.6.2 變數的優先權 63
5.7 內置函式 63
5.7.1 數值處理函式 64
5.7.2 字元串處理函式 66
5.8 定義匿名函式 67
5.8.1 在表達式中定義函式 67
【實例5.4】 輸出星號金字塔形圖案 68
5.8.2 使用Function()構造函式 68
本章知識思維導圖 69
第6章 自定義對象 70 視頻講解：8節，71分鐘
6.1 對象簡介 71
6.1.1 什麼是對象 71
6.1.2 對象的屬性和方法 71
6.1.3 JavaScript對象的種類 72
6.2 自定義對象的創建 72
6.2.1 直接創建自定義對象 72
6.2.2 通過自定義構造函式創建對象 73
【實例6.1】 創建一個球員對象 74
【實例6.2】 輸出演員個人簡介 75
【實例6.3】 創建一個圓的對象 76
6.2.3 通過Object對象創建自定義對象 76
【實例6.4】 創建一個圖書對象 78
6.3 對象訪問語句 78
6.3.1 for…in語句 78
6.3.2 with語句 79
本章知識思維導圖 80
第7章 Math對象和Date對象 81 視頻講解：2節，58分鐘
7.1 Math對象 82
7.1.1 Math對象的屬性 82
7.1.2 Math對象的方法 82
【實例7.1】 生成指定位數的隨機數 83
7.2 Date對象 84
7.2.1 創建Date對象 84
7.2.2 Date對象的屬性 85
7.2.3 Date對象的方法 86
【實例7.2】 輸出當前的日期和時間 87
【實例7.3】 獲取當前日期距離明年元旦的天數 89
本章知識思維導圖 90
第8章 數組 91 視頻講解：14節，111分鐘
8.1 數組介紹 92
8.2 定義數組 92
8.2.1 定義空數組 92
8.2.2 指定數組長度 93
8.2.3 指定數組元素 93
8.2.4 直接定義數組 94
8.3 運算元組元素 94
8.3.1 數組元素的輸入和輸出 94
【實例8.1】 輸出3個學霸姓名 96
8.3.2 數組元素的添加 96
8.3.3 數組元素的刪除 97
8.4 數組的屬性 97
8.4.1 length屬性 97
【實例8.2】 輸出省份、省會以及旅遊景點 98
8.4.2 prototype屬性 99
【實例8.3】 套用自定義方法輸出數組 99
8.5 數組的方法 99
8.5.1 數組的添加和刪除 100
8.5.2 設定數組的排列順序 103
【實例8.4】 輸出2020年電影票房排行榜前五名 105
8.5.3 獲取某段數組元素 105
【實例8.5】 計算選手的最終得分 106
8.5.4 數組轉換成字元串 107
本章知識思維導圖 108
第9章 String對象 109 視頻講解：9節，65分鐘
9.1 String對象的創建 110
9.2 String對象的屬性 110
9.2.1 length屬性 110
【實例9.1】 為金庸小說人物名稱按字數分類 111
9.2.2 constructor屬性 111
9.2.3 prototype屬性 112
9.3 String對象的方法 112
9.3.1 查找字元串 113
【實例9.2】 獲取字元“葡萄”在繞口令中的出現次數 114
9.3.2 截取字元串 115
【實例9.3】 截取網站公告標題 116
9.3.3 大小寫轉換 117
9.3.4 連線和拆分 118
【實例9.4】 輸出梁山好漢人物信息 119
9.3.5 格式化字元串 120
本章知識思維導圖 122
第2篇 核心技術篇
第10章 JavaScript事件處理 124 視頻講解：13節，45分鐘
10.1 事件與事件處理概述 125
10.1.1 什麼是事件 125
10.1.2 JavaScript的常用事件 125
10.1.3 事件的調用 126
10.1.4 Event對象 127
10.2 表單相關事件 127
10.2.1 獲得焦點與失去焦點事件 128
【實例10.1】 改變文本框的背景顏色 128
10.2.2 失去焦點內容改變事件 129
【實例10.2】 改變文本框的字型顏色 129
10.2.3 表單提交與重置事件 129
【實例10.3】 驗證提交表單中是否有空值 130
10.3 滑鼠鍵盤事件 130
10.3.1 滑鼠單擊事件 131
【實例10.4】 動態改變頁面的背景顏色 131
10.3.2 滑鼠按下和鬆開事件 131
【實例10.5】 用事件模擬超連結標記的功能 132
10.3.3 滑鼠移入移出事件 132
【實例10.6】 動態改變圖片的焦點 132
10.3.4 滑鼠移動事件 133
10.3.5 鍵盤事件 133
【實例10.7】 實現單擊“A”鍵刷新的功能 135
10.4 頁面事件 135
10.4.1 頁面載入事件 136
【實例10.8】 動態改變圖片大小 136
10.4.2 頁面大小事件 136
本章知識思維導圖 137
第11章 文檔對象 138 視頻講解：7節，39分鐘
11.1 文檔對象概述 139
11.2 文檔對象的套用 140
11.2.1 設定文檔前景色和背景色 140
【實例11.1】 動態改變文檔的前景色和背景色 140
11.2.2 設定動態標題欄 141
【實例11.2】 實現動態標題欄 141
11.2.3 獲取URL 142
【實例11.3】 顯示當前頁面的URL 142
11.2.4 在文檔中輸出數據 142
11.2.5 動態添加一個HTML標記 143
【實例11.4】 動態添加文本框 143
11.2.6 獲取文本框並修改其內容 144
本章知識思維導圖 145
第12章 表單對象 146 視頻講解：7節，46分鐘
12.1 訪問表單與表單元素 147
12.1.1 JavaScript訪問表單 147
12.1.2 JavaScript訪問表單元素 147
12.2 表單對象的屬性、方法與事件 148
12.3 表單元素 148
12.3.1 文本框 149
【實例12.1】 驗證表單內容是否為空 149
12.3.2 按鈕 150
【實例12.2】 獲取表單元素的值 151
12.3.3 單選按鈕和複選框 152
【實例12.3】 獲取人物信息 153
12.3.4 下拉選單 153
【實例12.4】 製作簡單的選擇職位的程式 155
本章知識思維導圖 157
第13章 圖像對象 158 視頻講解：9節，55分鐘
13.1 圖像對象概述 159
13.1.1 圖像對象介紹 159
13.1.2 圖像對象的屬性 159
【實例13.1】 輸出圖片的基本信息 160
13.1.3 圖像對象的事件 160
【實例13.2】 當滑鼠指向圖片時實現圖片置換 160
13.2 圖像對象的套用 161
13.2.1 圖片的隨機顯示 161
【實例13.3】 實現網頁背景的隨機變化 161
13.2.2 圖片置頂 162
【實例13.4】 實現圖片總置於頂端的功能 163
13.2.3 圖片驗證碼 163
【實例13.5】 隨機生成圖片驗證碼 163
13.2.4 圖像的預裝載 164
【實例13.6】 使用預裝載圖像製作幻燈效果 165
13.2.5 圖片漸變效果 166
【實例13.7】 圖片漸變效果 166
13.2.6 進度條的顯示 167
【實例13.8】 進度條的顯示 167
本章知識思維導圖 168
第14章 文檔對象模型（DOM） 169 視頻講解：11節，41分鐘
14.1 DOM概述 170
14.2 DOM對象節點屬性 171
14.3 節點的操作 171
14.3.1 創建節點 172
【實例14.1】 補全古詩 172
14.3.2 插入節點 173
【實例14.2】 向頁面中插入文本 173
14.3.3 複製節點 174
【實例14.3】 複製下拉選單 174
14.3.4 刪除節點 175
【實例14.4】 動態刪除選中的文本 175
14.3.5 替換節點 176
【實例14.5】 替換標記和文本 176
14.4 獲取文檔中的指定元素 176
14.4.1 通過元素的id屬性獲取元素 177
【實例14.6】 在頁面的指定位置顯示當前日期 177
14.4.2 通過元素的name屬性獲取元素 177
【實例14.7】 實現電影圖片的輪換效果 178
14.5 與DHTML相對應的DOM 178
14.5.1 innerHTML和innerText屬性 179
【實例14.8】 顯示時間和問候語 179
14.5.2 outerHTML和outerText屬性 180
本章知識思維導圖 181
第15章 Window對象 182 視頻講解：14節，54分鐘
15.1 Window對象概述 183
15.1.1 Window對象的屬性 183
15.1.2 Window對象的方法 183
15.1.3 Window對象的使用 184
15.2 對話框 184
15.2.1 警告對話框 185
【實例15.1】 彈出警告對話框 185
15.2.2 確認對話框 185
【實例15.2】 彈出確認對話框 186
15.2.3 提示對話框 186
15.3 打開與關閉視窗 187
15.3.1 打開視窗 187
【實例15.3】 彈出指定大小和位置的新視窗 188
15.3.2 關閉視窗 188
【實例15.4】 關閉子視窗時自動刷新父視窗 189
15.4 控制視窗 190
15.4.1 移動視窗 190
【實例15.5】 控制彈出視窗的居中顯示 191
15.4.2 視窗滾動 192
15.4.3 改變視窗大小 193
【實例15.6】 動態改變視窗的大小 193
15.4.4 訪問視窗歷史 194
15.4.5 設定逾時 195
【實例15.7】 動態顯示日期和時間 195
15.5 通用視窗事件 196
本章知識思維導圖 197
第16章 Style對象 198 視頻講解：2節，29分鐘
16.1 Style對象簡介 199
16.2 Style對象的樣式標籤屬性和樣式屬性 199
16.2.1 樣式標籤屬性和樣式屬性 199
16.2.2 顏色和背景屬性 202
【實例16.1】 選中的行背景變色 202
【實例16.2】 背景固定居中 204
16.2.3 框線屬性 205
【實例16.3】 單元格框線變色 205
【實例16.4】 立體視窗 207
16.2.4 定位屬性 207
【實例16.5】 百葉窗 208
【實例16.6】 煙花效果 209
【實例16.7】 跟隨滑鼠指針移動的圖片 211
16.2.5 字型屬性 212
【實例16.8】 改變超連結字型樣式 214
16.2.6 表格布局屬性 215
【實例16.9】 限制表格的寬度 216
本章知識思維導圖 217
第3篇 高級套用篇
第17章 JavaScript中使用XML 220 視頻講解：8節，40分鐘
17.1 XML簡介 221
17.1.1 創建XML 221
【實例17.1】 XML文檔的創建 221
17.1.2 DOM與XML 222
17.2 解析XML文本 223
17.2.1 在IE瀏覽器中解析XML文本 223
17.2.2 在非IE瀏覽器中解析XML文本 224
【實例17.2】 獲取XML文本中的數據 225
17.3 讀取XML數據 226
17.3.1 獲取XML元素的屬性值 226
【實例17.3】 獲取XML元素的屬性值 226
17.3.2 通過DOM元素的方法讀取XML數據 227
【實例17.4】 套用名稱訪問XML數據 227
17.3.3 在表格中讀取XML數據 229
【實例17.5】 在表格中讀取XML數據 229
17.3.4 通過JavaScript操作XML實現分頁 231
【實例17.6】 對讀取的XML數據進行分頁操作 231
本章知識思維導圖 233
第18章 Ajax技術 234 視頻講解：11節，31分鐘
18.1 Ajax概述 235
18.1.1 Ajax套用案例 235
18.1.2 Ajax的開發模式 235
18.1.3 Ajax的優點 236
18.2 Ajax的技術組成 237
18.2.1 XMLHttpRequest對象 237
18.2.2 XML語言 237
18.2.3 JavaScript腳本語言 239
18.2.4 DOM 239
18.2.5 CSS 239
18.3 XMLHttpRequest對象 239
18.3.1 XMLHttpRequest對象的初始化 239
18.3.2 XMLHttpRequest對象的常用屬性 240
18.3.3 XMLHttpRequest對象的常用方法 242
【實例18.1】 讀取HTML檔案 244
本章知識思維導圖 246
第19章 jQuery基礎 247 視頻講解：8節，61分鐘
19.1 jQuery概述 248
19.2 jQuery下載與配置 248
19.2.1 下載jQuery 248
19.2.2 配置jQuery 249
19.3 jQuery選擇器 249
19.3.1 jQuery的工廠函式 250
19.3.2 基本選擇器 250
【實例19.1】 獲取文本框中輸入的值 250
【實例19.2】 修改div元素的內容 252
【實例19.3】 獲取元素並設定CSS樣式 253
【實例19.4】 篩選元素並添加新的樣式 255
19.3.3 層級選擇器 256
【實例19.5】 為著作權列表設定樣式 257
【實例19.6】 為表單元素換膚 258
【實例19.7】 改變匹配元素的背景顏色 260
【實例19.8】 篩選div元素的同輩元素 261
19.3.4 過濾選擇器 262
【實例19.9】 實現一個帶表頭的雙色表格 263
【實例19.10】 套用內容過濾器匹配不同的單元格 265
【實例19.11】 利用表單對象的屬性過濾器匹配元素 267
19.3.5 屬性選擇器 268
19.3.6 表單選擇器 269
【實例19.12】 利用表單選擇器匹配元素 269
本章知識思維導圖 271
第20章 jQuery控制頁面 272 視頻講解：4節，34分鐘
20.1 對元素內容和值進行操作 273
20.1.1 對元素內容操作 273
【實例20.1】 對元素內容進行設定 274
20.1.2 對元素值操作 275
【實例20.2】 為多行列表框設定並獲取值 275
20.2 對DOM節點進行操作 276
20.2.1 創建節點 276
20.2.2 插入節點 276
20.2.3 刪除、複製與替換節點 278
【實例20.3】 我的開心小農場 279
20.3 對元素屬性進行操作 281
【實例20.4】 改變圖片大小 282
20.4 對元素的CSS樣式進行操作 282
20.4.1 通過修改CSS類實現 283
【實例20.5】 改變文本樣式 283
20.4.2 通過修改CSS屬性實現 284
【實例20.6】 為圖片添加和去除框線 285
本章知識思維導圖 286
第21章 jQuery的事件處理 287 視頻講解：4節，14分鐘
21.1 頁面載入回響事件 288
21.2 jQuery中的事件 288
【實例21.1】 橫嚮導航選單 290
21.3 事件綁定 292
21.3.1 為元素綁定事件 292
【實例21.2】 表格的動態換膚 292
21.3.2 移除綁定 293
21.3.3 綁定一次性事件處理 293
21.4 模擬用戶操作 294
21.4.1 模擬用戶的操作觸發事件 294
【實例21.3】 模擬用戶單擊事件 294
21.4.2 模仿懸停事件 294
【實例21.4】 切換表情圖片 295
本章知識思維導圖 296
第22章 jQuery的動畫效果 297 視頻講解：4節，26分鐘
22.1 基本的動畫效果 298
22.1.1 隱藏匹配元素 298
22.1.2 顯示匹配元素 298
【實例22.1】 實現自動隱藏式選單 299
22.2 淡入、淡出的動畫效果 300
22.3 滑動效果 301
22.3.1 滑動顯示匹配的元素 302
22.3.2 滑動隱藏匹配的元素 302
22.3.3 通過高度的變化動態切換元素的可見性 302
【實例22.2】 實現伸縮式導航選單 303
22.4 自定義的動畫效果 305
22.4.1 使用animate()方法創建自定義動畫 305
【實例22.3】 實現幕簾的效果 306
22.4.2 使用stop()方法停止動畫 308
本章知識思維導圖 308
第23章 Vue.js基礎 309 視頻講解：11節，86分鐘
23.1 什麼是Vue.js 310
23.2 Vue.js的安裝 311
23.2.1 直接下載並使用<script>標籤引入 311
23.2.2 使用CDN方法 312
23.2.3 使用NPM方法 312
23.3 Vue實例及選項 312
23.3.1 掛載元素 312
23.3.2 數據 312
23.3.3 方法 314
23.3.4 生命周期鉤子函式 314
23.4 數據綁定 315
23.4.1 插值 315
【實例23.1】 插入文本 315
【實例23.2】 插入HTML內容 316
23.4.2 過濾器 317
【實例23.3】 截取新聞標題 317
23.5 指令 318
23.5.1 v-bind指令 318
【實例23.4】 設定文字樣式 318
23.5.2 v-on指令 319
【實例23.5】 動態改變圖片透明度 319
23.5.3 v-if指令 320
23.5.4 v-else指令 321
【實例23.6】 判斷2022年2月份的天數 322
23.5.5 v-else-if指令 322
【實例23.7】 判斷考試成績 323
23.5.6 v-for指令 324
23.5.7 v-model指令 326
本章知識思維導圖 328
第4篇 項目開發篇
第24章 幸運大抽獎 330 視頻講解：1節，2分鐘
24.1 功能描述 331
24.2 設計思路 331
24.3 開發過程 332
24.3.1 抽獎界面設計 332
24.3.2 為抽獎頁面添加樣式 333
24.3.3 抽獎功能的實現 334
本章知識思維導圖 337
第25章 51購商城 338 視頻講解：24節，64分鐘
25.1 項目的設計思路 339
25.1.1 項目概述 339
25.1.2 界面預覽 339
25.1.3 功能結構 341
25.1.4 資料夾組織結構 341
25.2 主頁的設計與實現 341
25.2.1 主頁的設計 342
25.2.2 頂部區和底部區功能的實現 342
25.2.3 商品分類導航功能的實現 344
25.2.4 輪播圖功能的實現 346
25.2.5 商品推薦功能的實現 347
25.2.6 適配移動端的實現 348
25.3 商品列表頁面的設計與實現 349
25.3.1 商品列表頁面的設計 349
25.3.2 分類選項功能的實現 350
25.3.3 商品列表區的實現 350
25.4 商品詳情頁面的設計與實現 352
25.4.1 商品詳情頁面的設計 352
25.4.2 商品概要功能的實現 353
25.4.3 商品評價功能的實現 354
25.4.4 猜你喜歡功能的實現 356
25.5 購物車頁面的設計與實現 357
25.5.1 購物車頁面的設計 357
25.5.2 購物車頁面的實現 358
25.6 付款頁面的設計與實現 358
25.6.1 付款頁面的設計 359
25.6.2 付款頁面的實現 359
25.7 登錄註冊頁面的設計與實現 360
25.7.1 登錄註冊頁面的設計 361
25.7.2 登錄頁面的實現 362
25.7.3 註冊頁面的實現 363
本章知識思維導圖 365
【實例2.4】 字元串運算符的使用 27
2.3.3 比較運算符 27
【實例2.5】 比較運算符的使用 28
2.3.4 賦值運算符 28
【實例2.6】 賦值運算符的使用 29
2.3.5 邏輯運算符 29
【實例2.7】 邏輯運算符的使用 30
2.3.6 條件運算符 30
【實例2.8】 條件運算符的使用 30
2.3.7 其他運算符 31
2.3.8 運算符優先權 32
【實例2.9】 運算符優先權的使用 33
2.4 表達式 33
2.5 數據類型的轉換規則 34
本章知識思維導圖 36
第3章 條件判斷語句 37 視頻講解：5節，49分鐘
3.1 if語句 38
3.1.1 簡單if語句 38
【實例3.1】 獲取3個數中的最大值 39
3.1.2 if…else語句 39
【實例3.2】 判斷2022年2月份的天數 40
3.1.3 if…else if語句 40
【實例3.3】 輸出考試成績對應的等級 41
3.1.4 if語句的嵌套 42
【實例3.4】 判斷女職工是否已經退休 42
3.2 switch語句 43
【實例3.5】 輸出獎項級別及獎品 44
本章知識思維導圖 45
第4章 循環控制語句 46 視頻講解：6節，56分鐘
4.1 循環語句 47
4.1.1 while語句 47
【實例4.1】 計算1500米比賽的完整圈數 48
4.1.2 do…while語句 48
【實例4.2】 計算1+2+…+100的和 49
4.1.3 for語句 49
【實例4.3】 計算100以內所有偶數的和 51
4.1.4 循環語句的嵌套 51
【實例4.4】 輸出乘法口訣表 51
4.2 跳轉語句 52
4.2.1 continue語句 52
【實例4.5】 輸出影廳座點陣圖 52
4.2.2 break語句 53
本章知識思維導圖 54
第5章 函式 55 視頻講解：13節，80分鐘
5.1 函式的定義和調用 56
5.1.1 函式的定義 56
5.1.2 函式的調用 57
5.2 函式的參數 58
【實例5.1】 輸出圖書名稱和圖書作者 59
5.3 函式的返回值 59
【實例5.2】 計算購物車中商品總價 60
5.4 嵌套函式 60
5.4.1 函式的嵌套定義 60
5.4.2 函式的嵌套調用 61
【實例5.3】 獲得選手的平均分 61
5.5 遞歸函式 62
5.6 變數的作用域 62
5.6.1 全局變數和局部變數 62
5.6.2 變數的優先權 63
5.7 內置函式 63
5.7.1 數值處理函式 64
5.7.2 字元串處理函式 66
5.8 定義匿名函式 67
5.8.1 在表達式中定義函式 67
【實例5.4】 輸出星號金字塔形圖案 68
5.8.2 使用Function()構造函式 68
本章知識思維導圖 69
第6章 自定義對象 70 視頻講解：8節，71分鐘
6.1 對象簡介 71
6.1.1 什麼是對象 71
6.1.2 對象的屬性和方法 71
6.1.3 JavaScript對象的種類 72
6.2 自定義對象的創建 72
6.2.1 直接創建自定義對象 72
6.2.2 通過自定義構造函式創建對象 73
【實例6.1】 創建一個球員對象 74
【實例6.2】 輸出演員個人簡介 75
【實例6.3】 創建一個圓的對象 76
6.2.3 通過Object對象創建自定義對象 76
【實例6.4】 創建一個圖書對象 78
6.3 對象訪問語句 78
6.3.1 for…in語句 78
6.3.2 with語句 79
本章知識思維導圖 80
第7章 Math對象和Date對象 81 視頻講解：2節，58分鐘
7.1 Math對象 82
7.1.1 Math對象的屬性 82
7.1.2 Math對象的方法 82
【實例7.1】 生成指定位數的隨機數 83
7.2 Date對象 84
7.2.1 創建Date對象 84
7.2.2 Date對象的屬性 85
7.2.3 Date對象的方法 86
【實例7.2】 輸出當前的日期和時間 87
【實例7.3】 獲取當前日期距離明年元旦的天數 89
本章知識思維導圖 90
第8章 數組 91 視頻講解：14節，111分鐘
8.1 數組介紹 92
8.2 定義數組 92
8.2.1 定義空數組 92
8.2.2 指定數組長度 93
8.2.3 指定數組元素 93
8.2.4 直接定義數組 94
8.3 運算元組元素 94
8.3.1 數組元素的輸入和輸出 94
【實例8.1】 輸出3個學霸姓名 96
8.3.2 數組元素的添加 96
8.3.3 數組元素的刪除 97
8.4 數組的屬性 97
8.4.1 length屬性 97
【實例8.2】 輸出省份、省會以及旅遊景點 98
8.4.2 prototype屬性 99
【實例8.3】 套用自定義方法輸出數組 99
8.5 數組的方法 99
8.5.1 數組的添加和刪除 100
8.5.2 設定數組的排列順序 103
【實例8.4】 輸出2020年電影票房排行榜前五名 105
8.5.3 獲取某段數組元素 105
【實例8.5】 計算選手的最終得分 106
8.5.4 數組轉換成字元串 107
本章知識思維導圖 108
第9章 String對象 109 視頻講解：9節，65分鐘
9.1 String對象的創建 110
9.2 String對象的屬性 110
9.2.1 length屬性 110
【實例9.1】 為金庸小說人物名稱按字數分類 111
9.2.2 constructor屬性 111
9.2.3 prototype屬性 112
9.3 String對象的方法 112
9.3.1 查找字元串 113
【實例9.2】 獲取字元“葡萄”在繞口令中的出現次數 114
9.3.2 截取字元串 115
【實例9.3】 截取網站公告標題 116
9.3.3 大小寫轉換 117
9.3.4 連線和拆分 118
【實例9.4】 輸出梁山好漢人物信息 119
9.3.5 格式化字元串 120
本章知識思維導圖 122
第2篇 核心技術篇
第10章 JavaScript事件處理 124 視頻講解：13節，45分鐘
10.1 事件與事件處理概述 125
10.1.1 什麼是事件 125
10.1.2 JavaScript的常用事件 125
10.1.3 事件的調用 126
10.1.4 Event對象 127
10.2 表單相關事件 127
10.2.1 獲得焦點與失去焦點事件 128
【實例10.1】 改變文本框的背景顏色 128
10.2.2 失去焦點內容改變事件 129
【實例10.2】 改變文本框的字型顏色 129
10.2.3 表單提交與重置事件 129
【實例10.3】 驗證提交表單中是否有空值 130
10.3 滑鼠鍵盤事件 130
10.3.1 滑鼠單擊事件 131
【實例10.4】 動態改變頁面的背景顏色 131
10.3.2 滑鼠按下和鬆開事件 131
【實例10.5】 用事件模擬超連結標記的功能 132
10.3.3 滑鼠移入移出事件 132
【實例10.6】 動態改變圖片的焦點 132
10.3.4 滑鼠移動事件 133
10.3.5 鍵盤事件 133
【實例10.7】 實現單擊“A”鍵刷新的功能 135
10.4 頁面事件 135
10.4.1 頁面載入事件 136
【實例10.8】 動態改變圖片大小 136
10.4.2 頁面大小事件 136
本章知識思維導圖 137
第11章 文檔對象 138 視頻講解：7節，39分鐘
11.1 文檔對象概述 139
11.2 文檔對象的套用 140
11.2.1 設定文檔前景色和背景色 140
【實例11.1】 動態改變文檔的前景色和背景色 140
11.2.2 設定動態標題欄 141
【實例11.2】 實現動態標題欄 141
11.2.3 獲取URL 142
【實例11.3】 顯示當前頁面的URL 142
11.2.4 在文檔中輸出數據 142
11.2.5 動態添加一個HTML標記 143
【實例11.4】 動態添加文本框 143
11.2.6 獲取文本框並修改其內容 144
本章知識思維導圖 145
第12章 表單對象 146 視頻講解：7節，46分鐘
12.1 訪問表單與表單元素 147
12.1.1 JavaScript訪問表單 147
12.1.2 JavaScript訪問表單元素 147
12.2 表單對象的屬性、方法與事件 148
12.3 表單元素 148
12.3.1 文本框 149
【實例12.1】 驗證表單內容是否為空 149
12.3.2 按鈕 150
【實例12.2】 獲取表單元素的值 151
12.3.3 單選按鈕和複選框 152
【實例12.3】 獲取人物信息 153
12.3.4 下拉選單 153
【實例12.4】 製作簡單的選擇職位的程式 155
本章知識思維導圖 157
第13章 圖像對象 158 視頻講解：9節，55分鐘
13.1 圖像對象概述 159
13.1.1 圖像對象介紹 159
13.1.2 圖像對象的屬性 159
【實例13.1】 輸出圖片的基本信息 160
13.1.3 圖像對象的事件 160
【實例13.2】 當滑鼠指向圖片時實現圖片置換 160
13.2 圖像對象的套用 161
13.2.1 圖片的隨機顯示 161
【實例13.3】 實現網頁背景的隨機變化 161
13.2.2 圖片置頂 162
【實例13.4】 實現圖片總置於頂端的功能 163
13.2.3 圖片驗證碼 163
【實例13.5】 隨機生成圖片驗證碼 163
13.2.4 圖像的預裝載 164
【實例13.6】 使用預裝載圖像製作幻燈效果 165
13.2.5 圖片漸變效果 166
【實例13.7】 圖片漸變效果 166
13.2.6 進度條的顯示 167
【實例13.8】 進度條的顯示 167
本章知識思維導圖 168
第14章 文檔對象模型（DOM） 169 視頻講解：11節，41分鐘
14.1 DOM概述 170
14.2 DOM對象節點屬性 171
14.3 節點的操作 171
14.3.1 創建節點 172
【實例14.1】 補全古詩 172
14.3.2 插入節點 173
【實例14.2】 向頁面中插入文本 173
14.3.3 複製節點 174
【實例14.3】 複製下拉選單 174
14.3.4 刪除節點 175
【實例14.4】 動態刪除選中的文本 175
14.3.5 替換節點 176
【實例14.5】 替換標記和文本 176
14.4 獲取文檔中的指定元素 176
14.4.1 通過元素的id屬性獲取元素 177
【實例14.6】 在頁面的指定位置顯示當前日期 177
14.4.2 通過元素的name屬性獲取元素 177
【實例14.7】 實現電影圖片的輪換效果 178
14.5 與DHTML相對應的DOM 178
14.5.1 innerHTML和innerText屬性 179
【實例14.8】 顯示時間和問候語 179
14.5.2 outerHTML和outerText屬性 180
本章知識思維導圖 181
第15章 Window對象 182 視頻講解：14節，54分鐘
15.1 Window對象概述 183
15.1.1 Window對象的屬性 183
15.1.2 Window對象的方法 183
15.1.3 Window對象的使用 184
15.2 對話框 184
15.2.1 警告對話框 185
【實例15.1】 彈出警告對話框 185
15.2.2 確認對話框 185
【實例15.2】 彈出確認對話框 186
15.2.3 提示對話框 186
15.3 打開與關閉視窗 187
15.3.1 打開視窗 187
【實例15.3】 彈出指定大小和位置的新視窗 188
15.3.2 關閉視窗 188
【實例15.4】 關閉子視窗時自動刷新父視窗 189
15.4 控制視窗 190
15.4.1 移動視窗 190
【實例15.5】 控制彈出視窗的居中顯示 191
15.4.2 視窗滾動 192
15.4.3 改變視窗大小 193
【實例15.6】 動態改變視窗的大小 193
15.4.4 訪問視窗歷史 194
15.4.5 設定逾時 195
【實例15.7】 動態顯示日期和時間 195
15.5 通用視窗事件 196
本章知識思維導圖 197
第16章 Style對象 198 視頻講解：2節，29分鐘
16.1 Style對象簡介 199
16.2 Style對象的樣式標籤屬性和樣式屬性 199
16.2.1 樣式標籤屬性和樣式屬性 199
16.2.2 顏色和背景屬性 202
【實例16.1】 選中的行背景變色 202
【實例16.2】 背景固定居中 204
16.2.3 框線屬性 205
【實例16.3】 單元格框線變色 205
【實例16.4】 立體視窗 207
16.2.4 定位屬性 207
【實例16.5】 百葉窗 208
【實例16.6】 煙花效果 209
【實例16.7】 跟隨滑鼠指針移動的圖片 211
16.2.5 字型屬性 212
【實例16.8】 改變超連結字型樣式 214
16.2.6 表格布局屬性 215
【實例16.9】 限制表格的寬度 216
本章知識思維導圖 217
第3篇 高級套用篇
第17章 JavaScript中使用XML 220 視頻講解：8節，40分鐘
17.1 XML簡介 221
17.1.1 創建XML 221
【實例17.1】 XML文檔的創建 221
17.1.2 DOM與XML 222
17.2 解析XML文本 223
17.2.1 在IE瀏覽器中解析XML文本 223
17.2.2 在非IE瀏覽器中解析XML文本 224
【實例17.2】 獲取XML文本中的數據 225
17.3 讀取XML數據 226
17.3.1 獲取XML元素的屬性值 226
【實例17.3】 獲取XML元素的屬性值 226
17.3.2 通過DOM元素的方法讀取XML數據 227
【實例17.4】 套用名稱訪問XML數據 227
17.3.3 在表格中讀取XML數據 229
【實例17.5】 在表格中讀取XML數據 229
17.3.4 通過JavaScript操作XML實現分頁 231
【實例17.6】 對讀取的XML數據進行分頁操作 231
本章知識思維導圖 233
第18章 Ajax技術 234 視頻講解：11節，31分鐘
18.1 Ajax概述 235
18.1.1 Ajax套用案例 235
18.1.2 Ajax的開發模式 235
18.1.3 Ajax的優點 236
18.2 Ajax的技術組成 237
18.2.1 XMLHttpRequest對象 237
18.2.2 XML語言 237
18.2.3 JavaScript腳本語言 239
18.2.4 DOM 239
18.2.5 CSS 239
18.3 XMLHttpRequest對象 239
18.3.1 XMLHttpRequest對象的初始化 239
18.3.2 XMLHttpRequest對象的常用屬性 240
18.3.3 XMLHttpRequest對象的常用方法 242
【實例18.1】 讀取HTML檔案 244
本章知識思維導圖 246
第19章 jQuery基礎 247 視頻講解：8節，61分鐘
19.1 jQuery概述 248
19.2 jQuery下載與配置 248
19.2.1 下載jQuery 248
19.2.2 配置jQuery 249
19.3 jQuery選擇器 249
19.3.1 jQuery的工廠函式 250
19.3.2 基本選擇器 250
【實例19.1】 獲取文本框中輸入的值 250
【實例19.2】 修改div元素的內容 252
【實例19.3】 獲取元素並設定CSS樣式 253
【實例19.4】 篩選元素並添加新的樣式 255
19.3.3 層級選擇器 256
【實例19.5】 為著作權列表設定樣式 257
【實例19.6】 為表單元素換膚 258
【實例19.7】 改變匹配元素的背景顏色 260
【實例19.8】 篩選div元素的同輩元素 261
19.3.4 過濾選擇器 262
【實例19.9】 實現一個帶表頭的雙色表格 263
【實例19.10】 套用內容過濾器匹配不同的單元格 265
【實例19.11】 利用表單對象的屬性過濾器匹配元素 267
19.3.5 屬性選擇器 268
19.3.6 表單選擇器 269
【實例19.12】 利用表單選擇器匹配元素 269
本章知識思維導圖 271
第20章 jQuery控制頁面 272 視頻講解：4節，34分鐘
20.1 對元素內容和值進行操作 273
20.1.1 對元素內容操作 273
【實例20.1】 對元素內容進行設定 274
20.1.2 對元素值操作 275
【實例20.2】 為多行列表框設定並獲取值 275
20.2 對DOM節點進行操作 276
20.2.1 創建節點 276
20.2.2 插入節點 276
20.2.3 刪除、複製與替換節點 278
【實例20.3】 我的開心小農場 279
20.3 對元素屬性進行操作 281
【實例20.4】 改變圖片大小 282
20.4 對元素的CSS樣式進行操作 282
20.4.1 通過修改CSS類實現 283
【實例20.5】 改變文本樣式 283
20.4.2 通過修改CSS屬性實現 284
【實例20.6】 為圖片添加和去除框線 285
本章知識思維導圖 286
第21章 jQuery的事件處理 287 視頻講解：4節，14分鐘
21.1 頁面載入回響事件 288
21.2 jQuery中的事件 288
【實例21.1】 橫嚮導航選單 290
21.3 事件綁定 292
21.3.1 為元素綁定事件 292
【實例21.2】 表格的動態換膚 292
21.3.2 移除綁定 293
21.3.3 綁定一次性事件處理 293
21.4 模擬用戶操作 294
21.4.1 模擬用戶的操作觸發事件 294
【實例21.3】 模擬用戶單擊事件 294
21.4.2 模仿懸停事件 294
【實例21.4】 切換表情圖片 295
本章知識思維導圖 296
第22章 jQuery的動畫效果 297 視頻講解：4節，26分鐘
22.1 基本的動畫效果 298
22.1.1 隱藏匹配元素 298
22.1.2 顯示匹配元素 298
【實例22.1】 實現自動隱藏式選單 299
22.2 淡入、淡出的動畫效果 300
22.3 滑動效果 301
22.3.1 滑動顯示匹配的元素 302
22.3.2 滑動隱藏匹配的元素 302
22.3.3 通過高度的變化動態切換元素的可見性 302
【實例22.2】 實現伸縮式導航選單 303
22.4 自定義的動畫效果 305
22.4.1 使用animate()方法創建自定義動畫 305
【實例22.3】 實現幕簾的效果 306
22.4.2 使用stop()方法停止動畫 308
本章知識思維導圖 308
第23章 Vue.js基礎 309 視頻講解：11節，86分鐘
23.1 什麼是Vue.js 310
23.2 Vue.js的安裝 311
23.2.1 直接下載並使用<script>標籤引入 311
23.2.2 使用CDN方法 312
23.2.3 使用NPM方法 312
23.3 Vue實例及選項 312
23.3.1 掛載元素 312
23.3.2 數據 312
23.3.3 方法 314
23.3.4 生命周期鉤子函式 314
23.4 數據綁定 315
23.4.1 插值 315
【實例23.1】 插入文本 315
【實例23.2】 插入HTML內容 316
23.4.2 過濾器 317
【實例23.3】 截取新聞標題 317
23.5 指令 318
23.5.1 v-bind指令 318
【實例23.4】 設定文字樣式 318
23.5.2 v-on指令 319
【實例23.5】 動態改變圖片透明度 319
23.5.3 v-if指令 320
23.5.4 v-else指令 321
【實例23.6】 判斷2022年2月份的天數 322
23.5.5 v-else-if指令 322
【實例23.7】 判斷考試成績 323
23.5.6 v-for指令 324
23.5.7 v-model指令 326
本章知識思維導圖 328
第4篇 項目開發篇
第24章 幸運大抽獎 330 視頻講解：1節，2分鐘
24.1 功能描述 331
24.2 設計思路 331
24.3 開發過程 332
24.3.1 抽獎界面設計 332
24.3.2 為抽獎頁面添加樣式 333
24.3.3 抽獎功能的實現 334
本章知識思維導圖 337
第25章 51購商城 338 視頻講解：24節，64分鐘
25.1 項目的設計思路 339
25.1.1 項目概述 339
25.1.2 界面預覽 339
25.1.3 功能結構 341
25.1.4 資料夾組織結構 341
25.2 主頁的設計與實現 341
25.2.1 主頁的設計 342
25.2.2 頂部區和底部區功能的實現 342
25.2.3 商品分類導航功能的實現 344
25.2.4 輪播圖功能的實現 346
25.2.5 商品推薦功能的實現 347
25.2.6 適配移動端的實現 348
25.3 商品列表頁面的設計與實現 349
25.3.1 商品列表頁面的設計 349
25.3.2 分類選項功能的實現 350
25.3.3 商品列表區的實現 350
25.4 商品詳情頁面的設計與實現 352
25.4.1 商品詳情頁面的設計 352
25.4.2 商品概要功能的實現 353
25.4.3 商品評價功能的實現 354
25.4.4 猜你喜歡功能的實現 356
25.5 購物車頁面的設計與實現 357
25.5.1 購物車頁面的設計 357
25.5.2 購物車頁面的實現 358
25.6 付款頁面的設計與實現 358
25.6.1 付款頁面的設計 359
25.6.2 付款頁面的實現 359
25.7 登錄註冊頁面的設計與實現 360
25.7.1 登錄註冊頁面的設計 361
25.7.2 登錄頁面的實現 362
25.7.3 註冊頁面的實現 363
本章知識思維導圖 365
