01 五月 2009 @ 5:34 上午
一般來說，我們都會用
new Date().getTime()來取得目前的time stamp，今天在cssRain看到JavaScript—new Date().getTime()的简写方式，發現
+new Date()這兩個會出現相同的結果，這讓我不禁好奇了「+」這個運算符他的特殊用法， 測試了幾個結果： More »
01 五月 2009 @ 4:26 上午
做專案時常常因為路徑問題而困擾，因為現在用的路徑很可能到另一個環境就有大幅度的變動，寫前端程式的時候更常遇到這個問題，當然每個人都會把路徑獨立出來成一個變數，到時候若要改的話只要改個變數即可，但像CSS的url command就可以讀相對路徑，因此路徑只要指向相對路徑即可，就算環境換了也不用改任何程式。因此如果每一隻script都可以知道自己被include的Root路徑，需要指定路徑的地方就只要根據這個Root路徑來做相對路徑即可。例如一隻js檔裡頭需要動態產生圖片，那麼就會需要用到這個相對路徑。 More »
08 三月 2009 @ 12:29 上午
事情是這樣的，safari4隆重推出之時，號稱是世界上最快的javascript engine:松鼠魚，我就很開心的給他下載下來玩玩看，結果，原本在safari2, 3都正常的頁面，竟然在safari4掛掉了，OK，這可是個大問題，於是我開始想辦法debug。頭一個就遇到問題，我想辦法要打開safari4的debug mode，但是怎樣試都找不到，雖然後來google 有找到windows版本的方式:Enable Debug Mode in Safari4，終於讓develop menu出現了，但是….裡頭的選項我怎麼點都沒用！！ More »
14 一月 2009 @ 10:50 下午
jQuery中動態載入Javascript的方式寫得很不錯，修改了一下把他拿出來用。但若要動態載入CSS就沒辦法使用onload的callback，可能還是要使用setInterval來檢查是否load到頁面上。
More »
01 一月 2009 @ 10:21 下午
javascript程式
javascript程式應該獨立成js檔被include進來，盡量不要將javascript code 與embade在HTML裡頭，這麼一來無法利用cache或壓縮，將來要維護也不容易。 盡量將引入的javascript放到HTML的最後，將會減少載入script的延遲。 script標籤裡頭不需要使用lauguage, type屬性。 More »
17 十二月 2008 @ 7:18 下午
javascript是一個弱型態的語言，不像JAVA、C#等對變數型態有非常嚴謹的定義，而且一般在編譯階段就會發現型態的錯誤，讓開發者避免一些不 必要的型態錯誤。而Javascript為script語言，因此必須在執行階段才會知道錯誤，雖然目前有一些工具可以輔助你開發時幫你檢查是否有 javascript型態錯誤或者語法錯誤，例如Douglas Crockford的JSLint，就是一個非常棒的Javscript verify tool，
雖然你可以依靠這些工具輔助你 在撰寫Javascript時避免一些不必要的錯誤，但是若你打開一些Framework的原始碼，你會發現一大堆利用javascript弱型態的特性 簡化程式碼的小技巧，當然，你可以選擇不使用者些技巧，但是你卻不能不瞭解有這些特性的存在。
More »
14 十二月 2008 @ 12:33 上午
幾年前，當時AJAX尚未問世的時候，網路上充斥著許多Javascript的特效，比方說狀態列會有跑 馬燈效果、文字閃爍，當時雖然不懂Javascript，但總會有熱心的人教你如何把特效放到網頁上，例如：
第一步：先把第一段script放到head 標籤裡頭。
第二步：再把第二段script放到<body>標籤之中。
第三步：將第三段script放到你想要放的地方。
當時也完全不懂 Javascript到底怎麼運作，反正套用上OK就行了，偶爾調整一些參數，讓他看起來比較不一樣。可是有時候在A網頁可以執行，在B網頁卻又不能執 行，只能東改改西改改來看看到底可以改出什麼玩意。
More »
19 十月 2008 @ 2:34 上午
parseInt是強制將字串轉型成整數型態的function，但有時候會發生一些奇怪的事情：
parseInt("12px")=12
parseInt("abc")=NaN
parseInt(" ")=NaN
parseInt("092")=0
parseInt的規則是遇到非數字字元即停止，因此前三個是可以理解的結果。等等，那最後一個是怎麼回事，"092″應該會被轉成92吧，這個問題一直是我非常疑惑的問題，原來parseInt遇到0開頭的字串，會自動轉為8進位制計算，這實在是令人很不解，還好parseInt可以指定進位制，第二個參數即為進位制。
parseInt("092", 10) = 92
如此則可以解決這奇怪的問題，javascript : good parts也建議在這個function都加入第二個進位制的參數，避免不必要的錯誤。
另外也有人會用new Number來解決這個問題，例如：
var str = '092'; var num = new Number(str); console.log(num); // 92可以解決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的方式多了一個轉換的步驟，因此有效能上的差異。
20 九月 2008 @ 3:27 上午
由於最近在開發簡體中文的網站，發生一些以前從沒遇過的事情(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，也就是
$.ajax({
type: "POST",
url: _SUBMIT_URL,
data: postData,
contentType:'application/x-www-form-urlencoded;charset=utf-8',
complete: submitCallback
});
沒想到竟然可以了，不過我並沒有深入探究這是什麼原因，先把這個案子搞定之後再說吧！不過編碼問題真是很麻煩又累人的事情。沒遇過這樣的問題真的很難debug。
15 九月 2008 @ 12:39 下午
整理一下我所用過好用的開發工具，因為比較常測試的瀏覽器是FF和IE，所以只列出這兩種，如果還有其他建議請再幫忙補完。
firefox:
firebug：强大的debug工具，有名到不需要再做任何介紹了吧！- Leak Monitor：監視firefox 下Memory Leak的工具。
- JSView：檢視外部參考的JS和CSS原始碼，動態引入的檔案也會出現。
- Clear Cache Button：清除緩存按鈕，開發中有時會被browser快取，每次都要點來點去清cache很麻煩，用這個小按鈕直接清cache就行了。
- YSlow：網站效能測試工具，主要是提出了網頁效能的測試標準，並以此標準來評分，在開發網站時可以作為效能參考的依據。
- HTML VALIDATOR ：檢測HTML/XHTML的工具。
- firebug lite ：要在firefox以外的瀏覽器使用firebug就是這個了！
- IEDevToolBar ：微軟官方出的小工具，可以觀察DOM、CSS等頁面元素，缺點是無法像firebug即時修改。
- Script Debugger ：微軟官方出的小工具，在IE上遇到javascript的錯誤相當難debug，此時可以利用這個工具來幫助偵錯，安裝之後需要到工具>選項>進階，將「停用指令碼除錯」取消。
- debugBar：類似IEDevToolBar，不過內建一些檢色器之類的小工具，對設計人員來說蠻方便的，推薦安裝。
- Drip：偵測IE中Memory Leak的軟體。
- IETester：可以同時在windowsXP上開啟IE8 beta 2, IE7 IE 6 and IE5.5，你不用再裝好幾個IE了。
- Companion.JS：類似firebug console的工具，主要是可以利用他來做javascript的偵錯，也支援像firebug的console.log。
- fiddler：可以擷取所有 HTTP 的封包，點此、還有這、有中文的詳細介紹。
Previous Entries
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire