了得網計算機/網絡_交互式Web前端開發實踐

編輯推薦

本書以Web前端開發工程師在Web前端開發過程中的實際需要和應該掌握的技術為基礎，全面、繫統地介紹了Web前端開發所涉及的相關知識點和開發技巧，涵蓋網頁設計基礎知識、高級編程知識：HTML（含HTML 5）、CSS（含CSS3）、JavaScript基礎及jQuery框架。每章都配置了大量的實用案例，圖文並茂，效果直觀。

內容簡介

本書以Web前端開發過程中的實際需要和應該掌握的技術為基礎，全面、繫統地介紹了Web前端開發所涉及的相關知識點和開發技巧，涵蓋HTML（含HTML 5）、CSS(含CSS 3)、JavaScript基礎及jQuery框架等網頁設計基礎知識、高級編程知識。每章都配置了大量的實用案例，圖文並茂，效果直觀。
本書分3部分，共8章。*部分為基礎篇，主要介紹Web前端開發基礎知識、HTML標記語言、HTML 5新特性、CSS基礎知識、盒子模型、CSS DIV布局、JavaScript語言及網頁設計方法等內容；第二部分為進階篇，詳細介紹了JavaScript的面向對像編程思想及常用的JavaScript框架，重點介紹了jQuery框架的使用，並輔以大量的案例和綜合實例進行講解，讓讀者能通過本階段的學習提高前端設計和編程的能力；第三部分為實戰篇，綜合運用前兩部分的理論知識，結合軟件開發流程，詳細講解了“點餐繫統”前端的功能設計、編程實現及各方面的內容和技巧。
本書可作為從事Web前端開發、網頁設計與制作、網站開發及網頁編程等行業人員的參考書，也可作為應用型本科院校及培訓學校計算機及相關專業的教材。

部分基礎篇
第1章Web前端開發概述31.1Web概述3
1.1.1Web的發展4
1.1.2Web特點及架構5
1.2Web新技術的發展及應用8
1.2.1Web 3.09
1.2.2Web新技術的應用11
1.3Web前端開發12
1.3.1什麼是Web前端開發技術12
1.3.2Web前端開發工程師13
1.4Web前端開發工具15
1.4.1CSS工具15
1.4.2JavaScript工具15
1.4.3圖像優化工具17

部分基礎篇

第1章Web前端開發概述31.1Web概述3

1.1.1Web的發展4

1.1.2Web特點及架構5

1.2Web新技術的發展及應用8

1.2.1Web 3.09

1.2.2Web新技術的應用11

1.3Web前端開發12

1.3.1什麼是Web前端開發技術12

1.3.2Web前端開發工程師13

1.4Web前端開發工具15

1.4.1CSS工具15

1.4.2JavaScript工具15

1.4.3圖像優化工具17

1.4.4開發及調試工具18

本章小結19

第2章HTML標記語言20

2.1HTML基礎20

2.1.1HTML編寫規範20

2.1.2HTML基本結構21

2.1.3查看HTML文件22

2.2HTML標簽22

2.2.1文字與段落22

2.2.2圖片與超鏈接25

2.2.3列表標簽28

2.2.4表格標簽32

2.2.5表單標簽332.2.6注釋標簽35

2.3XHTML基礎36

2.3.1XHTML簡介36

2.3.2XHTML語法36

2.3.3XHTML與HTML的區別37

2.4HTML 538

2.4.1HTML 5文檔結構38

2.4.2HTML 5新增的結構標簽及屬性38

2.4.3HTML 5音視頻40

2.4.4HTML 5表單42

2.4.5HTML 5畫布49

本章小結64

第3章CSS層疊樣式表65

3.1CSS 2基礎65

3.1.1CSS編寫規範65

3.1.2CSS選擇符67

3.1.3文本樣式70

3.1.4背景邊框樣式71

3.1.5列表樣式75

3.1.6其他樣式77

3.2CSS 3基礎79

3.2.1CSS 3新增特性79

3.2.2CSS 3變形設置96

3.2.3CSS 3動畫設置98

3.3布局基礎102

3.3.1盒子模型102

3.3.2布局方式104

3.4綜合實例108

3.4.1需求分析108

3.4.2實現源代碼109

本章小結111

第4章JavaScript編程基礎112

4.1JavaScript概述112

4.1.1JavaScript的特點112

4.1.2JavaScript的優點及缺點113

4.1.3個JavaScript例子113

4.2JavaScript 語法114

4.2.1JavaScript語句114

4.2.2JavaScript 注釋115

4.2.3變量與常量115

4.2.4運算符116

4.2.5正則表達式117

4.3JavaScript 函數120

4.3.1函數的定義120

4.3.2函數的參數及返回值121

4.3.3函數的調用121

4.4JavaScript程序結構122

4.4.1順序結構122

4.4.2選擇結構123

4.4.3循環結構125

4.5異常處理129

4.6JavaScript事件的處理131

4.6.1JavaScript事件概述131

4.6.2窗口事件132

4.6.3133

4.6.4鍵盤事件134

4.6.5鼠標事件135

4.6.6圖像事件136

4.7JavaScript DOM136

4.7.1JavaScript HTML DOM概述136

4.7.2HTML DOM對像137

4.7.3HTML DOM的簡單應用143

4.8綜合實例146

4.8.1需求描述146

4.8.2分析及實現146

本章小結151

第二部分進階篇

第5章JavaScript高級編程1555.1面向過程編程和面向對像編程概述155

5.1.1面向過程編程155

5.1.2面向對像編程155

5.2JavaScript的面向對像編程157

5.2.1對像的創建與調用157

5.2.2常用的內置對像158

5.3JavaScript框架164

5.3.1Prototype164

5.3.2YUI165

5.3.3ExtJS166

5.3.4jQuery168

5.3.5Dojo171

5.3.6MooTools171

5.4綜合實例171

5.4.1需求描述172

5.4.2分析及實現172

本章小結175

第6章jQuery編程176

6.1jQuery簡介176

6.2jQuery的基本功能176

6.2.1引用jQuery類庫176

6.2.2個jQuery程序177

6.2.3jQuery選擇器178

6.2.4jQuery事件方法185

6.2.5jQuery動畫190

6.2.6DOM操作194

6.2.7解決衝突199

6.2.8編寫插件202

6.3第三方插件及使用方法209

6.3.1校驗控件formValidator211

6.3.2日期控件My97DatePicker219

6.4綜合實例220

6.4.1需求描述220

6.4.2分析及實現221

本章小結225

第7章客戶端數據請求技術226

7.1客戶端請求技術簡介226

7.2Web Service簡介227

7.2.1XML文件228

7.2.2Web Service原理230

7.2.3Web Service的調用234

7.3HTTP請求239

7.3.1HTTP通信機制240

7.3.2HTTP請求的調用243

7.4ajax247

7.4.1XMLHttpRequest對像247

7.4.2JSON251

7.4.3jQuery中的ajax253

本章小結261

第三部分實戰篇

第8章在線訂餐網站2658.1項目背景265

8.2繫統需求和設計265

8.2.1功能設計265

8.2.2數據庫設計265

8.2.3程序設計267

8.3功能實現276

8.3.1首頁276

8.3.2菜品一覽和菜品詳情282

8.3.3注冊和登錄297

8.3.4購物車300

8.3.5訂單管理305

本章小結310

參考文獻311

前言

近十年來，信息技術產業發展態勢良好，在我國經濟發展中起著非常重要的推動作用。信息技術產業也是“十三五”期間被列為重點發展的產業，市場前景廣闊，Web前端開發工程師的需求量大幅增加。一名合格的Web前端開發工程師必須掌握基本的Web前端開發技術，包括CSS、HTML、DOM、JavaScript、ajax等，在掌握這些技術的同時，更要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和潛在的Bug。一名合格的前端工程師除了掌握網站性能優化、SEO和服務器端的基礎知識等知識結構之外，還必須學會運用各種工具進行輔助開發，比如處理IE繫列瀏覽器兼容性問題的IEtester，Firefox排錯用的Firebug、FlashFirebug、Debugger等調試工具。總而言之，一名合格的Web前端開發工程師不但要掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等內容。本書基於HTML、CSS、jQuery、ajax等技術編寫，重點突出交互式的Web前端技術實現。本書囊括了編者及其團隊成員多年Web前端開發與設計的經驗，是一本可以使讀者快速建立規範的Web前端開發意識和工程化軟件開發思想的書籍，是一本可以使讀者快速提高Web前端開發技能並快速達到Web前端開發工程師崗位任職能力要求的書籍。本書內容編排結構合理，知識由淺入深，以較全面的知識點、豐富的案例、完整的綜合項目實踐為主要內容，結合分層開發思想，循序漸進地引導讀者在基礎篇學習基礎理論，在進階篇學習編程技巧，在高級篇通過綜合項目實戰提高Web前端開發技能。本書由冷亞洪、黃煒負責全書的編寫、統稿、知識點及案例設計。具體編寫分工為: 第1章由李發陵編寫，第2章由冷亞洪編寫，第3、4章由闞洪編寫，第5、6章由宋宇編寫，第7、8章由黃煒編寫。本書的特色如下: （1）本書內容編排結構合理，知識點由淺入深，循序漸進地引導讀者快速入門，並能提高初級及以上讀者的實際應用水平，讓讀者能夠快速適應對Web前端開發工程師崗位的新要求。（2）本書采用“案例制”和“項目制”相結合的思想，通過大量的案例幫助讀者對知識點的理解及掌握，使用綜合項目案例（在線訂餐繫統）提升讀者的綜合應用能力。（3）本書重點突出Web的交互式開發，結合軟件的面向對像和分層開發思想進行編程，讓讀者掌握的不僅是傳統的HTML DIV CSS jQuery編程，而且會掌握軟件開發思想，掌握前端與後臺之間的交互式設計與實現。（4）本書在綜合項目案例部分，提供了Java和C#兩種語言實現後臺的數據處理，方便Java和C#方向的讀者學習。（5）本書使用市場上流行的軟件開發技術，使讀者在完成本書的學習後，可以無縫地過渡到對應的工作崗位。我們期望本書能為閱讀者們提供以下幫助。（1）軟件類應用型本科或高職高專人纔培養的實訓教材。（2） Web前端開發工程師的崗前學習教材。（3）培訓機構的培訓教材。（4） Web前端開發工程師的能力提升學習書籍。在本書的編寫過程中，參閱了大量的資料，尤其是參考文獻中列出的資料。在此對所有資料的編寫者表示衷心的感謝！由於本書內容涉及面廣，加之編者的水平有限，不當之處在所難免，懇請廣大讀者朋友批評、指正，我們將不勝感激，編者的郵箱是7357220@qq.com。近十年來，信息技術產業發展態勢良好，在我國經濟發展中起著非常重要的推動作用。信息技術產業也是“十三五”期間被列為重點發展的產業，市場前景廣闊，Web前端開發工程師的需求量大幅增加。一名合格的Web前端開發工程師必須掌握基本的Web前端開發技術，包括CSS、HTML、DOM、JavaScript、ajax等，在掌握這些技術的同時，更要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和潛在的Bug。一名合格的前端工程師除了掌握網站性能優化、SEO和服務器端的基礎知識等知識結構之外，還必須學會運用各種工具進行輔助開發，比如處理IE繫列瀏覽器兼容性問題的IEtester，Firefox排錯用的Firebug、FlashFirebug、Debugger等調試工具。總而言之，一名合格的Web前端開發工程師不但要掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等內容。本書基於HTML、CSS、jQuery、ajax等技術編寫，重點突出交互式的Web前端技術實現。本書囊括了編者及其團隊成員多年Web前端開發與設計的經驗，是一本可以使讀者快速建立規範的Web前端開發意識和工程化軟件開發思想的書籍，是一本可以使讀者快速提高Web前端開發技能並快速達到Web前端開發工程師崗位任職能力要求的書籍。本書內容編排結構合理，知識由淺入深，以較全面的知識點、豐富的案例、完整的綜合項目實踐為主要內容，結合分層開發思想，循序漸進地引導讀者在基礎篇學習基礎理論，在進階篇學習編程技巧，在高級篇通過綜合項目實戰提高Web前端開發技能。本書由冷亞洪、黃煒負責全書的編寫、統稿、知識點及案例設計。具體編寫分工為: 第1章由李發陵編寫，第2章由冷亞洪編寫，第3、4章由闞洪編寫，第5、6章由宋宇編寫，第7、8章由黃煒編寫。本書的特色如下: （1）本書內容編排結構合理，知識點由淺入深，循序漸進地引導讀者快速入門，並能提高初級及以上讀者的實際應用水平，讓讀者能夠快速適應對Web前端開發工程師崗位的新要求。（2）本書采用“案例制”和“項目制”相結合的思想，通過大量的案例幫助讀者對知識點的理解及掌握，使用綜合項目案例（在線訂餐繫統）提升讀者的綜合應用能力。（3）本書重點突出Web的交互式開發，結合軟件的面向對像和分層開發思想進行編程，讓讀者掌握的不僅是傳統的HTML DIV CSS jQuery編程，而且會掌握軟件開發思想，掌握前端與後臺之間的交互式設計與實現。（4）本書在綜合項目案例部分，提供了Java和C#兩種語言實現後臺的數據處理，方便Java和C#方向的讀者學習。（5）本書使用市場上流行的軟件開發技術，使讀者在完成本書的學習後，可以無縫地過渡到對應的工作崗位。我們期望本書能為閱讀者們提供以下幫助。（1）軟件類應用型本科或高職高專人纔培養的實訓教材。（2） Web前端開發工程師的崗前學習教材。（3）培訓機構的培訓教材。（4） Web前端開發工程師的能力提升學習書籍。在本書的編寫過程中，參閱了大量的資料，尤其是參考文獻中列出的資料。在此對所有資料的編寫者表示衷心的感謝！由於本書內容涉及面廣，加之編者的水平有限，不當之處在所難免，懇請廣大讀者朋友批評、指正，我們將不勝感激，編者的郵箱是7357220@qq.com。
編者2017年1月

媒體評論

評論

在線試讀

第3章CSS層疊樣式表3.1CSS 2基礎〖*4/5〗3.1.1CSS編寫規範CSS（cascading style sheet）稱為層疊樣式表，也叫CSS樣式表或樣式表，文件的擴展名為.css，用來設置Web頁面中各種標簽的樣式，如設置文字大小、顏色、行高、背景等。所謂“層疊”是指當在 HTML文件中引用多個樣式文件時，瀏覽器將依據層疊順序及就近原則進行處理，以避免發生衝突。CSS樣式表是一種控制網頁樣式，並將樣式信息與網頁結構分離的一種標記性語言。1. CSS基礎語法CSS樣式表由若干條樣式規則組成。這些樣式規則可以應用到HTML的標簽中來定義頁面的顯示效果。樣式規則由選擇符（selector）、屬性（property）及屬性值（value）組成，格式如下: selector{property:value;property:value;property:value;...}從以上的格式中可以看出，一條樣式規則包含一個選擇符和若干屬性及對應的屬性值。屬性及屬性值用大括號包含起來；屬性與屬性值之間用冒號“:”隔開；屬性值對之間用分號“;”隔開。如為段落標簽

設置樣式如下:p{font-family:"微軟雅黑";font-size:18px;font-old:24px;color:#ff0000;}以上樣式設置段落文字字體為微軟雅黑，字體大小24像素，字體顏色為紅色。2. CSS樣式表類型CSS樣式表有三種類型: 行內樣式表、內部樣式表和外部樣式表。(1) 行內樣式表行內樣式表在這三種樣式表中是簡單、直觀的一種樣式表。它是直接將樣式規則寫入HTML文件中標簽的style屬性中，以屬性值的形式存在。如對段落標簽設置樣式如下:

段落文字

行內樣式表是將樣式規則以屬性值的形式直接寫入標簽的style屬性中，並直接作用於該標簽。雖然簡單直觀，但如果其他的標簽或者相同的標簽要采用一樣的樣式，也需要在標簽中設置style屬性，並設置同樣的樣式規則。這樣整個HTML頁面結構不但顯得臃腫，還沒有起到頁面結構和樣式代碼進行分離的作用，後期維護也很困難。因此，這種類型的樣式表並不常用。(2) 內部樣式表內部樣式表是將樣式規則寫在標簽之間，並通常將該段樣式代碼添加到HTML頁面的頭部，即與標簽內部。其格式如下: 徑向漸變內部樣式表雖然沒有完全將頁面結構和樣式表分離開來，但對於一些簡單且某些標簽樣式需要統一的頁面來說，使用內部樣式表比使用行內樣式表的頁面代碼結構更優化。(3) 外部樣式表外部樣式表是用戶重新創建的一個擴展名為.css的文件。樣式規則按照語法格式直接寫入該文件中，不再添加任何標簽。3. 文檔中如何引用CSS文件行內樣式表和內部樣式表都是直接寫在HTML文檔中的，所以不存在引用的問題。但外部樣式表是一個獨立的文件，與HTML文檔沒有關聯性。HTML文檔要使用外部樣式表呈現出樣式的顯示效果，就必須將兩個文檔關聯起來。它們是如何聯繫的呢？換句話說，HTML文檔是如何引用CSS外部樣式表的呢？有兩種方式: 鏈接和導入。下面分別介紹。(1) 鏈接外部樣式表鏈接外部樣式表是將外部樣式表文件通過標簽鏈接到HTML文檔的頭部即與之間，代碼如下：徑向漸變其中，屬性rel表示鏈接到樣式表，值為stylesheet。屬性type表示樣式表類型為CSS樣式表。屬性href指定CSS樣式表文件的路徑，可以使用相對路徑或者路徑。鏈接外部樣式表是CSS使用中頻繁、實用的方式，也是目前制作HTML頁面常用的一種方式。它的優勢就是將頁面結構HTML代碼和樣式文件CSS代碼實現了完全的分離。同一個CSS文件可以被多個HTML文件鏈接，一個HTML文件也可以鏈接多個CSS文件。為了實現相同的樣式風格，可以將同一個CSS文件鏈接到網站所有的頁面中。如果需要修改樣式，隻需修改這一個CSS文件即可。這使得程序員在進行Web前端開發和後期的維護時都十分方便、有效。(2) 導入外部樣式表導入外部樣式表是將外部樣式表文件通過使用@import導入內部樣式表標簽中，且放在內部樣式表的開始部分。代碼如下：徑向漸變導入外部樣式表相當於將外部樣式表導入內部樣式表中，與鏈接外部樣式表類似，同樣實現了結構代碼與CSS代碼的分離。一個HTML文件中可以導入多個CSS文件，一個CSS文件同樣可以被多個HTML頁面導入。(3) 鏈接外部樣式表與導入外部樣式表的區別鏈接外部樣式表和導入外部樣式表從本質上來說都實現了結構代碼與樣式代碼的分離。但它們的語法和運作方式有所不同。從語法上看，鏈接外部樣式表采用的標簽將樣式文件鏈接進了HTML文件。導入外部樣式表采用的是@import，將樣式文件導入了HTML文件的內部樣式表中。從運作方式來看，鏈接外部樣式表是HTML文件中的標簽需要什麼樣的樣式風格時纔將外部樣式表鏈接進HTML文件。導入外部樣式表則是在HTML文件初始化時，即瀏覽器加載HTML文件時，就將外部樣式表中所有的樣式代碼導入HTML文件的內部樣式表中。導入方式相較於鏈接方式在瀏覽器加載頁面時比較耗時，但顯示效果沒有任何差別。在HTML文檔中引用CSS文件不管采用哪種方式，好是根據需求靈活處理。3.1.2CSS選擇符CSS選擇符也叫CSS選擇器，HTML頁面中的樣式都是通過CSS選擇器來進行控制的。CSS選擇器可以是HTML的結構標簽、類、ID或者是標簽的某種狀態（如“a:hover”）。因此，可以把CSS選擇器分為標簽選擇器、類選擇器、ID選擇器和偽類選擇器。1. 標簽選擇器標簽選擇器是使用HTML文檔中的標簽名作為選擇符來定義樣式規則。如下面的代碼定義了部分標簽的樣式。body,p,a,div,td,th{font-size:18px;font-old:12px;color:#000000;}通過上面所列舉的標簽選擇器的樣式定義，隻要頁面中出現該標簽的地方，就會顯示出所定義的樣式風格。要設置所有的標簽，並不需要將HTML中所有的標簽名寫出來。CSS提供了通配符選擇器“”，它可以代表所有的標簽，定義如下：{margin:0; padding:0;}2. 類選擇器使用標簽選擇器可以定義頁面中所有標簽的顯示樣式，但是如果要對同一種標簽在同一個頁面中的不同地方使用不同的樣式，僅依靠標簽選擇器是實現不了的。這時就需要類選擇器來達到目的。HTML中的每一個標簽都具有class屬性，並給該標簽定義一個類名，即class屬性的屬性值。這樣相同的標簽可以具有不同的類名。在設置樣式時通過類名來定義不同的樣式。標簽的類名作為CSS的類選擇器時需要在類名前添加符號“.”，用以定義樣式規則，代碼格式如下: .black{font-size:18px;font-old:12px;color:#000000;}或者p.black{font-size:18px;font-old:12px;color:#000000;}前提是存在結構代碼:

段落文字

類選擇器所定義的樣式隻呈現在具有該類名的標簽的顯示效果。如果標簽中沒有該類名，則該標簽在頁面上的顯示效果不具有該類所定義的樣式風格。某類選擇器所定義的樣式還可以應用到其他標簽中。如上面定義的“.black”除應用到

標簽中，還可以應用到標簽中，同樣有效。但是上面代碼中所定義的“p.black”則隻能應用在定義了類名為“black”的

標簽中，不能應用於其他的標簽（如:），該標簽不具有類“black”所定義的樣式效果。3. ID選擇器ID選擇器與類選擇器類似，是標簽中的id屬性的屬性值設置的名稱作為選擇器來定義樣式規則。ID名作為選擇器定義樣式規則時需要在ID名前添加符號“#”，樣式定義代碼格式如下：#black{font-size:18px;font-old:12px;color:#000000;}或者P#black{font-size:18px;font-old:12px;color:#000000;}同樣需要結構標簽中定義id屬性。與類選擇器所不同的是，一個網頁文件中的標簽隻能使用一次ID名，如果其他的標簽需要使用，則要另命名一個ID名稱，即一個ID名稱在一個頁面文件中隻能使用一次，不能重復使用。類選擇器與ID選擇器的區別: 類選擇器可以在任意數量的標簽中使用，而ID選擇器在頁面的標簽中隻能使用一次；類選擇器的優先級比ID選擇器的優先級低，即當ID選擇器與類選擇器發生衝突時，優先使用ID選擇器定義的樣式。4. 偽類選擇器偽類選擇器所定義的樣式規則並不作用在某個具體的標簽上，而是作用在標簽的狀態上。偽類選擇器有: :firstchild、:focus、:lang、:link、:visitited、:hover、:active等。其中常用的是超鏈接的偽類，即a:link、a:visitited、a:hover和a:active。它們的狀態描述見表31。表31超鏈接的偽類偽類選擇器狀態描述偽類選擇器狀態描述a:link未訪問的超鏈接a:hover鼠標光標停留在超鏈接上a:visitited已訪問的超鏈接a:active激活超鏈接偽類選擇器的應用減少了文檔對於類和ID的定義，使得文檔更簡潔。CSS 3中還新增了一些結構偽類選擇器，通過文檔結構樹來匹配HTML中特定的標簽。CSS 3中新增的結構偽類選擇器見表32。表32結構偽類選擇器選擇器狀態描述E:root文素，HTML文檔就是H素E:nthchild(n素的第素對應的n為1E:nthlastchild(n素的倒數第素，素對應的n為1E:lastchi素的後素，相當於nthlastchild(1)

書摘插畫

商品搜索

商品分类

【醫學】

【各大出版社】