2012年8月28日 星期二

json2 library 介紹、載入

json2Library
瀏覽器因為版本問題,較新的版本支援JSON功能,較舊的版本沒有JSON功能,如果遇到沒有原生支援JSON序列化與解序列時就可以使用JSON2.js這個lib。

JSON2.js官方下載點


使用的時候,可以寫一段程式碼判斷JSON物件是否存在,若不存在就動態載入json2.js的library

你若是ie8可以使用開發者工具,在瀏覽器模式中選擇ie7來模擬ie7環境來測試,因為ie7沒有原生的JSON物件。


example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>動態載入json2</title>
<script>
(function(window,undefined){
//如果mng不存在就將其初始化一個空物件
  (window.mng || (window.mng={}));
  var mng = window.mng;
  //執行loaderJson的次數計數
  var loaderCount = 0;
  //結束執行loaderJson條件的次數
var finishCount = 5;

var loaderJson function(){
loaderCount++;
if(window.JSON){  
                        //stop
clearInterval(timer);
//alert('JSON2載入成功');
processStart();
return;
}
//如果執行了五次,300ms * 5 ,1.5秒還是無法載入成功,就停止載入
if(loaderCount === finishCount){
                        //stop
clearInterval(timer);
//alert('JSON2載入失敗');
}
};

//如果環境上沒有JSON這個物件,就動態載入JSON2.js這個library
if(!window.JSON){
var doc_head = document.getElementsByTagName('head')[0];
var doc_script = document.createElement('script');
                    doc_script.setAttribute('type', 'text/javascript');
    doc_script.setAttribute('src', "../jslib/json2.js");
      doc_head.appendChild(doc_script);
   /*每300ms呼叫一次loaderJson function,直到JSON建立,
              或是loaderCount達到finishCount的次數。   */
        var timer = setInterval(loaderJson, 300);
}else{
//代表程序中呼叫程序開始起使點
processStart();
}

function processStart(){
mng.cat = {name:'咕嘰',age:2};
                //JSON.stringify能將物件序列化成JSON字串格式
mng.strCat = JSON.stringify(mng.cat);
alert(mng.strCat);
                //JSON.parse(jsonStr),能夠將json字串反序列為對應的物件或數值。                
alert( JSON.parse(mng.strCat).name);
};

})(window);
</script>
</head>
<body>
</body>
</html>


javascript DOM 新增、刪除

javascript DOM 新增、刪除 操作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM 新增、刪除</title>
<script>
window.onload = function(){
//add element
document.getElementById('addDiv').onmousedown = function(){
var node = document.createElement("div");  //建立一個元素  
    node.style.width = "50px"; //DIV 寬度
    node.style.height = "50px"; //DIV 高度
    node.style.backgroundColor = "#FF0000"; //背景色
    node.style.border = "solid"; //邊框為實線
    node.style.borderWidth = "1px"; //邊框寬度
    node.style.borderColor = "#CCCCCC"; //邊框色彩
    //node.setAttribute("id","myDiv");  //可以用來設定元素屬性
document.body.appendChild(node);  //把元素加到body元素裡面
};

//remove element
document.getElementById('removeDiv').onmousedown = function(){
var nodes =  document.getElementsByTagName('div'); //傳回DIV element的array
//console.log(nodes);
//remove last div
if(nodes && nodes.length > 0){
//console.log(nodes[nodes.length-1]) //google瀏覽器使用
document.body.removeChild(nodes[nodes.length-1]); //刪除最後面的DIV
}
};
}
</script>
</head>
<body>
<input id="addDiv" type="button" value="add Div"/>
<input id="removeDiv" type="button" value="remove Div"/>
</body>
</html>