剛在撰寫程式碼時, 發現要取回 aws cloudsearch 中的搜尋使用時間, 其傳回的 json 參數中, 使用了減號, 該鍵值為 time-ms , 其實很直覺地要使用, 但又覺得怪怪的, 一執行馬上就有問題.
因為原來的 jsonObj.time-ms 會被視為 jsonObj.time – ms , 所以必須調整寫法, 正確寫法如下:
jsonObj["time-ms"]
這樣就可以了, 當然, 該回應的 json 中, 該鍵值(key)也必須是使用引號包起來的, 否則該 json 物件也會有問題.
測試程式碼如下:
var a = {
"mykey": "value1",
"my-key": "value2",
}
alert(a["my-key"]);
會回應 value2 這樣就對了.
參考資料:
http://stackoverflow.com/questions/13869627/unable-to-access-json-property-with-dash
在 nodejs 專案中, 若是需要對外發起使用 application/json 的 http post , 若有中文字, 需要注意計算字串長度的問題. 一般發起的程式碼請參考:
http://tech.pro/tutorial/1091/posting-json-data-with-nodejs
不過該範例是使用英文字, 所以沒有問題, 若是要發起中文字的 json http post, 需要調整計算 Content-Length 的方式, 使用 new Buffer(str).length, 如下:
var obj_json = { name: "王大頭", age: 25 };
var json_string = JSON.stringify(obj_json);
var req = http.request({
host: 'host.example.com',
port: 80,
path: '/upload',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Content-Length': new Buffer(json_string).length
}
}, function(res) {
res.setEncoding('utf-8');
var responseString = '';
res.on('data', function(data) {
responseString += data;
});
res.on('end', function() {
console.log(responseString);
});
});
req.on('error', function(e) {
// http post error
});
req.write(json_string);
req.end();
在 window form中使用 webbrowser 時, 有時會遇到 javscript error 的訊息, 此時會出現需要使用者介入的操作, 程式才能繼續執行下去.
這樣對於一些自動化操作的程式會有停止無法執行的問題, 所以可以利用一個 webbrowser 的屬性 “ScriptErrorsSuppressed” 設為 True 即可抑制這個會出現的人機介面.
不過記得使用這個屬性, 後續的程式也得注意網頁程式的異常後, 如何做良好的控制, 才不會因為這個屬性設定後, 雖然程式可以繼續往下執行, 但 webbrowser 中的程式錯誤而產生非預期結果的狀況, 就不好了.
今天在整理 http://sample.diary.tw/ 時, 發現 sample 愈來愈多了, 而且內容是由舊往新排, 想說把它反過來排, 新的放在上面, 舊的在下面.
由於內容不多, 把 <li> 手動一筆筆排一下應該不會花太多時間, 不過又想到應該是要用指令來才有效率才對, 於是想說用 sort 指令來操作, 發現 sort 功能強大, 要用來做倒排反而不是很快速方便.
乾脆又來動手寫個小程式好了(又是一個 sample): http://sample.diary.tw/31/1.htm 只利用了 javascript 的 array 功能, 馬上就寫好了一個反向排序功能(倒排功能), 用法很簡單, 就是把文字內容貼進去, 按下[反向排序]按鈕, 就會倒排完成.
程式如下:
//var arrData = document.getElementById("data").value.split("\n");
//arrData = arrData.reverse();
//document.getElementById("data").value = arrData.join("\n");
document.getElementById("data").value = document.getElementById("data").value.split("\n").reverse().join("\n");
前三行可以簡化為最後一行, 簡單說明, 就是把 textarea 內容取出, 用換行 split分割為陣列, 再用 reverse 倒排後, 再利用 join 用換行合併, 塞回去原本的 textarea 完成.
所以現在的 http://sample.diary.tw/ 是由新到舊排了!
HTML5裡令人驚豔的一項特性就是可以離線瀏覽功能.
利用這項功能, 可以很容易地讓網頁在沒有網路的環境下, 也能順利讓使用者閱讀及使用, 而且實作上也相當單純, 只需要注意寫好更新網頁的邏輯及時間點即可.
一般來說, 只需要把 manifest 設定好, 基本的離線瀏覽功能就差不多完成了, manifest 的設定容易, 就是把”要”在離線瀏覽的網頁及內容, 寫在 manifest 裡, 例如網頁是
http://test.com/mypage.htm
內容有一個 js/myjs.js
另外還有兩張圖為 imgs/1.jpg 及 imgs/2.jpg
則在 mypage.htm 中的 html tag 裡, 多加上 manifest=”mypage.manifest” 而且在 mypage.manifest 中, 加上以下內容(純文字):
CACHE MANIFEST mypage.htm js/myjs.js imgs/1.jpg imgs/2.jpg
這樣就完成了. 有意思的地方是即使用 mypage.php 這樣的動態內容, 一樣可以利用這樣的方式將內容存在客戶端中.
如此一來, 即使在沒有網路的狀況下, 也可以順利瀏覽這個網頁內容 http://test.com/mypage.htm
接下來要說明的是更新方式, 一旦寫入到客戶端的內容, 即使原本的 mypage.htm 更新, 就算是有連線時, 該內容也不會更新(而且即使是動態的 aspx, php 等也都是一樣的), 簡單地說, 在 manifest 中的內容, 就是完全使用客戶端的內容, 不管 server 上的內容, 更新的方式就是更新 manifest 的檔案, 瀏覽器會檢視 manifest 內容來進行更新, 而且會自動更新(在線上時的第一次讀到 manifest 更新時, window.applicationCache.status 會變成狀態 4 (window.applicationCache.UPDATEREADY), 此時可以手動更新, 使用 window.applicationCache.update(); 即可做手動更新, 即使在這次的訪問不更新, 在下一次的訪問時, 瀏覽器也會自動更新.
利用這點, 就可以很容易地實作出離線瀏覽內容的網頁.
若希望只更新這些快取內容, 最簡單的作法是在 mypage.manifest 中, 多加個時間或版本號, 如下:
CACHE MANIFEST #VER 000151 mypage.htm js/myjs.js imgs/1.jpg imgs/2.jpg
其中的 # 代表著這行為註解, 所以可以自由寫入內容, 上例是寫個版本號 000151, 若要強迫客戶端更新時, 可以將這個 manifest 檔的版本號改為 000151 (若其他內容都可以), 這樣就可以方便容易地來維護在客戶端離線的內容更新.
這裡有一篇很清楚的介紹文, 可以參考
http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/
另外, 配合良好的設計結構, 可以將離線/在線的功能都實作出來, 方便在無法連線時, 也能使用的網頁, HTML5 的這個功能, 的確非常強大!
在實作測試時, 發現若是有設定 manifest 的網頁, 有些瀏覽器對有些 server request 即使沒有設定在 manifest 中, 也會有快取或存取的異常狀況, 建議在 manifest 的最後, 再多加上
NETWORK: *
這兩行, 可以讓不正常工作的 server request 正常運作.
相關資料:
http://diveintohtml5.info/offline.html
w3c 的資料:
http://www.w3.org/TR/html5/offline.html
Apple Safari的資料:
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html
繼上次的線上賓果產生器( https://diary.tw/archives/1185 )後, 再來補個線上幸運抽獎, 這個適合尾牙活動或是隨機抽獎時使用.
網址: http://sample.diary.tw/lucky-draw/
一樣是使用 jQuery, 純 client 執行的程式, 不過這次多配合了 jQuery UI 中的 dialog, 以方便快速編輯 html 中的 select 物件.
工作方式很簡單, 第一動是先輸入流水號, 例如預設的 1~100, 按下產生後, 生成 1~100 號在抽獎名單中, 若有跳號或是不規則號, 都可以藉由雙擊抽獎名單的 select 元件進行編輯, 利用 textarea 進行編輯, 一行一項, 空行會自行避開, 自行貼入或編輯清單.
再來就是輸入獎項了, 一般應該是由小到大排(通常的抽獎順序啦), 當然也可以隨興輸入, 一樣雙擊獎項的 select 會跳出編輯的 dialog.
最後就是令人期待的抽獎了, 抽獎鈕按下時, 若在獎項有被選取的項目, 會先抽該項目的得獎者, 若沒有則從最上面的獎項開始抽起. 每次抽都會隨機排序抽獎名單中的號碼, 所以很隨機, 抽出來的獎項及得獎者會填入最下方的抽獎結果.
隨時都可以再加入獎項(直接再進行編輯即可), 例如加碼, 紅包等, 再繼續抽獎, 而最後的抽獎結果是可以雙擊跳出 dialog 中有 textarea 供複製出來應用, 不過是不能編輯的(才不會被修改), 這樣就完成了這個線上幸運抽獎.
其中編輯 select 及列出 select 內容的 function 是共用的, 都是將其 dblclick 呼叫 editSelect, 如下:
今天花了一點時間寫個”線上賓果產生器”, 是個全 javascript 的程式, 主要是可以給想玩賓果, 但又不想畫格子及填數字的朋友們, 有個小工具可用.
這裡用了一個隨機排序的函數, 引用自: http://javascript.about.com/library/blsort4.htm, 程式如下:
Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1));
while (s.length) this.push(s.pop());
return this;
}
利用了 Math.random() 隨機將一個陣列中的各元素互相交換的方式, 把陣列內容打散, 達成隨機排序, 使用方式就直接呼叫 aryNum.shuffle() 即可, 其中 aryNum 是一個自訂的陣列變數, 一開始先將 n*n 的數字填入, 再利用 shuffle() 函數進行打散.
另外值得一提的是利用了 @media print 的方式, 將操作的表單在列印時隱藏起來, 方便列印出來的賓果表格更清楚, 是一個 css 的技巧, 如下:
@media print
{
.noprint {
display: none;
}
}
請到這裡玩看看: 線上賓果產生器: http://sample.diary.tw/bingo/
只需要填入維度及組數, 馬上就生出來所需要的賓果表格, 除了原來的 5*5 外, 想玩 6*6, 7*7 也不是問題. 快來玩看看囉!
在開發網頁程式, 用到解析和產生 JSON 是經常發生的事, 不過如何快速的解析或是產生 JSON , 又或是用來除錯這些 JSON 的資料, 不像 XML 可以利用瀏覽器來幫忙, JSON 可以利用這個作者 Thomas – http://www.thomasfrank.se/about.html 開發的工具來進行 JSON 的線上測試.
說明在這裡: http://www.thomasfrank.se/json_editor.html
他有線上使用版, 和下載版, 若是進行除錯, 可以直接使用線上版: http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html
以之前文章 https://diary.tw/archives/285 的資料為例:
{ 'obj1': {
'child1':'value1',
'child2':'value2'
},
'array1': [1, 2, 3, 4, 5]
};
將內容貼到 JSON Editor 裡, 按下 save 鍵, 就會產生出該 JSON 的樹狀結構在該 editor 左側(記得要自己按下 + 號展開, 如下圖:
這樣可以很容易的理解及看出該 JSON 資料的內容. 若是要取得某一節點, 可以點在該節點上, 並看 editor 上的 label及下面的 value 就可以利用程式取出該 JSON 資料結構的資料點, 以上面的 array1 中的 1 為例, 圖示如下:
這樣是不是十分方便, 對於在使用 JSON 的開發上, 有十足的加速作用呢!
這篇是在 zdnet 看到的:
http://www.zdnet.com.tw/news/software/0,2000085678,20149826,00.htm
利用 javascript 模擬 pc 執行 linux , 因為 javascript 的處理能力已經相對強大了, 可以跑模擬 pc 後執行 linux, 網址在這裡:
這樣看起來, 一般 develper 使用的 javascript 還真是用不了他的功能的 1/10 吧, 看來, 愈來愈強大的 javascript engine 可以做更多更多的事了!
瀏覽器支援HTML5後, 可以利用 <video> 標籤來做影片的播放, 與之前需要 FLASH 的外掛不同, 讓瀏覽器本身就可以直接直援播放影音的功能.
不過有時需要有向前相容的功能, 也就是在不支援 <video> 這個 html5 標籤時, 也需要能播放, 這時候可以利用之前曾提過的 jw player (http://www.longtailvideo.com/players/) 或這篇文章要介紹的 VideoJS – http://videojs.com/
這個播放器利用了純 HTML5 的 <video> 標籤功能, 配合了可以自訂的 CSS 來產生播放器, 並同時支援了多款現行的瀏覽器, 以及向前相容的 FLASH 語法, 方便在撰寫影音播放器的開發者使用, 並且還有一個方便的產生器: http://videojs.com/embed-builder/ 還有多組 SKINS 可供應用: http://videojs.com/skins/ 真的還蠻方便的呢!