一份 HTML 文件,稱為 document,HTML 文件是由文字、圖片、表格、表單等元件組合而成。所謂組合,就是我們撰寫的網頁內容。而幾乎每個 HTML 元件都有 name 這個屬性,如果指定了 name 屬性後,就相當於對 HTML 文件中的每個元件作識別。可以識別,就代表有可能(註1)可以使用 JavaScript 來控制。
最常見應用在 HTML 文件中的 JavaScript 程式,就是在表單的應用上。而所有瀏覽器都支援 JavaScript (註2),JavaScript 也能很順利的控制表單中的每一個元件,照理,沒有任何問題才對,那為什麼有不相容的問題呢?舉例而言,台灣雅虎拍賣在2005年5月以前,是只能使用 IE 來進行拍賣品刊登的,因為沒法選擇不同的商品分類。當時的原始碼我個人沒太留意,不敢妄言是那裡導致相容性問題。但有許多網站,卻是透過 VBScript 來進行表單控制。誠如前面所言,所有瀏覽器都支援 JavaScript,包括 IE 也支援,那為什麼要使用 VBScript 來撰寫控制碼呢?
許多入門者,畏於學習程式語言,一味追求所謂酷炫網頁花招,若您是這麼認為的話,看看 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 文件中的原始資料。(返回)
同意轉載,不過麻煩看一下轉載需知