移動Web套用開發教程——HTML5+JavaScript框架全棧App開發

《移動Web套用開發教程——HTML5+JavaScript框架全棧App開發》是2018年9月清華大學出版社出版的圖書，作者是周化鋼。

基本介紹

• 中文名：移動Web套用開發教程——HTML5+JavaScript框架全棧App開發
• 作者：周化鋼
• 出版時間：2018年9月
• 出版社：清華大學出版社
• ISBN：9787302501497
• 定價：49 元

內容簡介

本書全面介紹了Web移動套用開發的基本技術，從HTML 4.01+CSS+JavaScript的網站開發基礎到最新的HTML 5的移動特性，CSS 3新特徵，增強的JavaScript API，流行的Web移動套用開發框架BootStrap，jQuery Mobile,AngualrJS，NoSQL的MongoDB資料庫和Node.js全棧開發，及Web混合（Hybrid）套用開發框架PhoneGap/Cordova，把Web的套用重新打包編譯成為Android App或iOS App。

全書共分為5篇： 第1～4章為基礎篇，著重介紹HTML的結構和基本元素，CSS樣式布局和JavaScript語言的編程技術； 第5～17章為進階篇，著重討論最新發布的HTML 5標準的特性，語義化元素，微數據/微格式，新的表單元素和屬性，Web字型，畫圖，檔案與拖放技術，音頻視頻播放技術，客戶端數據存儲和資料庫技術，離線套用，Web Socket通信與多執行緒技術。同時，也介紹了CSS 3的新特徵，包括透明度、圓角、陰影、背景圖、漸變、過渡和變換特效，及複雜的CSS 3選擇器； 第18~24章為移動篇，重點介紹與Web移動開發相關的主要技術，包括移動Web回響式設計和BootStrap框架，移動UI設計與jQuery Mobile類庫，移動測試方法，及移動硬體接口編程，例如，地理位置信息、移動設備方向接口、螢幕方向接口和攝像頭接口的編程； 第25章為全棧篇，利用前面所學的知識（HTML+CSS+JavaScript），通過MEAN（MongoDB+Express+AngularJS+Node.js）框架整合技術，介紹了一個完整的Web套用開發過程，包括瀏覽器端和伺服器端的開發（B/S模式）及MVC架構的開發方法； 第26~36章為實訓篇，介紹了10個Web移動開發實驗，包括移動開發環境搭建與測試，地理位置與地圖，WebSocket通信，瀏覽器、多媒體播放器製作，回響式Web移動設計，UI設計，遊戲，PhoneGap/Cordova及MEAN全棧開發實驗。本書提供了大量套用實例代碼，每章後均有拓展練習。

本書適合作為套用技術型高等院校計算機、軟體工程專業高年級學生選用教材，同時也適合從事C/S軟體開發人員轉行到B/S模式的Web套用開發，或從傳統的網站開發轉行到Web移動套用開發，及廣大軟體編程愛好者作為參考學習用書。

圖書目錄

基礎篇

第1章Web開發概念和構架

1.1靜態網頁與動態網頁

1.2描述標記語言與腳本語言

1.3解釋語言與編譯語言

1.4跨作業系統平台語言

1.5軟體開發構架

1.5.1伺服器端與客戶端軟體構架(C/S)

1.5.2Web(B/S)的軟體構架

1.6HTTP

1.6.1HTTP請求包

1.6.2HTTP回響包

1.7Web套用的開發環境

1.7.1Web伺服器

1.7.2瀏覽器

1.7.3代碼編程工具

練習

第2章HTML基本結構

2.1最簡單的HTML頁面結構

2.2HTML基本語法

2.3HTML標籤與屬性

2.4HTML特殊符號與轉義符

2.5HTML網頁的語言定義

2.6HTML標籤元素的屬性詳解

2.7HTML常用標籤

2.7.1form表單標籤

2.7.2table表格標籤

2.7.3div和span區塊標籤

2.7.4img圖像標籤

2.7.5a超級連結標籤

2.7.6ul和ol列表標籤

練習

第3章HTML+CSS樣式

3.1CSS樣式表

3.2CSS的語法

3.3CSS樣式結構

3.3.1內聯樣式表

3.3.2內部樣式表

3.3.3外部樣式表

3.4CSS選擇器

3.5選擇器組合定義

3.6CSS顏色、長度和字型單位

3.6.1顏色單位

3.6.2長度單位

3.6.3字型單位

3.6.4CSS字型定義

3.7CSS盒子模型

3.8網頁設計的忠告

練習

第4章HTML+CSS+JavaScript

4.1JavaScript語言

4.2JavaScript的基本語法

4.3JavaScript的結構

4.4JavaScript函式詳解

4.5JavaScript的DOM技術

4.6JavaScript的面向對象編程

4.6.1內置對象

4.6.2原生對象

4.6.3宿主對象

4.6.4創建對象和訪問對象屬性方法

4.7JavaScript事件驅動

4.8JavaScript的AJAX異步通信技術

4.9JSON： JavaScript對象表示法

4.9.1JSON的特性

4.9.2JSON的語法

4.10JavaScript的jQuery框架

4.11JavaScript和jQuery代碼風格

練習

進階篇

第5章HTML 5概要

5.1HTML標準制定時間表

5.2HTML 5的發展

5.3HTML 5在移動領域的套用

5.4HTML 5+CSS 3+JavaScript規範新特性

5.5HTML 5與瀏覽器

5.6HTML 5驗證及回退機制

5.6.1HTML 5功能驗證

5.6.2HTML 5的回退機制

練習

第6章HTML 5網頁布局新元素

6.1語義化標籤元素

6.2HTML 5文檔綱要

6.3分節(分塊)元素

6.4section元素

6.5article元素

6.6aside元素

6.7nav元素

6.8details和summary元素

6.9figure和figcaption元素

6.10address與footer元素

6.11meter元素

6.12progress元素

6.13time元素

6.14非英語的國際化元素

6.15其他語義化元素

6.16語義化標籤小結

練習

第7章微格式與微數據的語義化布局

7.1格式化數據

7.2微數據

7.2.1微數據標記

7.2.2微數據辭彙表

7.2.3微數據取值

7.2.4訪問微數據

7.2.5微數據的套用

7.3微格式

7.3.1標記微格式數據

7.3.2微格式工具

7.3.3微數據與微格式比較

7.4data*自定義數據

7.4.1用dataset對象訪問自定義數據

7.4.2用getAttribute()和setAttribute()訪問自定義數據

7.4.3dataset和getAttribute()的區別

7.4.4data*自定義屬性與CSS

7.4.5data*自定義屬性的套用範圍

練習

第8章深入了解CSS 3

8.1CSS 3介紹

8.2新CSS 3的屬性命名

8.3CSS 3的指令@及函式url()

8.4CSS 3的盒子特效

8.4.1透明度

8.4.2圓角

8.4.3陰影

8.4.4背景圖

8.4.5漸變

8.4.6過渡

8.4.7變換

8.5CSS 3的複雜選擇器

8.5.1元素屬性選擇器

8.5.2元素屬性值選擇器

8.5.3偽類選擇器

8.5.4偽元素選擇器

8.5.5偽類與偽元素的區別

練習

第9章HTML 5表單

9.1增強特性

9.1.1占位符

9.1.2自動聚焦

9.1.3自動完成數據列表

9.2新的input的type類型

9.2.1數字

9.2.2日期時間

9.2.3Email、URL、顏色和搜尋

9.3表單新元素

9.3.1生成密鑰

9.3.2表單輸出

9.4表單驗證

9.4.1表單驗證屬性

9.4.2表單驗證樣式

9.4.3自定義表單驗證非法信息提示

9.5HTML標籤元素內容可編輯屬性

練習

第10章Web字型與排版

10.1Web字型

10.2Web字型格式

10.3Web字型的導入

10.4Web字型的使用

10.5使用Web字型問題

10.6排版中的字型屬性

10.7排版中的行高

10.8排版中的特殊符號

10.9排版分欄

練習

第11章畫圖

11.1畫圖功能

11.2canvas畫布

11.3畫線

11.3.1畫線外觀

11.3.2圖形形狀路徑與填充

11.4畫矩形

11.5圖形的清除

11.6畫弧線與圓

11.7畫曲線

11.8變換、漸變、透明度與陰影

11.8.1漸變

11.8.2變換

11.8.3透明度

11.8.4陰影

11.9畫布插入文字、圖片及圖案

11.9.1畫布插入文字

11.9.2畫布插入圖片

11.9.3畫布插入圖案

11.10關於3D繪圖、動畫和矢量圖

11.10.13D繪圖

11.10.2動畫

11.10.3矢量圖

練習

第12章檔案與拖放技術

12.1File檔案

12.2HTML的檔案操作

12.3File API讀取檔案屬性

12.4FileReader讀檔案的方法和事件

12.5讀取圖片和文本檔案操作

12.6通過AJAX上傳檔案

12.7拖放

12.7.1拖放對象屬性draggable

12.7.2拖放對象與目標地

12.7.3拖放事件的產生

12.7.4拖放事件的處理過程

12.7.5瀏覽器外部的拖放

練習

第13章History API

13.1瀏覽器翻頁與URL地址

13.2瀏覽器翻頁與AJAX技術

13.3History對象與瀏覽器翻頁

練習

第14章視頻音頻播放

14.1瀏覽器播放視頻音頻

14.2視頻音頻格式及轉換

14.3視頻音頻的標籤元素

14.3.1video和audio標籤元素

14.3.2source標籤

14.3.3track標籤

14.4JavaScript API控制播放

練習

第15章客戶端數據存儲

15.1數據存儲

15.1.1數據存儲方式比較

15.1.2Cookie與Web本地存儲比較

15.2Web本地數據存儲

15.2.1localStorage和sessionStorage對象

15.2.2Web存儲的事件處理

15.2.3保存其他數據類型

15.3資料庫存儲

15.3.1Web SQL

15.3.2IndexedDB

練習

第16章離線套用

16.1離線套用概述

16.2離線套用原理

16.3創建快取清單

16.4離線套用事件與快取更新

16.5Web伺服器設定

練習

第17章WebSocket通信與Workers多執行緒

17.1Web通信

17.2WebSocket通信方式

17.3專用的WebSocket伺服器

17.4WebSocket客戶端編程

17.5Workers多執行緒編程

17.6Workers的編程實現

17.7Workers編程注意事項

練習

移動篇

第18章Web移動套用新領域

18.1Web移動套用的發展概況

18.2移動App與桌面App

18.3Web App與Native App

18.4移動Web開發設計方法及最佳化

18.4.1前端開發模式

18.4.2後端開發模式

18.4.3回響式Web設計

18.4.4單頁面套用

18.4.5混合式套用

18.4.6移動Web開發最佳化

練習

第19章移動Web回響式設計

19.1關於視口、像素和解析度

19.1.1螢幕解析度、像素、像素密度與CSS問題

19.1.2視口

19.2媒體查詢選擇器

19.2.1Media媒體查詢

19.2.2viewport的縮放技術

19.2.3使用viewport的效果比較

19.3流體格線布局

19.3.1格線布局

19.3.2將CSS的塊單位從像素變成百分數

19.3.3字型的流式布局

19.4動態圖片處理

19.5BootStrap——一個Web回響式框架

練習

第20章移動Web UI設計

20.1人機互動的UI設計

20.1.1人機互動的發展

20.1.2移動設備的互動特殊性

20.2選單、導航與標籤欄

20.3圖示、按鈕擬物化設計與扁平化風格

20.4表單

20.5表格

20.6jQuery Mobile類庫

20.6.1jQuery Mobile的設計風格

20.6.2jQuery Mobile UI控制項

20.6.3jQuery Mobile移動事件

練習

第21章地理位置檢測

21.1地理位置信息

21.2地理位置檢測方法

21.3Geolocation API

21.4地理位置與地圖接口

21.4.1騰訊地圖的URI API

21.4.2百度地圖服務的URI API

練習

第22章移動設備其他功能接口

22.1攝像頭API

22.2設備移動方向API

22.2.1設備方向與alpha、beta、gamma定位值

22.2.2deviceorientation事件編程接口

22.2.3設備移動

22.2.4devicemotion事件編程接口

22.2.5指南針Compassneedscalibration事件

22.3螢幕方向API

22.3.1全螢幕模式

22.3.2讀取螢幕模式

22.3.3鎖屏接口

22.3.4瀏覽器支持

練習

第23章移動混合(Hybrid)套用開發

23.1Web、Native和Hybrid App的比較

23.2PhoneGap(Apache Cordova)

23.3PhoneGap開發環境

23.4PhoneGap的基本架構

23.5PhoneGap的API

23.6PhoneGap App開發調試

23.7Ionic(Html+Angular.js+Cordova)介紹

23.8React Native(JS+CSS)介紹

練習

第24章移動Web套用測試方法

24.1搭建測試環境

24.1.1Web伺服器

24.1.2瀏覽器

24.1.3網路連線

24.1.4移動模擬器

24.2桌面瀏覽器與移動瀏覽器

24.2.1移動瀏覽器

24.2.2渲染引擎

24.2.3瀏覽器識別

24.3通過桌面瀏覽器做移動測試

24.3.1專用HTTP測試工具

24.3.2使用開發者工具

24.3.3修改桌面瀏覽器用戶代理

24.4移動設備模擬器

24.4.1線上模擬網站

24.4.2模擬器軟體

24.4.3瀏覽器外掛程式的移動模擬器

24.4.4廠商SDK開發工具包自帶模擬器

24.4.5虛擬機下的模擬器

24.5遠程測試

24.6Web軟體測試範圍

24.6.1單元測試

24.6.2端到端測試

24.6.3UI與瀏覽器兼容測試

24.6.4性能測試

24.6.5安全要求

練習

全棧篇

第25章全棧Web開發

25.1Web開發三層軟體架構

25.2全棧Web開發的三層軟體架構

25.3Node.js

25.3.1Node.js語法規範

25.3.2Node.js構建簡單的Web伺服器

25.3.3Node.js的非阻塞I/O，異步編程和事件驅動

25.3.4JavaScript函式的閉包與自我調用

25.3.5構造一個靜態資源的Web伺服器

25.3.6Node.js路由功能

25.3.7Node.js的模組化編程

25.4Web框架Express

25.4.1Express的路由

25.4.2Express的中間件

25.4.3Express的模板引擎

25.5AngularJS框架

25.5.1RESTful架構

25.5.2AngularJS的單頁套用

25.5.3模組化編程和依賴注入

25.5.4AngularJS的指令、視圖和模板

25.5.5作用域、模板和數據模型

25.5.6Angular的路由

25.5.7AngularJS的控制器

25.6MongoDB資料庫

25.6.1用MongoDB驅動連線資料庫

25.6.2用Mongoose模組連線資料庫

25.7MEAN： 一個簡單的全棧Web套用

25.7.1RESTful API設計

25.7.2AngularJS前端設計

25.7.3伺服器後端設計

練習

實訓篇

第26章實訓準備——團隊學習模式

26.1團隊合作學習

26.2學習小組組成

26.3小組管理

26.4小組考核

練習

第27章移動開發環境搭建實驗

27.1實驗目的

27.2實驗環境及工具

27.3實驗方法

27.3.1Apache Web伺服器介紹

27.3.2安裝WAMP伺服器

27.3.3Web代碼編輯器

27.3.4手機訪問Apache Web伺服器

27.3.5用瀏覽器開發者工具

27.4實驗拓展

第28章回響式Web設計實驗

28.1實驗目的

28.2實驗環境及工具

28.3實驗方法

28.3.1Responsive移動布局CSS值改變

28.3.2Responsive移動最佳化、媒體查詢

28.3.3Responsive移動最佳化、視窗最佳化

28.3.4測試環境搭建與測試效果

第29章UI外觀設計實驗

29.1實驗目的

29.2實驗環境及工具

29.3實驗方法

第30章多媒體音頻視頻實驗

30.1實驗目的

30.2實驗環境及工具

30.3實驗方法

第31章離線套用實驗

31.1實驗目的

31.2實驗環境及工具

31.3實驗方法

31.3.1離線套用快取事件檢查

31.3.2快取檔案資源檢查

31.3.3Manifest檔案本地快取檢查

31.3.4清除離線套用快取

31.4實驗拓展

第32章網路通信與本地數據存儲實驗

32.1實驗目的

32.2實驗環境與工具

32.3實驗方法

32.3.1基於Node.js+Socket.io的運行環境搭建

32.3.2瀏覽器開發者工具檢查Web Socket

32.4實驗拓展

第33章地理位置和其他感測器實驗

33.1實驗目的

33.2實驗環境與工具

33.3實驗方法

33.3.1編寫一個套用

33.3.2測試

第34章遊戲實驗

34.1實驗目的

34.2實驗環境與工具

34.3實驗方法

34.3.1遊戲規則

34.3.2源碼分析

第35章PhoneGap製作Hybrid App實驗

35.1實驗要求

35.2實驗環境與工具

35.3實驗方法

35.3.1Java SDK開發環境的安裝

35.3.2Node.js下載安裝

35.3.3安裝Cordova和PhoneGap

35.3.4創建helloworld套用

35.3.5添加套用平台

35.3.6在瀏覽器端調試App套用

35.3.7安裝Android SDK開發工具包

35.3.8通過AVD Manager安裝一個模擬器

35.3.9在模擬器上運行helloworld項目

35.3.10在手機環境下運行helloworld項目

35.4實驗拓展

第36章全棧Web開發實驗

36.1實驗目的

36.2實驗環境與工具

36.3實驗方法

36.3.1安裝運行Node.js解釋器

36.3.2一個最簡單的HTTP伺服器

36.3.3一個簡單的AngularJS框架套用

36.3.4MongoDB資料庫安裝

36.3.5MongoDB的後台管理

36.4實驗拓展

附錄

參考文獻

學習網站

術語解釋

致謝