首頁
文章清單
RSS 
|
一份 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 文件中的原始資料。(返回)
同意轉載，不過麻煩看一下轉載需知
