[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 才是重點
可惜坎尼看到的都是隨意做一做就放進論文的資料來源
這樣的論文真的會對世界有幫助嗎?

[ASPNET] 動態更新 Gridview 上的資料

前陣子坎尼在 MSDN 論譠上看到有人問
「如何每10秒刷新一次資料?」
今天就抽個空寫了個範例來介紹一下如何動態刷新頁面上的資料

---

I. 流程說明

此次的流程很簡單：
Gridview 顯示資料 –> 使用者修改資料 –> Gridview 刷新資料
當然，是以 AJAX 做為 Client-side 及 Server-side 的溝通橋梁

為了呈現方便，坎尼用了 iframe 分別讀入資料修改頁及呈現頁
資料部分在此次範例中是以 xml 檔來存取資料
資料欄位含有：ID(唯一值)、Name 及 Age

明顯地，這是人蛇集團的童工目錄

II. 程式說明

Gridview 的呈現和資料的修改坎尼就不贅述

最主要的是下列這段 Javascript
可針對每個 Table Row 進行取 ID 的動作，並透過 AJAX 到後端取資料
取得資料的部份 Code
 
以下為實際執行畫面
Kenny 謊報年齡所以偷偷的進系統修改
在人蛇集團還沒發現之前，身份證上的年齡還是假造的
被發現了，所以拿到一張新的身份證繼續行騙

換頁之後一樣可以做部分更新 (注意 ID 一定要是唯一值)

如何，很簡單吧 :P

III. 結論

其實以現在的開發語言而言，很多問題都已經不是無解或難解
重點是如何將習得的技術拼湊起來，成為新的應用 :)

此次的 範例下載
2012/6/7 調整

利用 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
有錯還望高手們來指正 :)

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