HTML5 學習之三 web worker,server-send,表單屬性

HTML5 Web Workers

通常狀況下，當在HTML頁面中執行腳本時，頁面的狀態是不可響應的，知道腳本已經完成。

Web worker是運行在後天的JavaScript，獨立於其餘腳本，不影響頁面的性能，開放者能夠繼續作任何要作的事情：點擊，選取內容等等，而此時web worker在後臺運行。

瀏覽器支持:

除了IE其餘瀏覽器都支持

Web Workers和DOM

因爲web Workers位於外部文件中，他們沒法訪問下列JavaScript對象：

一、  window對象

二、  document對象

三、  parent 對象

 

要使用web worker先檢測用戶的瀏覽器是否支持它：

if(typeof(Worker)!==」undefined」){

 //瀏覽器支持

}else{

 //瀏覽器不支持

}

 

建立Web Workers對象

下面代碼檢測是否存在worker，若是不存在會建立一個：

if(typeof(w)=="undefined")

  {

  w=new Worker("demo_workers.js");

  }

w.onmessage=function(event)

{

document.getElementById("result").innerHTML=event.data;

};

前面說了，Web worker運行在一個獨立於其餘腳本，因此這裏須要一個單獨的js文件，js文件事例以下：

var i=0;
function timedCount()
{
i=i+1;

postMessage(i);

setTimeout("timedCount()",500);

}
timedCount();

主要代碼就是postMessage()方法。它會向HTML頁面傳回一段消息。

註釋：web worker一般不用於如此簡單的腳本，而是用於更耗費 CPU 資源的任務。

當js向頁面傳回消息以後，worker的onmessage事件監聽器就能夠收到這個消息，這個消息就存在於event.data中，上面的例子就是直接將得到內容展現到了頁面上。

 

中止Web worker

當建立Web worker對象以後，它會繼續監聽消息，直到其被終止才結束，並釋放瀏覽器/計算機資源，那就請使用terminate()方法。

w.terminate();

 

eg:

<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>

<button onclick="stopWorker()">Stop Worker</button>

<br /><br />

<script>

var w;

function startWorker()

{

if(typeof(Worker)!=="undefined")

{

  if(typeof(w)=="undefined")

    {

    w=new Worker("demo_workers.js");

    }

  w.onmessage = function (event) {

    document.getElementById("result").innerHTML=event.data;

  };

}

else

{

document.getElementById("result").innerHTML="Sorry, your browser

 does not support Web Workers...";

}

}

 

function stopWorker()

{

 w.terminate();

}

</script>

Server-Sent事件-單向消息傳遞：

該事件的做用是網頁自動獲取來自服務器的更新。

之前也可能作到這一點，前提是網頁不得不詢問是否有可用的更新。經過服務器發送事件，更新可以自動到達。

接收Server-sent事件通知：

EventSource對象用於接收服務器發送的事件通知：

Var source = new EventSource(「demo_sse.php」); //建立一個新的EventSource對象，並規定發送更新的頁面的URL(demo_sse.php)

Source.onmessage=function(event){

 Document.getElementById(「result」).innerHTML =event.data;

}

//收到更新後，發生onmessage事件，而後把接收的數據放到result元素中

 

HTML5 表單：

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

新的輸入類型：（IE徹底不支持）

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

可是不支持不表明不能正常顯示，仍是能夠在主流瀏覽器上顯示爲常規的文本域的

Input 類型-email

在提交表單時會自動驗證email域的值：

E-mail: <input type="email" name="user_email" />

其餘類型於此用法相似。

這裏要特別說一下number類型

它添加屬性值max,min,step,value字段類型來對數字進行限定

Max,min很好理解，數字文本域中最大最小值，step規定合法的數字間隔（若是step=3,則合法的數是-3,0,3,6等），value規定默認值

 

Input 類型 - Date Pickers（數據檢出器）

HTML5 擁有多個可供選取日期和時間的新輸入類型：

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時間（小時和分鐘）

datetime - 選取時間、日、月、年（UTC 時間）

datetime-local - 選取時間、日、月、年（本地時間）

 

HTML5表單屬性：

新的form屬性：

Autocomplete //form 或input域應該擁有自動完成的功能。

註釋：autocomplete 適用於 <form> 標籤，以及如下類型的 <input> 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。

Novalidate

新的input屬性：

Autocomplete//同上

Autofocus //規定頁面加載時，域自動得到焦點

註釋：autofocus 屬性適用於全部 <input> 標籤的類型。

Form //規定輸入域所屬的一個或多個表單

註釋：form 屬性適用於全部 <input> 標籤的類型。

form 屬性必須引用所屬表單的 id：

Form override(formaction,formenctype,formmethod,formnovalite,formtarget)//容許中邪form元素的某些屬性設置

 

Height和width  // height 和 width 屬性規定用於 image 類型的 input 標籤的圖像高度和寬度。

註釋：height 和 width 屬性只適用於 image 類型的 <input> 標籤

 

List //規定輸入域的datalist（是輸入域的選項列表）

註釋：list屬性適用於一下類型的<input>標籤：text,search,url,telephone,email,date pickers,number,range以及color.

Eg:

<input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3Schools" value="http://www.w3school.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

 

Min,max,step

註釋：min、max 和 step 屬性適用於如下類型的 <input> 標籤：date pickers、number 以及 range。

下面的例子顯示一個數字域，該域接受介於 0 到 10 之間的值，且步進爲 3（即合法的值爲 0、3、6 和 9）：

 

Multiple//規定輸入域中可選擇多個值

註釋：multiple屬性適用於email和file類型的<input>標籤

 

novalidate 屬性

novalidate 屬性規定在提交表單時不該該驗證 form 或 input 域。

註釋：novalidate 屬性適用於 <form> 以及如下類型的 <input> 標籤：text, search, url, telephone, email, password, date pickers, range 以及 color.

Pattern

註釋：pattern 屬性適用於如下類型的 <input> 標籤：text, search, url, telephone, email 以及 password。

 

Placeholder //提供一種提示（hint），描述輸入域所期待的值

註釋：placeholder 屬性適用於如下類型的 <input> 標籤：text, search, url, telephone, email 以及 password。

Retuired //必須在提交以前寫入輸入域（不能爲空）

註釋：required 屬性適用於如下類型的 <input> 標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<input type="text" name="usr_name" required="required" />