HTML5+CSS3+JavaScript從入門(mén)到精通

第1篇 HTML技術(shù)篇
第1章 網(wǎng)頁(yè)基礎(chǔ)知識(shí)入門(mén) 1
1．1 了解HTML網(wǎng)頁(yè)技術(shù) 1
1．1．1 什么是HTML和HTML 5 1
1．1．2 如何獲取網(wǎng)頁(yè)的源代碼 2
1．1．3 靜態(tài)網(wǎng)頁(yè) 3
1．1．4 動(dòng)態(tài)網(wǎng)頁(yè) 3
1．1．5 網(wǎng)站 3
1．2 了解網(wǎng)頁(yè)技術(shù)的工作原理 4
1．2．1 靜態(tài)HTML的工作流程 4
1．2．2 動(dòng)態(tài)HTML的工作流程 4
1．3 制作一個(gè)完整的HTML 5網(wǎng)頁(yè) 5
1．3．1 搭建上機(jī)練習(xí)環(huán)境 5
1．3．2 完成第一個(gè)網(wǎng)頁(yè) 5
1．4 技術(shù)解惑 6
1．4．1 HTML與HTML 5是兩種網(wǎng)頁(yè)語(yǔ)言嗎 6
1．4．2 如何區(qū)分靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè) 6
第2章 HTML 5網(wǎng)頁(yè)的結(jié)構(gòu) 7
2．1 動(dòng)手解構(gòu)一個(gè)HTML 5頁(yè)面 7
2．2 HTML的基礎(chǔ)知識(shí) 7
2．2．1 HTML的基礎(chǔ)語(yǔ)法 7
2．2．2 HTML文檔的基本骨架 8
2．3 HTML文檔中的標(biāo)簽 8
2．3．1 樣本代碼DOCTYPE 9
2．3．2 開(kāi)始標(biāo)簽＜html＞ 9
2．3．3 頭部標(biāo)簽和頭部標(biāo)簽的對(duì)象 9
2．3．4 標(biāo)題標(biāo)簽＜title＞ 9
2．3．5 主體標(biāo)簽＜body＞ 9
2．3．6 美化HTML文檔 9
2．4 拓展訓(xùn)練 10
2．4．1 訓(xùn)練一：制作一個(gè)HTML網(wǎng)頁(yè)，包含HTML基本標(biāo)記，頁(yè)面顯示
“Hello World!” 10
2．4．2 訓(xùn)練二：制作一個(gè)HTML網(wǎng)頁(yè)，要求在瀏覽器標(biāo)題欄中顯示
“Hello World!” 10
2．5 技術(shù)解惑 11
2．5．1 HTML標(biāo)簽需要死記硬背嗎 11
2．5．2 HTML網(wǎng)頁(yè)的結(jié)構(gòu)中哪些標(biāo)簽是必需的 11
第3章 網(wǎng)頁(yè)中的文本與段落 12
3．1 文本的排版格式 12
3．1．1 寫(xiě)一行換一行 12
3．1．2 在頁(yè)面中使用空格 13
3．1．3 文本的段落要對(duì)齊 14
3．2 文本的屬性樣式 15
3．2．1 不一樣的文本字體大小 15
3．2．2 奇妙的特殊符號(hào) 16
3．2．3 給文本加標(biāo)注 17
3．3 整齊的文本列表 18
3．3．1 無(wú)序列表 18
3．3．2 有序列表 19
3．3．3 定義列表 20
3．3．4 列表嵌套 21
3．4 拓展訓(xùn)練 22
3．4．1 訓(xùn)練一：在頁(yè)面中設(shè)置段落對(duì)齊方式 22
3．4．2 訓(xùn)練二：在頁(yè)面中創(chuàng)建有序列表 23
3．5 技術(shù)解惑 23
3．5．1 文本段落的對(duì)齊方式 23
3．5．2 有序列表與無(wú)序列表 23
第4章 網(wǎng)頁(yè)中的圖像 24
4．1 圖像的基礎(chǔ)知識(shí) 24
4．1．1 常用的位圖圖像 24
4．1．2 在頁(yè)面中常用的位圖格式 24
4．1．3 矢量圖 25
4．1．4 圖像的分辨率 25
4．1．5 認(rèn)識(shí)一些網(wǎng)頁(yè)中常用的Banner尺寸 25
4．2 頁(yè)面中的圖像 26
4．2．1 理解圖像路徑 26
4．2．2 像編輯文本對(duì)齊一樣在頁(yè)面中對(duì)齊圖片 27
4．2．3 圖像與文本的對(duì)齊方式 28
4．2．4 調(diào)整圖像與文本的距離 29
4．3 讓圖像更美觀 30
4．3．1 使用畫(huà)圖工具修改圖像 30
4．3．2 為圖像添加邊框 30
4．3．3 獨(dú)樹(shù)一幟的水平線(xiàn) 31
4．4 改變頁(yè)面的背景 32
4．5 拓展訓(xùn)練 33
4．5．1 訓(xùn)練一：在網(wǎng)頁(yè)中插入圖片并設(shè)置邊框 33
4．5．2 訓(xùn)練二：在頁(yè)面中插入寬度為800px、高度為2px、顏色為藍(lán)色的
水平線(xiàn) 34
4．6 技術(shù)解惑 34
4．6．1 使用圖像的技巧 34
4．6．2 善用水平線(xiàn) 34
第5章 網(wǎng)頁(yè)中的鏈接 35
5．1 認(rèn)識(shí)鏈接 35
5．1．1 初識(shí)頁(yè)面鏈接 35
5．1．2 理解鏈接地址 36
5．2 鏈接的種類(lèi) 37
5．2．1 基本的文本鏈接 38
5．2．2 基本的圖像鏈接 38
5．2．3 把郵箱留給需要聯(lián)系你的人 39
5．2．4 在同一頁(yè)面中快速查找信息 40
5．3 提高頁(yè)面鏈接的友好度 42
5．3．1 美觀鏈接的狀態(tài) 42
5．3．2 特殊的鏈接方式 44
5．3．3 熱點(diǎn)圖像區(qū)域的鏈接 46
5．4 在新窗口中顯示鏈接窗口 48
5．5 拓展訓(xùn)練 49
5．5．1 訓(xùn)練一：在頁(yè)面中使用圖像鏈接 49
5．5．2 訓(xùn)練二：在頁(yè)面中使用熱點(diǎn)圖像區(qū)域鏈接 49
5．6 技術(shù)解惑 49
5．6．1 合理使用錨點(diǎn)鏈接 49
5．6．2 合理使用郵件鏈接 50
第6章 網(wǎng)頁(yè)中的表單 51
6．1 表單的工作原理 51
6．1．1 ＜script＞標(biāo)記 51
6．1．2 創(chuàng)建表單 51
6．1．3 表單域 52
6．2 通過(guò)表單展示不一樣的頁(yè)面 52
6．2．1 input對(duì)象下的多種表單表現(xiàn)形式 52
6．2．2 text文本框的樣式表單 53
6．2．3 password輸入密碼的樣式表單 54
6．2．4 checkbox復(fù)選框的樣式表單 55
6．2．5 radio單選框的樣式表單 57
6．2．6 submit提交數(shù)據(jù)的樣式表單 58
6．2．7 hidden隱藏域的樣式表單 59
6．2．8 image樣式的表單 60
6．2．9 file上傳文件的樣式表單 61
6．2．10 textarea對(duì)象的表單 62
6．2．11 select對(duì)象的表單 64
6．2．12 表單域集合 65
6．3 HTML 5表單的進(jìn)化 66
6．3．1 早期的表單發(fā)展 66
6．3．2 HTML 5表單的問(wèn)世 66
6．3．3 當(dāng)前的支持情況 67
6．3．4 新增的表單輸入類(lèi)型 67
6．4 新增表單特性及元素 68
6．4．1 form特性 68
6．4．2 formaction特性 68
6．4．3 form其他特性 69
6．4．4 placeholder特性 69
6．4．5 autofocus特性 69
6．4．6 autocomplete特性 69
6．4．7 list特性和datalist元素 70
6．4．8 keygen元素 70
6．4．9 output元素 70
6．5 表單驗(yàn)證API 71
6．5．1 與驗(yàn)證有關(guān)的表單元素特性 71
6．5．2 表單驗(yàn)證的屬性 72
6．5．3 ValidityState對(duì)象 72
6．5．4 表單驗(yàn)證的方法 73
6．5．5 表單驗(yàn)證的事件 75
6．6 拓展訓(xùn)練 76
6．6．1 訓(xùn)練一：在頁(yè)面中使用下拉菜單表單元素 76
6．6．2 訓(xùn)練二：在頁(yè)面中使用email表單輸入元素并設(shè)置autofocus屬性 77
6．7 技術(shù)解惑 77
6．7．1 HTML 5新增的表單類(lèi)型有哪些 77
6．7．2 HTML 5新增的表單特性有哪些 77
第7章 音頻和視頻 78
7．1 audio和video基礎(chǔ)知識(shí) 78
7．1．1 在線(xiàn)多媒體的發(fā)展 78
7．1．2 多媒體術(shù)語(yǔ) 79
7．1．3 HTML 5多媒體文件格式 80
7．1．4 功能缺陷及未來(lái)趨勢(shì) 81
7．2 使用HTML 5的audio和video元素 81
7．2．1 在頁(yè)面中加入音頻和視頻 81
7．2．2 使用source元素 82
7．2．3 使用腳本檢測(cè)瀏覽器的標(biāo)簽支持情況 82
7．2．4 audio和video的特性和屬性 83
7．2．5 audio和video的方法 86
7．2．6 audio和video的事件 88
7．3 練習(xí)：做自定義播放工具條 89
7．3．1 案例簡(jiǎn)介 89
7．3．2 網(wǎng)頁(yè)基本元素 90
7．3．3 定義全局的視頻對(duì)象 90
7．3．4 添加播放/暫停、前進(jìn)和后退功能 91
7．3．5 添加慢進(jìn)和快進(jìn)功能 91
7．3．6 添加靜音和音量功能 92
7．3．7 添加進(jìn)度顯示功能 92
7．4 拓展訓(xùn)練 93
7．4．1 訓(xùn)練一：在頁(yè)面中插入音頻格式 93
7．4．2 訓(xùn)練二：在頁(yè)面中插入視頻格式，并在頁(yè)面加載完畢后自動(dòng)播放 93
7．5 技術(shù)解惑 93
7．5．1 如何使用合適的音頻類(lèi)型 93
7．5．2 在網(wǎng)上使用視頻的技巧 94
第8章 在網(wǎng)頁(yè)中拖放內(nèi)容 95
8．1 拖放API 95
8．1．1 新增的draggable特性 95
8．1．2 新增的鼠標(biāo)拖放事件 95
8．1．3 DataTransfer對(duì)象 96
8．1．4 練習(xí)：拖放元素的內(nèi)容 97
8．2 文件API 100
8．2．1 新增的標(biāo)簽特性 100
8．2．2 FileList對(duì)象與File對(duì)象 101
8．2．3 Blob對(duì)象 102
8．2．4 FileReader接口 103
8．3 練習(xí)：把圖片拖入瀏覽器 108
8．3．1 案例簡(jiǎn)介 108
8．3．2 設(shè)計(jì)網(wǎng)頁(yè)基本元素 108
8．3．3 基本函數(shù)的實(shí)現(xiàn) 109
8．3．4 頁(yè)面加載處理 109
8．4 拓展訓(xùn)練 110
8．4．1 訓(xùn)練一：使用文件選擇框可以一次選取多個(gè)文件 110
8．4．2 訓(xùn)練二：在網(wǎng)頁(yè)中設(shè)置一個(gè)層是可以拖動(dòng)的 110
8．5 技術(shù)解惑 110
8．5．1 理解拖放API與文件API 110
8．5．2 如何使用FlieList對(duì)象 111
第9章 網(wǎng)頁(yè)的本地存儲(chǔ) 112
9．1 本地存儲(chǔ)對(duì)象――Web Storage 112
9．1．1 Web Storage簡(jiǎn)介 112
9．1．2 sessionStorage和localStorage 113
9．1．3 設(shè)置和獲取Storage數(shù)據(jù) 115
9．1．4 Storage API的屬性和方法 117
9．1．5 存儲(chǔ)JSON對(duì)象的數(shù)據(jù) 119
9．1．6 Storage API的事件 122
9．1．7 練習(xí)：在兩個(gè)窗口中實(shí)現(xiàn)通信 122
9．2 本地?cái)?shù)據(jù)庫(kù)――Web SQL Database 124
9．2．1 Web SQL Database簡(jiǎn)介 124
9．2．2 操作Web SQL數(shù)據(jù)庫(kù) 124
9．2．3 練習(xí)：基本的數(shù)據(jù)庫(kù)操作 125
9．3 拓展訓(xùn)練 129
9．3．1 訓(xùn)練一：保存并讀取Storage數(shù)據(jù) 129
9．3．2 訓(xùn)練二：使用Web SQL數(shù)據(jù)庫(kù)向名稱(chēng)為User的表中插入一條記錄 129
9．4 技術(shù)解惑 130
9．4．1 理解本地存儲(chǔ)對(duì)象 130
9．4．2 如何使用本地?cái)?shù)據(jù)庫(kù) 130
第10章 繪制圖形 131
10．1 認(rèn)識(shí)Canvas 131
10．1．1 Canvas的歷史 131
10．1．2 Canvas和SVG及VML之間的差異 131
10．2 Canvas基本知識(shí) 132
10．2．1 構(gòu)建Canvas元素 132
10．2．2 使用JavaScript實(shí)現(xiàn)繪圖的流程 133
10．3 使用Canvas繪圖 135
10．3．1 繪制矩形 135
10．3．2 使用路徑 137
10．3．3 圖形組合 142
10．3．4 繪制曲線(xiàn) 144
10．3．5 使用圖像 151
10．3．6 剪裁區(qū)域 153
10．3．7 繪制漸變 157
10．3．8 描邊屬性 159
10．3．9 模式 161
10．3．10 變換 163
10．3．11 使用文本 167
10．3．12 陰影效果 170
10．3．13 狀態(tài)的保存與恢復(fù) 171
10．3．14 操作像素 173
10．4 在Canvas中實(shí)現(xiàn)動(dòng)畫(huà) 175
10．5 拓展訓(xùn)練 179
10．5．1 訓(xùn)練一：使用Canvas繪制矩形 179
10．5．2 訓(xùn)練二：使用Canvas繪制陰影效果 180
10．6 技術(shù)解惑 180
10．6．1 理解Canvas對(duì)象 180
10．6．2 使用JavaScript實(shí)現(xiàn)繪圖 180
第2篇 CSS技術(shù)篇
第11章 CSS基礎(chǔ)知識(shí)入門(mén) 181
11．1 什么是CSS 181
11．2 CSS的寫(xiě)法 181
11．2．1 基本的樣式表的寫(xiě)法 181
11．2．2 使用類(lèi)class和標(biāo)志id鏈接樣式表 182
11．2．3 創(chuàng)建選擇器 183
11．2．4 應(yīng)用CSS樣式表 185
11．3 用CSS來(lái)修飾頁(yè)面文本 186
11．3．1 修飾頁(yè)面文本字體 186
11．3．2 文本的字號(hào) 187
11．3．3 文本段落行高 187
11．3．4 禁止文本自動(dòng)換行 187
11．4 給頁(yè)面對(duì)象添加顏色 187
11．5 CSS 3的發(fā)展 188
11．5．1 模塊化的發(fā)展 188
11．5．2 瀏覽器支持情況 189
11．5．3 CSS 3新特性預(yù)覽 189
11．6 CSS 3增加的選擇器功能 191
11．6．1 屬性選擇器 191
11．6．2 結(jié)構(gòu)偽類(lèi)選擇器 191
11．6．3 UI元素狀態(tài)偽類(lèi)選擇器 192
11．6．4 偽元素選擇器 192
11．7 拓展訓(xùn)練 193
11．7．1 訓(xùn)練一：用CSS為頁(yè)面中的my_c類(lèi)添加樣式 193
11．7．2 訓(xùn)練二：用CSS為頁(yè)面中的輸入框在獲取焦點(diǎn)時(shí)設(shè)置樣式 194
11．8 技術(shù)解惑 194
11．8．1 理解CSS的基本語(yǔ)法 194
11．8．2 掌握各種常用選擇器的使用 194
第12章 美化文本與背景 195
12．1 文本與字體 195
12．1．1 多樣化的文本陰影――text-shadow屬性 195
12．1．2 溢出文本處理――text-overflow屬性 200
12．1．3 文字對(duì)齊――word-wrap和word-break屬性 201
12．1．4 使用服務(wù)器端的字體――@font-face規(guī)則 203
12．1．5 練習(xí)：使用豐富的文字樣式 206
12．2 色彩模式和不透明度 208
12．2．1 HSL色彩模式 208
12．2．2 HSLA色彩模式 211
12．2．3 RGBA色彩模式 212
12．2．4 不透明屬性opacity 213
12．2．5 練習(xí)：設(shè)置半透明的遮蔽層 215
12．3 背景 218
12．3．1 在元素里定義多個(gè)背景圖片 218
12．3．2 指定背景的原點(diǎn)位置 219
12．3．3 指定背景的顯示區(qū)域 222
12．3．4 指定背景圖像的大小 224
12．3．5 練習(xí)：設(shè)計(jì)信紙的效果 227
12．4 邊框 230
12．4．1 設(shè)計(jì)圓角邊框――border-radius屬性 230
12．4．2 設(shè)計(jì)圖像邊框――border-image屬性 235
12．4．3 設(shè)計(jì)多色邊框――border-color屬性 244
12．4．4 練習(xí)：使用新技術(shù)設(shè)計(jì)網(wǎng)頁(yè) 245
12．5 拓展訓(xùn)練 250
12．5．1 訓(xùn)練一：為文本添加陰影效果 250
12．5．2 訓(xùn)練二：為層添加圓角邊框效果 250
12．6 技術(shù)解惑 251
12．6．1 文本的新特性 251
12．6．2 不同色彩模式的使用 251
12．6．3 邊框的使用 251
第13章 DIV+CSS布局 252
13．1 理解塊級(jí)元素的意義 252
13．2 頁(yè)面中的層 252
13．2．1 行＜span＞和層＜div＞ 252
13．2．2 層的基本定位 253
13．2．3 層的疊加 256
13．3 框模型 257
13．3．1 理解框模型 257
13．3．2 空距――padding屬性 258
13．3．3 邊框――border的擴(kuò)展屬性 259
13．3．4 邊距――margin屬性 260
13．3．5 框模型的溢出 260
13．4 定制層的display屬性 260
13．5 CSS Hack 260
13．6 拓展訓(xùn)練 261
13．6．1 訓(xùn)練一：在頁(yè)面中對(duì)一個(gè)層使用絕對(duì)定位 261
13．6．2 訓(xùn)練二：為一個(gè)層設(shè)置邊框樣式 261
13．7 技術(shù)解惑 261
13．7．1 塊級(jí)元素與行內(nèi)元素的區(qū)別 261
13．7．2 如何理解內(nèi)邊距與外邊距 262
第14章 盒布局 263
14．1 靈活的盒布局 263
14．1．1 開(kāi)啟盒布局 263
14．1．2 元素的布局方向――box-orient屬性 265
14．1．3 元素的布局順序――box-direction屬性 267
14．1．4 調(diào)整元素的位置――box-ordinal-group屬性 269
14．1．5 彈性空間分配――box-flex屬性 270
14．1．6 元素的對(duì)其方式――box-pack和box-align屬性 274
14．1．7 練習(xí)：使用新型盒布局設(shè)計(jì)網(wǎng)頁(yè) 278
14．2 增強(qiáng)的盒模型 282
14．2．1 盒子陰影――box-shadow屬性 282
14．2．2 盒子尺寸的計(jì)算方法――box-sizing屬性 286
14．2．3 盒子溢出內(nèi)容處理――overflow-x和overflow-y屬性 288
14．2．4 練習(xí)：設(shè)計(jì)網(wǎng)站服務(wù)條款頁(yè)面 290
14．3 增強(qiáng)的用戶(hù)界面設(shè)計(jì) 292
14．3．1 允許用戶(hù)改變?cè)爻叽绋D―resize屬性 292
14．3．2 定義外輪廓線(xiàn)――outline屬性 294
14．3．3 偽裝的元素――appearance屬性 298
14．3．4 為元素添加內(nèi)容――content屬性 300
14．3．5 練習(xí)：設(shè)計(jì)一個(gè)省份選擇盤(pán) 303
14．4 拓展訓(xùn)練 305
14．4．1 訓(xùn)練一：設(shè)置盒元素布局方向?yàn)樗讲季?305
14．4．2 訓(xùn)練二：在頁(yè)面中創(chuàng)建一個(gè)可以調(diào)整大小的層 306
14．5 技術(shù)解惑 306
14．5．1 如何使用盒布局屬性的兼容性 306
14．5．2 理解盒子溢出內(nèi)容處理的區(qū)別 306
第15章 多列布局 307
15．1 多列布局基礎(chǔ)知識(shí) 307
15．1．1 多列屬性columns 307
15．1．2 列寬屬性column-width 309
15．1．3 列數(shù)屬性column-count 310
15．1．4 列間距屬性column-gap 311
15．1．5 定義列分隔線(xiàn)――column-rule屬性 312
15．1．6 定義橫跨所有列――column-span屬性 314
15．2 練習(xí)：模仿雜志的多列版式 316
15．3 拓展訓(xùn)練 318
15．3．1 訓(xùn)練一：在一個(gè)層中實(shí)現(xiàn)多列布局 318
15．3．2 訓(xùn)練二：在多列布局的基礎(chǔ)上定義列分隔線(xiàn) 318
15．4 技術(shù)解惑 319
15．4．1 如何使用多列布局的快捷設(shè)置 319
15．4．2 使用column-span屬性的注意事項(xiàng) 319
第16章 CSS 3自適應(yīng)布局 320
16．1 媒體查詢(xún) 320
16．1．1 @media規(guī)則的語(yǔ)法 320
16．1．2 使用媒體查詢(xún)鏈接外部樣式表文件 324
16．2 練習(xí)：自適應(yīng)屏幕的樣式表方案 325
16．3 拓展訓(xùn)練 330
16．3．1 訓(xùn)練一：媒體查詢(xún)常用的設(shè)備種類(lèi) 330
16．3．2 訓(xùn)練二：如何使用媒體查詢(xún)鏈接外部樣式表文件 331
16．4 技術(shù)解惑 331
16．4．1 媒體查詢(xún)的作用是什么 331
16．4．2 媒體查詢(xún)中的媒體類(lèi)型有哪些 331
第17章 動(dòng)畫(huà)和漸變 332
17．1 CSS 3變形基礎(chǔ) 332
17．1．1 元素的變形――transform屬性 332
17．1．2 旋轉(zhuǎn) 332
17．1．3 縮放和翻轉(zhuǎn) 334
17．1．4 移動(dòng) 336
17．1．5 傾斜 339
17．1．6 矩陣變形 341
17．1．7 同時(shí)使用多個(gè)變形函數(shù) 343
17．1．8 定義變形原點(diǎn)――transform-origin屬性 345
17．1．9 練習(xí)：設(shè)計(jì)圖片畫(huà)廊 347
17．2 CSS 3過(guò)渡效果 350
17．2．1 實(shí)現(xiàn)過(guò)渡效果――transition屬性 350
17．2．2 指定過(guò)渡的屬性――transition-property屬性 351
17．2．3 指定過(guò)渡的時(shí)間――transition-duration屬性 353
17．2．4 指定過(guò)渡延遲時(shí)間――transition-delay屬性 354
17．2．5 指定過(guò)渡方式――transition-timing-function屬性 355
17．2．6 練習(xí)：制作滑動(dòng)的菜單 356
17．3 CSS 3動(dòng)畫(huà)設(shè)計(jì) 359
17．3．1 關(guān)鍵幀動(dòng)畫(huà)――@keyframes規(guī)則 359
17．3．2 動(dòng)畫(huà)的實(shí)現(xiàn)――animation屬性 360
17．3．3 練習(xí)：永不停止的風(fēng)車(chē) 363
17．4 CSS 3漸變?cè)O(shè)計(jì) 365
17．4．1 線(xiàn)性漸變 366
17．4．2 徑向漸變 369
17．4．3 練習(xí)：設(shè)計(jì)漸變的按鈕 371
17．5 拓展訓(xùn)練 373
17．5．1 訓(xùn)練一：使用CSS 3實(shí)現(xiàn)當(dāng)鼠標(biāo)指針經(jīng)過(guò)鏈接時(shí)放大 373
17．5．2 訓(xùn)練二：使用CSS 3實(shí)現(xiàn)一個(gè)層中有線(xiàn)性漸變背景 373
17．6 技術(shù)解惑 374
17．6．1 元素的變形與布局 374
17．6．2 過(guò)渡效果與變形的區(qū)別 374
第3篇 JavaScript技術(shù)篇
第18章 JavaScript程序基礎(chǔ)知識(shí) 375
18．1 JavaScript的基礎(chǔ)語(yǔ)法 375
18．1．1 字母大小寫(xiě)編寫(xiě)規(guī)范 375
18．1．2 JavaScript代碼編寫(xiě)格式 375
18．1．3 注釋格式 376
18．1．4 保留字 376
18．1．5 基本的輸出方法 376
18．1．6 關(guān)于＜script＞＜/script＞標(biāo)簽的聲明 378
18．2 JavaScript交互基本方法 379
18．2．1 最常用的信息對(duì)話(huà)框 379
18．2．2 選擇對(duì)話(huà)框 380
18．2．3 提示對(duì)話(huà)框 382
18．3 數(shù)據(jù)類(lèi)型和變量 383
18．3．1 數(shù)據(jù)類(lèi)型的理解 383
18．3．2 學(xué)習(xí)幾種基本數(shù)據(jù)類(lèi)型 384
18．3．3 變量的含義 386
18．3．4 變量的聲明與使用 386
18．4 常用的運(yùn)算符 387
18．4．1 運(yùn)算符與表達(dá)式 387
18．4．2 基本運(yùn)算符及其使用 388
18．4．3 關(guān)系運(yùn)算符及其使用 393
18．4．4 邏輯運(yùn)算符及其使用 395
18．4．5 其他常用運(yùn)算符及其使用 396
18．5 拓展訓(xùn)練 398
18．5．1 訓(xùn)練一：在頁(yè)面中插入一段JavaScript代碼 398
18．5．2 訓(xùn)練二：在頁(yè)面中使用一個(gè)選擇框，并根據(jù)選擇輸出不同內(nèi)容 398
18．6 技術(shù)解惑 398
18．6．1 關(guān)于多行注釋的誤區(qū) 398
18．6．2 3種對(duì)話(huà)框的區(qū)別 399
18．6．3 關(guān)于JavaScript中的基本數(shù)據(jù)類(lèi)型 399
第19章 JavaScript核心語(yǔ)法 400
19．1 程序的核心：分支和循環(huán) 400
19．1．1 if條件分支 400
19．1．2 switch條件分支 402
19．1．3 while循環(huán) 404
19．1．4 do．．．while循環(huán) 405
19．1．5 for循環(huán) 407
19．1．6 for．．．in循環(huán) 408
19．1．7 如何更合理地控制循環(huán)語(yǔ)句 409
19．2 函數(shù) 413
19．2．1 什么是函數(shù) 413
19．2．2 學(xué)會(huì)使用函數(shù)解決問(wèn)題 415
19．2．3 理解函數(shù)的參數(shù)傳遞 416
19．2．4 函數(shù)中變量的作用域和返回值 417
19．2．5 函數(shù)的嵌套 419
19．3 面向?qū)ο缶幊痰暮?jiǎn)單概念 420
19．3．1 什么是面向?qū)ο?420
19．3．2 如何創(chuàng)建對(duì)象 421
19．3．3 定義對(duì)象的屬性 422
19．3．4 對(duì)象的構(gòu)造函數(shù)和方法 424
19．3．5 關(guān)聯(lián)數(shù)組的概念 426
19．3．6 with語(yǔ)句和for．．．in語(yǔ)句 428
19．4 拓展訓(xùn)練 431
19．4．1 訓(xùn)練一：使用循環(huán)打印九九乘法表 431
19．4．2 訓(xùn)練二：使用自定義函數(shù)求某個(gè)數(shù)的平方 431
19．5 技術(shù)解惑 431
19．5．1 if與switch的使用時(shí)機(jī) 431
19．5．2 while與for循環(huán)的異同 432
19．5．3 while與do．．．while循環(huán)的異同 432
19．5．4 關(guān)于自定義函數(shù) 432
19．5．5 如何理解面向?qū)ο?432
第20章 JavaScript核心對(duì)象 433
20．1 數(shù)組對(duì)象 433
20．1．1 創(chuàng)建數(shù)組 433
20．1．2 數(shù)組元素的操作 435
20．1．3 創(chuàng)建多維數(shù)組 437
20．1．4 數(shù)組的方法 438
20．2 日期對(duì)象 444
20．2．1 用日期對(duì)象創(chuàng)建常用日期 445
20．2．2 日期對(duì)象的方法 446
20．2．3 編寫(xiě)一個(gè)時(shí)間計(jì)算程序 449
20．3 數(shù)學(xué)運(yùn)算對(duì)象 451
20．3．1 數(shù)學(xué)運(yùn)算對(duì)象的方法和屬性 451
20．3．2 制作一個(gè)小型計(jì)算器 454
20．4 字符串對(duì)象 456
20．4．1 字符串對(duì)象的屬性 456
20．4．2 字符串對(duì)象的方法 457
20．5 函數(shù)對(duì)象 461
20．6 拓展訓(xùn)練 463
20．6．1 訓(xùn)練一：創(chuàng)建數(shù)組并輸出數(shù)組內(nèi)容 463
20．6．2 訓(xùn)練二：輸出當(dāng)前的日期和時(shí)間 463
20．7 技術(shù)解惑 464
20．7．1 如何理解數(shù)組 464
20．7．2 使用日期對(duì)象的注意事項(xiàng) 464
20．7．3 關(guān)于Math對(duì)象 464
20．7．4 關(guān)于字符串對(duì)象 464
第21章 瀏覽器對(duì)象模型 465
21．1 navigator對(duì)象 465
21．1．1 navigator對(duì)象的管理方法 466
21．1．2 在網(wǎng)頁(yè)上顯示瀏覽者系統(tǒng)的基本信息 466
21．2 window對(duì)象 467
21．2．1 window對(duì)象的管理方法 468
21．2．2 制作可定制的彈出窗口 469
21．2．3 完美地關(guān)閉窗口 471
21．2．4 制作簡(jiǎn)單的網(wǎng)頁(yè)動(dòng)畫(huà) 472
21．2．5 延時(shí)執(zhí)行命令 474
21．3 location對(duì)象 476
21．4 history對(duì)象 478
21．5 screen對(duì)象 480
21．6 拓展訓(xùn)練 481
21．6．1 訓(xùn)練一：在頁(yè)面上輸出瀏覽者的瀏覽器名稱(chēng) 481
21．6．2 訓(xùn)練二：使用setInterval()制作移動(dòng)的文字 481
21．7 技術(shù)解惑 482
21．7．1 描述你理解的window對(duì)象 482
21．7．2 描述你理解的document對(duì)象 482
第22章 文檔對(duì)象模型 483
22．1 文檔對(duì)象模型概念詳解 483
22．1．1 文檔對(duì)象模型簡(jiǎn)介 483
22．1．2 文檔對(duì)象的屬性 484
22．1．3 文檔對(duì)象的方法 486
22．2 form對(duì)象 488
22．2．1 訪(fǎng)問(wèn)表單對(duì)象的方法 488
22．2．2 表單控件 492
22．2．3 制作具備數(shù)據(jù)檢測(cè)功能的注冊(cè)頁(yè)面 499
22．3 image對(duì)象 503
22．4 鏈接對(duì)象 506
22．5 拓展訓(xùn)練 508
22．5．1 訓(xùn)練一：使用文檔對(duì)象模型遍歷頁(yè)面全部圖片 508
22．5．2 訓(xùn)練二：當(dāng)輸入框獲取焦點(diǎn)時(shí)顯示紅色，失去焦點(diǎn)后恢復(fù) 508
22．6 技術(shù)解惑 509
22．6．1 文檔對(duì)象模型是什么 509
22．6．2 文檔對(duì)象模型與HTML標(biāo)簽 509
22．6．3 使用文檔對(duì)象模型的注意事項(xiàng) 509
第23章 事件響應(yīng) 510
23．1 事件響應(yīng)的概念 510
23．1．1 事件和事件處理程序 510
23．1．2 HTML元素常用事件的展示 511
23．2 事件方法的使用 513
23．3 event對(duì)象 514
23．3．1 event對(duì)象的各種屬性 514
23．3．2 網(wǎng)頁(yè)監(jiān)視發(fā)生事件的元素 515
23．3．3 網(wǎng)頁(yè)檢測(cè)用戶(hù)的鼠標(biāo)信息 516
23．3．4 網(wǎng)頁(yè)檢測(cè)用戶(hù)的鍵盤(pán)按鍵信息 518
23．3．5 鼠標(biāo)隨意拖動(dòng)網(wǎng)頁(yè)元素 520
23．4 事件編程訪(fǎng)問(wèn)網(wǎng)頁(yè)元素 523
23．4．1 數(shù)組方式訪(fǎng)問(wèn) 523
23．4．2 id名稱(chēng)和name名稱(chēng)訪(fǎng)問(wèn) 525
23．4．3 HTML標(biāo)簽名稱(chēng)訪(fǎng)問(wèn) 527
23．4．4 DOM節(jié)點(diǎn)方法訪(fǎng)問(wèn) 528
23．5 結(jié)合CSS制作動(dòng)態(tài)頁(yè)面 531
23．5．1 讓HTML元素動(dòng)起來(lái) 531
23．5．2 通過(guò)切換CSS給網(wǎng)頁(yè)換膚 534
23．5．3 動(dòng)態(tài)添加節(jié)點(diǎn) 536
23．6 拓展訓(xùn)練 539
23．6．1 訓(xùn)練一：使用鍵盤(pán)方向鍵移動(dòng)頁(yè)面的層 539
23．6．2 訓(xùn)練二：?jiǎn)螕舭粹o為表格添加一行 540
23．7 技術(shù)解惑 541
23．7．1 理解事件 541
23．7．2 理解事件響應(yīng) 541
第4篇 實(shí)戰(zhàn)篇
第24章 實(shí)戰(zhàn)――使用微信小程序開(kāi)發(fā)充值應(yīng)用 543
24．1 小程序開(kāi)發(fā)介紹 543
24．1．1 小程序開(kāi)發(fā)前景 543
24．1．2 HTML 5、CSS 3、JavaScript在小程序中的對(duì)應(yīng)文件 544
24．1．3 網(wǎng)站HTML標(biāo)簽與小程序wxml組件的異同 544
24．1．4 網(wǎng)站中JavaScript與小程序中JavaScript的異同 546
24．1．5 wxss與CSS 3的不同之處 546
24．2 小程序開(kāi)發(fā)涉及的層次和知識(shí)結(jié)構(gòu) 546
24．2．1 第一層：小程序 547
24．2．2 第二層：Web服務(wù)器 547
24．2．3 第三層：數(shù)據(jù)庫(kù) 547
24．2．4 第四層：第三方服務(wù) 548
24．3 小程序開(kāi)發(fā)前的準(zhǔn)備工作 548
24．3．1 Web服務(wù)器方面的準(zhǔn)備 548
24．3．2 申請(qǐng)開(kāi)通小程序 548
24．3．3 設(shè)置小程序服務(wù)器域名 551
24．4 安裝和使用小程序開(kāi)發(fā)工具 553
24．4．1 下載安裝小程序開(kāi)發(fā)工具 554
24．4．2 小程序開(kāi)發(fā)工具介紹 555
24．5 實(shí)戰(zhàn)――充值小程序開(kāi)發(fā) 558
24．5．1 新建充值小程序工程 559
24．5．2 小程序工程目錄結(jié)構(gòu) 561
24．5．3 小程序單個(gè)頁(yè)面的結(jié)構(gòu) 563
24．5．4 充值小程序頁(yè)面開(kāi)發(fā) 565
24．5．5 小程序與Web服務(wù)器之間如何通信 569
第25章 實(shí)戰(zhàn)――資訊小程序 573
25．1 資訊小程序的主要頁(yè)面 573
25．2 資訊小程序單個(gè)頁(yè)面的開(kāi)發(fā)流程 574
25．3 新建資訊小程序項(xiàng)目 574
25．4 資訊小程序的首頁(yè) 576
25．4．1 js腳本從服務(wù)器獲取數(shù)據(jù) 577
25．4．2 在wxml中展示數(shù)據(jù) 578
25．4．3 wxss控制展示效果 581
25．5 開(kāi)發(fā)資訊小程序分類(lèi)頁(yè)面 582
25．5．1 分類(lèi)頁(yè)面index．js 源代碼分析 583
25．5．2 分類(lèi)頁(yè)面index．wxml源代碼分析 584
25．5．3 小程序的模板文件 585
25．5．4 分類(lèi)頁(yè)面index．wxss源代碼分析 586
25．6 開(kāi)發(fā)資訊小程序列表頁(yè)面 587
25．6．1 列表頁(yè)面index．js源代碼分析 588
25．6．2 小程序中使用第三方j(luò)s腳本模塊 589
25．6．3 列表頁(yè)面index．wxml源代碼分析 590
25．6．4 列表頁(yè)面index．wxss源代碼分析 591
25．7 開(kāi)發(fā)資訊小程序內(nèi)容頁(yè)面 592
25．7．1 內(nèi)容頁(yè)面index．js源代碼分析 594
25．7．2 內(nèi)容頁(yè)面index．wxml源代碼分析 599
25．7．3 內(nèi)容頁(yè)面index．wxss源代碼分析 600