Html5(1)

一. 自定義屬性（dataset）

data-name:dataset.name
data-name-first:dataset.nameFirst

<div data-hello="world"></div>
  <script>
    var oDiv = document.getElementsByTagName("div")[0];
    alert(oDiv.dataset.hello);
  </script>

二. js載入

js的載入會影響後面內容的載入，很多瀏覽器都採用了並行載入js，但還是會影響其他內容。
html5的defer和async

• defer：延遲載入，會按順序執行，在onload執行前會被觸發
• async：非同步載入，載入完就觸發，有順序問題

labjs庫（js非同步載入庫）
自定義屬性在屬性庫中有重要作用，如jquery mobile。

三. 表單新增控制元件和屬性

新增控制元件

< input type=”tel” /> 在移動端點選會直接彈出鍵盤，新增的type型別還有：
- emal：電子郵箱文字框，跟普通的沒什麼區別
當輸入不是郵箱的時候，驗證通不過
移動端的鍵盤會有變化
- tel：電話號碼
當輸入不是電話號碼的時候，驗證通不過
移動端的鍵盤會有變化
- url：網頁的URL，有驗證
- search：搜尋引擎
chrome下輸入文字後，會多出一個關閉的X
- range：特定範圍內的數值選擇器
mix、max、step（步數）
- number：只能包含數字的輸入框
- color：顏色選擇器
- datetime 顯示完整日期
- datetime-local：顯示完整日期，不含時區
- time：顯示時間，不含時區
- date：顯示日期
- week：顯示周
- month：顯示月

新增屬性

• placeholder：輸入框提示資訊
• autocomplete：是否儲存使用者輸入值
  預設為no，關閉提示選擇off
• autofocus：指定表單獲取輸入焦點
• list和datalist：為輸入框構造一個選擇列表
  list值為datalist標籤的id
• required：此項必填，不能為空
• pattern：正則驗證patter=”\d{6,10}”
• formaction：在submit裡定義提交地址

四. 歷史管理

通過改變hash值來管理
onhashchange：當hash值改變是觸發此事件。
html5中history：
伺服器下執行
pushState：三個引數：資料 標題（都沒實現）地址（可選）popstate事件：讀取資料 event.state
注意：網址是虛假加的，需要再伺服器端指定對應頁面，不然重新整理後就找不到頁面。

<div id="div1"></div>
<script>
    var btn = document.getElementById("btn");
    var oDiv = document.getElementById("div1");
    var json = {};
    btn.onclick = function(){
        var arr = randomNum(35,7);
        var num = Math.random();
        json[num] = arr;
        oDiv.innerHTML = arr;
        window.location.hash = num;
    }
    window.onhashchange = function(){
        alert("change");
        oDiv.innerHTML = json[window.location.hash.substring(1)];
    }
    function randomNum(sum, num)
    {
        var arr = [];
        var newArr = [];
        for(var i = 0; i < sum; i++)
        {
            arr.push(i);
        }
        for(var i = 0; i < num; i++)
        {
            newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
        }
        return newArr;
    }

</script>

html5中

<Button id="btn">隨機選彩票</Button>
<div id="div1"></div>
<script>
    var btn = document.getElementById("btn");
    var oDiv = document.getElementById("div1");
    btn.onclick = function(){
        var arr = randomNum(35,7);
        history.pushState(arr,'');
        oDiv.innerHTML = arr;
    }
    window.onpopstate = function(ev){
        oDiv.innerHTML = ev.state
    }
    function randomNum(sum, num)
    {
        var arr = [];
        var newArr = [];
        for(var i = 0; i < sum; i++)
        {
            arr.push(i);
        }
        for(var i = 0; i < num; i++)
        {
            newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
        }
        return newArr;
    }
</script>