以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

第二篇:用 JavaScript 加強表單使用(一)。

一份 HTML 文件,稱為 document,HTML 文件是由文字、圖片、表格、表單等元件組合而成。所謂組合,就是我們撰寫的網頁內容。而幾乎每個 HTML 元件都有 name 這個屬性,如果指定了 name 屬性後,就相當於對 HTML 文件中的每個元件作識別。可以識別,就代表有可能(註1)可以使用 JavaScript 來控制。

最常見應用在 HTML 文件中的 JavaScript 程式,就是在表單的應用上。而所有瀏覽器都支援 JavaScript (註2),JavaScript 也能很順利的控制表單中的每一個元件,照理,沒有任何問題才對,那為什麼有不相容的問題呢?舉例而言,台灣雅虎拍賣在2005年5月以前,是只能使用 IE 來進行拍賣品刊登的,因為沒法選擇不同的商品分類。當時的原始碼我個人沒太留意,不敢妄言是那裡導致相容性問題。但有許多網站,卻是透過 VBScript 來進行表單控制。誠如前面所言,所有瀏覽器都支援 JavaScript,包括 IE 也支援,那為什麼要使用 VBScript 來撰寫控制碼呢?

相容網頁的守則一:不要使用 VBScript 來撰寫 HTML 元件控制。

JavaScript 簡單上手

許多入門者,畏於學習程式語言,一味追求所謂酷炫網頁花招,若您是這麼認為的話,看看 CNET 在 2001 年就發表過的「可笑的網頁花招」(註3) 到處搜尋網頁特效,或迷惑於某些網頁編輯程式內建的特效,那你已經走上不歸路了(註4)。拉回話題,這裡不打算大書特書 JavaScript 的原理和語法、方法、屬性、物件等,直接進入應用面來說明如何上手 JavaScript。

首先,有一份表單,看起來可能像(取材自台灣雅虎首頁)

紅框部份就是一份表單,這份表單在原始 HTML 原始檔中,看起來像是:

元件 <FORM> 代表這裡有個表單,在 <FORM> 與 </FORM> 之間的所有表單元件,都歸屬在這個表單之中,以這份表單而言,只有一個文字欄位,和一個執行表單動作的按鈕。

而文字欄位的語法是

<input type="text" name="searchStr">

input 是固定語法,套句白話的說法是:這裡有個表單元件喔!

type 則是宣告這個表單元件是什麼類型,指定類型為 text,同樣的,套句白話的說法是: 這裡有個表單元件是文字欄位喔!

name 屬性為這個文字欄位的表單元件命名,以便我們使用 JavaScript 來控制。再套句白話說法:這裡有個表單元件是文字欄位,名字叫作 searchStr 喔!

而完整一點的寫法,把 <FORM> 包含進來,就變成了:

<FORM name="formName">
  <input type="text" name="searchStr">
</FORM>

同樣的,在 FORM 屬性中也有個 name 這裡命名為 formName,到這裡為止,我們作的工作是:有一份表單,叫作 formName,裡面有一個名字叫作 searchStr 的文字欄位。

好了,準備就緒了。請理解接下來這句有點繞口的說明:

在文件 (document) 中有份 formName 的表單,裡面有個 searchStr 的文字欄位。

這時,在 JavaScript 的眼中,這個文字欄位就變成了 document.formName.searchStr 了。

如果你還不習慣,用唸的方式,把所有的「點」唸成「的」,再來看一遍

document.formName.searchStr=document 的 formName 的 searchStr

是不是簡單多了?

接著,我們到目前為止,只不過可以指定文件裡的表單中的某個元件而已,照上面說明,document 的 formName 的 searchStr 的什麼東西呢?正確的說法叫作「文字欄位的屬性」,所謂屬性,就是基本資料的意思,比如:

value 文字欄位的值,也就是輸入在欄位中的文字 document.formName.searchStr.value
length 文字欄位內容的長度 document.formName.searchStr.value.length

也就是說,如果你在文字欄位中輸入的是「網誌」那麼 document.formName.searchStr.value 就等於「網誌」。而 document.formName.searchStr.value.length 就等於 2。

有些屬性是「唯讀」的,也就只能把值讀取出來,不能設定,這種屬性就稱為唯讀,我們不打算在這裡列一份清單告訴你那些是唯讀,恐怕你不好消化,有可能的話,會編在附錄中。

接下來,我們要測試一下,前面所講的內容有沒有作用,或是幹什麼用,先把完整的程式碼(註5)列在下面

1 <Script Language="JavaScript">
2   function test(){
3    

alert(document.formName.searchStr.value);

4   }
5 </Script>
6 <FORM name="formName">
7  

<input type="text" name="searchStr">

8  

<input type="button" value="按我" onclick="test();">

9 </FORM>

上面就是一份簡單的表單了,在第 8 行裡,顯然,我們可以用相同的方法來解讀這行,用白話來說,是:這裡有個表單元件是按鈕 (button),按鈕上要顯示「按我」這兩個字,然後當按下去 (onclick) 時,會呼叫一個名稱為 test 的程式。

行 2 到行 4 就是這個名字叫作 test 的程式所作事情,先不分析 JavaScript 的結構,直接試作,把上面這段程式碼複製後,用記事本好了,存成一個檔案,取名為 js_1.html 好了。看起來會像接下來的內容:

在欄位中打字,然後按下「按我」按鈕。是不是印證了前面所說的呢?

 

 

 

註1:某些元件的屬性是只可以讀取,不能編修,所以僅以「有可能」來說明。(返回)

註2:如果現行瀏覽器,有不支援 JavaScript 的,請通知我。(返回)

註3:CNET 中文已經將「網頁建構」這個連結由首頁中移除,使用搜尋也找不到過去的文章,試試 Google 吧!(返回)

註4:據報導,Internet Explorer 7 將於 2005 年夏季發表,基本功能至少有分頁瀏覽 (Tab browse) 以及符合 W3C 標準,除了來自外部如 Mozilla 系列瀏覽器拉下 IE 市佔率外,據傳,內部工程師的反彈聲浪也極大,但由於 IE 和 Windows 作業系統綁的太死,你能想像你的檔案總管有分頁瀏覽的功能嗎?或許可以期待,對 IE 的工程師而言,卻是一個惡夢!如果還認為緊抱 Microsoft 大腿得永生的人,這下可錯愕了!因為 IE 7 可能不向下支援!那麼,算不算不歸路呢?(返回)

註5:「程式碼」在本系列文章中,泛指 JavaScript 程式以及 HTML 文件中的原始資料。(返回)

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: