Apr 12 2011

Javascript Storage

storage是html5的儲存資料的方式之一，主要分為sessionStorage和localStorage，這兩種儲存方式都只能在相同的domain才能讀取到，sessionStorage只要頁面關掉後，就會釋放儲存的資料，而localStorage是直接儲存在brower。

storage的物件成員有：

//設定資料
setItem(key,val);
//取得資料
getItem(key);
//移除資料
removeItem(key,val);
//取得儲存資料的筆數
length;
//利用索引取得資料
key(index)'
//清除所有資料
clear();

其中以下方式功能是一樣的：

sessionStorage.setItem("test","test");
sessionStorage["test"] = "test";
//以上這兩種方式，是相同的效果。

從以上範例可以看出，實際上是把直塞到object裡，所以要是儲存本身物件所擁有的成員，將會加以覆蓋，所以不能用相同名稱。

例如：

sessionStorage.setItem("setItem","test");
//將會出錯
sessionStorage.setItem("test","test");

Apr 5 2011

javascript

Javascript Worker

Worker是javascript的thead，只有在支援html5的brower才提供，目前支援最完整的是firefox，firefox可以在Worker理面在使用Worker。Worker目前只提供簡單的傳值、物件、陣列，並沒辦法傳遞function，其中要特別注意的是object，當Worker接收到的是一個object，會與原先的object屬於不同記憶體位址。

example：

<html>
<head>
</head>
<body>
<script>
var ary = [2,3,4];
var thead = new Worker(&quot;./thead.js&quot;);
    thead.onmessage = function(event){
        console.log(&quot;new:&quot;+event.data);
        console.log(&quot;old:&quot;+ary);
    };

    thead.postMessage(ary);
</script>
</body>
</html>

index.html

onmessage = function(event){                                                                                                                         
    if(typeof event.data ===&quot;object&quot;)                                              
    event.data.push(5);                                                            
    postMessage(event.data);                                                       
};

thead.js

result：

new:2,3,4,5

old:2,3,4

Worker的Global成員(指的是上方範例的thead.js)：

//寄送訊息
postMessage(msg);
//關閉thead
close();
//與時間有關的
setTimeout(func,num);
clearTimeout(num);
setInterVal(func,num);
clearInterVal(num);
//目前只有firefox有提供
Worker
//
XMLHttpRequest
//接收訊息的event
onmessage
//引用其他程式
importScripts(url1,url2....);

Worker的物件成員：

//寄送訊息
postMessage(msg);
//event
onerror
//接收訊息的event
onMessage
//立即關閉thread
terminate()

Apr 3 2011

javascript

Html5 Placeholder

placeholder是html5新增的attribute，主要用途是用來設定提示訊息，例如input的text，你可能會需要設定提示user該輸入的資訊，一般的做法是使用focus和blur這兩個event，當submit的時候必須將未填入資訊的欄位清空，而由html5所提供的placeholder，只需要填入應該預設的提示訊息。

以下是一個簡單的example：

<input type="text" name="account" placeholder="請填寫帳號..." />
<textarea name="message" placeholder="請填寫訊息..."></textarea>

如果希望placeholder支援沒有提供的brower，你可使用js的event去修復它，其中要特別注意的是password這個type，因為它顯示的是特殊符號，所以即使用js也沒有辦法改變它的符號，最簡單的方式，就是使用text去替換，當有填入資料時，就替換成password，資料為空的時候再替換成text，最後一步只要在submit的時候，將未填入資料欄位清空。

jquery的plugin：

demo：http://mathiasbynens.be/demo/placeholder

plugin：https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

Apr 2 2011

javascript

javascript history(onpopstate、onhashchange)

history是javascript中處理上一頁與下一頁的一個object，在ajax中要有換頁的處理效果，而不做頁面切換，可以使用html5所提供的pushState和replaceState，其中replaceState與pushState功能類似，replaceState最主要是取代目前此筆history中的紀錄，而pushState則是新增一筆。

以下是history的function：

/**
* 回上一頁
*/
history.back();
/**
* 下一頁
*/
history.forward();
/**
* 當參數為正數時，為下幾頁，負數則反之。
* @param {int} page
*/
history.go();
/**
* 改變當前頁面的網址(html5)
* @param {*} * 可為任意型態，當事件處發時，會接收到此參數
* @param {String} title
* @param {String} link
*/
history.pushState();
history.replaceState();
/**
* 監聽history可使用onpopstate event
*/
window.onpopstate = function(){
    console.log(arguments);
};

如果brower不支援html5的屬性時，可以使用window.location，它可以前往不同的頁面，接著只要利用"#"(錨點)的特性，就可以達到不換頁的效果，那麼所謂的"#"(錨點)是指此頁面的html的id，當"#"後面不加任何值時，將會跳到頁面最上端，若有找到符合id，則會前往此id的位置，沒找到則不做任何動作。

window.location：

//跳到頁面最上方
window.location = "#";
//比對html的id，若沒此id不做任何動作
window.location = "#history";

使用以上方法時，可以使用兩個onpopstate、onhashchange去做監聽，只要執行window.location時，這兩個event都會被呼叫，history.back和history.forward也會呼叫以上的event，但是如果使用的是pushState就不同了，pushState不會去呼叫任何的event，只有history的紀錄是經由pushState修改過的，切換面頁才會呼叫onpopstate這個event。

那麼要是brower都沒有支援以上的監聽事件呢(IE6)?那麼可以使用setTimeout這類的function，去定時檢查link有沒有改變，搭配iframe使用，這樣可以直接由iframe去替換，brower上面的link也不需要改變。