[IE8] 應用 Developer Tool 進行網頁內容自動填寫

又到了學期末，在忙不完的報告海之中
學校的教務系統突然來了一封信，提醒坎尼快去把教學意見調查表填完
填自己喜愛的課沒問題，但同樣的動作要做幾百次可是麻煩至極
尤其是沒什麼收獲的課 
於是坎尼就寫了一段 javascript 讓機器自動填答 Orz

---

I. 找尋 Pattern

這類型的作業最重要的就是找到可利用的 Pattern
我們來看一下要填寫的 Form

可以看到，要填答的選項很明顯的是用 input radio 組成
打開 IE8 的 DevTool (快速鍵為 F12)

果然沒錯，所以只要取出所有的 radio 物件
再決定要填寫哪個 value 即可

II. 撰寫 script

上面得知了目前狀況，稍微來厘清一下步驟: (以非常同意為例)

1. 取得 radio 物件
2. 找出 value 為 1 的物件
3. 選取
   

由於要選取物件，這邊坎尼載入擁有有強大選擇器的 jQuery

var script;
script = document.createElement("script");
script.setAttribute('language', 'javascript');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
// 1 非常同意 3 普通 5 非常不同意
$("input:radio[value=1]").attr("checked","checked"); 

接著打開 DevTool，把 Tab 切換至指令碼
將上述程式碼輸入並執行

很快地，30幾個單選選項都自動填答完成
接著只要改幾個自己覺得不滿意的選項即可...

III. 小結

其實從這邊就可以看出自動化的威力
簡單的幾行程式就可以把整個 Form 填完

(以下為抱怨)
從上面的 sample 其實能夠得知網路問卷的信度有多差
總覺得研究者該做的不是把問卷發一發等著回收就好
要了解對象的 Deep insight 才是重點
可惜坎尼看到的都是隨意做一做就放進論文的資料來源
這樣的論文真的會對世界有幫助嗎?

利用 jQuery 替 GridView 加上點擊高亮顯示

在 GridView 上要做到 highlight 效果
通常會利用 mouseover 及 mouseout 兩個事件去修改背景色
之前坎尼在 MSDN 論譠看到有人想點擊後再改背景色
且點擊下一列之後，前一列要回復原來的背景色，這要怎麼做呢?

---

I. 畫面設定

首先，在畫面上加入個 GridView，並給予樣式

<asp:GridView ID="GridView1" runat="server" Width="450px"
CellPadding="4" ForeColor="#333333" GridLines="None">
    <RowStyle CssClass="rowstyle" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True"
        ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" 
        HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True"
        ForeColor="#333333" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True"
        ForeColor="White" />
    <EditRowStyle BackColor="#2461BF" />
    <AlternatingRowStyle CssClass="alterrowstyle" /> 
</asp:GridView>

可以看到，奇偶行的 RowStyle 分別有自己 class
樣式內容如下 (含 highlight 的樣式

.highlight
{
    background-color: Yellow;
}
.rowstyle
{
    background-color: #CCF3FB;
}
.alterrowstyle
{
    background-color: White;
}

II. jQuery 程式碼

接著在 javascript 區段內加入下列的 code

<script type="text/javascript">
    //記錄前一個 jQuery 物件及原class
    var preElement;
    var preClass;
    $(function() {
        //替 GridView1 的所有 tr 加入 click 事件
        $("#GridView1 tr").click(function() {
            //回復上一個物件的樣式
            if (preElement != null)
                preElement.removeClass().addClass(preClass);
            //取得目前點選物件
            var nowElement = $(this);
            //記錄物件，等待下次使用
            preElement = nowElement;
            preClass = nowElement.attr("class");
            //修改目前點選物件樣式
            nowElement.removeClass().addClass("highlight");
        });
    });
</script> 

只要在點擊下一列時，把記錄下來的上一列樣式給回復就好
是不是很簡單呢?  來看一下成果

此時有人可能會有疑問：
「既然只抓取 GridView1 內的 tr，那點到 Header 不會變色嗎?」

以這個範例來講，並不會有那種情況
雖然點下 header 時，仍會把 class 附加上去

但 header 本身已有 inline-style，優先權會高於 class
所以 background-color 會維持原來的顏色

III.小結

其實以上範例也可以用單純的 DOM 加上 javascipt 來達成

(配合 GridView 的 RowDataBound)

實際做起來不難，坎尼這邊就賣個關子，有興趣的人可以自己試試 ^^

[jQuery] 替 dynDateTime (Date Picker Plugin) 加入民國年屬性

坎尼在小喵大的站上又看到了好物
[jQuery]挑選日期的好物 jQuery Plugin [dynDateTime]中文化特別處理
小喵大佛心的把 jQuery 的日期選擇 Plugin 中文化
但坎尼公司在實務上是比較常遇到要民國年，所以就做了小小的改版啦

---

I.使用方式

坎尼加入了兩個屬性：isCht、ChtYearLen
isCht為布林值，預設為 false，設為 true 表示回傳值為民國年
ChtYearLen為數值，預設為 2，表示回傳的年份位數

II.使用畫面

選擇日期畫面

選擇之後回填 0980924 (因為坎尼將年的位數設為3

 

III.小結

目前坎尼只是先將回傳值改為民國年
未來若是有需求再來做介面的民國年客製化吧 ^^
使用上有任何問題歡迎回報
如果使用上不順手，可以自行把範例中客製過的 js 打開修改

範例下載

IV.參考資料

參考來源：【topcat姍舞之間的極度凝聚】  [jQuery]挑選日期的好物 jQuery Plugin [dynDateTime]中文化特別處理

開發windows mobile 6.5 widget程式

前陣子坎尼去了幾場 windows mobile 的研討會
老師有提到開發 widget 的技巧
所以今天稍微來談一下 window mobile 6.5 上的 widget 開發

---

I. 戰前準備

首先要有 windows mobile 6.5 的執行環境，可以到 這裡下載 DTK
裡面有含模擬器的映像檔，待會兒會用模擬器來執行程式

接著是開發環境
windows mobile 6.5 的 widget 全為 html 組成
因此只要有能寫 html 的編輯器即可

II. 開發

由於很多人都寫過相關的開發方式
坎尼就直接引用 bauann 大所寫的 Widgets in Windows Mobile 6.5 - 簡介
大家可以直接看這篇，比坎尼寫的詳細多了 :D

剛剛提到 widget 由 html 構成
坎尼用 visual studio 開了個 html 檔，並加入下圖所示的網頁元素

"Show Messages" 按鈕會在 DIV 之中顯示使用者填入的字串
"Moving" 則是移動下方的灰色 div 到亂數位置

接著是此次的 javascript code
從下圖可得知，坎尼加入了 jquery 來開發

移動 div 的部份，坎尼用 jquery 的 animate 和 fadeOut 去展現動態效果

III. 安裝部署

接著是建立 config.xml 檔，讓 widget 安裝檔能被 windows mobile 6.5 辨別

接著把 html、jquery-1.3.2.min.js、Config.xml 還有要作為 logo 的 e04.png
利用壓縮程式壓成 zip 檔案，接著把副檔名改為 .wgt
這樣一來， widget 的安裝檔就完成了，趕快放到模擬器上試試看吧

直接在 windows mobile 6.5 中點選 wgt 檔即可安裝


安裝好會自動開啟程式，來測試一下成果

應該是硬體受限的緣故
原本寫好的 html 在 pc 上會有動態淡出淡入的效果
但到了 windows mobile 上，效果就不見了

IV. 解除安裝

這裡提一下如何解除安裝
請依照下圖步驟：Start -> Settings -> System -> Remove Programs
再選擇要解除安裝的 widget 程式即可

V. 小結

雖然 widget 提供 html 的開發方式
但很多動態的表現不如 pc 上來的順暢
所以最好著重在功能性的開發

由於為 html，動態資料交換就必須利用 Ajax 及 WebService 等技術
但若能用 jquery 從中當作媒介，相信會簡單許多
(也不用像研討會王老師講的，寫AJAX寫到快哭了 XD

本篇粗淺的介紹一下 windows mobile 的 widget
有錯還望高手們來指正 :)

乘法矩陣第2發 - 用 javascript 做運算

上一篇用 excel vba 做矩陣運算
坎尼這兩天又用 javascript 的方式再修改了一下

---

先給個 demo 連結

從連結進入後，可以看到頁面上已經亂數產生了兩個矩陣
上面有一些矩陣的設定值及功能按鈕

數字範圍為程式要產生的亂數值範圍
若要自訂矩陣大小，可先填入左上角的矩陣大小
再點選建立自訂矩陣功能即可產生使用者設定的矩陣

若是產生的數字不喜歡
可直接點選 table 的格子做修改

點下計算答案即可算出前兩個矩陣的結果


整個程式結構和 vba 版本很像所以就不講了
唯一有變的就是計算結果的演算法，有興趣的人就自行查看原始碼囉

要對照答案是否正確，可以上 WIMS Online Matrix Multiplier

另外自訂矩陣經坎尼測試，大概 50 x 50 的計算都還沒問題
但如果設定太大把瀏覽器資源吃光光坎尼可不負責
(坎尼試過 450 x 450 畫面跑了好久才出來)

John Resig: The DOM is a Mess (and the inspiration I got from this talk)

這個 talk 約 1 小時 12 分，推薦給對 jQuery/JavaScript 有興趣的人，對於開發 Framework/API 的人來講也有很多可以借鏡的地方。（線上觀賞影片在這裡）

John Resig 是目前很紅的 Open Source JavaScript Library – jQuery 的發明人，
他任職於 Mozilla Corporation，這場 talk 是他分享在開發 jQuery 的過程中遇到的困難以及心得感想，對我來說蠻有啟發性的，雖然 scope 差了十萬八千里，但我維護的元件性質也類似 jQuery，也會被很多 client 以各種意想不到的方式使用，也要面對 backward compatibility、graceful degradation 等等問題。

以下是我聽到的一些重點：

Graceful Degradation


這裡有個定義，在 web browser 這個領域裡面，很常見的 reference 是 YUI Graded Browser Support。

這個概念講的是由於實務上的限制（時間、金錢），(JavaScript) framework 沒辦法 support 快速變化的各家 browser 的各個版本（的各個 mode），因此要有一套 support 的策略，細節包括各家、各版 browser 的市佔率，以及要 support 所必須付出的成本（這通常跟 browser 不遵守 standard 的程度成正比）等等。

除了要制定一套策略，程式的寫法也要注意，以下是從影片中節錄的圖（有點糊@@）：


這裡的程式寫法的順序大有學問，首先在 if statement 裡面試圖用標準的 W3C 語法來附加 EventListener，但是並非所有 browser 都有實作 W3C Spec，因此針對 IE 這個尚未實作 W3C Spec 的 browser 的 API Call 就寫在 else if 裡面。

這樣有什麼好處呢？當未來 IE 實作了 W3C Spec 之後，這個 attachEvent function 的程式一行都不用改，IE 自然可以執行到 if statement 中的標準 W3C 語法！而遇到還沒實作 W3C Spec 的 browser 也還是可以正常的執行這個 function（只是經過額外的判斷，效能稍微差了一點點）。

結論就是：愈符合標準/愈新的 API Call 應該寫在越前面，vendor-specific 的 (non-standard_ API Call 應該要往後挪，如此才可減少未來升級的 effort。

Feature Simulation


接下來一個重點是如何判斷目前執行這段 js 的 browser 是否有提供特定功能？
 
最早的時候都是透過 browser sniffing/user agent sniffing 的技術，但是這樣的寫法太沒有彈性，每次 browser 推出新版的時候，程式可能都需要修改。甚至當網站被攻擊的時候，可能 header 中的資訊會被竄改（或者 power user 自己修改），導致 js 判斷錯誤，進而產生了奇怪的畫面等等。

比較好的程式寫法如下圖所示（還是有點糊@@）：



前半段的程式 create 了一個 div，然後在這個 div 上加上 comment，最後 return getElementByTagName(“*”) 的長度是否為零的 boolean 值。根據這個值就可以知道目前的 browser 對於 getElementByTagName 的 implementation 是否有 bug（一切以 W3C Spec 為準），而接下來的程式就可以根據這個 boolean 值做適當的處理。


這裡的觀念類似前面講的 Graceful Degradation，重點在於不要根據 browser/user agent 的版本來假設目前 browser 對某個 API (e.g., getElementByTagName) 的 implementation 為何，實際上用程式測出來的結果才是最準的！
（這也許可以算是 unit test 的進階/變形應用？）


Reduce the number of assumptions


這其實是比較一般性的通則，在程式裡面通常都會有很多假設（assumptions），
很多時候寫程式的人不會特別去注意這些假設，但是就如同去年 MS TechEd 的心得，
當假設出了問題，或許是假設不符合實際情況，或者是被駭客攻破（e.g., 設法製造一個出乎你意料之外的 input），那麼系統就會出很大的問題。因此盡量設法減少系統中的假設是一個很好的 practice，系統的假設少了，出錯的機會就少（因為可能要多寫程式去處理一些特殊狀況）。

但是適量的假設是有必要的，例如你很難（大概也沒有必要）對系統中每一個變數都額外再寫程式去驗證這個變數的 type 是否正確，這基本上是 type system 的工作，因此「type system 要負責抓到如 InvalidCastException 這樣的例外狀況，並停止程式的執行，以免程式真的 run 下去之後導致更嚴重的錯誤（buffer overflow？）」就是一個典型的假設，此時通常都需要信任這個 programming language 所提供的 infrastructure 是夠嚴謹的，而不是自己寫一大堆程式到處去做 type checking。

今天不知道為什麼突然想寫寫看這樣的心得，大概是因為最近類似影片看很多，
以後有空應該會多寫一點類似的文章 :p

css高亮選單

話說坎尼看到 這篇 所介紹的
利用 border style 來創造有角度的物件
於是想說可不可以套到用目前已經做好的高亮語法中 (或是光棒)

---

先講一下坎尼的設計流程
主要是利用 mouseover 及 mouseout 兩個事件
使背景改變達成 highlight 效果，再利用顯示及隱藏當箭頭的 div 物件

首先在畫面上加入 Table


接著把核心的箭頭樣式加入
另外再對 Table 裡的物件做 style 的設計

接下來是省 code 一哥 jQuery
先設定奇偶數的表格列樣式
再利用 jQuery 的 each 方法，對每個列裡的物件做操作

code 的部分坎尼就不多講了，上面都有註釋
當然不懂 jQuery 的看倌們先上 官網 充一下電吧
未來坎尼文章裡的 javascript 部分可能都會漸漸走向 jQuery 化

這篇的說明很少，圖也很少，不過卻有少見的 demo網頁

這個功能坎尼還有另一個想作的東西
但這一切就留待下一篇吧 (要先等坎尼研究出來 XD

補充一下...這些code是可以運用於 Gridview (當然要做點小修改就是
有興趣的人可以複製 demo 網頁裡的 source 回去研究 ^^

參考資料 Using borders to produce angled shapes

製作動態新聞跑馬燈

雖然這功能在各大論譠常看到
不過還是來騙一下文章好了

---

先來解釋一下坎尼的作法
做一頁要取資料的頁面，再用 javascript 的非同步發送機制取得資料

跑馬燈的畫面配置：要放訊息的 div * 1

取資料的畫面配置：把預設的 < ! DOCTYPE 以下的 code 清掉


首先是第一個範例：跑馬燈型
在取資料頁面的 Page_Init 事件，加入取得最新消息資料的程式碼
將抓出來的最新消息資料組成 html 跑馬燈指令
最後用 Response.Write 的方式輸出

在要顯示消息的地方，加入下列的code
這地方要注意的是，要先引用 jQuery 套件

利用 jQuery 提供的 .ajax 功能，呼叫取資料頁面
再將取得的資料放入畫面上的 div

執行時，時間一到系統就會自動去後端取資料 (下圖為執行畫面)


第二個範例：動畫型
拜 jQuery 所賜，很多以前要寫很多 code 的動畫效果
現在只要短短的一兩行就可解決

後端取資料的 code 改成隨機取得一筆資料
並用 Response.Write 輸出到畫面上

顯示的javacsript改成用 fadeIn 及 fadeOut 來達成淡出淡入效果

執行畫面


這兩個範例坎尼覺得用途不太一樣
跑馬燈主要是用來顯示新訊息
淡出淡入的動畫效果用來顯示廣告會比較好

最後是本次的範例檔 下載

[Javascript] 建立全選 checkbox

坎尼來向大家拜個晚年 (說真的有點晚了)
過年在家沒法上線 只好乖乖的玩 Wii 的太鼓達人.....

---

今天要講的是客戶常會要求的懶人功能--全選所有的checkbox
尤其是checkbox會隨著資料庫增長的那種

於是坎尼翻出了一年半前所記的javascript筆記
(不會有人想用AutoPostBack做吧? 不被殺了才怪)

首先，在畫面上放個 CheckBoxList，項目當然是後端產生
接著放兩個 checkbox：一個用來跑傳統寫法的javascript 另一個則是用 jQuery寫
可以看到兩個checkbox都加上了 onclick方法 並且將自己當參數傳入
這地方待會兒再解釋

下圖為後端產生項目的code
由於才過中國年，所以坎尼用十二生肖來應景一下

接著是此次的主角--js function

先來看到 CheckOld 這支傳統作法的 function
做法為先抓取畫面上所有 input，再用for迴圈判斷類別
只要是 checkbox 的勾選狀態就會和傳進來的物件勾選狀態相同
前面看到的把自己用this傳給function，就是為了取得目前要同步的勾選狀態

再來看一下CheckNew這支jQuery型的函式...嗯、一行解決...
是不是很神奇啊 XDDD (坎尼最近也很努力的研究jQuery)

接著看執行畫面


由於全都是js構成 本來要做個靜態網頁
但坎尼太懶惰了 所以這邊只提供 source code 下載 (jQuery請自行上官網領取)

最近坎尼發現 想要寫的東西其實Google一下就都有了
愈來愈找不到題材及靈感 實在有點灰心 囧rz
可能需要找個心靈導師開導一下

製作 javascript 測試器

大家在 debug javascript 時都怎麼作呢?
vs 2005以後支援的 debug?
vs 2008以後的小紅點?
還是邊改邊存邊 refresh 頁面?

---

這邊提供個簡單且通用的測試方式

首先在頁面上佈置個 textbox、asp button、literal、input button (如下圖)

可以看到 input button 已加入 onclick 的 javascript 事件 test()
另外在按鈕的事件上加入下圖的 code

這樣就完成簡單的測試器了
以後要測試頁面上的 javascript 就先把上述的控制項佈置到頁面上
或是利用 iframe 方式 將預先做好的測試頁放到頁面上

使用時直接在 TextBox 裡寫 javascript code
點選 "應用 javascript " 再選 "測試" 即可使用剛剛寫好的 javascript

下面是執行畫面

底下因為坎尼在頁面上加了 jQuery
所以可以看到 t2 是用 jQuery 的方式抓取物件


若打開頁面上的原始碼來看
可以看到 literal 控制項已經把輸入的 javascript 放到畫面上
並包在 test() 這個 function 裡
所以點選 "測試" button 時 就會去呼叫 test()

會做這個主要是坎尼最近在玩 iframe
結果一直抓不到 iframe 裡的物件 腦羞之下做了這個
後來發現 iframe 要用 contentWindow (IE) 去抓 囧興

上面有提到可以先將測試器做成一個測試頁
要用時再將頁面放到 iframe 裡去
坎尼比較建議這種方式
不過要注意的是 要抓取原本頁面上的物件時 記得先加上 parent

靈感來源 w3 schools

如何在 .NET 後端處理時加上等待訊息

坎尼的同事問到這個問題
由於舊系統的資料量太大 每次 Query 都會等待一段時間
可是 user 有時卻等不及想再按一下
這時除了讓所有 button diable 的方法 (請參考 這裡
還可以利用簡單的提示訊息 讓使用者明白目前的系統正在運作

---

由於舊系統是以 vs 2003 做開發 要加入 Ajax 套件的功能有點麻煩
所以坎尼想到了用 javascript 來控制訊息

這邊要提一下 Webform 執行指令的先後順序
當按下一個 asp button 要送回後端處理時
此時瀏覽器會優先執行 button 上的 javascript
(其他控制項的先後順序當然也是這樣)
所以可以利用 控制項 的 Attributes.Add() 方法 加入前端要觸發的事件
以下就以按下 button 然後產生文字提示作示範

首先在畫面上佈置一個 label 及 button 控制項
坎尼把 label 的文字顏色改為 紅色 這樣比較醒目

接著在 page_load 事件加上前端的 onclick 事件
(若是使用 vs 2005 以上版本 button 可以改用 OnClientClick 屬性)
這邊可以看到 坎尼在按下 button 時 利用 javascript 將 label 的文字改變
另外第一句註解的地方 是 jquery 的寫法


再來看按下 button 的事件
這邊可以放置後端處理事件的 code (範例是利用 Thread 讓整個程序睡5秒
記得在事件結束前 把 label 的文字改為 「載入完成」


以下是實際執行情況


由於客戶只要求能有個提示就好 所以坎尼也只幫同事研究到這邊
其實這類的應用應該古早以前就有人寫過了吧? (坎尼還沒 Google 過

除了文字改變的表示外
還可利用 javascript 去控制 css 樣式
讓文字標籤出現完成字樣後 再慢慢的淡出
(將顏色改為和背景色相同 或是改 alpha 值 有興趣的人請自行測試
更懶的人可以直接用 display 的屬性讓 Label 消失

(以下碎碎念
近年出現了許多很炫麗的網頁技術
但在寫程式之前 其實可以先思考開發的便利性及功能性
此類簡單的應用勝過研究許許多多的新技術 只為了導入一個簡單的功能
花費的時間人力成本可能勝過原本的想像

坎尼也是很喜歡去學新技術
不過還是不要只 Google 了一下 囫圇吞棗完就準備上陣
許多基礎原理還是要弄懂 免得後來 debug 到天明 :p

用javascript做下拉式日期選單

前兩週是坎尼爆肝週 晚上回去大多是該睡覺的時間 orz
發現已經積了不少篇文章 可是卻沒時間可以講 囧>
(而且坎尼的電腦灌 Vista 64 一直抓不到驅動 怒

---

今天來講個老梗吧
如何用 javascript 做下拉式日期選單

首先要了解月份的算法 1月大 2月小 3月大...... 相信大家幼稚園都有背過這個
不過這之間的例外就是2月 它每四年就會多一天 (也就是閏年
閏年的算法為 西元年 可被 4 或 400 整除 但不被 100 整除
(想當年 坎尼和Tim的計概期末考是考這個 囧興

直接來看抓圖吧


首先在頁面上佈置三個 DropDownList (當然也可以用 select 來做
重點是要給它們一個 id 並把 id 傳入待會要講的 javascript function 中
這邊 onload 事件是初始時 判斷月份的天數
若後端在初始化時已經做完 這邊有沒有加入事件倒是沒啥差


後端初始化下拉選單的選項 並將選擇日期預設為今日

接著三張為 javascript 同一個 function
可以看到 function 要分別傳入 年 月 日 的下拉選單 id
這邊是為了較有彈性而設計 以免換頁面 id 不同 又要開.js 檔出來改
另外 create 三個 option 是用來增減天數選項 (因為會變的只有 29 30 31)

由上圖可以看到 若是為閏年
日期的下拉選單會加入 29 的option
反之 將 index 28 移除 (也就是第29個項目)

下面兩張同理 所以就跳過



突然發現 好像講完了 orz
.js 請到 這邊 下載

用下拉選單的好處就是 可以在三個動作就到達要選的日期
壞處就是.....它一定至少要三個動作 (日期不同的話)
然後一般以表格化的月曆 (也就是和 .net 的 calendar 長很像的那種)
缺點是 若是要點 1960 年的日期 可能要點上一年點到死掉 XD
但優點就是很直觀 所以網路上已有人將兩種方式結合起來

最後再提一下 AJAX Control Toolkit 的 CalendarExtend 就是這種
不過動作只要把 Extender 拉到畫面上 然後指定 TargetID就好
真是好用又簡單啊