這個 JSFIDDLE: http://jsfiddle.net/ 是一個線上版本, 進行 javascript 測試及除錯使用的方便工具, 包含了大量的 javascript frame, 有 MooTools, jQuery, Prototype, YUI, Glow, Dojo, Processing, ExtJS, Raphael, RightJS 及不使用 framework 多種選擇.
不僅如此, html, css 更是能分區編輯, 方便測試, 而且實作的程式結果也可以存下來, 方便日後再拿出來看, 或是進行 share 討論, 還能分支開發 (fork) 下去, 真的是十分方便實用的 javascript 工具.
例如這個測試的程式, 功能就是一直累加而已, 可以玩看看: http://jsfiddle.net/Ej4rC/
還可以直接 embed (透過 iframe ) 放到外站, 如下:
(iframe http://jsfiddle.net/Ej4rC/)
可以分享到外站, 一邊看程式, 而且可以馬上玩, 真是很不錯的工具, 快來玩看看吧!
從阿維筆記本這裡 (http://blog.hsdn.net/1465.html) 看來的, 原來 jQuery 也有 mobile 的版本! 官方網址在這裡: http://jquerymobile.com/
隨著手機的效能愈高, 能支援的網頁複雜度及相容性, 也隨著在手機上的行動瀏覽器而提升, 一般早期在做手機網站大多是單純化, 減少不相的 css 及簡單呈現的方式為主, 不過有了 jQuery for Mobile, 相信又有更多的可能.
這個列表是用來說明目前 jQuery Mobile 支援各型手機 os 及瀏覽器的相容狀況, 共分成了 A, B, C, F 4級, A 為品質最好, B 為次之, C 為較差, 而 F 則是無法相容, 圖片引用自: http://jquerymobile.com/gbs/
看起來相容性最好的是 android 方面的瀏覽器.
有 jQuery for Mobile 對於行動網頁開發者來說, 可以節省不少工夫在實作網頁程式上, 不過行動網頁的要求是更精簡, 更容易地操作, 利用這樣的開發工具, 的確也能減低不少負擔. 來看看 ui 上的狀況: http://jquerymobile.com/designs/
相信對於已經上手 jQuery 的 Developer 們, 這個是一個不錯的好工具!
繼剛寫了Safari5發表的文章後, 想說順便跑一跑其他家的一起來拼一拼.
以下測試 ACID3 是用: http://acid3.acidtests.org/
而 javascript 效率的 Webtest 是用: http://www.101asian.com/webtest.htm
先來看看 IE9 的:
UA: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)(HTTP_USER_AGENT)
ACID3: 68分
WEBTEST: 27ms
再來是 Safari 5的:
今天同事和我說 Fiddler 已經支援 Firefox 了. 真的是太開心了!
其實 Firefox 下的 Firebug 已經能做到許多 javascript除錯(很好用的javascript除錯工具FireBug (firefox) 很好用的javascript除錯工具FireBug (firefox) ) 及 network monitoring網路 (FireBug更新功能-Network Monitoring FireBug更新功能-Network Monitoring ) 的功能了, 不過其中的 network monitoring 的部分, 若是要看 response 時, 並非是實際該次 request 的結果, 而是展開時, 再一次去 request 的結果, 如此一來, 有時要觀察的 request 對應的 response 總沒有那麼客觀(甚至不是當時的 response), 這個時候 Fiddler (Fiddler-HTTP Debugger Fiddler-HTTP Debugger )就好用多了, 因為它是截取當時的 request 及 response 的結果.
於是就進行下載 fiddler 的最新版本, 並且進行安裝, 記得要重新開啟 Firefox, 在右下角就會出現一個該 fiddler extension 的功能操作狀況, 如下:
這個代表安裝完成了 Fiddler for Firefox 的 extension 了, 其中 Fiddler: OFF 指的是 Fiddler Application 沒有開起來, 由於該 extension 不能直接發起 Fiddler Application , 所以手動從程式集裡來啟用這個 application, 該狀態就會變成 Fiddler: ON 的狀態了, 並能順利收集到 Firefox 的 request 及 response 資料囉.
其他功能其實就和原來的 fiddler 一樣囉, 不過真的很棒, 因為從網路層去 monitoring 資料會比 Firebug 來得更精準及更真實, 這個真的值得給他拍拍手, 而且 fiddler 頁面 (http://www.fiddler2.com/fiddler2/ )上也說明了, 可以支援 Internet Explorer, Mozilla Firefox, Opera, and thousands more. 真的很不錯哦, 前進了很多呢!!
接下來就可以交替使用 Firebug 及 Fiddler 囉, 而且也以看實際狀況來應用了, 看起來 Firebug 用在 web design debug (CSS), javascript 很棒, 而 Fiddler 用在 network monitoring 是很好的工具, 如何搭配使用, 看各位應用囉.
[2009/10/31 1:38補充畫面]
jQuery, 因為最近一些狀況(就是被 m$ 整合進入 visual studio ), 瞬間變成當紅炸子雞. 讓想學的人更想學, 而不知道或原本沒想學的人也想學.
這兩天在看一些資料的時候, 無意間找到這個網站: www.visualjquery.com , 還真不是蓋的, 是 “visual” 的 jQuery 哦, 所有的介紹都直接用視覺化的方式呈現, 方便學習 jQuery 的人, 無論是新手, 老手都很適用的一個了解 jQuery 技術的網站. 一定要來看看哦!
最近的消息, 微軟將於Visual Studio嵌入jQuery這組Open Source的函數庫了. 可以參考下面文章連結: 微軟Visual Studio將嵌入開放源碼jQuery程式庫
jQuery, 有在寫 Web application的工程師應該不陌生, 好用又洗鍊的語法, 方便容易使用的方式, 整個和 Web UI 可以做相當方便結合的一組 library 最近因為微軟的這個消息, 對於之前投資學習 jQuery 的 developer 們來說, 真是個不錯的好消息.
當然, 無論是否於 Visual Studio 內嵌入 jQuery, 大家也都可以直接於 web application 上使用這組 library 沒有什麼大問題, 不過相信對於整合度及方便性來說, 能夠和 Visual Studio 整合當然是再好不過了.
不過和原來的 AJAX 那組 framework 要怎麼整合, 如何取捨, 或是同時並存也是一個有趣的課題. (據消息來說應該是會改用 jQuery)相信這個消息對於已經同時正在使用 asp.net 開發及 jQuery library 的 developer 來說真是個好消息呢.
相關文章及連結:
google blog search: link
微軟將在 ASP.NET 相關產品中全面支援 jQuery
jQuery进入微软和Nokia的解决方案
微軟也搶著支援jQuery?
jQuery從此有名有分，我出運了!
今天在處理一個單純的 popup window (利用 window.open) 的子視窗, 在子視窗內進行 window.opener 的函數調用, 一般的狀況下, 都在同一網站(列如都在 www.foo.com)下沒有 cross domain 的問題, 但若是在兩個不同 domain 時(例如 www.foo.com 及 www.foo2.com), 就會有 cross domain 問題. 這個其實是一個單純的 security 問題.
不過若是今天是在同一家公司內的 cross domain, 例如 www1.foo.com 及 www2.foo.com 兩個 domain 下要執行這樣 cross domain 時, 是否能解決呢? 答案是肯定的, 其實和 cookie 域名共用設定方式相同, 上級域名共用的狀況下, 可以進行 document.domain 的設定以達成此項目的.
我們可以分別在 page1 在 www1.foo.com 及 page2 在 www2.foo.com 的網頁內 javascript 要執行 cross domain 指令前先執行
document.domain = "foo.com";
再繼續後續的程式碼即可, 這樣就不會有 cross domain 的問題囉.
不過也是有一些限制, 就是必須是在同樣的上級域名下, 才能使用, 而且也無法在 www1.foo.com 上將 document.domain 設定為 foo2.com 這樣的 domain, 這個原理其實和 cookie 的 domain 原理是相同的.
參考資料:
http://www.lhelper.org/tech/communicate_between_domains.html
http://www.cnblogs.com/xiaozhang/archive/2006/07/27/461306.html
http://www.mozilla.org/projects/security/components/same-origin.html
http://msdn2.microsoft.com/en-us/library/ms533028.aspx
這個標題會不會太有趣了一點, 哈!
其實是要介紹 regulare expression 的量詞及參考語法, 我們假設要尋找黃金門號(其實也沒有那麼黃金啦), 例如: 0911213252 (0911213252) 這樣的 pattern, 如何利用 regular expression 來尋找呢? 我們這裡就會用到量詞及參考:
前方的 0911 為 4個數字, 所以直接用 [0-9]{4} , 這裡的 {4} 就代表著一定就是跳過4個數字
第一個不定關鍵字 ([0-9]) , 由於不寫個數, 就代表了一個數字, 而這裡用 ( ) 代表著一個比對的字元之後會用到
接下來就固定 2個數字, 所以用 [0-9]{2}
再接下來就是第一個參考囉, 也就是參考第 2點的關鍵字, 這裡用 \1 來代表
今天要幫朋友做一個解析 javascript 字串的範例, 其實硬 parse 也是很簡單, 但還是想用更好的方法來進行, 於是利用了 javascript 的 Regular Expression 來做 parse 的行為.
在 javascript 中, 使用 Regular Expression 的方式有兩種, 一種是利用 new RegExp , 一種是直接用 perl 的那種語法 /xxxxx/ 的方式, 我們來看看怎麼做吧:
題目是將網址列中的某一參數取出來, 例如 param 這個參數,
http://host/j.htm?a=1¶m=data&b=2
其中的 param 參數的值為 data, 利用 Regular Expression 的取出方式如下:
var re = new RegExp("param=([a-z]+)");
var m = re.exec(window.location);
if(m) alert(m[1]);
利用了比對字串 param=([a-z]+) 來將 param 的參數值取出, 其中的 m 內容將會是 [0] 為整個 Regular Expression 的字串, [1] 會是第一個取出的值, 若有多個比對的 () 小括號, 就放到 [2], [3]… 以此類推.
這樣的執行結果就會取出 “data” 這個值.
之前介紹過了一個在 FireFox 下非常好用的除錯及觀察工具, FireBug (https://diary.tw/tim/7), 前一次更新後, 發現它多了不少功能, 其中有一項特別值得提出來給大家參考的就是 Net 標籤下的 Network Monitoring 功能.
這個功能十分強大, 用看得就覺得不得了了, 之前也有介紹一個超好用的 Fiddler (https://diary.tw/archives/287), 這個強大的功能和 fiddler 不相上下, 它可以觀察整個 http request 的過程及網頁的 download 狀態, 而 fiddler 僅能用在 ie, firebug 新增的這個功能, 讓在 firefox 的用戶也有對應的工具可以做 network 傳輸上的除錯, 真的十分有用.