HTML5 6

複習：

HTML5新特性               重要程度(10)

1.新的語義標籤               10

2.表單2.0                      7

3.視頻和音頻                  8

4.Canvas繪圖                9

5.SVG繪圖                    9

6.地理定位                     1

7.拖放API                     4

8.WebWorker               4

9.WebStorage                     9

10.WebSocket                     2

 

 

拖放API——七個事件：

源對象能夠觸發的事件：

       dragstart：

       drag：

       dragend：

目標對象能夠觸發的事件：

       dragenter：

       dragover：     ——  e.preventDefault()

       dragleave：

       drop：

 

今日目標：

(1)擴展：如何在網頁中拖拽顯示客戶端的圖片

(2)WebWorker

(3)WebStorage

 

 

1.面試題：如何在服務器端下載的網頁中顯示客戶端圖片？

  通常狀況下，網頁只能顯示服務器上的圖片；

  HTML5中，能夠實現用戶拖拽一張本地的圖片顯示在服務器端下載的網頁中。

  container.ondrop = function(e){

      var f0 = e.dataTransfer.files[0];

       var reader = new FileReader();

       reader.readAsDataURL(f0);

       reader.onload = function(){

              ///讀取完成，數據在reader.result中

       }

  }

HTML5中提供的用於文件輸入輸出(I/O)的對象： File：表明一個文件/目錄對象 FileList：表明一個文件列表（類數組對象） FileReader：用於從文件中讀取內容 FileWriter：用於向向文件寫出內容

 

 

2.面試題：Chrome瀏覽器的線程模型是怎樣的？

  程序：計算機能夠執行的代碼，存在於磁盤中——靜止的

  進程：把程序調入到內存中，等待被CPU執行——活動的

  線程：是CPU執行進程代碼的基本單位——生產任務

      

面試題：進程和線程間的關係？ 進程是操做系統分配內存的基本單位。 線程處於進程內部，是CPU執行代碼的基本單位。 一個進程中至少有一個線程，也能夠有多個。 多個線程間併發執行——宏觀上看是「同時」執行，微觀上看是「輪流」執行。

 

  Chrome中的線程模型：

  (1)Chrome中發起HTTP請求最多可使用6個併發的線程；

  (2)Chrome中負責向頁面中執行繪製任務(執行HTML/CSS/JS/事件處理等代碼)的只有1個線程——UI主線程。

  碰到以下的代碼，就有問題了：

  <button onclick="console.log(111)">1</button>

  <script src="耗時.js"></script>

  <button onclick="console.log(222)">2</button>

根本解決之道：

  建立一個新的線程，去執行耗時的JS任務——與UI主線程併發執行。new Thread('x.js') —— 其它語言中的相似代碼。

 

3.HTML5新特性之八——Web Worker

  HTML5提供了一種相似建立新線程的機制：

       new Worker('x.js');   //工人線程，與UI主線程併發執行

 

 注意：Worker線程自然缺陷！！

 瀏覽器禁止Worker線程操做任何的BOM和DOM對象！！！——瀏覽器只容許UI主線程進行頁面內容的渲染！——不能使用Worker加載相似jquery.js文件！！ 項目中，必需用到Worker的場景很少，好比有很是複雜耗時的且與DOM無關的運算時。

 

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

  UI線程：

       var w = new Worker('x.js');

       w.postMessage('StringMsg');

  Worker線程：

       onmessage = function(e){  //e.data  //UI主線程發來的消息數據        }

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

  UI主線程：

       var w = new Worker('x.js');

       w.onmessage = function(e){  //e.data //Worker線程發來的消息數據 }

  Worker線程：

       .....

       postMessage('StringMsg');

練習：在主界面中有一個輸入框+按鈕（「開始質數計算」），點擊後建立一個新的Worker線程，把用戶的輸入傳遞給該線程，進行質數斷定；.... 計算結果再反傳給UI主線程，在一個DIV元素中顯示出運算結果。

      

總結：Worker本質是一個線程，在UI主線程以外併發執行的線程；用於執行耗時的JS任務；缺陷：不能操做BOM和DOM，只能和UI主線程發消息。

 

 

 

4.數據存儲方案

  Web項目中須要存儲多種數據，大致上有兩種存儲方法：

  (1)服務器端存儲：

       1)數據庫技術：存儲項目中的核心數據

       2)Session技術：存儲當前用戶的信息

  (2)客戶端存儲：不太緊要的與客戶端有關的數據，如瀏覽記錄、內容定製、樣式定製

       1)Cookie技術：使用比較繁瑣、大小不能超過4KB

       2)Flash技術：逐漸被淘汰

      3)HTML5WebStorage技術：使用簡單，大小不超過8MB

       4)IndexedDB技術：客戶端直接存儲對象，目前還不是HTML標準技術

 

 

Web會話：指客戶端瀏覽器從鏈接到某個Web服務器開始，一系列的請求-響應過程。直到客戶端關閉瀏覽器，會話結束。

 

5.HTML5新特性之九——WebStorage         

  HTML5的WebStorage技術，提供了兩個對象，用於在瀏覽器中存儲客戶端的訪問數據：

  window.sessionStorage——會話級存儲:

       在瀏覽器的內存中存儲的與某個服務器間的一系列請求-響應過程當中產生的數據——都是Key-Value對形式。當會話結束時(用戶關閉了瀏覽器)，會話級數據即消失。

       sessionStorage['key'] = 'value';    //存儲一個數據

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

       sessionStorage.length                 //獲取數據的個數

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

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

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

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

  window.localStorage——本地/跨會話級存儲：

       在客戶端文件系統/硬盤中存儲客戶端與服務器間的訪問數據——都是Key-Value對形式。即便關閉瀏覽器，甚相當閉計算機仍然存在，不然會永久存在。

       localStorage['key'] = 'value';        //存儲一個數據

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

       localStorage.length                            //獲取數據的個數

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

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

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

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

 

 

練習：                  

(1)建立index.html，右上角有一個超連接「登陸」，點擊此連接跳轉到login.html，用戶在表單中輸入登陸信息，點擊「提交按鈕」，假設用戶名和密碼都正確，彈出提示「登陸成功」，3秒鐘跳轉回首頁，右上角顯示出「歡迎回來：xxx  退出登陸」；此時若用戶在地址欄強行輸入login.html，直接跳轉到index.html；用戶若點擊了index.html上的退出登陸超連接，則跳轉到logout.html，提示出「您已退出登陸」，3秒鐘跳回index.html，繼續顯示「登陸」超連接

       setTimeout(function(){

              location.href="";

       },3000)

(2)實現一個頁面主題的永久定製                    17：55

  建立index.html，指定3個class

       .blue {  background: #ccf; color: #339;  }

       .pink {  background: #f3b; color: #916;      }

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

  提供一個下拉選擇框，「—請選擇您喜歡的頁面主題—」，「湛藍天空」、「芭比公主」、「殺馬特」，選擇某項以後，當前頁面的body就使用對應的className。

  跳轉到usercenter.html，默認也呈現出index.html中選中的頁面主題，即便重啓瀏覽器，仍能夠呈現出以前選中的主題色。提示：即便從新打開index.html，也要顯示出以前選中的主題色。

 

 

課後練習：  單詞測試系統

(1)用戶能夠在save.html中不停的錄入新單詞；

(2)進入test.html開始測試，須要對以前錄入過的全部單詞進行測試；

(3)提交答案後，在result.html中顯示出測試成績。

提示：錄入的單詞須要永久保存；而這次測試結果只須要在當前會話中保存。

 

  //遍歷客戶端存儲的數據

for(var i=0; i<localStorage.length; i++){

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

var value = localStorage[key];     //獲取第i個value

}