Blackbing Playground

發表於

IE8很快的又要release 正式版了，雖然也是宣告可怕的夢魘再度降臨，不過能看到IE還在繼續打這場瀏覽器大戰也是一件好事，當然能夠早點把IE6給淘汰掉才是真正大快人心。不過在看了IE8的特色之後，覺得這次他們真的有痛下決心要跟其他瀏覽器抗衡了。以下是我覺得不錯的特色：

閱讀全文 »
Blackbing Playground

發表於

在google搜尋地址時，會判斷你想要搜尋地址，並且出現google map的地圖，說實在這真的是一個很方便的搜尋方式，更方便的是透過他強大的搜尋引擎，可以很快的撈出在這個地址的食記、商家、等等的文章，這讓我想到我們有很多的地標資料，但是都沒有好好的利用搜尋引擎的特性。

例如在google搜尋地址「台北市八德路二段300巷80號」:

閱讀全文 »
Blackbing Playground

發表於

有時候有些網頁不需要在一開始就載入urmap api，有可能是使用者觸發某個動作才要顯示地圖，這時候用原本取得API的方式(document.write)就無法作到include on demand，因此我寫了一個小程式，經過壓縮之後只有1.6kb。接下來你只要呼叫

閱讀全文 »
Blackbing Playground

發表於

javascript是一個弱型態的語言，不像JAVA、C#等對變數型態有非常嚴謹的定義，而且一般在編譯階段就會發現型態的錯誤，讓開發者避免一些不 必要的型態錯誤。而Javascript為script語言，因此必須在執行階段才會知道錯誤，雖然目前有一些工具可以輔助你開發時幫你檢查是否有 javascript型態錯誤或者語法錯誤，例如Douglas Crockford的JSLint，就是一個非常棒的Javscript verify tool，
雖然你可以依靠這些工具輔助你 在撰寫Javascript時避免一些不必要的錯誤，但是若你打開一些Framework的原始碼，你會發現一大堆利用javascript弱型態的特性 簡化程式碼的小技巧，當然，你可以選擇不使用者些技巧，但是你卻不能不瞭解有這些特性的存在。

閱讀全文 »
Blackbing Playground

發表於

幾年前，當時AJAX尚未問世的時候，網路上充斥著許多Javascript的特效，比方說狀態列會有跑 馬燈效果、文字閃爍，當時雖然不懂Javascript，但總會有熱心的人教你如何把特效放到網頁上，例如：
第一步：先把第一段script放到head 標籤裡頭。
第二步：再把第二段script放到<body>標籤之中。
第三步：將第三段script放到你想要放的地方。

當時也完全不懂 Javascript到底怎麼運作，反正套用上OK就行了，偶爾調整一些參數，讓他看起來比較不一樣。可是有時候在A網頁可以執行，在B網頁卻又不能執 行，只能東改改西改改來看看到底可以改出什麼玩意。

閱讀全文 »
Blackbing Playground

發表於

URMAP API 2.0版大幅更新及改善了許多功能，並且相容於前一版。

為了提供更快速、可靠的API服務，取得API的網址由原本的http://www.urmap.com/SearchEngine/api/getapi.jsp 改成 http://api.urmap.com/js/getapi.php， 原本的API路徑雖然還會繼續服務，但是不再提供更新，若要取得最新的API請將網址改為新的API路徑。建議不管您是否想更換新的API，都要將路徑改為新的API路徑，以取得更快速更可靠的服務。（URMAP API 2.0 Document）

閱讀全文 »
Blackbing Playground

發表於

最近花了點時間更新了「你的地圖小畫家」，之前的雛型是半年前完成的，但是其中有相當多的bug，當初也沒將資料的傳送考慮進去，尤其是線段的資料是以經緯度紀錄的，因此繪圖物件一多，資料量就變的相當龐大，原本一直不曉得該怎麼解決這個問題，後來終於讓我找到polyline encoding 的演算法，演算法本身不難，而且也都有各種語言的實做，真是另我振奮，難怪google map的路徑規劃可以在拖動地圖的同時做到即時的路線導航，不僅routing的速度快，編碼過後的Polyline資料也非常小。

例如六個點的data：
25.074098796077788,121.5333366394043
25.061970436616313,121.51926040649414
25.045486382633943,121.52029037475586
25.042375935197878,121.52509689331055
25.03771011611953,121.53196334838867
25.037087993498368,121.53745651245117

經過編碼之後變成：
ah`xCi~wdVvjA|vAlu@hRro@wXlR_]b}i@|Bia@

如何？是不是差別很多？

因此這幾天將資料儲存的部份全部重寫，果然傳送速度比之前快了非常多，算是一大突破。將來可以再增加插入圖片、文字的功能(已經計畫很久了XD)。

這次的改版除了資料量的大幅降低，並且採用我最近狂用的jQuery，在FF3與IE7.0測試過沒問題。

後記：做這種工具軟體，最重要的就是「復原」功能，尚未加入復原功能時，給朋友測的的第一個反應都是：「靠腰～不能復原阿XD」

我要玩看看「你的地圖小畫家」

Blackbing Playground

發表於

parseInt是強制將字串轉型成整數型態的function，但有時候會發生一些奇怪的事情：
[sourcecode language=”javascript”]
parseInt(“12px”)=12
parseInt(“abc”)=NaN
parseInt(“ “)=NaN
parseInt(“092”)=0
[/sourcecode]
parseInt的規則是遇到非數字字元即停止，因此前三個是可以理解的結果。等等，那最後一個是怎麼回事，”092”應該會被轉成92吧，這個問題一直是我非常疑惑的問題，原來parseInt遇到0開頭的字串，會自動轉為8進位制計算，這實在是令人很不解，還好parseInt可以指定進位制，第二個參數即為進位制。
[sourcecode language=”javascript”]
parseInt(“092”, 10) = 92
[/sourcecode]
如此則可以解決這奇怪的問題，javascript : good parts也建議在這個function都加入第二個進位制的參數，避免不必要的錯誤。

另外也有人會用new Number來解決這個問題，例如：
[sourcecode language=”javascript”]
var str = ‘092’;
var num = new Number(str);
console.log(num); // 92
[/sourcecode]
可以解決parseInt的這個奇怪現象，但在javascript: good parts這本書則指出javascript中這種「typed wrapper」是一種多餘的寫法，例如new Boolean, new Number, new String, new Object, new Array，事實上完全不需要這個功能。而我之前也在new Object() vs {} and new Array() vs [] 效能比較這篇文章 測試過直接用[]、{}來new 陣列和物件的比較，顯然typed wrapper的方式多了一個轉換的步驟，因此有效能上的差異。

Blackbing Playground

發表於

由於最近在開發簡體中文的網站，發生一些以前從沒遇過的事情(Firefox並沒有這樣的問題，依然是萬惡的淵藪IE出的問題。)，例如這個-1072896658錯誤，不過其實上網找就會有一堆解答，如果XMLHttpRequest對象請求的文檔未指定正确的utf-8編碼,就會出現這個錯誤。解決方法其實很簡單，server端的程式必須明確指定header的charset，注意charset= utf-8 而不能寫成charset= utf8，請參考這篇。

於是我將header指定charset為utf-8之後，果然不會出現這樣的問題，但在server端接收到的data卻是亂碼，於是我再去檢查了一下jquery的AJAX option，contentType預設為”application/x-www-form-urlencoded”，該不會這也要指定編碼吧？於是我把他再加上了charset=utf-8，也就是
[sourcecode language=”javascript”]
$.ajax({
type: “POST”,
url: _SUBMIT_URL,
data: postData,
contentType:’application/x-www-form-urlencoded;charset=utf-8’,
complete: submitCallback
});
[/sourcecode]

沒想到竟然可以了，不過我並沒有深入探究這是什麼原因，先把這個案子搞定之後再說吧！不過編碼問題真是很麻煩又累人的事情。沒遇過這樣的問題真的很難debug。