除錯與測試 JavaScript
有多麻煩，一圖勝千言啊！
我同時開了Firefox、Safari、Opera、IE*2共五個瀏覽器視窗，每次修改完五個都要測試，因為已經過了開發階段，不能只看一個瀏覽器的結果了。
lightlightbox
好一陣子沒寫新東西了，前陣子其實在把一些舊的Script重新寫過，像是hiddenlinks（想到新名字後才會放出:P）和這裡的表單檢查等等，主要是想脫離jQuery，當然不是嫌它不好，而是覺得自己blog的東西不用特別用jQuery來縮減開發時間，而且寫好的東西大部分都還會公開出來。其中最後要處理的就是lightbox特效，我之前是用thickbox這個套件，本來是想改用FancyZoom，不過他的縮放特效遇到一些特定情況時會變很慢，最早的lightbox又不是用DOM方法來處理，在XHTML 1.1下無用武之地，更不用說2.0用了prototype，最後我決定自己寫一個lightbox，完成後我把它取名為lightlightbox，因為真的很輕量，程式碼不到100行XD。
想看效果的可以直接點這，如果不想開在lightbox裡面，可以壓著ctrl或alt鍵再點擊。全部是三個檔案，一個js檔，一個讀取中的gif動畫檔，一個關閉按鈕的圖檔，讀取中的gif動畫我是用Ajax Loading Gif Generator做的，關閉按鈕的圖則是先用FancyZoom的那張，和蘋果網站上用的很像，因為權利問題我不直接提供連結。在功能上預設是把所有連到jpg、jpeg、gif、png這四種檔案的連結都套上lightbox特效，另外也可以設定classFilter來判斷class，變成可以用class來決定哪些連結要有lightbox，哪些不要，檔案下載：
另外有一個fade in/out版的：
使用前先記得修改llbox.js裡面的讀取中動畫和關閉按鈕的圖檔位置，目前版本在IE7、Firefox 3 beta5、Safari 3.1、Opera 9.26上測試過都沒問題。有兩個已知問題，一是png圖在IE6以前的版本會有透明色的問題，另一個是鍵盤控制沒有處理，等修正後會放出1.1版。
更新：結果今天就花時間把兩個問題都處理完了，更新版的檔案在原位置。
參月 20addEvent()
Dean Edwards寫的這個函式一直是我愛用的檔案，可以在各種瀏覽器上都正常的處理事件的指派，一般而言，事件的指派除了IE的attachEvent和W3C的addEventListenr外，還有一個最傳統的方法就是直接設定該elementNode的屬性，要指派click事件就可以寫成elem.onclick = func;，不過這個方法有個缺點是一個element的同一種事件只能指定一個function，因此一般而言都還是會使用attachEvent和addEventListener。
讓你的特效更平順之二
之前我曾經發表過一篇如何讓你的特效更平順，那時候用的方法是每次function內檢查時間變化，然後決定這時候應該在哪個位置，那時候這方法效果大概已經不錯了，不過我這兩天看Pro JavaScript Techniques，裡面的範例使用的方法看起來會更順暢，他的原理是一開始就把每個時間點要做的動作一口氣設定好，接下來就沒有interval的問題，也不用檢查時間變化，當然也不會有配合setTimeout使用遞迴時的延遲問題，重點部份範例如下：
for ( var i = 0; i <= 100; i += 5 ) {
(function () {
var pos = i;
setTimeout(function () {
elem.style.height = ( ( pos / 100) * h ) + "px";
}, ( pos +1 ) * 10 );
})();
}這是一個slide down的效果，直接設定好分21次調整元素高度，每次間隔50微秒，這樣子就可以產生順暢的動畫效果了。
壹月 09IE7 2.0
IE7前陣子推出了新版了，這次變成有兩個js檔案，IE7.js和IE8.js，我一開始還以為IE7.js是加強Internet Explorer 7 的功能，然後就在想IE8.js是幹麻用的，結果其實IE7.js是補強Internet Explorer 5.5和6.0用的檔案，IE8.js則是提供一些Internet Explorer 7也還沒實作的功能，大部分是CSS相關的，詳細的功能清單可以在Demo頁面看到，其中我比較注意到的是min-height和max-height似乎也成功弄好了，這可是之前唯一被標上沒辦法做到的項目啊。另外半透明png則變成只會對檔名是-trans.png結尾的才會修正，還可以直接連接google code上的檔案，更新點不少。
而分成兩個檔案的好處是可以使用condition commet把不同版本的Internet Explorer分開，Internet Explorer 7就不需要去讀取IE7.js，只執行他需要的部份，而且程式排除一些很少用到的功能後變得更小，加上換了新的query engine，整體的速度應該提昇了不少，不過我還沒針對這點測試過，之前有在使用的可以更新看看。
拾貳 15Google Analytic更新、XHTML 1.1對應方法
今天一早就看到消息，gslin那也提供了兩個比較重要的連結，一個官方新聞稿，另一個是Google Blogscoped直接介紹如何修改頁面中的script，我看了一下發現到在第一個script標籤內使用了document.write這個方法來修改頁面，不過我這用的是嚴謹到不知所謂的XHTML 1.1，只能使用DOM來做文件樹的修改，所以我研究了一下，了解到他其實只是在判斷網站是不是用ssl連線的，如果是用ssl連線的網站，就使用ssl連線來取得遠端的analytic程式碼，這樣可以避免瀏覽器跑出訊息問訪客是不是要存取非ssl連線的物件。當然我這沒有用到ssl連線，所以我可以直接把他指定成一般連線的位置，變成下面這樣：
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
<![CDATA[
var pageTracker = _gat._getTracker("UA-YOURNUMBER-1");
pageTracker._initData();
pageTracker._trackPageview();
]]>
</script>不亂入的javascript
在Web Accessibility第十章裡談的是JavaScript的親和力問題，我看之前其實就在懷疑JavaScript要如製造親和力，果不其然，這章主要是在說JavaScript套用到網頁時，要注意哪些地方，避免影響到親和力，例如彈出式視窗的連結目標不要用javascript://，而是開啟網頁的真正位置，而考量到各種狀況，其中很重要的一部份是unobtrusive JavaScript（譯做不亂入的JavaScript），不過要先強調的是這只是其中一部分，還有一些觀念和思考方向本文沒說。
Unobtrusive JavaScript不是什麼新的語言，而是JavaScript的一種撰寫風格（coding style），最大的特色是在HTML的原始碼內你看不到JavaScript程式碼，不會有像是<a href="#" onclick="return popup();"/>這樣的東西出現，取而代之的，如果要對特定物件指定事件，那就用DOM來尋找你的目標物件，整個HTML文件保持在沒有JavaScript也是功能完整的狀況。
這樣的撰寫風格可以確保不會影響到使用不支援JavasSript瀏覽器的訪客，也可以讓HTML文件和JavaScript分的更徹底，方便更新維護，好處不少，不過相對的要能完全寫到不亂入，也會需要較多的學習。
玖月 18scroll radio
這兩天有個想法，就是用scroll bar來做radio輸入的選擇，可以用在評分之類（像是分五等級）的地方，剛好jQuery UI正式公開，就用它實做了，花了昨天一整晚加上今天早上，結果做完後發現不是很實用XD，因為直接過去點還是比較快，而做出點擊選取的功能後，就很少人會去用拖拉的方式來控制了，雖然說是如此，還是把做好的範例丟上來給大家看看。
柒月 05jQuery 1.131
因為有重大bug，所以馬上就出新的fix版了～～。
柒月 04jQuery 1.13
聽說有八倍快XD，不過也聽說有不少非主流瀏覽器運作不正常的狀況，看來多等等會比較好，另外這板開始支援unicode的屬性選擇器，所以你可以這樣寫：
$("div.台北")
$("div#台北")
$("foo_bar台北")
$("div[@id=台北]")其他更新就比較不特別了，接下來還會發行1.14在做些bug修正和一點小修改，之後就會發行1.2了，現在還可以先看看1.2會有哪些新功能和更改喔。
