HTML5 表單元件：client端，開啟book.json文字檔，再以表格形式顯示資料(下載book.json)
(要用chrome才能查詢到json資料)

1.重要觀念：
(A).client端讀取文字檔，要等待這個函數讀完，jsonstring 才會完整正確
(B).所以，解析jsonstring的工作必須在另外一個函數來做 parsejson()
(C).必須分兩階段來處理，也就是cilient端讀取json，一定要有兩個按鈕，第1個是opfile對話方塊，第2個是將jsonstring轉成jsonDoc物件的函數，

2.重要觀念：
在client端是無法用loadjson的方式讀進整個json物件的，所以若要在client 端讀進json的資料，變通的方法是，以『字串』的方式讀入(而非json物件)，讀入後再將字串轉成json物件

3.步驟1：第1個函數show01()讀入純文字的步驟

(A) 開啟檔案元件

var jsonstring ="";
function show01(fileinfo) {
//讀取json到字串jsonstring
file = fileinfo.files[0];
var fReader = new FileReader();
fReader.onload = function (event) {
jsonstring = event.target.result;
};
fReader.readAsText(file);
}

(3).步驟2：函數2：parsejson()將字串轉成jsonDoc
jsonDoc本身就是一個物件變數陣列，操作法就更傳統javascript的物件變數陣列一樣

function parsejson(){
var jsonDoc = JSON.parse(jsonstring);
}

(4).步驟3：將jsonDoc輸出成表格資料

str ="<table border=1><tr><td>書名</td><td>作者</td><td>類別</td><td>出版日期</td><td>書號</td></tr>";

for (i=0;i<jsonDoc.length;i++) {
str +="<tr><td>" + jsonDoc[i].title;
str +="</td><td>" + jsonDoc[i].author;
str +="</td><td>" + jsonDoc[i].category;
str +="</td><td>" + jsonDoc[i].pubdate;
str +="</td><td>" + jsonDoc[i].id;
str +="</td></tr>";
}
str +="</table>";
document.getElementById("id01").innerHTML = str;

(4).表格的標籤語法:<tr列，<td欄

<table border=1>
<tr>
<td>學號</td><td>姓名</td><td>電話</td><td>電子郵件</td>
</tr>

(5).book.json內容

[
{
"title": "Dreamweaver CC 網站設計",
"author": "鄧文淵",
"category": "網頁設計",
"pubdate": "05/2014",
"id": "web001"
},
{
"title": "ASP.NET 3.5 網頁程式設計",
"author": "陳會安",
"category": "網頁設計",
"pubdate": "07/2014",
"id": "web002"
},
{
"title": "C#.NET 程式設計",
"author": "曹祖聖",
"category": "程式設計",
"pubdate": "11/2012",
"id": "prog001"
},
{
"title": "jQuery Mobile設計",
"author": "陳會安",
"category": "手機設計",
"pubdate": "06/2014",
"id": "mobile001"
}
]