網頁除錯觀察的Browser工具FireBug-開發者工具-開發人員工具

Posted in ajax, javascript, 教學, 軟體介紹 on 2010/7/27 by yku 瀏覽:20人次 — 留下回應

當程式人員或網頁設計師在開發網頁時都會遇到一個問題,就是debug不易,不過自從Firefox大行其道後,這個問題被FireBug解決了,使用FireBug可以很方便的知道網頁那裡出了問題,可以直接修改CSS及html dom內容,還可以知道整個網頁到底傳輸了什麼內容及資訊等等,可說是十分好用,Microsoft在其後釋出的Internet Explorer及Google的Browser也都支援了類似的功能,不過更新的頻率並不像FireBug那麼高。

首先介紹IE8的開發者工具

可以由上方工具列的工具->開發者工具 來啟動(或F12)

IE開發者工具1.png

使用開發者工具HTML tab裡的滑鼠指標可以直接取得網頁裡HTML的結構內容

而在這個HTML tab也可以直接修改文件內容或CSS,不過個人並不覺得比FireBug好用

...詳細文章

prototype Ajax回傳json物件的處理

Posted in ajax, javascript, jsp, prototype, 教學 on 2010/4/25 by yku 瀏覽:289人次 — 留下回應

一般人在設計ajax成功回傳事件時,有幾種方式來處理回傳的資料,一種是純文字或html code,一種是xml格式那另一種就是json格式,json格式不像xml需要成對的tag,所以在回傳資料長度上會顯的短很快,如果整個網站都大量使用ajax方法的話,選擇json是一個很好的方法。

ajaxjson2.png

json的相關資訊可以在這裡看到:JSON in JavaScript

prototype這個framework本身就有支援To JSON的方法,有二種格式可以轉換成json,一種是javascript的class,另一種就是純文字了,不過純文字的內容要為json格式才能被轉換,如下:

{"bindings": [
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
    ]
};

...詳細文章

[Javascript]AutoComplete自動完成效果

Posted in ajax, javascript, opensource, prototype on 2010/4/24 by yku 瀏覽:157人次 — 留下回應

之前為了做這AutoComplete效果找了好多資料,不過大都是jQuery的,當然不是不好用,只是在一個頁面載入prototypejQeruy就會有些衝突的問題要解決

效果大概會像下面這樣子

AutoComplete1.png

...詳細文章

[javascript]特效accordion

Posted in ajax, javascript on 2009/12/7 by yku 瀏覽:183人次 — 留下回應

這裡介紹幾個Accordion特效

1. jquery版本

網址

裡面有很詳細的說明及修改方法,很順暢,不過css有點小多,比較不好改

555-1

2. prototype 版本 ...詳細文章

[jsp小技巧]利用Throw Exception來完成Ajax

Posted in ajax, jsp on 2009/9/28 by yku 瀏覽:360人次 — 留下回應

一般在寫Ajax時,最直覺的使用方法就是利用Ajax Object來要求Server給與回應,

再依回應的內容解西倒底是完成動作?還是有錯誤產生,如必填欄位未填。

這裡介紹一個小技巧,在編譯式的網頁伺服器語言可能比較合適使用。

大概的原理是利用程式在執行有錯誤時Throw Exception來當做錯誤訊息,

回傳給client,而client只要接收到503的錯誤,則就可以知道動作並未完成,

反之則是完成。

範例使用prototype來使用Ajax,傳送及回應,有需要可以參考:

Ajax 使用prototype.js 1

以下是載行結果,當有填值時,則回應填寫的值,

沒填值的時候就回傳錯誤訊息。(Exception)

1

2

...詳細文章