分類
Javascript

Javascript已強大到可以執行linux

這篇是在 zdnet 看到的:

http://www.zdnet.com.tw/news/software/0,2000085678,20149826,00.htm

利用 javascript 模擬 pc 執行 linux , 因為 javascript 的處理能力已經相對強大了, 可以跑模擬 pc 後執行 linux, 網址在這裡:

http://bellard.org/jslinux/

這樣看起來, 一般 develper 使用的 javascript 還真是用不了他的功能的 1/10 吧, 看來, 愈來愈強大的 javascript engine 可以做更多更多的事了!

分類
Javascript

表單上傳檔案取得檔名問題

在前端網頁上, 若要上傳檔案, 是利用一個 <input type=file>的標籤來進行的, 這個 UI 看起來的長像在不同瀏覽器會有不同的結果, 也因為這樣, WEB DESIGNER 常常需要做一些設計來美化及一致化這個長相.

這篇文章不是在討論這個上傳檔案的長相, 而是要探討在前端程式碼取出上傳檔案的名稱, 這個也在不同的瀏覽器有不同的結果, 尤其新的瀏覽器又增加了一些特異功能. (如隱藏路徑)

這樣一來, 若是要對上傳檔案名稱欄位取出做一些判斷的話, 可要注意這些狀況的差異, 這裡寫了個小程式, 取出 <input type=file>的值, 在不同瀏覽器下可以測出不同的結果, 連結在這裡:

http://sample.diary.tw/25

我們以上傳 C:\test\1.txt 為例, 在不同瀏覽器下的結果如下:

IE9:
Firefox 4.01
Google Chrome 5:
Safari 5:
從上面畫面的結果來看, 發現 IE9 及 Google Chrome 會有含路徑的檔名, 但會隱藏路徑, 而 Firefox 4.01及 Safari 5則只會出現檔名而已, 不會有路徑, 而 IE6, IE7, IE8 的狀況則是 IE8 會像 IE9 一樣, 但 IE7, IE6 則是真實的檔案路徑, 如下:

IE6:
IE7:
IE8:
這樣就清楚啦!

分類
Javascript

IE9的釘選網站功能

微軟已於3月正式推出IE9了, 其中 IE9 的 pinned site 功能很有意思, 將 IE9 和 Windows 7的介面整合在一起, 實作的方式不難, 只需要在網頁上加幾行 meta data tag 就可以了, 可以參考保哥的這篇文章:

http://blog.miniasp.com/post/2010/09/21/IE9-Pinning-and-JumpLists-on-your-website.aspx

這裡只需要用到 html 即可.

不過若是想要做到動態增加的方式來進行 pinned site 功能的設定呢? 可以參考保哥的這篇:

http://blog.miniasp.com/post/2011/04/08/IE9-Pinned-Sites-Defining-Jump-List-Category-and-Adding-Items.aspx

利用 javascript 程式碼來操作即可, 相信是很容易上手的!

相關資料請參考:

http://msdn.microsoft.com/zh-tw/ie/gg315439 釘選網站 (Pinned Sites):Windows 7 桌面系統與 Internet Explorer 9 的整合

http://msdn.microsoft.com/en-us/library/gg491738.aspx Introduction to Pinned Sites

分類
Javascript

VideoJS-HTML5的影片播放器

瀏覽器支援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/ 真的還蠻方便的呢!

分類
Javascript

JW Player for Silverlight

由於要播放 WMV 或是 Windows Media Service 的影音串流, 使用原來的 embedded windows media player 的方式, 比較難跨不同瀏覽器及作業系統, 自從 silverlight 出來之後, 方便的跨瀏覽器和作業系統的特性, 方便讓原來使用Windows Media 格式的影音及串流在不同瀏覽器及作業系統間可以播放.

接下來看看這個很方便的影音播放器, JW Player, http://www.longtailvideo.com/players/, 最早期他是提供了 Flash Player 供應用, 後來有了 Silverlight 及 HTML5 支援影音後, 也陸續推出了 Silverlight 及 HTML5 的播放器.

我們今天要看的是 JW Player for Silverlight 的這個播放器, 其實使用上非常簡單, 可以到這裡下載: http://www.longtailvideo.com/players/jw-wmv-player/ 下載的程式碼內容就有簡單的範例可供應用, 例如要生成一個播放器可以在網頁上播放, 只需要以下的程式碼:

<div name="mediaspace" id="mediaspace"></div>
<script type='text/javascript' src="silverlight.js"></script>
<script type='text/javascript' src="wmvplayer.js"></script>
<script type="text/javascript">
    var cnt = document.getElementById("mediaspace");
    var src = 'wmvplayer.xaml';
    var cfg = {
        file:'video.wmv',
        image:'preview.jpg',
        height:'240',
        width:'440'
    };
    var ply = new jeroenwijering.Player(cnt,src,cfg);
</script>
分類
Javascript

web版線上測試javascript-JSFIDDLE

這個 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/)

可以分享到外站, 一邊看程式, 而且可以馬上玩, 真是很不錯的工具, 快來玩看看吧!

分類
Javascript

jQuery traverse元件屬件

traverse 是程式寫作上一個還算蠻重要的 runtime information. 尤其在 web 上, jQuery 的概念整個就是建立在這樣概念上. 利用 selector 將要找的東西找出來, 再進行更動或讀取這樣的狀況.

現在利用一個小案例來說明這個 case. 我要找出頁面上所有有 onclick 屬性的 anchor, 並加以標註出來, 語法是這樣的:

$("a[onclick]").addClass("highlight1");

是的, 你沒看錯, 就是這樣一句而已. 這句語法的解釋是這樣的:

  1. $(“a”) 是找出所有的 anchor
  2. $(“a[onclick]”) 是找出所有的 anchor 而且有 onclick 屬性的
  3. addClass 就是加上一個 css class

就只是這樣而已. 我們來看看範例吧: http://sample.diary.tw/17/j1.html 其中的 button: [find anchor with onclick attr.] 按下後, 會將有 onclick 屬性的 anchor 用 highlight1 的 lightgreen 的背景色加上, 就很清楚了. 其中只有 f1(), f2() 會呈現出來效果, 而其他的 anchor 沒有下 onclick 屬性的, 都不會被影響.

接下來找出 anchor 的連結屬性, 開頭是 http://www 的, 這個也很有趣, 語法如下:

$("a[href^='http://www']").addClass("highlight2");

也是一樣, 一行搞定, 語法說明如下:

  1. $(“a[href^=’http://www’]”)是指 anchor 中, href 屬性開頭為 http://www 的.
  2. addClass 就是加上一個 css class

(在1.2版時, 還可以使用 @在 href 前, 也就是 @href^=’xxx’ 這樣, 不過在 1.2 已不推薦使用, 1.3 時已不支援了, 要特別注意 @ 這個符號囉)

一樣來看範例, http://sample.diary.tw/17/j1.html 其中的 button: [find anchor start with http://www] 按下後, 其中開頭為 http://www 的 anchor 會套用 lightblue 的背景色, 是不是很方便呢?

其中的 ^= 是開頭為, 而 $= 是結束為, 而 *= 是含有, 所以若是要找連結為 .pdf 結尾的, 可以使用:

$("a[href$='.pdf']")

再來就是談 traverse 的語法, 其實也很單純, 是利用 each 這個方法, 再利用匿名函數取得陣列代號, 就可以將符合條件的元素陣列逐一列舉出來, 如下:

var elements = $("a[href^='http://www']");
var message = "";
$(elements).each(function(e){
    message += elements[e].href+"\n";
});
alert(message);

程式碼說明如下:

  1. 先將符合條件的 objects 都放入 elements 陣列
  2. 再利用 each 方法, 配合匿名函數, 將 elements 陣列內的 object 的 href 屬性結合成產生的字串訊息
  3. 最後再將訊息秀出

參考範例: http://sample.diary.tw/17/j1.html 其中的 button: [traverse anchor start with http://www] 就會將所有開頭為 http://www 的 object 的 href 屬性 alert 出來囉.

相信對於使用 jQuery 的朋友們, 能更清楚整個運作的邏輯..

分類
Javascript

好棒的jQuery介紹網站

jQuery, 因為最近一些狀況(就是被 m$ 整合進入 visual studio ), 瞬間變成當紅炸子雞. 讓想學的人更想學, 而不知道或原本沒想學的人也想學.

這兩天在看一些資料的時候, 無意間找到這個網站: www.visualjquery.com , 還真不是蓋的, 是 “visual” 的 jQuery 哦, 所有的介紹都直接用視覺化的方式呈現, 方便學習 jQuery 的人, 無論是新手, 老手都很適用的一個了解 jQuery 技術的網站. 一定要來看看哦!

分類
Javascript

Javascript的同一父網域下的crossdomain問題

今天在處理一個單純的 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

分類
Javascript

Regular Expression查黃金門號

這個標題會不會太有趣了一點, 哈!

其實是要介紹 regulare expression 的量詞及參考語法, 我們假設要尋找黃金門號(其實也沒有那麼黃金啦), 例如: 0911213252 (0911213252) 這樣的 pattern, 如何利用 regular expression 來尋找呢? 我們這裡就會用到量詞及參考:

前方的 0911 為 4個數字, 所以直接用 [0-9]{4} , 這裡的 {4} 就代表著一定就是跳過4個數字
第一個不定關鍵字 ([0-9]) , 由於不寫個數, 就代表了一個數字, 而這裡用 ( ) 代表著一個比對的字元之後會用到
接下來就固定 2個數字, 所以用 [0-9]{2}
再接下來就是第一個參考囉, 也就是參考第 2點的關鍵字, 這裡用 \1 來代表