JavaScript前端開(kāi)發(fā)實(shí)用技術(shù)教程

第1篇　基礎(chǔ)篇
第1章　Web前端開(kāi)發(fā)技術(shù)概述　2
1．1　Web應(yīng)用程序的架構(gòu)與工作原理　2
1．1．1　Web應(yīng)用程序設(shè)計(jì)語(yǔ)言的產(chǎn)生與發(fā)展　2
1．1．2　Web應(yīng)用程序的組成及各部分的主要功能　5
1．1．3　Web應(yīng)用程序的基本開(kāi)發(fā)流程　6
1．2　Web前端開(kāi)發(fā)實(shí)用技術(shù)概述　7
1．2．1　什么是Web前端開(kāi)發(fā)　7
1．2．2　Web前端開(kāi)發(fā)的要素　8
1．3　HTML基礎(chǔ)　8
1．3．1　HTML網(wǎng)頁(yè)的基本結(jié)構(gòu)　8
1．3．2　設(shè)置網(wǎng)頁(yè)背景和顏色　9
1．3．3　設(shè)置字體屬性　11
1．3．4　超級(jí)鏈接　12
1．3．5　圖像和動(dòng)畫(huà)　13
1．3．6　表格　14
1．3．7　使用框架　15
1．3．8　其他常用標(biāo)簽　16
練習(xí)題　19
第2章　JavaScript語(yǔ)言基礎(chǔ)　20
2．1　JavaScript簡(jiǎn)介　20
2．1．1　在HTML中插入JavaScript代碼　20
2．1．2　使用js文件　21
2．2　JavaScript與Java的比較　21
2．3　JavaScript編輯和調(diào)試工具　22
2．3．1　使用EditPlus編輯JavaScript程序　22
2．3．2　Eclipse開(kāi)發(fā)平臺(tái)簡(jiǎn)介　24
2．3．3　編輯JavaScript的Eclipse插件JSEclipse　26
2．3．4　使用Dreamweaver編輯JavaScript程序　30
2．3．5　調(diào)試JavaScript程序的方法　32
2．4　數(shù)據(jù)類型、常量和變量　34
2．4．1　數(shù)據(jù)類型　34
2．4．2　常量　34
2．4．3　變量　35
2．5　運(yùn)算符和表達(dá)式　36
2．5．1　運(yùn)算符　36
2．5．2　表達(dá)式　39
2．6　常用語(yǔ)句　40
2．6．1　注釋　40
2．6．2　賦值語(yǔ)句　40
2．6．3　if語(yǔ)句　41
2．6．4　switch語(yǔ)句　43
2．6．5　循環(huán)語(yǔ)句　44
練習(xí)題　47
第3章　JavaScript函數(shù)　49
3．1　內(nèi)置函數(shù)　49
3．1．1　alert()函數(shù)　49
3．1．2　confirm()函數(shù)　50
3．1．3　escape()函數(shù)　50
3．1．4　unescape()函數(shù)　51
3．1．5　eval()函數(shù)　51
3．1．6　isNaN()函數(shù)　52
3．1．7　parseFloat()函數(shù)　53
3．1．8　parseInt()函數(shù)　53
3．1．9　prompt()函數(shù)　53
3．2　自定義函數(shù)　54
3．2．1　創(chuàng)建自定義函數(shù)　54
3．2．2　調(diào)用JavaScript函數(shù)　55
3．2．3　變量的作用域　56
3．2．4　函數(shù)的返回值　57
3．3　函數(shù)庫(kù)　57
3．3．1　定義函數(shù)庫(kù)　58
3．3．2　引用函數(shù)庫(kù)　58
練習(xí)題　58
第2篇　進(jìn)階篇
第4章　JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)　62
4．1　面向?qū)ο蟪绦蛟O(shè)計(jì)思想簡(jiǎn)介　62
4．2　JavaScript內(nèi)置對(duì)象　63
4．2．1　JavaScript的內(nèi)置對(duì)象框架　63
4．2．2　基類Object　64
4．2．3　Date類　64
4．2．4　String類　65
4．2．5　Array類　73
4．2．6　Math對(duì)象　77
4．3　DOM編程　78
4．3．1　HTML DOM框架　78
4．3．2　document 對(duì)象　79
4．3．3　DOM對(duì)象的屬性　80
4．3．4　DOM對(duì)象的方法　81
4．4　BOM編程　83
4．4．1　Window對(duì)象　84
4．4．2　Navigator對(duì)象　87
練習(xí)題　88
第5章　JavaScript事件處理　89
5．1　JavaScript事件的基本概念　89
5．1．1　什么是事件　89
5．1．2　DOM事件流　90
5．1．3　事件監(jiān)聽(tīng)器　91
5．2　HTML事件　92
5．2．1　鼠標(biāo)事件　92
5．2．2　Event對(duì)象　93
5．2．3　鍵盤(pán)事件　94
5．2．4　頁(yè)面事件　95
5．2．5　表單事件　95
5．3　干預(yù)系統(tǒng)的事件處理機(jī)制　96
5．3．1　停止事件冒泡　96
5．3．2　阻止事件的默認(rèn)行為　97
練習(xí)題　98
第6章　JavaScript表單編程　100
6．1　HTML表單概述　100
6．1．1　定義表單　100
6．1．2　文本框　101
6．1．3　文本區(qū)域　102
6．1．4　單選按鈕　102
6．1．5　復(fù)選框　103
6．1．6　組合框　103
6．1．7　按鈕　104
6．2　使用JavaScript訪問(wèn)和操作表單元素　105
6．2．1　獲取表單對(duì)象　105
6．2．2　獲取表單元素對(duì)象　107
6．2．3　操作表單元素　109
6．3　操作表單　110
6．3．1　提交表單　110
6．3．2　重置表單　110
6．3．3　表單驗(yàn)證　111
練習(xí)題　112
第3篇　高級(jí)應(yīng)用篇
第7章　JavaScript CSS編程　114
7．1　CSS基礎(chǔ)　114
7．1．1　什么是CSS　114
7．1．2　在HTML文檔中應(yīng)用CSS　115
7．2　CSS 選擇器　117
7．2．1　類別選擇器　117
7．2．2　#id選擇器　118
7．2．3　選擇所有元素　118
7．2．4　選擇所有指定類型的元素　118
7．2．5　element，element選擇器　118
7．2．6　element element選擇器　118
7．2．7　element>element選擇器　118
7．2．8　element+element選擇器　119
7．2．9　[attribute]選擇器　119
7．2．10　[attribute=value]選擇器　119
7．2．11　[attribute~=value]選擇器　119
7．2．12　[attribute|=value]選擇器　119
7．2．13　其他常用的CSS選擇器　120
7．3　定義網(wǎng)頁(yè)和元素的樣式　122
7．3．1　顏色與背景　122
7．3．2　設(shè)置字體　123
7．3．3　設(shè)置文本對(duì)齊　125
7．3．4　超鏈接　125
7．3．5　列表　126
7．4　CSS布局　128
7．4．1　CSS布局設(shè)計(jì)概述　128
7．4．2　CSS框模型　129
7．4．3　CSS輪廓　133
7．4．4　浮動(dòng)元素　134
7．4．5　Div+CSS網(wǎng)頁(yè)布局實(shí)例　135
7．5　CSS3的新技術(shù)　136
7．5．1　實(shí)現(xiàn)圓角效果　136
7．5．2　多彩的邊框　139
7．5．3　陰影　140
7．5．4　透明度　141
7．5．5　旋轉(zhuǎn)　142
7．6　JavaScript CSS編程　143
7．6．1　使用JavaScript修改CSS樣式表的屬性　143
7．6．2　使用JavaScript修改HTML元素的樣式屬性　145
練習(xí)題　146
第8章　Ajax編程　147
8．1　Ajax編程基礎(chǔ)　147
8．1．1　創(chuàng)建XMLHttpRequest對(duì)象　147
8．1．2　發(fā)送HTTP請(qǐng)求　148
8．1．3　從服務(wù)器接收數(shù)據(jù)　148
8．1．4　進(jìn)行HTTP頭(HEAD)請(qǐng)求　151
8．1．5　超時(shí)控制　153
8．1．6　使用FormData對(duì)象向服務(wù)器發(fā)送數(shù)據(jù)　153
8．2　Ajax應(yīng)用實(shí)例　156
8．2．1　自動(dòng)刷新局部頁(yè)面　156
8．2．2　使用FormData對(duì)象上傳文件　158
練習(xí)題　162
第9章　JavaScript HTML5編程　164
9．1　HTML5的新特性　164
9．1．1　簡(jiǎn)化的文檔類型和字符集　164
9．1．2　HTML5的新結(jié)構(gòu)　165
9．1．3　HTML5的新增內(nèi)聯(lián)元素　166
9．1．4　全新的表單設(shè)計(jì)　166
9．1．5　強(qiáng)大的繪圖和多媒體功能　167
9．1．6　打造桌面應(yīng)用的一系列新功能　167
9．1．7　獲取地理位置信息　168
9．1．8　支持多線程　168
9．1．9　瀏覽器對(duì)HTML5的支持　168
9．2　HTML5拖放功能　169
9．2．1　什么是拖放　169
9．2．2　設(shè)置元素為可拖放　170
9．2．3　拖放事件　170
9．2．4　傳遞拖曳數(shù)據(jù)　171
9．2．5　HTML5拖放的實(shí)例　172
9．3　無(wú)插件播放多媒體　174
9．3．1　HTML5音頻　174
9．3．2　HTML5視頻　180
9．4　獲取瀏覽器的地理位置信息　186
9．4．1　什么是瀏覽器地理位置　187
9．4．2　瀏覽器對(duì)獲取地理位置信息的支持情況　187
9．4．3　獲取地理位置信息　188
9．4．4　數(shù)據(jù)保護(hù)　191
練習(xí)題　194
第10章　最流行的JavaScript腳本庫(kù)jQuery　197
10．1　jQuery基礎(chǔ)　197
10．1．1　下載jQuery　197
10．1．2　初識(shí)jQuery　198
10．2　jQuery選擇器　199
10．2．1　基礎(chǔ)選擇器　199
10．2．2　層次選擇器　202
10．2．3　基本過(guò)濾器　207
10．2．4　內(nèi)容過(guò)濾器　209
10．2．5　可見(jiàn)性過(guò)濾器　210
10．2．6　屬性過(guò)濾器　211
10．2．7　子元素過(guò)濾器　213
10．3　設(shè)置HTML元素的屬性與CSS樣式　214
10．3．1　設(shè)置HTML元素的屬性　214
10．3．2　設(shè)置CSS樣式　217
10．4　表單編程　220
10．4．1　表單選擇器　220
10．4．2　表單過(guò)濾器　223
10．4．3　表單API　225
10．5　事件和Event對(duì)象　228
10．5．1　事件處理函數(shù)　228
10．5．2　Event對(duì)象　228
10．5．3　綁定到事件處理函數(shù)　230
10．5．4　鍵盤(pán)事件　231
10．5．5　鼠標(biāo)事件　232
10．5．6　文檔加載事件　234
10．5．7　瀏覽器事件　234
10．6　jQuery動(dòng)畫(huà)　235
10．6．1　執(zhí)行自定義的動(dòng)畫(huà)　235
10．6．2　顯示和隱藏HTML元素　236
10．6．3　淡入淡出效果　238
10．6．4　滑動(dòng)效果　241
10．6．5　動(dòng)畫(huà)隊(duì)列　243
10．7　jQuery特效應(yīng)用實(shí)例　245
10．7．1　幻燈片式畫(huà)廊　246
10．7．2　使用jQuery+CSS3設(shè)計(jì)旋轉(zhuǎn)切換圖片的幻燈片　252
10．7．3　設(shè)計(jì)上下翻滾效果的導(dǎo)航菜單　255
練習(xí)題　257
第11章　JavaScript特效應(yīng)用實(shí)例　258
11．1　提示條和工具欄　258
11．1．1　鼠標(biāo)懸停在圖片上時(shí)顯示文字提示　258
11．1．2　設(shè)計(jì)固定在網(wǎng)頁(yè)頂部的工具欄　261
11．2　頁(yè)面顯示特效　264
11．2．1　QQ在線客服浮動(dòng)窗口　264
11．2．2　欄目輪流顯示的特效　266
11．3　圖片展示　268
11．3．1　滾動(dòng)的畫(huà)廊　268
11．3．2　在網(wǎng)頁(yè)上浮動(dòng)廣告圖片　271
11．4　菜單設(shè)計(jì)　271
11．4．1　切換欄目的菜單　271
11．4．2　jQuery設(shè)計(jì)的下拉菜單　273
附錄　實(shí)驗(yàn)　276
實(shí)驗(yàn)1　HTML基礎(chǔ)　276
實(shí)驗(yàn)2　JavaScript編程　278
實(shí)驗(yàn)3　JavaScript編輯和調(diào)試工具　279
實(shí)驗(yàn)4　JavaScript函數(shù)　280
實(shí)驗(yàn)5　JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)　282
實(shí)驗(yàn)6　JavaScript事件處理　284
實(shí)驗(yàn)7　JavaScript表單編程　285
實(shí)驗(yàn)8　JavaScript CSS編程　286
實(shí)驗(yàn)9　Ajax編程　287
實(shí)驗(yàn)10　JavaScript HTML5編程　288
實(shí)驗(yàn)11　jQuery編程　291
實(shí)驗(yàn)12　JavaScript特效應(yīng)用實(shí)例　293