結合下一步、上一步， Step by step 的步驟引導方式與頁籤UI (Tab UI)，設計使用者的資料輸入表單。

本文使用 jQuery 的 UI library。

去年6月， Google 員工 Steve Yegge 指出他打算開發一套基於 JavaScript 語言的 'on Rails' 框架，主要選定的工具是以 Java 實作的 JavaScript 引擎, Mozilla Rhino。故計劃定名為 Rhino on Rails。隔月，又有一個使用 Rhino 實作的 Web 應用開發框架 Helma 釋出。這讓我開始注意到 JavaScript 在 server-side 的開發工作。

前幾天又讓我找到一套將 JavaScript 應用於 server-side 的開發工具: wxJavaScript (See also: 《wxJavaScript - 以 JavaScript 開發視窗與 Web 應用程式的工具》)。Rhino, wxJavaScript 再加上 JScript.Net ，顯示 JavaScript 在 server-side 開發工作上的基礎工具已經漸趨成熟，現在就缺少一個殺手級的應用開發框架了。

雖然 Microsoft 的 .Net Framework 就提供了一個 JScript.Net comipler (jsc.exe)，透過 JScript.Net 就可以開發 .Net 平台下的視窗與 Web 應用程式。不過知道的人應該不多，而且對 .Net Framework 架構感冒的人也不少。所以在 OpenSource 界中，就有人做了 wxJavaScript ，一樣可以寫視窗與 Web 應用程式。

熟悉 OpenSource 軟體的開發者，在看到 "wx" 這個字首後，應該就會聯想到 wxWidgets 這個老牌的跨平台 GUI 應用軟體開發工具了。 wxJavaScript 正是以 wxWidgets 為核心，並使用 Mozilla SpiderMonkey 為 JavaScript 引擎的 JavaScript 開發工具。

這2天在找 JavaScript 在 server-side 的軟體開發工作文件時，找到 Peter's Blog，我看完其中的《Transitioning from Java Classes to JavaScript Prototypes》一文之後，很佩服 Peter 這位作者，能夠擺脫過去使用 Java 時的類別繼承思維，認真去研究 JavaScript 的 OO 哲學。

Peter 原本嘗試要在 JaavScript 上實作基於類別繼承(Class-Based Inheritance in JavaScript) 的功能，但隨著他對 JavaScript 的了解日深，他最後放棄初衷，因為:I struggled and struggled but simulating class-based inheritance in JavaScript really doesn't work and makes the code...well...very un-JavaScript-ish.。

使用 wz_jsgraphics.js 繪製線條。當時曾試過 SVG ，但效果與瀏覽器相容性皆不理想，所以還是用 wz_jsgraphics.js 。它是以 1px 大小的 div node 為畫素，構成圖形。

jaceju 在 Anonymous functions in PHP 說某個 PHP 研討會討論了匿名函數 (anonymous function) 在 PHP 中的需求性。 jaceju 注明 Jim Wilson 說匿名函式和 closure 是完全不一樣的東西，而他自己看不出兩者的差別。

我在寫 JavaScript 時，常常碰到這個問題。用 JavaScript 也比較容易說明兩者的差異。

請問滑鼠指到某一列，可以出現說明文字?(TWPUG::JavaScript討論區)

Just HTML. 不需要用到 JavaScript. 任何網頁元件只要具有 title 屬性，當滑鼠停留在其上方時就會出現提示文字(tooltip)，顯示 title 所指定的文字內容。See also: HTML 4.01 Specification: The title attribute.

Ka-Yue 說: JavaScript have onerror event too.

Good question. PHP 的偵測動作是在 server-side ，它可能增加 Server 不必要的網路負荷。如果改由 JavaScript 進行偵測動作，就可以把偵測動作分派給 client 去做。這是一種 Ajax 的應用。

jaceju 在《終於用 jQuery 做了一個有趣的服務》中提到： 光是要把 input:radio 隱藏卻要能動作的部份，足足花了我半個多小時 。他說若 Input 元件之 display 樣式設為 none ，或是 visibility 樣式設為 hidden ，表單送出時就會完全忽略它。所以他就把 Radio button 放到 Label 後面用背景遮住。

其實他是碰到了一個 IE 的 bug 。IE 對 Label for 的支援其實有 bug 存在，必須用 Label onclick 修正。

樂多2.0改版，加上了文章快速編輯的連結。但是這樣就夠了嗎？あまい！還有回應跟引用沒加啊。所以我也跟著改版，加上回應及引用的快速編輯與刪除連結。

長久以來，樂多的管理功能一直有個缺點。當部落格作者登入後，前台的文章中不會自動出現[編輯]的功能連結。作者只能從後台管理介面一頁頁的翻，找出要編輯的頁面。最好像 Blogger 那樣，當作者登入後，前面文章會自動出現[編輯]連結，作者只要按下編輯連結就能載入文章編輯頁面，如果有這種功能，編修文章就輕鬆多了。

這篇文章正是為提供各位樂多使用者享用此功能而存在。將本文工具中所產生的程式碼複製到適當場所之後，只要使用者已經登入過，當你在瀏覽你自己的部落格文章時(閱讀全文時，不含首頁及分類頁)，文章的標題旁就會添加一個[編輯]連結；回應及引用的標題旁也會添加編輯與刪除的連結。從此編修文章輕鬆愉快。

日前 Fortify 發表了一份文件《Fortify Software Documents Pervasive and Critical Vulnerability in Web 2.0》，描述惡意網站如何透過瀏覽器取得基於 Ajax 及 JSON 規範傳遞之跨網域的隱密資料。它將此方式稱之為 JavaScript Hijacking 。詳細的 Hijacking 內容請至《JavaScript Hijacking Vulnerability Detected》下載文件。

本文將說明 JavaScript Hijacking 概念以及一個範例。

《老子》有云「不善人者善人之資」。了解不適當與錯誤的方式，也是學習中重要的一環。在程式設計的領域中亦如是，好的設計方式會 patternalization ，壞的設計方式也會。Jack D Herrington 于 Ajax and XML: Five Ajax anti-patterns 列舉了 5 種常見的 Ajax anti-patterns 。這5種確實常見，我個人也有不少經驗可與之聯繫。

前一陣子根據老闆要求，寫了一個重點商品銷售統計報表的程式，每天統計各門市到昨天為止的重點商品銷售統計，將結果輸出到網頁讓每個門市都可以瀏覽查看。這程式運作了一段時間後，老闆覺得還不錯，就要我改成暢銷商品銷售統計，納入上千項商品為暢銷商品。因為上千項商品的報表很長，老闆就要我加上排序功能。

要排序當然OK啊。只是我很懶，不想為了視覺效果去修改統計程式，更不想為了更新排序結果而要伺服端再回傳一次頁面。於是我打算以動態網頁的方式，直接用 JavaScript 對網頁上的統計表格排序。

jaceju 在 重新認識 JavaScript 一文的回應提到了 JScript 及其用於開發獨立程式的事。我先釐清名詞與觀念： JScript 是 ECMAScript 的實作版本，不是 JavaScript 的延伸。

ECMAScript 是一種語言規範。而 JavaScript 和 JScript 則是這種規範的具體實踐。除此之外 Adobe 用於 Flash 上的 ActionScript 也是 ECMAScript 的實作版本。

繼《重新認識JavaScript》後，再介紹便於學習與測試的互動模式工具。

動態語言強調立即反應，最好使用者輸入什麼敘述，執行環境就立即顯示結果，發生錯誤亦可立即修改。然而 JavaScript 傳統的執行環境 (host) 是在瀏覽器上，所以我們通常習慣將 JavaScript 程式碼編輯儲存在檔案中，再開啟瀏覽器執行。這方式在學習時有些缺點，像是訊息輸出便非常麻煩。試想，如果你要練習用迴圈顯示一個九九乘法表，在上述環境中你可無法直接 print 、puts 或 echo 在瀏覽器上啊。最簡單的方式也要先指定一個文件節點，然後設定其 innterHTML 屬性才行。

說到 JavaScript ，大概每個程序員都會寫一點，但真正把 JavaScript 當作一個程式語言認真學習過的人卻不算多。還是有人分不清 Java 和 JavaScript 的差別，還是有人把 JavaScript 當作 Java 在寫。你知道 JavaScript 如何實現封裝與繼承嗎？你知道 JavaScript 如何作 Reflection 嗎？你知道 JavaScript 如何實現匿名遞迴嗎？如果你無法理解上述內容或者發覺它看似熟悉卻又如此陌生時，那麼就應該拋棄以前的錯誤認知，重新認識 JavaScript 這個老夥伴的真實面貌。

在 developerWorks 上看到《Flip for Flapjax》介紹 Flapjax ，聲稱是比 JavaScript 更好的 Web 應用程式語言 (better-than-JavaScript programming language for modern Web applications) 。官方網站上提到 Flapjax 的特色為：

我在 網路服務與純 JavaScript 應用之 JSON 資料包裹解決方案 提到的概念，其實最初也是在 Google 上看到這種概念。只是我那時寫著寫著，卻忘了 Google 的方式... 網友忘幽谷提醒才想起。

Google 查詢服務回傳的資料格式是它自家的 GData 文件 (GData uses either of two standard XML-based syndication formats: Atom or RSS) 。為了讓使用者能建立純 JavaScript 應用， Google 就提供了將 GData 資料內容改用 JSON 格式包裹在 JavaScript 程式碼中的服務方式。

在 Web 2.0 的浪潮下，有愈來愈多的網路服務推出，如網路相簿、網路書籤、網路書櫃等等。大多數網路服務都有提供 Blog 使用的小工具 (或稱 Badge) ，從軟體設計的觀點來看，這些小工具才是我們在談的「網路服務」、「服務元件 (service compoent)」。

我最近在玩網路書籤提供的這些服務元件，就我觀察這些服務元件主要分兩種形式：一、以一段固定的 JavaScript 程式碼輸出網頁內容；二、僅提供 XML/JSON 資料，讓使用者自己處理程式邏輯。這兩種形式各有限制。第一種包辦了資料和程式邏輯，使用者只需／只能用 CSS 調整外觀；而且因為包含了 JavaScript 的程式邏輯，所以不同服務者提供的服務元件放在同一個頁面時可能會相衝，有我無他、或者大家一起掛。第二種則受限於 XMLHttpRequest 的安全性限制，基本上不能做成純 JavaScript 的應用。

在《Load and Execute JavaScript on Demand》一文中，我說明了利用 XMLHttpRequest 動態載入外部 JavaScript 程式的技巧。然而那技巧是用於應付某些特殊情境之手段，其限制與特點如下列所示：

1. 受限於 XMLHttpRequest 之安全性管制，不能載入不同主機的外部程式。
2. 易於掌握載入狀況及執行順序。
3. 執行方式較具彈性，甚至可以選擇性執行片段。例如《Load and Execute JavaScript on Demand》之範例程式第74-79行之註解內容，原意是截取夾雜在一般 HTML 文件中的 JavaScript 程式碼，且僅僅執行此片段程式。此亦為該程式實作之最初用途，因為外部 JavaScript 程式碼並非位於純粹 .js 文件中，而是夾雜在網誌的文章中。

我在前文《The practice of anonymous recursion function in JavaScript,》寫完之後，又到 Google 找尋是否有其它解法，結果讓我找到用 callee 的作法。這作法更簡單。

匿名遞迴函數在 JavaScript 中之實踐途徑。所謂遞迴函數即函數在其內部調用自己的函數，為了能夠自我調用，我們通常會為函數命名以便以名稱調用之。然而在某些語言中，其語言特性足以實踐匿名函數之遞迴。

在 JavaScript 中欲實踐此技法，須具備三個 ECMAScript/JavaScript 知識基礎：一、理解什麼是 Function object 及匿名函數；二、理解 operator() 的用法；三、理解如何以 Function.call()/Function.apply() 改變 this 的指涉對象。

這是一個使用在本部落格的技巧，用於因應樂多部落格系統之限制。

傳統上，我們執行 JavaScript 程式的方式是靜態的，在 HTML 文件中以 <script type="text/javascript" src="example.js"></script> 的敘述載入並執行外部 JavaScript 程式。若我們無法使用上述方式時，就需要動態載入與執行。另一種需要動態載入與執行 JavaScript 程式的時機為，存在幾個相當龐大的 JavaScript 程式但不全部都用得到的情形，為了降低瀏覽器載入的時間，此時我們需要依某些條件決定那些 JavaScript 程式需要載入。

前幾天我在寫用 JavaScript 自動轉換 Tag 註記的工具時 (See also: 輕鬆在文章中加入「Tag, 標籤」連結) ，發現 Opera 瀏覽器在操作 Unknown HTML 元素 (即自定元素) 的 DOM 方法中有 bug ，不能正確取代或插入其他節點在 Unknown HTML 元素之節點後。如果用取代方法 (replaceChild) 甚至會切斷 DOM 結構。

我設置了一個最簡單的測試環境，使用三種瀏覽器: MSIE 6, Firefox 1.5, Opera 9.1 (build 8679) 測試操作取代及插入動作。 MSIE 和 Firefox 都如預期般正確操作，唯 Opera 有錯誤。

共享書籤服務網站都會在首頁上顯示最近或是熱門書籤的 Tag ，並根據熱門程度予以不同字體大小顯示。因為大大小小像雲朵一樣，故一般就稱為 Tag Cloud (標籤雲) 。而我這篇的小玩意，會彙整部落客最近發表在自己部落格中的文章之 Tag ，然後在首頁的邊欄上，顯示自己部落格的 Tag Cloud ，而且點擊後可連結到自己常用的共享書籤服務。

標籤 (Tag) 是隨著網路共享書籤興起的分類與搜尋方式，其中有些共享書籤還提供了幫你產生「標籤碼」的功能，例如 Technorati 。網路上也不少標籤產生器，像《關鍵字轉Technorati標籤》、《Technorati Tag 書籤產生器》、《讓你的網誌擁有 Blog Tag》。但這些產生器不是要裝外掛，就是只產生 code ，還要部落客再自己剪貼、複製什麼的，實在是太麻煩了。我想要直接把 Tag 寫在文章中，然後讓程式自動幫我把 Tag 轉成連結。於是，就完成了這篇小玩意。

我又來談 IE 的 bug 了，這次是關於 IE 處理動態產生之表格的問題。這事有段時間了，我看到 Thinker 在《jQuery 的使用 innerHTML 的問題》提到當他使用 jQuery 裡的 JavaScript library 產生頁面內容時碰到這問題 ，這才讓我想起來。這問題說來有趣，我之前是在 MSDN 裡找到答案，見《How to Build Tables Dynamically》。我看了 MSDN 的文章會想笑，又一個把 IE 的 bug 當技術文章的案例。

Regular Expression (以下簡稱 REGEX) 是以一組特定字元符號描述字串樣式規則的記述語法。簡單地說， REGEX 用於表達字元符號在字串中出現的規則。舉個例子說明，在 REGEX 中，字元 '^' 放在第一個位置表示字串開頭位置，當我寫下 ^A 的記述時，便表示必須是一個開頭為 A 的字串，如 Adam，才符合此一規則。這個表達規則通常稱為 pattern 。 ECMAScript/JavaScript 以內建的 RegExp Object 提供 REGEX 功能。See also: ECMA-262 15.10 - RegExp Objects

原始動機起於我想要在每一個連結上加上「點擊即自動加入書籤」的功能。作法是為網頁上每一個連結都加上點擊事件 (click event) 。當使用者點擊連結時，事件處理函數會自動產生一個表單 (form) ，將連結的網址及標題 (連結標籤中的文字) 填入，再自動將表單送往 黑米共享書籤 (Hemidemi) ，即完成加入書籤的動作。整個過程中，表單是不可見及不可察覺的。瀏覽器仍然會載入連結，而使用者不會察覺到表單送出動作。

最近我為部落格加上了一些常見的網路分享書籤按鈕。眼尖的人應該在首頁就會注意到，我的文章旁邊都會有一排「加入書籤」的按鈕；閱讀全文時，文章底下也有這一排。這並不是樂多提供的功能。讀者如果已經登入過那些分享書籤系統，那麼在瀏覽我的文章時，只要按下按鈕就會跳出加入書籤的頁面並填入網址及標題。這個動作只要知道那些書籤系統的新增功能頁面的 URL 就可以做到。

我整理了 6 個臺灣使用者常見的書籤系統的 URL 並做成樂多專用的 JavaScript 型式，樂多的 blogger 只要複製後就可以用。 6 個書籤系統分別是: 黑米 HEMiDEMi, 智邦 MyShare, Yahoo 分享書籤, 國外的 del.icio.us, digg 、Technorati。

我提供了兩種工具，一種是只在部落格首頁的邊欄上加上書籤按鈕，第二種是為每一篇文章加上書籤按鈕。

此安全性狀況只發生在 JavaScript 中，而其他程式語言由於語法不同兼且多數透過專屬函數編碼與解碼 JSON ，反而無此顧慮。

續前文「掌握 JavaScript 的封裝特性, part 1」。 第一部份已經說明了 ECMAScript 封裝特性的大部份內容。大多數情形，我們都是按照第一部份的範例程式的格式撰寫。將 private member 寫在 function 定義之中，將存取 private member 的 public method 一同寫在 function 定義之中。至於其他 public member/method 則藉由 prototype property 寫在 function 定義之外 。 然而 ECMAScript 的語法提供我們更大的運用彈性。

JavaScript/ECMAScript (配合 ECMAScript Language Specification - Standard ECMA-262 - 用語，以下稱 ECMAScript) 是一種個體導向程式語言 (object-oriented programming language, OOPL) ，但並不是一種基於類別的個體導向程式語言 (class-based OOPL) (ECMA-262 section 4.2 "Language Overview")。只接觸過 C++, Smalltalk, Java, C# 這些程式語言的 programmer ，一開始多少會因 ECMAScript 沒有 class, public, protoected, private 這些關鍵字而困惑。不過 ECMAScript 仍然支援繼承 (inheritance) 、封裝 (encapsulation) 、動態連結 (dynamic binding) 這三種特性。

Photo163 相冊下載工具 (photo163v2.php)。 PHP + JavaScript 實作版本。

發佈: 2006-09-04 最近更新: 2006-09-15 。修正 bug ，一個相冊中的相片，可能放在不同的 server 上，故修改 JavaScript 部份的程式，改從 gPhotosInfo[i][0] 取得 server 代號。

當衍生類別 (derived class) 繼承了基底類別 (base class) 的成員時，常常忘了要初始 (配置) 那些成員，亦即呼叫基底類別的建構函數。這是 OOP 初學者，也是 JavaScript programmer 在實作繼承關係時易犯的毛病。

在 AJAX 中，用 while 檢查 readyState 是同步模式的做法。這將使整個程式陷在 while 迴圈中，直到 readyState 的狀態符合脫離迴圈的條件為止。最明顯的缺點是頻繁地執行檢查動作，造成程式負載提高。而且這實際上就是同步模式，實作上，還不如明確指定以同步模式執行，即指定 XmlHttpRequest.open() 的第三個參數為 false ，反而較有效率。

JSON 是一種輕量級且可讀性高的資料轉換中介格式。已成為 IETF RFC4627 規範內容。

根據 W3C 關於 HTML DOM 的建議，我使用下例的 ECMAScript 建立 Radio input element 。使用新版瀏覽器，如 Firefox 也得到了我需要的效果。但在舊版瀏覽器，即 M$IE6 中，卻出現了錯誤。 M$IE 會建立 Radio input element ，但是卻無法選取...