【溫故知新】——HTML5重要知識點複習

時間 2019-11-11

標籤溫故知新 html5 html 重要知識複習欄目 HTML5 简体版

原文原文鏈接

前言：本文是本身在學習課程中的課程筆記，這裏用來溫故知新的，並不是本人原創。php

1、HTML5新特性 —— 十個新特性：凌亂html

(1)新的語義標籤html5

(2)加強型表單(表單2.0)java

(3)音頻和視頻node

(4)Canvas繪圖jquery

(5)SVG繪圖git

(6)地理定位web

(7)拖放API面試

(8)Web Worker正則表達式

(9)Web Storage

(10)Web Socket

2、HTML5中表單的新特性

(1)新的input type <input type="?">

H4中的input type：text、password、radio、checkbox、file、hidden、submit、reset、image

H5中的input type：email、url、number、tel、search、range、color、date、month、week

(2)新的表單元素

H4中的表單元素：input、textarea、select/option、label

H5中新增的表單元素：datalist、progress、meter、output

(3)表單元素的新屬性

3、H5中新增的表單元素 —— datalist

<datalist id="list3"> datalist自己不可見

</datalist>

<input type="text" list="list3"> datalist爲input提供輸入建議列表，用戶能夠從中選取，也能夠手工輸入

4、H5中新增的表單元素 —— progress

顯示一個進度條，有兩種形式：

<progress></progress> 左右晃動的進度條

<progress value="0.7"></progress> 具備指定進度值的進度條

5、H5中新增的表單元素 —— meter

Meter：度量衡、刻度尺，用於標示一個值所處的範圍：不可接受(紅色)、能夠接受(黃色)、很是優秀(綠色)

6、H5中新增的表單元素 —— output

output：輸出，語義標籤，沒有任何外觀樣式，樣式上等同於SPAN。

商品單價: ￥3.50

購買數量：<input type="number" value="1">

小計：<output>￥3.50</output>

7、H5表單新特性 —— 表單元素的新屬性

H4中表單元素的屬性： <input ?>

id、class、title、style、type、value、name、readonly、disabled、checked

H5中表單元素的新屬性：

(1)placeholder：佔位字符

(2)autofocus：自動獲取輸入焦點

(3)multiple：容許輸入框中出現多個輸入（用逗號分隔），如郵箱輸入域

(4)form：用於把輸入域放置到FORM外部

====輸入驗證相關的新屬性======

(5)required：必填項，內容不能爲空

(6)maxlength：指定字符串的最大長度

(7)minlength：指定字符串的最小長度

(8)max：指定數字的最大值

(9)min：指定數字的最小值

(10)pattern：指定輸入必需符合的正則表達式

上述驗證屬性會影響表單元素對應的JS對象的validity屬性。

總結：

HTML5新特性 —— 十個

表單新特性：

新的input type —— ....

新的表單元素 —— 4個

表單元素的新屬性 —— 10個

練習：

(1)使用視頻作元素的背景

提示：Video自動播放、循環播放、靜音，絕對定位到目標元素下面，z-index爲負值便可

(2)建立數據庫bbs，包含表msg(mid, uname, content, pubTime)；

使用Node.js建立一個「留言板」應用，服務端能夠接收以下的請求：

靜態內容：

/public/js/jquery-1.11.3.js

/public/msg_add.html

顯示「添加新留言」的表單，包括「姓名」、「留言內容」；

/public/msg_list.html 在TABLE中顯示出全部留言記錄

動態內容：

POST /msg 接收客戶端異步提交的uname、content，添加入數據庫，

返回{"code":1, "msg":"留言添加成功", "mid":5 }

GET /msg 向客戶端返回全部的留言，以JSON格式

目標：

(1)視頻和音頻 —— 好玩&簡單

(2)Canvas繪圖 —— 難點&最重點

1、Flash被H5取代體如今哪些方面？

Flash繪圖(AS/Flex) => Canvas/SVG

Flash動畫 => 定時器+Canvas

Flash視頻和音頻播放 => VIDEO/AUDIO

Flash客戶端存儲 => WebStorage

2、H5新特性——視頻播放

H5提供了一個新的標籤用於播放視頻：

<video>

您的瀏覽器不支持VIDEO播放！

</video>

它自己是一個300*150的inline-block元素。

VIDEO標籤/對象經常使用的成員：

成員屬性：

autoplay：false，是否自動播放

controls：false，是否顯示播放控件

loop：false，是否循環播放

muted：false，是否靜音播放

poster：''，在播放第一幀以前顯示的海報

preload：視頻的預加載策略，可取值：

auto：預加載視頻的元數據以及緩衝必定時長

metadata：僅預加載視頻的元數據(尺寸、時長、第一幀內容)，

沒有視頻緩衝

none：不預加載任何數據

-------------JS對象屬性---------------------

currentTime：當前播放的時長

duration：總時長

paused：true，當前視頻是否處於暫停狀態

volume：1，當前音量

playbackRate：1，回放速率，大於1錶快放，小於1錶慢放

成員方法：

play( )：播放視頻

pause( )：暫停播放

成員事件：

onplay：當視頻開始播放時觸發的事件

onpause：當視頻開始暫停時觸發的事件

練習1：不使用Video自帶的controls，自定義播放/暫停按鈕

鼠標移出視頻區域，隱藏按鈕；鼠標移入，顯示按鈕

練習2：不論何種緣由，只要視頻暫停(如點擊暫停按鈕、播放完畢、緩衝不足等)，就顯示一副廣告；只要播放，就隱藏廣告

提示：必須監聽視頻的onplay和onpause事件

3、H5新特性——音頻播放

H5提供了一個新的標籤用於播放音頻：

<audio>

您的瀏覽器不支持AUDIO播放！

</audio>

它默認是一個300*30的inline-block元素；但若沒有controls屬性，則display:none。

AUDIO標籤/對象經常使用的成員：

成員屬性：

autoplay：false，是否自動播放

controls：false，是否顯示播放控件

loop：false，是否循環播放

muted：false，是否靜音播放

preload：視頻的預加載策略，可取值：

auto：預加載視頻的元數據以及緩衝必定時長

metadata：僅預加載視頻的元數據(尺寸、時長、第一幀內容)，

沒有視頻緩衝

none：不預加載任何數據

-------------JS對象屬性---------------------

currentTime：當前播放的時長

duration：總時長

paused：true，當前視頻是否處於暫停狀態

volume：1，當前音量

playbackRate：1，回放速率，大於1錶快放，小於1錶慢放

成員方法：

play( )：播放視頻

pause( )：暫停播放

成員事件：

onplay：當視頻開始播放時觸發的事件

onpause：當視頻開始暫停時觸發的事件

練習：使用複選框控制網頁背景音樂

挑戰性要求：音量實現淡入和淡出

4、網頁中可用的繪圖技術

網頁中的實時走勢圖、統計圖、在線畫圖板、網頁遊戲、地圖應用都要使用到繪圖技術。有三種繪圖技術：

(1)SVG繪圖：2D矢量繪圖技術，2000年出現，後歸入H5標準

(2)Canvas繪圖：2D位圖繪圖技術，H5提出的繪圖技術

(3)WebGL繪圖：3D繪圖技術，還沒有歸入H5標準

Canvas繪圖難點所在：

(1)座標系

(2)單詞比較多

5、H5新特性——Canvas繪圖技術

Canvas：畫布，是H5提供的2D繪圖技術。

您的瀏覽器不支持Canvas標籤！

</canvas>

CANVAS標籤在瀏覽器中默認是300*150的inline-block。畫布的寬和高只能使用HTML/JS屬性來賦值，不能使用CSS樣式賦值！

每一個畫布上有且只有一個「畫筆」對象——稱爲「繪圖上下文」對象——使用該對象進行繪圖！

var ctx = canvas.getContext('2d') //獲得畫布上的畫筆對象

(1)使用Canvas繪製矩形

矩形的定位點在本身的左上角

ctx.lineWidth = 1 描邊寬度

ctx.fillStyle = '#000' 填充樣式/顏色

ctx.strokeStyle = '#000' 描邊樣式/顏色

ctx.fillRect( x, y, w, h ) 填充一個矩形

ctx.strokeRect( x, y, w, h ) 描邊一個矩形

ctx.clearRect( x, y, w, h ) 清除一個矩形範圍內全部的繪圖

練習：

在畫布的左上角填充一個100*80的矩形

在畫布的右上角填充一個100*80的矩形

在畫布的左下角描邊一個100*80的矩形

在畫布的右下角描邊一個100*80的矩形

在畫布的正中央描邊一個100*80的矩形

在畫布上描邊一個能夠左右移動的100*80的矩形

提示：使用定時器，先清除畫布上的已有內容，再從新繪製一個（X不停的增長）

在畫布上描邊一個能夠上下移動的100*80的矩形(Y不停的增長)

在畫布上描邊一個能夠斜向右下45度角移動的100*80的矩形(X/Y不停的增長)

在畫布上描邊一個能夠斜向右下30度角移動的100*80的矩形(X/Y不停的增長)

(2)使用Canvas繪製文本

一段文字的定位點在其文本基線的起點

ctx.textBaseline = 'alphabetic' 文本基線

ctx.font = '12px sans-serif' 文本大小和字體

ctx.fillText( str, x, y ) 填充一段文本

ctx.strokeText( str, x, y ) 描邊一段文本

ctx.measureText( str ) 基於當前文字大小字體設置測量文本，

返回一個對象：{width: x}

練習：

在畫布左上角描邊一段黑色文本：達內科技2017©

在畫布右上角描邊一段藍色文本：達內科技2017©

在畫布左下角填充一段黑色文本：達內科技2017©

在畫布右下角填充一段藍色文本：達內科技2017©

在畫布正中央填充一段藍色文本：達內科技2017©

在畫布左上角描邊一段黑色文本：達內科技2017©，左右移動

6、Canvas繪圖中使用漸變對象

線性漸變： linearGradient

徑向漸變： radialGradient

能夠參考PS中的漸變效果。

var g = ctx.createLinearGradient( x1, y1, x2, y2 );

g.addColorStop( offset, color )

....

g.addColorStop( offset, color )

ctx.strokeStyle = g;

ctx.fillStyle = g;

課後練習：

建立Node.js服務器，能夠接收客戶端的以下請求：

靜態資源請求：

/public/salesdata.html 向客戶端輸出一個只有空白畫布的頁面，加載完成後異步請求動態數據

/public/jquery-1.11.3.js

動態資源請求：

GET /salesdata 向客戶端返回以下的JSON數據：

[

{"label": "部門1", "value":300},

{"label": "部門2", "value":500},

{"label": "部門3", "value":150},

{"label": "部門4", "value":400},

{"label": "部門5", "value":550},

{"label": "部門6", "value":250}

]

客戶端根據這些數據，繪製出以下圖所示的統計圖：

提示：爲簡化起見，能夠把value值看作每一個柱的高度。

1、Canvas的尺寸不能用CSS指定

使用CSS指定的Canvas尺寸，實際不是修改了畫布尺寸，而是進行了拉伸，上面的繪圖內容也會隨着進行拉伸。

可使用HTML標籤的width和height屬性，也可使用JS對象的width和height屬性。

2、使用Canvas進行繪圖 —— 路徑

Path：相似於PS中的「鋼筆工具」，由多個座標點組成的任意形狀，路徑不可見，可用於「描邊」、「填充」、「裁剪」。

ctx.beginPath() 開始一條新路徑

ctx.closePath() 閉合當前路徑

ctx.moveTo(x, y) 移動到指定點

ctx.lineTo(x, y) 從當前點到指定點畫直線

ctx.arc(cx, cy, r, start, end) 繪製圓拱路徑

ctx.stroke() 對當前路徑描邊

ctx.fill() 對當前路徑填充

ctx.clip() 使用當前路徑進行裁剪

練習：使用路徑描邊繪製一個座標軸

練習：使用圓拱繪製能夠前進的圓環進度條

提示：開始角度是-90，使用定時器,不停的修改結束角

練習：建立一個函數openMouth()，在畫布上繪製以下的圖形

練習：建立一個函數closeMouth()，在畫布上繪製以下的圖形

練習：使用定時器，每隔1s中交替調用openMouth()和closeMouth()

3、使用Canvas進行繪圖 —— 圖像

Canvas屬於客戶端技術，圖片在服務器中，因此瀏覽器必須先下載要繪製的圖片，且等待圖片異步加載完成：

var p3 = new Image();

p3.src = 'img/p3.png'; //瀏覽器會自動異步請求圖片

console.log(p3.width); //0

p3.onload = function(){ //圖片加載完成

console.log(p3.width); //200

//開始繪製圖片到畫布上....

ctx.drawImage( p3, x, y ); //原始大小繪圖

ctx.drawImage( p3, x, y, w, h ); //拉伸繪圖

}

練習：在畫布的四個角落各畫一個原始大小的飛機

練習：在畫布的正中央畫一個400*200大小的飛機

練習：在畫布的左上角畫一個飛機，左右移動

練習：在畫布的正中央畫一個飛機，能夠隨着鼠標的移動而移動

全局變量： var x , y

鼠標在畫布上方移動： e.offsetX e.offsetY

定時器：不停的刪除已有內容，重繪飛機

Canvas繪圖核心知識點：—— 重點

繪製矩形：

ctx.fillRect() ctx.strokeRect() ctx.clearRect()

繪製文本：

ctx.fillText() ctx.strokeText() ctx.measureText().width

繪製路徑：

ctx.beginPath() ctx.closePath()

ctx.moveTo() ctx.lineTo()

ctx.arc()

ctx.stroke() ctx.fill() ctx.clip()

繪製圖像：

ctx.drawImage()

4、使用Canvas繪圖時進行變形操做

CSS中有變形相關樣式： transform: rotate/scale/translate/skew，

這些變形只能做用於某個HTML元素。

Canvas繪圖中也有變形技術，能夠針對某一個圖像/圖形的繪製過程進行變形：

rotate、scale、translate。

ctx.rotate( 弧度 ) 旋轉繪圖上下文對象(即畫筆),軸點是畫布的原點

ctx.translate( x, y ) 將整個畫布的原點平移到指定的點

ctx.save() 保存畫筆當前的全部變形狀態值（遊戲中從存盤）

ctx.restore() 恢復畫筆變形狀態到最近的一次保存（遊戲中讀取存盤）

練習：在畫布左上角畫一個繞本身爲中心旋轉的飛機1；在同一個畫布的右上角畫一個不選旋轉的飛機2；在同一個畫布的左上角畫一個旋轉速度是飛機1速度2倍的飛機3

提示：每一個小飛機「平移+旋轉+繪製+逆向旋轉+逆向平移」纔不會影響後續飛機的繪製

5、第三方繪製統計圖工具

(1)Chart.js：免費的，提供了八種統計圖表

(2)FusionCharts.js：收費的，提供了90+中統計圖表

(3)ECharts：百度提供的免費的繪圖工具，與地圖整合的很好

(4)FreeCharts ....

提示：第三方工具使用無需記憶！重點掌握自學的過程：

(1)打開官網，查看說明 http://www.chartjs.org/

(2)仿照DEMO編寫示例

開源免費的、8種圖表、基於H5 Canvas、支持響應式

(3)在實際項目中加以應用，查看詳細API說明

您的瀏覽器不支持Canvas繪圖！

</canvas>

new Chart(c15, {

type: 'bar',//line、pie、noughnut...

data: {},

options: {}

});

</script>

練習：參考手冊，使用Chart.js繪製彩色的柱狀圖，且Y軸從0開始。

位圖(Photoshop)：由一個又一個像素點組成，每一個點各有本身的顏色，色彩細膩，但放大會失真

矢量圖(Illustrator)：由一個又一個線條組成，每一個線條能夠指定顏色、方向，能夠無限縮放，但細節不夠豐富

6、HTML5新特性——SVG繪圖

Scalable Vector Graph：可縮放的矢量圖

	Canvas繪圖	SVG繪圖
類型	2D位圖	2D矢量圖
如何繪圖	使用JS代碼繪圖	使用標籤繪圖
事件綁定	每一個圖形不是元素，沒法直接綁定事件	每一個圖形都是元素，能夠直接綁定事件監聽
應用場合	統計圖、遊戲	統計圖、圖標、地圖

SVG技術誕生於2000年，早期做爲XML的擴展應用出現；H5標準把經常使用的SVG標籤採納爲標準，但有些被廢棄掉。

SVG技術在HTML5出現以前的使用方法：

(1)在一個XML文檔中聲明要繪製的圖形

(2)再編寫HTML文檔，使用IMG/IFRAME應用XML文檔便可

SVG技術在HTML5出現以後的使用方法：

直接建立HTML5文檔，在其中書寫SVG標籤便可

使用SVG標籤繪製矩形： <rect>

使用SVG標籤繪製圓形： <circle>

使用SVG標籤繪製橢圓： <ellipse>

使用SVG標籤繪製直線： <line>

使用SVG標籤繪製折線： <polyline>

使用SVG標籤繪製多邊形： <polygon>

任務：

(1)編寫一個帶AUDIO標籤的網頁上傳到本身的新浪雲服務器，用iOS手機訪問試試。

(2)自學第三方繪圖工具庫：ECharts，繪製股票走勢圖

(3) 使用Canvas繪製一個隨機改變的驗證碼圖片

var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';

var char = str[ 0~字符串長度間的隨機數 ];

要求：

畫布背景顏色隨機(淺色) ctx.fillRect()

文字內容隨機、大小隨機，顏色隨機(深色)、旋轉角度隨機。

5條隨機干擾線（深色），處於文字上方。

100個雜色點（半徑爲1爲圓），處於文字上方。

（4）仿網易雲音樂的播放界面

點擊播放按鈕，碟片開始旋轉，背景音樂開始播放；

再次點擊播放按鈕，碟片中止旋轉，背景音樂中止播放。

1、補充：Canvans上如何按照特定的順序繪製圖片

Canvas繪圖中若須要多張圖片，他們的加載都是異步的，沒法預測哪一張先加載完成！

可是繪圖每每須要按照必定順序，如先繪背景，再繪上面的內容。因此必須等待全部圖片所有加載完成，才能開始繪圖。

var progress = 0; //全部圖片的總加載進度

var imgBg = new Image();

imgBg.src = 'img/bg.jpg';

imgBg.onload = function(){

progress += 40; //爲每張圖片賦一個權重值

if(progress===100){

startDraw();

}

var imgDisc = new Image();

imgDisc.src = 'img/disc.png';

imgDisc.onload = function(){

progress += 60;

if(progress===100){

startDraw();

}

2、補充：如何爲Canvas上的圖形/圖像綁定事件監聽

網頁中只能爲HTML元素綁定監聽函數，Canvas上的圖形/圖像都是用JS繪製的，不是DOM元素，不能直接進行事件綁定！

只能綁定給整個Canvas！而後再具體計算事件發生座標是否處於某個圖像/圖形內部——僅適用於規則圖像/圖形。

3、SVG圖形中爲元素綁定事件監聽

SVG圖形中每一個圖形/圖像都是一個標籤，能夠很方便進行事件綁定

SVG繪圖的特色——着重注意！

(1)全部的圖形默認只有填充色（黑色），沒有描邊色。

(2)SVG圖形的樣式能夠用元素屬性聲明，也能夠用CSS形式來聲明。但用CSS聲明時，只能使用SVG專用的樣式，不能使用CSS樣式，如邊框設置只能用stroke，而不用border！

(3)圖形可使用JS來對屬性賦值；但不能使用HTML DOM形式，只能用核心DOM操做，如：

r.x = 10; r.width = 100; //無效

r.setAttribute('x', 10); r.setAttribute('width', 100)//有效

(4)動態添加SVG圖形可使用兩種方式：

1)HTML字符串拼接

var html = `<rect></rect>`;

svg.innerHTML = html;

2)使用document.createElementNS

('http://www.w3.org/2000/svg','標籤名')建立

4、使用SVG進行繪圖——矩形

練習：在SVG畫布正中央建立一個30*300的矩形柱子，初始時淡紅色(#faa)填充和深紅色(#800)邊框都是半透明的；鼠標懸停時，變爲不透明，提示：修改HTML元素屬性用setAttribute()

練習：繪製兩個柱子，初始高度都是0，使用定時器，不斷修改它們的高度，一個高度變爲300中止，另外一個變爲150中止

提示：用JS修改SVG圖形屬性只能使用核心DOM方法！

練習：使用AJAX從服務器端異步獲取一段JSON數據，[{"label": "部門1", value:350}, ....]，根據這些數據動態建立統計圖。

5、使用SVG進行繪圖——圓形

練習：

在SVG畫布的左上角填充一個黑色圓形

在SVG畫布的右上角填充一個藍色圓形

在SVG畫布的左下角描邊一個黑色圓形

在SVG畫布的右下角描邊一個藍色圓形

在SVG畫布的中央描邊(藍色)+填充(黃色)一個圓形

在SVG畫布上隨機的繪製30個實心圓形，大小隨機、位置隨機、填充顏色隨機、透明度隨機；點擊某個圓形後，它慢慢變大/淡，直至消失從DOM樹上刪除

6、使用SVG進行繪圖——橢圓

7、使用SVG進行繪圖——直線

練習：使用SVG中的直線繪製以下的圖標

提示：若多個SVG圖形有徹底同樣的屬性，能夠抽出來，放在一個公共的父元素中（小組）

</g>

8、使用SVG進行繪圖——折線

一條折線上能夠有任意多個連續的點

練習：使用折線繪製以下圖標

9、使用SVG進行繪圖——多邊形

練習：使用多邊形繪製以下兩個圖標

10、附加：使用SVG進行繪圖——文本

SVG畫布上不容許使用普通的HTML元素繪製文本，如SPAN、P等！只能使用：

11、附加：使用SVG進行繪圖——圖像

不能使用IMG置於SVG畫布上！只能使用：

SVG繪圖的主要知識點：

<svg>

</svg>

12、補充小知識：如何在SVG中使用漸變

<defs> 定義特效對象：漸變對象屬於一種特效對象

</linearGradient>

</defs>

練習：使用漸變對象，爲不一樣的柱子分配不一樣的漸變色

十3、補充小知識：如何在SVG中使用濾鏡

<defs>

</filter>

</defs>

SVG中支持的全部濾鏡：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

網頁中可用的繪圖技術：

(1)Canvas繪圖

(2)SVG繪圖

(3)WebGL繪圖

十4、第三方繪圖工具庫 —— Two.js

(1)打開官網，查看說明

https://two.js.org/

是一個2D繪圖函數庫，提供了一套API，可用於不一樣的技術下的繪圖，

如SVG/CANVAS/WEBGL。

(2)參考DEMO，編寫示例

var two = new Two({ }).appendTo(box);

//繪製一個圓形

var c = two.makeCircle(200,200,100);

//繪製一個矩形——定位點在矩形中心，而不是左上角

var r = two.makeRectangle(600,200, 200,200);

//把繪圖對象中的內容繪製到DOM樹

two.update(); //更新DOM樹

(3)查看API，在項目中加以應用

課後練習：

建立Node.js Web服務器，客戶端先請求一個靜態頁面 public/stat.html，頁面加載完成後，異步請求動態數據： GET /stat，該資源返回以下的JSON數據：

'[{"label":"HTML",value:3}, {"label":"CSS",value:5},....]'

根據這段JSON字符串，繪製下圖：

3)自學two.js工具的使用，理解其做用，仿寫官方示例代碼，學會使用方法，實現以下效果：

面試題：H5新增的標籤有哪些？標籤屬性有哪些？廢棄的標籤有哪些？標籤屬性有哪些？

目標：

(1)地理定位 —— 瞭解

(2)拖放API —— 掌握

(3)Web Worker —— 代碼簡單，須要理解底層原理

1、HTML5新特性之六 —— 地理定位

Geolocation：地理定位，使用JS獲取當前瀏覽器所在的地理座標（經度、維度、海拔、速度）數據，用於實現LBS應用(Location Based Service)，如餓了麼、高德導航...

手機瀏覽器如何得到定位信息：

(1)首選手機中的GPS芯片與衛星通訊，定位精度在米

(2)次選手機通訊基站進行定位獲取，定位精度在千米

PC瀏覽器如何得到定位信息：

經過IP地址進行反向解析，定位精度取決於IP地址庫的大小

HTML5中提供了一個新的對象，用於獲取當前瀏覽器的定位信息：

window.navigator.geolocation{

getCurrentPosition: fn, 得到當前定位信息

watchPosition: fn, 監視定位數據的改變

clearWatch: fn 取消監視

}

得到客戶端的定位信息：

navigator.geolocation.getCurrentPosition(

(pos)=>{ pos.coords.latitude pos.coords.longitude },

(err)=>{ err.code err.message }

)

2、擴展小知識：在網頁中如何嵌入百度地圖

(1)註冊百度開發者帳號

http://lbsyun.baidu.com/

(2)建立一個網站；登陸百度地圖，爲網站申請一個地圖的AccessKey

http://lbsyun.baidu.com/apiconsole/key

(3)在本身的網頁中嵌入百度地圖提供的API，嵌入百度地圖

官方手冊：http://lbsyun.baidu.com/index.php?title=jspopular

var map = new BMap.Map("container"); // 建立地圖實例

var point = new BMap.Point(116.300829,39.915836); // 建立點座標

map.centerAndZoom(point, 17); // 以指定點爲中心並縮放

3、HTML5新特性之七 —— 拖放API

Drag & Drop：拖動和釋放

HTML5爲拖放行爲提供了7個事件，分爲兩組：

拖動的源對象(會動)能夠觸發的事件：

dragstart：拖動開始

drag：拖動中

dragend：拖動結束

整個拖動過程： dragstart*1 + drag*n + dragend*1

拖動的目標對象(不動)能夠觸發的事件：

dragenter：拖動着進入

dragover：拖動着懸停在上方

dragleave：拖動着離開

drop：在上方釋放

整個拖動過程1： dragenter*1 + dragover*n + dragleave*1

整個拖動過程2： dragenter*1 + dragover*n + drop*1

注意：必須阻止dragover的默認行爲，drop纔可能觸發！

練習：使用拖動源對象提供的事件句柄，實現「能夠隨鼠標拖動而移動的小飛機」。

提示：父元素相對定位，飛機元素要絕對定位；飛機移動，就是修改left/top屬性。拖動事件能夠獲取到相對於整個頁面的左上角的偏移量，e.pageX/pageY

練習：使用拖動事件的源對象和目標對象可能觸發的7個事件，實現「拖動刪除效果」

提示：在剛開始拖動時(src.ondragstart)記錄被拖動的源對象的ID，釋放時(target.ondrop)根據此ID找到源對象，執行刪除：div.removeChild( c )

面試題：瀏覽器在加載完一個HTML後，是如何請求頁面中引入的資源文件，安裝哪一種順序來執行的？

4、HTML5新特性之八 — Web Worker — 代碼就3行

程序：Program，指可被CPU執行的代碼，存儲在外存中

進程：Process/Task，指程序被OS調入內存，分配執行空間，隨時供CPU調度執行

線程：Thread，線程是進程內執行代碼基本單位

進程和線程：

(1)進程是操做系統分配內存的基本單位；

(2)線程是CPU執行代碼的基本單位；

(3)線程必須處於某個進程內部；

(4)一個進程內必須至少有一個線程；也能夠有多個；

(5)一個操做系統中可能同時存在幾千個線程，它們是「併發執行的」——

宏觀上看同時執行，微觀上看是依次循環執行

Chrome瀏覽器中的線程模型：

一個Chrome進程內，至少有6個線程，能夠「同時/併發」向Web服務器發起HTTP請求，以得到所需的資源——資源請求線程。

還有一個線程負責將全部內容繪製到瀏覽器頁面中——UI主線程——不容許多線程同時繪圖，防止內容佈局錯亂。

5、觀察以下一段代碼執行特色

<button onclick="console.log(222)">按鈕

現象：JS執行過程當中，按鈕1可見，但點擊無效；按鈕2不可見。

緣由：瀏覽器中執行代碼的只有一個線程——UI主線程

解決辦法：（1）建立新的線程，由它來執行耗時的JS任務；

（2）UI主線程繼續執行後續的HTML渲染：

var w = new Worker('14.js')

</script>

<button onclick="console.log(222)">按鈕

1、補充小知識：在拖動源對象和目標對象間傳遞數據

如：拖動開始時(src.ondragstart)記錄被拖動元素的ID，釋放時(target.ondrop)根據ID查找拖動的源對象，進行相關操做。

方法1：使用一個全局變量 —— 形成全局對象的污染

方法2：使用H5拖放API專供的e.dataTransfer（數據傳遞）

//拖動的源對象

src.ondragstart = function(e){

//海南：往拖拉機中裝數據

e.dataTransfer.setData('key', 'value')

}

//拖動的目標對象

target.ondrop = function(e){

//哈爾濱：從拖拉機中讀取數據

var data = e.dataTransfer.getData('key'); //value

}

2、HTML5新特性之八——WebWorker——代碼就3行，重點在理論理解

進程：操做系統分配內存的單位 —— 工廠

線程：處於進程內部，用於執行代碼 —— 生產線

線程併發：操做系統中全部的線程宏觀上看「同時執行」；微觀上看是「依次交替執行」

Chrome中的線程模型：請求資源——6個線程；運行代碼/渲染頁面內容——1個線程

上述代碼中若x.js很耗時，按鈕1沒法點擊，按鈕2在運行js過程當中不可見——全部的代碼(HTML/CSS/JS)都在單線程(UI主線程)中執行

解決方案：建立一個併發執行的新線程，讓它來執行耗時的JS任務

3、Worker線程的致命缺陷

瀏覽器不容許Worker線程操做任何的DOM&BOM對象！！

緣由：瀏覽器只容許UI主線程操做DOM&BOM！若多個線程同時均可以操做DOM結構，頁面將混亂。

因此，相似jQuery的腳步決不能使用Worker來加載執行。

Worker線程能夠給UI主線程發數據消息：

UI主線程：

var w6 =new Worker('6.js');

w6.onmessage = function(e){ e.data }

Worker線程：

postMessage(stringMsg)

UI主線程能夠給Worker線程發數據消息：

UI主線程：

var w6 =new Worker('6.js');

w6.postMessage(stringMsg)

Worker線程：

onmessage = function(e){ e.data }

練習：在HTML中有一個INPUT，按鈕「開始計算累加和」，點擊此按鈕，建立一個Worker線程來計算出用戶輸入數字的累加和，在下方一個DIV顯示出計算結果。

項目中Worker的使用場景：

(1)只要js中有DOM&BOM就不能用Worker！

(2)Worker適合於執行耗時的JS任務！如複雜計算、加密和解密、大數據統計、路徑規劃......

4、HTML5新特性之九 —— WebStorage

在瀏覽器中存儲當前用戶專有的數據：訪問歷史、內容定製、樣式定製...

在客戶端存儲數據可使用的技術：

(1)Cookie技術：瀏覽器兼容性好；不能超過4KB，操做複雜

(2)Flash存儲：依賴於Flash播放器

(3)H5 WebStorage：不能超過8MB，操做簡單

(4)IndexedDB：可存大量數據，還不是標準技術

Session：會話，瀏覽器從打開某個網站的一個頁面開始，中間可能打開不少頁面，直到關閉瀏覽器，整個過程稱爲「瀏覽器與Web服務器的一次會話」。

WebStorage技術中，瀏覽器爲用戶提供了兩個對象：

(1)window.sessionStorage：類數組對象，會話級數據存儲

在瀏覽器進程所分得的內存存儲着一次Web會話可用的數據，可供這次會話中全部的頁面共同使用；瀏覽器一旦關閉就消失了。做用：在同一個會話中的全部頁面間共享數據，如登陸用戶名。

sessionStorage[key] = value //保存一個數據

sessionStorage.setItem(key, value) //保存一個數據

var v = sessionStorage[key] //讀取一個數據

var v = sessionStorage.getItem(key) //讀取一個數據

sessionStorage.removeItem(key) //刪除一個數據

sessionStorage.clear() //清除全部數據

sessionStorage.length //數據的數量

sessionStorage.key(i) //獲取第i個key

練習：

建立index.html，右上角提示「請登陸」超連接；

建立login.html，輸入用戶名、密碼、提交按鈕，用戶點擊提交後，提示「登陸成功，3s後將自動跳轉回首頁...」 setTimeout + location.href="..."

返回index.html，右上角提示「歡迎回來：xxx 退出登陸」

建立logout.html，提示「您已退出登陸，3s後自動跳轉回首頁...」

返回index.html，右上角提示「請登陸」超連接；

(2)window.localStorage：類數組對象，本地存儲(跨會話級存儲)

在瀏覽器所能管理的外存(硬盤)中存儲着用戶的瀏覽數據，可供這次會話以及後續的會話中的頁面共同使用；即便瀏覽器關閉也不會消失——永久存在。做用：在當前客戶端所對應的全部會話中共享數據，如登陸用戶名。

localStorage[key] = value //保存一個數據

localStorage.setItem(key, value) //保存一個數據

var v = localStorage [key] //讀取一個數據

var v = localStorage.getItem(key) //讀取一個數據

localStorage.removeItem(key) //刪除一個數據

localStorage.clear() //清除全部數據

localStorage.length //數據的數量

localStorage.key(i) //獲取第i個key

localStorage中若數據發生了修改，會觸發一次window.onstorage事件，能夠監聽此事件，實現監視localStorage數據改變的目的，用於在一個窗口中監視其它窗口中對localStorage數據的修改——不能監視sessionStorage數據的修改！

練習：

建立index.html，有一個下拉菜單，「請選擇您喜歡的主題」：「蔚藍天空」、「芭比公主」、「暗黑主題」,各對應一個class名：

.blue{ background: #ddf; color: #33a; }

.pink{ background: #fdf; color: #a3a; }

.dark{ background: #333; color: #eee; }

用戶選中某個選項(select.onchange)，爲當前頁面(body)使用指定的樣式。

建立usercenter.html，打開此頁面便可應用index.html中同樣的主題樣式；即便重啓瀏覽器，直接訪問usercenter.html，還是以前曾選中的主題樣式。

返回index.html，也應該自動應用以前曾選中的主題樣式。

5、HTML5新特性之十 —— WebSocket——代碼不復雜重點在原理的理解

HTTP協議：屬於「請求-響應」模型，只有客戶端發起請求消息，服務器纔會返回響應消息，沒有請求就沒有響應；一個請求，只能獲得一個響應。有些場景中，此模型就力不從心了：實時走勢應用、在線聊天室。解決方案：長輪詢(Long-Polling)/心跳請求——定時器+AJAX——請求過於頻繁，服務器壓力過大；不夠頻繁，客戶端數據延遲較大。

WebSocket協議：屬於「廣播-收聽」模型，客戶端鏈接到服務器就再也不斷開，永久的鏈接，雙方就隨時向對方發送消息，且是全雙工不對等發送。WS協議在實時走勢應用、在線聊天室應用中有着特別的優點。

WS協議的應用程序也分爲客戶端程序和服務器端程序：

WS服務器端應用：

監聽指定端口，接收客戶端請求，向對方發消息，並接收消息；

可使用php/java/node.js等語言編寫

WS客戶端應用：

主動發起鏈接請求，保持永久的鏈接，向對方消息，並接收消息，可使用php/java/node.js/html5等語言編寫

6、瞭解：使用Node.js建立WS協議的服務器

node.js官方沒有提供ws協議的模塊，必須使用NPM下載第三方ws協議模塊： npm i ws

查看README,編寫WS協議的服務器：

......

7、掌握：使用HTML5建立WS協議的客戶端應用