Ocean 學習筆記: 2012年8月28日

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 新增、刪除操作

<!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>

Ocean 學習筆記

2012年8月28日星期二

json2 library 介紹、載入

javascript DOM 新增、刪除

2012年8月28日 星期二

json2 library 介紹、載入

javascript DOM 新增、刪除

2012年8月28日星期二