BWIW_3_IntraWeb与CSS、JavaScript_下.pdfVIP

三、 IntraWeb 與 JavaScript 、CSS(下) Write By 黃忠成 經過了上一期文章的介紹後，相信讀者們對於如何在 IntraWeb 中使用JavaScript 已經 有概略性的了解，在這一期中我們將繼續探討其它在網頁中常見的 JavaScript 技巧，並 介紹如何在 IntraWeb 中加入 CSS 讓網頁看起來更美觀。 Lesson 4: 計算機 還記得我們在第一章時所寫的計算機嗎? 那時所使用的方式是將資料送回 Server 運 算之後再顯示出來，事實上可以不用這麼麻煩。 只要使用 JavaScript ，我們可以直接在 Client 端完成這個動作，程式 5 是寫在按紐上的 ScriptEvents.onClick 之中的程式碼: (程式 5) var ctrl1=LocateElement(IWEDIT1); var ctrl2=LocateElement(IWEDIT2); var retctrl=LocateElement(IWEDIT3); var val1=parseInt(ctrl1.value); var val2=parseInt(ctrl2.value); if (val1==NaN) { window.alert(第一個並非是數字.); return false; } if (val2==NaN) { window.alert(第二個並非是數字.); return false; } retctrl.value=(val1+val2).toString(); return false; 執行的畫面如圖 5 。 (圖 5) 相對於 Lesson 2 中使用函式呼叫的方式，這個範例使用的是一般的程式碼，這是因為 我們並未在 DELPHI 中提供這個按紐的 OnClick 事件，因此 IntraWeb 直接使用你所輸 入的程式碼，而非使用產生一個函式再加入使用者自定程式碼的方式。 Lesson 5: 隨游標改變的圖形 我們常在許多的網頁上看過這種效果，當你將滑鼠移到上面時所顯示的是圖形 1，當 滑鼠移開時所顯示的是圖形 2，事實上這種效果大多是使用 CSS 或是 JavaScript 達到的。 首先請放入一個 TIWImageFile 到 Form定她的 上，然後設ImageFile.URL 為 files/B1.JPG， 接著在 FORM.JavaScript程式 中加入如6的程式碼。 (程式 6) imgArray=new Array(); imgArray[0]=new Image(); imgArray[0].src=/files/B1.jpg; imgArray[1]=new Image(); imgArray[1].src=/files/B2.jpg; 這段程式碼中建立了一個陣列及兩個 Image 物件，請確定這兩個圖形是放在程式所在目 Out 兩個事件的程式碼(程式 7、8): (程式 7)onMouseOver LocateElement(IWIMAGEFILE1).src=imgArray[1].src; (程式 8)onMouseOut LocateElement(IWIMAGEFILE1).src=imgArray[0].src; Lesson 6: 廣告看版 Internet 盛行時，許多網站的主要收入是來自於廣告商，由於廣告商數量眾多，但網 頁版面有限，無法於一個畫面中放下那麼多的廣告，因此廣告看版的概念就誕生了。 這 種慨念利用了定時切換圖形的方式，讓多個圖形輪流顯示於同一個位置之上，藉此達到 節省網頁版面的目的。 要完成這個範例，請在 FORM 上放置一個 IWImageFile 元件， 並且在 FORM 的 JavaScript 特性中加入如程式 9 的程式碼: (程式 9) imgArray=new Array(); imgArray[0]=new Image(); imgArray[0].src=/files/B1.jpg; imgArray[1]=new Image(); imgArray[1].src=/f