HTML5+CSS3+JavaScript從入門到精通

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