BWIW_3_IntraWeb与CSS、JavaScript_上.pdfVIP

三、 IntraWeb 與 JavaScript 、CSS(上) Write By 黃忠成 在現今網站中，很難找到有那一個網頁中沒有使用到JavaScript 、CSS 的，不管是用 來確認使用者輸入資料的格式，亦或是為網頁加上一點不同於其它網站的特效，這些工 作都必須使用JavaScript 與CSS 來完成。 在IntraWeb 中，JavaScript 與CSS 更是不 可缺的要素，就算是一個最簡單的FORM ，其內部也包含了許多的JavaScript 程式碼與 CSS 定義，只是IntraWeb 將這些程式碼隱藏在元件的內部，並且顯露出可讓設計者經 由DELPHI IDE 定義的特性值，使我們在不懂得這些技術的情況下，以舊有的觀念撰寫 程式。 但這些特性值大多屬於較普遍的功能，如果我們需要的功能並不在IntraWeb 所 提供的元件之內呢? 或者是我們想為網頁加上一點特效，而這個特效IntraWeb 並沒有 提供呢? 這時候IntraWeb 所提供的自定JavaScript 及CSS 的功能就派上用場了。 就 目前的版本而言，IntraWeb 在JavaScript 部份提供了相當大幅度的支援，只要遵守一些 使用上的規則，幾乎可以在IntraWeb 中加上任何型式的JavaScript 程式碼。 相對於 JavaScript 的完整支援，IntraWeb 在 CSS 上的支援就顯得有些薄弱，能讓使用者設定 CSS 的特性也僅有一個而已，使用起來感覺有點彆扭。 據官方消息表示，這一部份會 在未來的5.1 版中有大幅度的改進，真希望她能向EWF 取經，實作出StyleController 元 件。 在這一章中，我並不打算由介紹JavaScript 、CSS 的語法開始，而採用範例的方式 來進行，這種方式的好處是你可以直接由範例中挑選出需要的套用至程式中，不需要全 面性的了解JavaScript 與CSS 的語言規則及用法，當然! 如果你需要的功能不在本文 所提供的範例中時，那麼一本專門的書籍就是你需要的。 慨觀IntraWeb 的JavaScript 支援 在開始撰寫程式之前，我們先審視一下IntraWeb 所提供的JavaScript 支援，排除像 ExtraHeaders 這種用途過於寬鬆的特性值，IntraWeb 可讓使用者定義JavaScript 程式碼的 地方如表1: (表1) 所在位置 說明 TIWForm.JavaScript 這個特性值位於FORM 中，主要用途是用來 宣告全域變數及函式，這裡所穿插的程式碼 將會在網頁載入時執行。 TIWEDIT、TIWBUTTON 等等，她允許你定 義onClick、onLoad、onBlur 等JavaScript 既 定事件的程式碼，注意! 函式宣告部份已由 IntraWeb 代你完成，這裡只允許放入程式碼 主體部份。 所有的事件預設會傳入一個 ASender 參數，這個參數就是引發該事件的 物件。 用來插入初始化的程式碼，這個函式會將你 所傳入的程式碼插入到IntraWeb 產生的起 始函式之中，也就是說你在此所宣告的變數