內容簡介
本書介紹了JavaScript腳本語言的基礎知識和實用技術。全書共10章,內容包括JavaScript概述、JavaScript編程基礎、流程控制語句、對象編程、本地對象、瀏覽器對象模型(BOM)、文檔對象模型(DOM)、事件處理等,最後的綜合項目套用本書所討論的技術內容製作一個線上繪圖網站。本書包含對ECMAScript 6.0(簡稱ES6)標準的介紹,其中包括ES6標準對字元串、數值、函式、數組、對象的擴展,Set和Map結構的用法,let和const關鍵字的用法,for…of循環和疊代器,以及使用class進行對象編程的方法等。同時,本書配有大量的示例和練習,介紹詳略得當,所介紹的技術具有很強的實用性、前瞻性,符合高職高專和套用型本科層次就業需求。讀者通過本書的學習可以快速掌握JavaScript編程基本功。
本書可作為高職高專、套用型本科院校計算機相關專業的教材,也適合JavaScript初學者及程式開發人員學習參考。
目錄
第1章 JavaScript概述 1
1.1 學習JavaScript程式設計 1
1.2 JavaScript簡介 3
1.3 開發JavaScript應用程式 6
【課堂案例1-1】第1個JavaScript程式 7
第2章 程式的構成—函式 10
2.1 函式的使用 10
【課堂案例2-1】在網頁上輸出訊息 11
【課堂案例2-2】在網頁上顯示圖片 11
【課堂案例2-3】在網頁中播放視頻,顯示視頻信息 12
2.2 函式的參數 13
【課堂案例2-4】使用參數傳遞姓氏和名字,在網頁上輸出姓名 14
【課堂案例2-5】定義函式area(),用於計算矩形面積 15
【課堂案例2-6】設定參數默認值 16
2.3 函式的返回值 17
【課堂案例2-7】計算任意3個數的平均值 17
【課堂案例2-8】計算實發工資 18
2.4 函式的嵌套定義 19
【課堂案例2-9】計算兩個圓的面積之和 19
*2.5 高級函式特性 20
【課堂案例2-10】調用匿名函式 20
【課堂案例2-11】數組作為參數,計算購物總金額 22
【課堂案例2-12】使用參數對象Arguments來計算任意n個數的和 24
【課堂案例2-13】使用rest參數來計算任意n個數的和 25
【課堂案例2-14】使用箭頭函式進行平方運算 26
【課堂案例2-15】使用函式對象編寫函式測試頁面 26
2.6 本章練習 29
第3章 JavaScript語言基礎 33
3.1 基本數據類型 33
【課堂案例3-1】數據類型測試及轉換 36
3.2 變數和常量 37
【課堂案例3-2】變數的定義和使用 37
【課堂案例3-3】變數的賦值 38
【課堂案例3-4】變數的作用域 40
【課堂案例3-5】使用常量PI,轉換角度與弧度 41
3.3 運算符和表達式 42
【課堂案例3-6】算術運算符使用示例 43
【課堂案例3-7】賦值運算符使用示例 44
【課堂案例3-8】使用關係運算符、條件運算符判斷用戶輸入的年齡 45
【課堂案例3-9】邏輯運算符使用示例 47
【課堂案例3-10】字元串運算符使用示例 48
【課堂案例3-11】位運算符使用示例 48
【課堂案例3-12】使用typeof運算符檢測數據類型 50
3.4 本章練習 50
第4章 JavaScript語句 54
4.1 JavaScript語句和基本程式結構 54
4.2 分支語句 55
【課堂案例4-1】使用單分支if語句判斷兩個數字中的較大數 55
【課堂案例4-2】使用if語句將兩個數字按從小到大的順序輸出 56
【課堂案例4-3】使用if語句檢查參數值的有效性 56
【課堂案例4-4】使用if…else語句計算數字的絕對值 57
【課堂案例4-5】使用if…else語句判斷成績是否及格 58
【課堂案例4-6】使用if嵌套刪除檔案(偽代碼) 59
【課堂案例4-7】使用switch語句查詢簡單的日程表 60
4.3 循環語句 63
【課堂案例4-8】使用while語句輸出遞增的數字序列 63
【課堂案例4-9】使用while語句在網頁上顯示一組圖片 63
【課堂案例4-10】使用do…while語句計算100到500之間所有整數的和 64
【課堂案例4-11】使用do…while語句計算m到n之間所有偶數的和 65
【課堂案例4-12】使用for語句輸出1到n之間所有的整數 66
4.4 循環控制語句 67
【課堂案例4-13】使用break語句計算最低公倍數 67
【課堂案例4-14】continue語句演示 68
4.5 循環嵌套 69
【課堂案例4-15】使用二重循環嵌套在頁面上顯示五子棋棋盤 69
4.6 異常處理 70
【課堂案例4-16】使用throw語句拋出異常 70
【課堂案例4-17】使用try…catch()…finally語句處理異常 72
4.7 本章練習 74
第5章 基於原型的對象編程 82
5.1 對象編程概述 82
5.2 對象的創建和使用 83
【課堂案例5-1】使用Object創建自定義對象book,用於描述圖書信息 83
【課堂案例5-2】使用Object創建自定義對象calc,用於簡單數學計算 84
【課堂案例5-3】使用構造函式創建自定義對象phone,用於描述電話信息 86
【課堂案例5-4】創建圖片對象,使用this訪問對象自身的屬性和方法 86
【課堂案例5-5】使用with簡化對象操作 87
【課堂案例5-6】使用instanceof運算符判斷對象類型 88
【課堂案例5-7】使用for…in循環遍歷對象成員 89
【課堂案例5-8】使用私有對象屬性實現數據隱藏 90
【課堂案例5-9】為屬性添加賦值器方法(Setter)和取值器方法(Getter) 91
【課堂案例5-10】使用原型(prototype)擴展對象類型 92
5.3 對象繼承 94
【課堂案例5-11】使用call()方法實現對象繼承 94
【課堂案例5-12】使用原型鏈(Prototype Chain)實現對象繼承 95
5.4 class的基本用法 96
【課堂案例5-13】使用class創建類,再通過類定義對象 96
【課堂案例5-14】class的賦值方法(setter)和取值方法(getter) 97
【課堂案例5-15】使用extends實現繼承 98
【課堂案例5-16】使用JSON對象 99
5.5 本章練習 100
第6章 本地對象 103
6.1 本地對象概述 103
6.2 Boolean對象 104
【課堂案例6-1】比較布爾值與布爾對象的區別 104
6.3 Number對象 105
【課堂案例6-2】使用Number對象獲取數值極限 106
【課堂案例6-3】將數字轉換成字元串 106
6.4 String對象 107
【課堂案例6-4】合成新的字元串 109
【課堂案例6-5】顯示字元串的Unicode編碼 110
【課堂案例6-6】截取字元串內容 110
【課堂案例6-7】在字元串中精確查找指定內容 112
【課堂案例6-8】在字元串中進行模糊查找 112
【課堂案例6-9】將字元串分割成數組,提取英文句子中前3個單詞 113
【課堂案例6-10】轉換字母大小寫 114
【課堂案例6-11】為字元串添加樣式 115
6.5 RegExp對象 116
【課堂案例6-12】使用正則表達式替換字元串中的文本 117
【課堂案例6-13】使用正則表達式驗證電子信箱格式 118
【課堂案例6-14】使用正則表達式交換單詞的位置 118
6.6 Array對象 119
【課堂案例6-15】使用Array對象創建數組 120
【課堂案例6-16】使用for…in循環遍歷數組,並找到最大值 121
【課堂案例6-17】對數組進行排序 122
【課堂案例6-18】使用Array提供的方法添加、刪除或替換數組元素 123
【課堂案例6-19】將數組轉換成字元串 124
【課堂案例6-20】使用現有數組元素生成新數組 124
【課堂案例6-21】使用回調函式處理數組元素 125
【課堂案例6-22】使用二維數組 128
【課堂案例6-23】使用JSON數組 129
6.7 Math對象 130
【課堂案例6-24】使用Math對象完成數學計算1 131
【課堂案例6-25】使用Math對象完成數學計算2 131
6.8 Date對象 133
【課堂案例6-26】創建Date對象 135
【課堂案例6-27】使用Date對象計算程式運行時間 136
【課堂案例6-28】使用Date對象的方法設定/獲取日期時間信息 137
6.9 Error對象 138
【課堂案例6-29】使用自定義Error對象拋出異常 139
【課堂案例6-30】處理系統拋出的異常 140
6.10 全局對象 141
【課堂案例6-31】使用全局方法 142
6.11 集合對象 143
【課堂案例6-32】使用Set對象 144
【課堂案例6-33】使用Set對象實現集合的基本操作 144
【課堂案例6-34】使用Map對象 145
6.12 二進制數組 146
【課堂案例6-35】使用二進制數組 147
6.13 本章練習 148
第7章 瀏覽器對象模型(BOM) 160
7.1 瀏覽器對象模型概述 160
7.2 window對象 161
【課堂案例7-1】獲取瀏覽器視窗的位置和大小 163
【課堂案例7-2】控制瀏覽器視窗的位置和大小 163
【課堂案例7-3】使用模式對話框 166
【課堂案例7-4】製作簡單的數字時鐘 168
【課堂案例7-5】在網頁中實現自動滾動螢幕功能 169
7.3 navigator對象 171
【課堂案例7-6】獲取瀏覽器及作業系統的相關信息 171
【課堂案例7-7】獲取當前瀏覽器安裝的外掛程式信息 172
7.4 location對象 173
【課堂案例7-8】獲取瀏覽器URL的相關信息 174
【課堂案例7-9】使用location對象實現頁面跳轉和刷新 174
【課堂案例7-10】創建頁面導航 176
7.5 history對象 177
【課堂案例7-11】訪問歷史記錄中的URL 178
7.6 screen對象 179
【課堂案例7-12】獲取用戶螢幕信息 179
【課堂案例7-13】根據用戶螢幕信息切換網頁顯示效果 181
7.7 本章練習 181
第8章 HTML文檔對象模型(DOM) 184
8.1 文檔對象模型概述 184
8.2 DOM核心接口 188
【課堂案例8-1】獲取DOM樹中的節點信息 192
【課堂案例8-2】刪除DOM樹中的節點 194
【課堂案例8-3】在DOM樹中添加子節點 195
【課堂案例8-4】替換DOM樹中的節點 197
【課堂案例8-5】複製DOM樹中的節點 198
【課堂案例8-6】獲取節點的屬性 199
【課堂案例8-7】控制文本節點 201
【課堂案例8-8】提取網頁中的超連結地址 203
8.3 DOM HTML 204
【課堂案例8-9】獲取文檔信息 207
【課堂案例8-10】修改文檔中的連結 208
【課堂案例8-11】操作文檔中的表格 210
【課堂案例8-12】獲取文本框中用戶輸入的內容 212
【課堂案例8-13】獲取單選框用戶選擇的內容 213
【課堂案例8-14】獲取複選框用戶選擇的內容 214
【課堂案例8-15】控制下拉選單 215
【課堂案例8-16】判斷用戶選取的檔案類型 217
【課堂案例8-17】限制用戶使用表單元素 218
【課堂案例8-18】驗證表單數據 220
【課堂案例8-19】為所有段落加框線 221
【課堂案例8-20】選項卡效果 222
【課堂案例8-21】Web相冊 224
【課堂案例8-22】修改網頁背景色 226
【課堂案例8-23】顯示/隱藏頁面元素 227
【課堂案例8-24】覆蓋顯示圖片 228
【課堂案例8-25】在網頁中繪圖1 230
【課堂案例8-26】在網頁中繪圖2 231
8.4 本章練習 232
第9章 事件(Event)處理 237
9.1 事件處理概述 237
9.2 基於HTML屬性的事件處理方法 237
【課堂案例9-1】文檔事件 239
【課堂案例9-2】滑鼠事件 240
【課堂案例9-3】獲得/失去焦點事件 241
【課堂案例9-4】鍵盤事件 241
【課堂案例9-5】onchange事件 242
【課堂案例9-6】使用this作為參數 243
【課堂案例9-7】為事件設定回響函式 244
9.3 DOM Event事件處理 245
【課堂案例9-8】註冊事件監聽器,設定背景圖片 248
【課堂案例9-9】註冊多個事件監聽器,實現簡易加法計算器 248
【課堂案例9-10】事件指派 250
【課堂案例9-11】顯示滑鼠位置 251
【課堂案例9-12】創建快捷選單,縮放圖片 252
【課堂案例9-13】使用鍵盤選擇角色 254
9.4 本章練習 257
第10章 綜合練習—WebPaint 259
10.1 整體說明 259
10.2 JavaScript程式說明 260,第1章 JavaScript概述 1
1.1 學習JavaScript程式設計 1
1.2 JavaScript簡介 3
1.3 開發JavaScript應用程式 6
【課堂案例1-1】第1個JavaScript程式 7
第2章 程式的構成—函式 10
2.1 函式的使用 10
【課堂案例2-1】在網頁上輸出訊息 11
【課堂案例2-2】在網頁上顯示圖片 11
【課堂案例2-3】在網頁中播放視頻,顯示視頻信息 12
2.2 函式的參數 13
【課堂案例2-4】使用參數傳遞姓氏和名字,在網頁上輸出姓名 14
【課堂案例2-5】定義函式area(),用於計算矩形面積 15
【課堂案例2-6】設定參數默認值 16
2.3 函式的返回值 17
【課堂案例2-7】計算任意3個數的平均值 17
【課堂案例2-8】計算實發工資 18
2.4 函式的嵌套定義 19
【課堂案例2-9】計算兩個圓的面積之和 19
*2.5 高級函式特性 20
【課堂案例2-10】調用匿名函式 20
【課堂案例2-11】數組作為參數,計算購物總金額 22
【課堂案例2-12】使用參數對象Arguments來計算任意n個數的和 24
【課堂案例2-13】使用rest參數來計算任意n個數的和 25
【課堂案例2-14】使用箭頭函式進行平方運算 26
【課堂案例2-15】使用函式對象編寫函式測試頁面 26
2.6 本章練習 29
第3章 JavaScript語言基礎 33
3.1 基本數據類型 33
【課堂案例3-1】數據類型測試及轉換 36
3.2 變數和常量 37
【課堂案例3-2】變數的定義和使用 37
【課堂案例3-3】變數的賦值 38
【課堂案例3-4】變數的作用域 40
【課堂案例3-5】使用常量PI,轉換角度與弧度 41
3.3 運算符和表達式 42
【課堂案例3-6】算術運算符使用示例 43
【課堂案例3-7】賦值運算符使用示例 44
【課堂案例3-8】使用關係運算符、條件運算符判斷用戶輸入的年齡 45
【課堂案例3-9】邏輯運算符使用示例 47
【課堂案例3-10】字元串運算符使用示例 48
【課堂案例3-11】位運算符使用示例 48
【課堂案例3-12】使用typeof運算符檢測數據類型 50
3.4 本章練習 50
第4章 JavaScript語句 54
4.1 JavaScript語句和基本程式結構 54
4.2 分支語句 55
【課堂案例4-1】使用單分支if語句判斷兩個數字中的較大數 55
【課堂案例4-2】使用if語句將兩個數字按從小到大的順序輸出 56
【課堂案例4-3】使用if語句檢查參數值的有效性 56
【課堂案例4-4】使用if…else語句計算數字的絕對值 57
【課堂案例4-5】使用if…else語句判斷成績是否及格 58
【課堂案例4-6】使用if嵌套刪除檔案(偽代碼) 59
【課堂案例4-7】使用switch語句查詢簡單的日程表 60
4.3 循環語句 63
【課堂案例4-8】使用while語句輸出遞增的數字序列 63
【課堂案例4-9】使用while語句在網頁上顯示一組圖片 63
【課堂案例4-10】使用do…while語句計算100到500之間所有整數的和 64
【課堂案例4-11】使用do…while語句計算m到n之間所有偶數的和 65
【課堂案例4-12】使用for語句輸出1到n之間所有的整數 66
4.4 循環控制語句 67
【課堂案例4-13】使用break語句計算最低公倍數 67
【課堂案例4-14】continue語句演示 68
4.5 循環嵌套 69
【課堂案例4-15】使用二重循環嵌套在頁面上顯示五子棋棋盤 69
4.6 異常處理 70
【課堂案例4-16】使用throw語句拋出異常 70
【課堂案例4-17】使用try…catch()…finally語句處理異常 72
4.7 本章練習 74
第5章 基於原型的對象編程 82
5.1 對象編程概述 82
5.2 對象的創建和使用 83
【課堂案例5-1】使用Object創建自定義對象book,用於描述圖書信息 83
【課堂案例5-2】使用Object創建自定義對象calc,用於簡單數學計算 84
【課堂案例5-3】使用構造函式創建自定義對象phone,用於描述電話信息 86
【課堂案例5-4】創建圖片對象,使用this訪問對象自身的屬性和方法 86
【課堂案例5-5】使用with簡化對象操作 87
【課堂案例5-6】使用instanceof運算符判斷對象類型 88
【課堂案例5-7】使用for…in循環遍歷對象成員 89
【課堂案例5-8】使用私有對象屬性實現數據隱藏 90
【課堂案例5-9】為屬性添加賦值器方法(Setter)和取值器方法(Getter) 91
【課堂案例5-10】使用原型(prototype)擴展對象類型 92
5.3 對象繼承 94
【課堂案例5-11】使用call()方法實現對象繼承 94
【課堂案例5-12】使用原型鏈(Prototype Chain)實現對象繼承 95
5.4 class的基本用法 96
【課堂案例5-13】使用class創建類,再通過類定義對象 96
【課堂案例5-14】class的賦值方法(setter)和取值方法(getter) 97
【課堂案例5-15】使用extends實現繼承 98
【課堂案例5-16】使用JSON對象 99
5.5 本章練習 100
第6章 本地對象 103
6.1 本地對象概述 103
6.2 Boolean對象 104
【課堂案例6-1】比較布爾值與布爾對象的區別 104
6.3 Number對象 105
【課堂案例6-2】使用Number對象獲取數值極限 106
【課堂案例6-3】將數字轉換成字元串 106
6.4 String對象 107
【課堂案例6-4】合成新的字元串 109
【課堂案例6-5】顯示字元串的Unicode編碼 110
【課堂案例6-6】截取字元串內容 110
【課堂案例6-7】在字元串中精確查找指定內容 112
【課堂案例6-8】在字元串中進行模糊查找 112
【課堂案例6-9】將字元串分割成數組,提取英文句子中前3個單詞 113
【課堂案例6-10】轉換字母大小寫 114
【課堂案例6-11】為字元串添加樣式 115
6.5 RegExp對象 116
【課堂案例6-12】使用正則表達式替換字元串中的文本 117
【課堂案例6-13】使用正則表達式驗證電子信箱格式 118
【課堂案例6-14】使用正則表達式交換單詞的位置 118
6.6 Array對象 119
【課堂案例6-15】使用Array對象創建數組 120
【課堂案例6-16】使用for…in循環遍歷數組,並找到最大值 121
【課堂案例6-17】對數組進行排序 122
【課堂案例6-18】使用Array提供的方法添加、刪除或替換數組元素 123
【課堂案例6-19】將數組轉換成字元串 124
【課堂案例6-20】使用現有數組元素生成新數組 124
【課堂案例6-21】使用回調函式處理數組元素 125
【課堂案例6-22】使用二維數組 128
【課堂案例6-23】使用JSON數組 129
6.7 Math對象 130
【課堂案例6-24】使用Math對象完成數學計算1 131
【課堂案例6-25】使用Math對象完成數學計算2 131
6.8 Date對象 133
【課堂案例6-26】創建Date對象 135
【課堂案例6-27】使用Date對象計算程式運行時間 136
【課堂案例6-28】使用Date對象的方法設定/獲取日期時間信息 137
6.9 Error對象 138
【課堂案例6-29】使用自定義Error對象拋出異常 139
【課堂案例6-30】處理系統拋出的異常 140
6.10 全局對象 141
【課堂案例6-31】使用全局方法 142
6.11 集合對象 143
【課堂案例6-32】使用Set對象 144
【課堂案例6-33】使用Set對象實現集合的基本操作 144
【課堂案例6-34】使用Map對象 145
6.12 二進制數組 146
【課堂案例6-35】使用二進制數組 147
6.13 本章練習 148
第7章 瀏覽器對象模型(BOM) 160
7.1 瀏覽器對象模型概述 160
7.2 window對象 161
【課堂案例7-1】獲取瀏覽器視窗的位置和大小 163
【課堂案例7-2】控制瀏覽器視窗的位置和大小 163
【課堂案例7-3】使用模式對話框 166
【課堂案例7-4】製作簡單的數字時鐘 168
【課堂案例7-5】在網頁中實現自動滾動螢幕功能 169
7.3 navigator對象 171
【課堂案例7-6】獲取瀏覽器及作業系統的相關信息 171
【課堂案例7-7】獲取當前瀏覽器安裝的外掛程式信息 172
7.4 location對象 173
【課堂案例7-8】獲取瀏覽器URL的相關信息 174
【課堂案例7-9】使用location對象實現頁面跳轉和刷新 174
【課堂案例7-10】創建頁面導航 176
7.5 history對象 177
【課堂案例7-11】訪問歷史記錄中的URL 178
7.6 screen對象 179
【課堂案例7-12】獲取用戶螢幕信息 179
【課堂案例7-13】根據用戶螢幕信息切換網頁顯示效果 181
7.7 本章練習 181
第8章 HTML文檔對象模型(DOM) 184
8.1 文檔對象模型概述 184
8.2 DOM核心接口 188
【課堂案例8-1】獲取DOM樹中的節點信息 192
【課堂案例8-2】刪除DOM樹中的節點 194
【課堂案例8-3】在DOM樹中添加子節點 195
【課堂案例8-4】替換DOM樹中的節點 197
【課堂案例8-5】複製DOM樹中的節點 198
【課堂案例8-6】獲取節點的屬性 199
【課堂案例8-7】控制文本節點 201
【課堂案例8-8】提取網頁中的超連結地址 203
8.3 DOM HTML 204
【課堂案例8-9】獲取文檔信息 207
【課堂案例8-10】修改文檔中的連結 208
【課堂案例8-11】操作文檔中的表格 210
【課堂案例8-12】獲取文本框中用戶輸入的內容 212
【課堂案例8-13】獲取單選框用戶選擇的內容 213
【課堂案例8-14】獲取複選框用戶選擇的內容 214
【課堂案例8-15】控制下拉選單 215
【課堂案例8-16】判斷用戶選取的檔案類型 217
【課堂案例8-17】限制用戶使用表單元素 218
【課堂案例8-18】驗證表單數據 220
【課堂案例8-19】為所有段落加框線 221
【課堂案例8-20】選項卡效果 222
【課堂案例8-21】Web相冊 224
【課堂案例8-22】修改網頁背景色 226
【課堂案例8-23】顯示/隱藏頁面元素 227
【課堂案例8-24】覆蓋顯示圖片 228
【課堂案例8-25】在網頁中繪圖1 230
【課堂案例8-26】在網頁中繪圖2 231
8.4 本章練習 232
第9章 事件(Event)處理 237
9.1 事件處理概述 237
9.2 基於HTML屬性的事件處理方法 237
【課堂案例9-1】文檔事件 239
【課堂案例9-2】滑鼠事件 240
【課堂案例9-3】獲得/失去焦點事件 241
【課堂案例9-4】鍵盤事件 241
【課堂案例9-5】onchange事件 242
【課堂案例9-6】使用this作為參數 243
【課堂案例9-7】為事件設定回響函式 244
9.3 DOM Event事件處理 245
【課堂案例9-8】註冊事件監聽器,設定背景圖片 248
【課堂案例9-9】註冊多個事件監聽器,實現簡易加法計算器 248
【課堂案例9-10】事件指派 250
【課堂案例9-11】顯示滑鼠位置 251
【課堂案例9-12】創建快捷選單,縮放圖片 252
【課堂案例9-13】使用鍵盤選擇角色 254
9.4 本章練習 257
第10章 綜合練習—WebPaint 259
10.1 整體說明 259
10.2 JavaScript程式說明 260