JavaScript程序設(shè)計(jì)基礎(chǔ)與范例教程

第1章 JavaScript程序概述 /1
1．1 學(xué)習(xí)JavaScript程序設(shè)計(jì) /1
1．2 JavaScript簡(jiǎn)介 /2
1．3 開(kāi)發(fā)JavaScript應(yīng)用程序 /5
【課堂案例1-1】：第1個(gè)JavaScript程序 /7
第2章 程序的構(gòu)成――函數(shù) /10
2．1 函數(shù)的使用 /10
【課堂案例2-1】：在網(wǎng)頁(yè)上輸出消息 /10
【課堂案例2-2】：在網(wǎng)頁(yè)上顯示圖片 /11
【課堂案例2-3】：在網(wǎng)頁(yè)中播放視頻，顯示視頻信息 /12
2．2 函數(shù)的參數(shù) /13
【課堂案例2-4】：使用參數(shù)傳遞姓氏和名字，在網(wǎng)頁(yè)上輸出姓名 /14
【課堂案例2-5】：定義函數(shù)area()，用于計(jì)算矩形面積 /15
【課堂案例2-6】：按照參數(shù)顯示圖片 /16
2．3 函數(shù)的返回值 /17
【課堂案例2-7】：計(jì)算任意3個(gè)數(shù)的平均值 /17
【課堂案例2-8】：測(cè)試return語(yǔ)句功能 /18
【課堂案例2-9】：制作簡(jiǎn)易杏仁巧克力 /19
【課堂案例2-10】：計(jì)算實(shí)發(fā)工資 /21
2．4 函數(shù)的嵌套定義 /21
【課堂案例2-11】：計(jì)算兩個(gè)圓的面積之和 /22
*2．5 高級(jí)函數(shù)特性 /22
【課堂案例2-12】：調(diào)用匿名函數(shù) /22
【課堂案例2-13】：使用匿名函數(shù)限制變量的作用域 /24
【課堂案例2-14】：使用閉包（closure）特性調(diào)整頁(yè)面的字號(hào) /25
【課堂案例2-15】：數(shù)組作參數(shù)，計(jì)算購(gòu)物總金額 /28
【課堂案例2-16】：使用參數(shù)對(duì)象Arguments來(lái)計(jì)算任意n個(gè)數(shù)的和 /29
【課堂案例2-17】：使用函數(shù)對(duì)象編寫(xiě)函數(shù)測(cè)試頁(yè)面 /30
【課堂案例2-18】：使用函數(shù)遞歸，輸出遞增的數(shù)字序列 /32
2．6 本章練習(xí) /33
第3章 JavaScript語(yǔ)言基礎(chǔ) /37
3．1 基本數(shù)據(jù)類(lèi)型 /37
【課堂案例3-1】：數(shù)據(jù)類(lèi)型測(cè)試及轉(zhuǎn)換 /40
3．2 變量和常量 /41
【課堂案例3-2】：變量的定義和使用 /41
【課堂案例3-3】：變量的賦值 /42
【課堂案例3-4】：變量的作用域 /43
【課堂案例3-5】：使用常量PI，轉(zhuǎn)換角度與弧度 /45
3．3 運(yùn)算符和表達(dá)式 /46
【課堂案例3-6】：算術(shù)運(yùn)算符使用示例 /46
【課堂案例3-7】：賦值運(yùn)算符使用示例 /48
【課堂案例3-8】：使用關(guān)系運(yùn)算符、條件運(yùn)算符判斷用戶輸入的年齡 /50
【課堂案例3-9】：邏輯運(yùn)算符使用示例 /51
【課堂案例3-10】：字符串運(yùn)算符示例 /52
【課堂案例3-11】：位運(yùn)算符示例 /53
【課堂案例3-12】：使用typeof運(yùn)算符檢測(cè)數(shù)據(jù)類(lèi)型 /55
3．4 本章練習(xí) /55
第4章 JavaScript語(yǔ)句 /59
4．1 JavaScript語(yǔ)句和基本程序結(jié)構(gòu) /59
4．2 選擇語(yǔ)句 /60
【課堂案例4-1】：使用單分支if語(yǔ)句判斷兩個(gè)數(shù)字中的較大數(shù) /60
【課堂案例4-2】：使用if語(yǔ)句將兩個(gè)數(shù)字按從小到大的順序輸出 /61
【課堂案例4-3】：使用if語(yǔ)句檢查參數(shù)值的有效性 /62
【課堂案例4-4】：使用if…else語(yǔ)句計(jì)算數(shù)字的絕對(duì)值 /62
【課堂案例4-5】：使用if…else語(yǔ)句判斷成績(jī)是否及格 /63
【課堂案例4-6】：使用if嵌套刪除文件（偽代碼） /65
【課堂案例4-7】：使用switch語(yǔ)句查詢簡(jiǎn)單的日程表 /66
4．3 循環(huán)語(yǔ)句 /68
【課堂案例4-8】：使用while語(yǔ)句輸出遞增的數(shù)字序列 /68
【課堂案例4-9】：使用while語(yǔ)句在網(wǎng)頁(yè)上顯示一組圖片 /69
【課堂案例4-10】：使用do…while語(yǔ)句計(jì)算100到500之間所有整數(shù)的和 /70
【課堂案例4-11】：使用do…while語(yǔ)句計(jì)算m到n之間所有偶數(shù)的和 /71
【課堂案例4-12】：使用for語(yǔ)句輸出1到n之間所有的整數(shù) /72
4．4 循環(huán)控制語(yǔ)句 /73
【課堂案例4-13】：使用break語(yǔ)句計(jì)算最小公倍數(shù) /73
【課堂案例4-14】：continue語(yǔ)句演示 /74
4．5 循環(huán)嵌套 /74
【課堂案例4-15】：使用二重循環(huán)嵌套在頁(yè)面上顯示五子棋棋盤(pán) /75
4．6 異常處理 /76
【課堂案例4-16】：使用throw語(yǔ)句拋出異常 /76
【課堂案例4-17】：使用try…catch()…finally處理異常 /77
4．7 本章練習(xí) /79
第5章 基于原型的面向?qū)ο缶幊?/86
5．1 對(duì)象編程概述 /86
5．2 自定義對(duì)象的創(chuàng)建和使用 /87
【課堂案例5-1】：使用Object創(chuàng)建自定義對(duì)象book，用于描述圖書(shū)信息 /87
【課堂案例5-2】：使用Object創(chuàng)建自定義對(duì)象calc，用于簡(jiǎn)單數(shù)學(xué)計(jì)算 /88
【課堂案例5-3】：使用構(gòu)造函數(shù)創(chuàng)建自定義對(duì)象phone，用于描述電話信息 /89
【課堂案例5-4】：創(chuàng)建圖片對(duì)象，使用this訪問(wèn)對(duì)象自身的屬性和方法 /90
【課堂案例5-5】：使用with簡(jiǎn)化對(duì)象操作 /91
【課堂案例5-6】：使用instanceof運(yùn)算符判斷對(duì)象類(lèi)型 /93
【課堂案例5-7】：使用instanceof運(yùn)算符檢查參數(shù)的類(lèi)型 /94
【課堂案例5-8】：使用for…in 循環(huán)遍歷對(duì)象成員 /95
【課堂案例5-9】：使用私有對(duì)象屬性實(shí)現(xiàn)數(shù)據(jù)隱藏 /96
【課堂案例5-10】：為屬性添加賦值方法（Setter）和取值方法（Getter） /97
【課堂案例5-11】：使用原型（prototype）擴(kuò)展對(duì)象類(lèi)型 /99
5．3 對(duì)象繼承 /100
【課堂案例5-12】：使用call()方法實(shí)現(xiàn)對(duì)象繼承 /100
【課堂案例5-13】：使用原型鏈（Prototype Chain）實(shí)現(xiàn)對(duì)象繼承 /101
5．4 定義對(duì)象的不同方式 /103
【課堂案例5-14】：使用工廠函數(shù)方式創(chuàng)建對(duì)象 /103
【課堂案例5-15】：使用混合的構(gòu)造函數(shù)/原型方式創(chuàng)建對(duì)象 /104
【課堂案例5-16】：使用動(dòng)態(tài)原型方式創(chuàng)建對(duì)象 /106
5．5 本章練習(xí) /107
第6章 本地對(duì)象 /109
6．1 本地對(duì)象概述 /109
6．2 Boolean對(duì)象 /109
【課堂案例6-1】：比較布爾值與布爾對(duì)象的區(qū)別 /110
【課堂案例6-2】：復(fù)制布爾對(duì)象 /111
6．3 Number對(duì)象 /112
【課堂案例6-3】：使用Number對(duì)象獲取數(shù)值極限 /113
【課堂案例6-4】：將數(shù)字轉(zhuǎn)換成字符串 /113
【課堂案例6-5】：設(shè)置數(shù)值精確度 /114
【課堂案例6-6】：數(shù)值進(jìn)制轉(zhuǎn)換 /115
6．4 String對(duì)象 /116
【課堂案例6-7】：合成新的字符串 /118
【課堂案例6-8】：顯示字符串的Unicode編碼 /119
【課堂案例6-9】：截取字符串內(nèi)容 /119
【課堂案例6-10】：在字符串中精確查找指定內(nèi)容 /121
【課堂案例6-11】：在字符串中進(jìn)行模糊查找 /122
【課堂案例6-12】：精確查找替換字符串內(nèi)容 /123
【課堂案例6-13】：將字符串分割成數(shù)組，提取英文句子中前3個(gè)單詞 /124
【課堂案例6-14】：轉(zhuǎn)換字母大小寫(xiě) /125
【課堂案例6-15】：為字符串添加樣式 /126
6．5 RegExp對(duì)象 /127
【課堂案例6-16】：使用正則表達(dá)式替換字符串中的文本 /128
【課堂案例6-17】：使用正則表達(dá)式驗(yàn)證電子郵箱格式 /129
【課堂案例6-18】：使用正則表達(dá)式交換單詞的位置 /130
6．6 Array對(duì)象 /131
【課堂案例6-19】：使用Array對(duì)象創(chuàng)建數(shù)組 /132
【課堂案例6-20】：使用for…in循環(huán)遍歷數(shù)組，并找到最大值 /133
【課堂案例6-21】：對(duì)數(shù)組進(jìn)行排序 /134
【課堂案例6-22】：使用Array提供的方法添加、刪除或替換數(shù)組元素 /135
【課堂案例6-23】：將數(shù)組轉(zhuǎn)換成字符串 /136
【課堂案例6-24】：使用現(xiàn)有數(shù)組元素生成新數(shù)組 /137
【課堂案例6-25】：使用回調(diào)函數(shù)處理數(shù)組元素 /139
【課堂案例6-26】：使用二維數(shù)組 /141
6．7 Math對(duì)象 /143
【課堂案例6-27】：使用Math對(duì)象完成數(shù)學(xué)計(jì)算1 /144
【課堂案例6-28】：使用Math對(duì)象完成數(shù)學(xué)計(jì)算2 /144
6．8 Date對(duì)象 /146
【課堂案例6-29】：創(chuàng)建Date對(duì)象 /148
【課堂案例6-30】：使用Date對(duì)象計(jì)算程序運(yùn)行時(shí)間 /150
【課堂案例6-31】：使用Date對(duì)象的方法設(shè)置/獲取日期時(shí)間信息 /151
6．9 Error對(duì)象 /152
【課堂案例6-32】：使用自定義Error對(duì)象拋出異常 /153
【課堂案例6-33】：處理系統(tǒng)拋出的異常 /154
6．10 全局對(duì)象 /155
【課堂案例6-34】：使用全局方法 /156
6．11 本章練習(xí) /157
第7章 瀏覽器對(duì)象模型（BOM） /167
7．1 瀏覽器對(duì)象模型概述 /167
7．2 window對(duì)象 /168
【課堂案例7-1】：獲取瀏覽器窗口的位置和大小 /169
【課堂案例7-2】：控制瀏覽器窗口的位置和大小 /170
【課堂案例7-3】：使用模式對(duì)話框 /173
【課堂案例7-4】：制作簡(jiǎn)單的數(shù)字時(shí)鐘 /175
【課堂案例7-5】：在網(wǎng)頁(yè)中實(shí)現(xiàn)滾動(dòng)屏幕功能 /176
7．3 navigator對(duì)象 /178
【課堂案例7-6】：獲取瀏覽器及操作系統(tǒng)的相關(guān)信息 /179
【課堂案例7-7】：獲取當(dāng)前瀏覽器安裝的插件信息 /180
7．4 location對(duì)象 /181
【課堂案例7-8】：獲取瀏覽器URL的相關(guān)信息 /182
【課堂案例7-9】：使用location對(duì)象實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和刷新 /182
【課堂案例7-10】：創(chuàng)建頁(yè)面導(dǎo)航 /184
7．5 history對(duì)象 /186
【課堂案例7-11】：訪問(wèn)歷史記錄中的URL /186
7．6 screen對(duì)象 /187
【課堂案例7-12】：獲取用戶屏幕信息 /188
【課堂案例7-13】：根據(jù)用戶屏幕信息切換網(wǎng)頁(yè)顯示效果 /189
7．7 本章練習(xí) /190
第8章 HTML文檔對(duì)象模型（DOM） /192
8．1 文檔對(duì)象模型概述 /192
8．2 DOM核心接口 /196
【課堂案例8-1】：獲取DOM樹(shù)中的節(jié)點(diǎn)信息 /200
【課堂案例8-2】：刪除DOM樹(shù)中的節(jié)點(diǎn) /202
【課堂案例8-3】：在DOM樹(shù)中添加子節(jié)點(diǎn) /203
【課堂案例8-4】：替換DOM樹(shù)中的節(jié)點(diǎn) /205
【課堂案例8-5】：復(fù)制DOM樹(shù)中的節(jié)點(diǎn) /206
【課堂案例8-6】：獲取節(jié)點(diǎn)的屬性 /207
【課堂案例8-7】：控制文本節(jié)點(diǎn) /209
【課堂案例8-8】：提取網(wǎng)頁(yè)中的超鏈接地址 /211
8．3 DOM HTML /212
【課堂案例8-9】：獲取文檔信息 /215
【課堂案例8-10】：修改文檔中的鏈接 /216
【課堂案例8-11】：操作文檔中的表格 /217
【課堂案例8-12】：獲取文本框中用戶輸入的內(nèi)容 /220
【課堂案例8-13】：獲取單選框用戶選擇的內(nèi)容 /221
【課堂案例8-14】：獲取復(fù)選框用戶選擇的內(nèi)容 /222
【課堂案例8-15】：控制下拉菜單 /223
【課堂案例8-16】：判斷用戶選取的文件類(lèi)型 /225
【課堂案例8-17】：限制用戶使用表單元素 /226
【課堂案例8-18】：驗(yàn)證表單數(shù)據(jù) /227
【課堂案例8-19】：為所有段落加邊框 /228
【課堂案例8-20】：選項(xiàng)卡效果 /230
【課堂案例8-21】：Web相冊(cè) /231
【課堂案例8-22】：修改網(wǎng)頁(yè)背景色 /234
【課堂案例8-23】：顯示/隱藏頁(yè)面元素 /235
【課堂案例8-24】：覆蓋顯示圖片 /236
【課堂案例8-25】：在網(wǎng)頁(yè)中繪圖1 /238
【課堂案例8-26】：在網(wǎng)頁(yè)中繪圖2 /239
8．4 本章練習(xí) /240
第9章 事件（Event）處理 /245
9．1 事件處理概述 /245
9．2 基于HTML屬性的事件處理方法 /245
【課堂案例9-1】：文檔事件 /246
【課堂案例9-2】：鼠標(biāo)事件 /248
【課堂案例9-3】：獲得/失去焦點(diǎn)事件 /249
【課堂案例9-4】：鍵盤(pán)事件 /250
【課堂案例9-5】：onchange事件 /250
【課堂案例9-6】：使用this作參數(shù) /251
【課堂案例9-7】：為事件設(shè)置響應(yīng)函數(shù) /252
9．3 DOM EVENT事件處理 /253
【課堂案例9-8】：注冊(cè)事件監(jiān)聽(tīng)器，設(shè)置背景圖片 /256
【課堂案例9-9】：注冊(cè)多個(gè)事件監(jiān)聽(tīng)器，實(shí)現(xiàn)簡(jiǎn)易加法計(jì)算器 /257
【課堂案例9-10】：事件指派 /258
【課堂案例9-11】：顯示鼠標(biāo)位置 /259
【課堂案例9-12】：創(chuàng)建快捷菜單，縮放圖片 /261
【課堂案例9-13】：創(chuàng)建快捷菜單，縮放圖片 /262
9．4 本章練習(xí) /265
第10章 常用的數(shù)據(jù)交換格式和數(shù)據(jù)存儲(chǔ)技術(shù) /267
10．1 XML文檔 /267
【課堂案例10-1】：同步訪問(wèn)XML文檔，獲取圖書(shū)信息 /269
【課堂案例10-2】：異步訪問(wèn)XML文檔，設(shè)置段落樣式 /270
【課堂案例10-3】：XML生成樹(shù)狀菜單 /272
10．2 JSON /274
【課堂案例10-4】：使用JSON對(duì)象 /274
【課堂案例10-5】：訪問(wèn)JSON對(duì)象中的對(duì)象 /276
【課堂案例10-6】：使用JSON數(shù)組 /276
【課堂案例10-7】：訪問(wèn)JSON對(duì)象數(shù)組 /277
10．3 數(shù)據(jù)存儲(chǔ) /278
【課堂案例10-8】：使用cookie存儲(chǔ)用戶賬戶信息 /278
【課堂案例10-9】：使用localStorage存儲(chǔ)數(shù)據(jù) /280
【課堂案例10-10】：使用sessionStorage存儲(chǔ)數(shù)據(jù) /282
10．3 本章練習(xí) /284
第11章 綜合練習(xí)――服飾設(shè)計(jì)網(wǎng)站 /286
11．1 網(wǎng)站整體說(shuō)明 /286
11．2 JavaScript程序說(shuō)明 /287