|
資料來源：http://www.ncku.edu.tw/~rcenter/book/html/JavaScript.html
簡易JavaScript語法結構
「網頁瀏覽或執行，是開啟在瀏覽視窗（window）中，包含了一份或數份的HTML文件（document），文件中又包含了各種物件（object），每個物件都可以加以命名（name）或加上識別碼（id）。」
上面，先講了一段怪怪的話，但這段話，其實就是JavaScript的精要。常看到所謂DOM模式，就是指Document Object Model，或稱為「文件物件模式」，這是把HTML文件當作物件來操作，這種操作模式的好處，第一當然是符合程式語言主流，二來也易於學習，許多人認為JavaScript不好學，事實上，了解JavaScript語法結構，就算用猜的，也能對八成！
比如說，視窗標題吧，視窗是什麼？window，對吧！而標題呢？則是title，那視窗標題用JavaScript角度來看，就變成window.title，這裡，把所有的點「.」用「的」代替，用中文「唸」一遍變成：window的title，很口語吧！
其實，JavaScript就是在這種語法架構下發展，再舉個例子：
document.images['banner'].src
一樣用唸的：文件（document）的影像（image）名字叫banner的來源（src），這是什麼？再看看HTML中的對應：
所以，document.images['banner'].src就是JavaScript用來控制（讀取或設定）HTML文件中，被命名為banner的影像來源。
也就代表，如果給document.images['banner'].src一個新值，就可以變換影像，那什麼時候用呢？看設計人員的巧思了，要在按下滑鼠時，就用onClick事件，要在滑鼠移過去時，就用onMouseOver事件，任君組合。
許多入門者，畏於學習程式語言，一味追求所謂酷炫網頁花招，若您是這麼認為的話，到處搜尋網頁特效，或迷惑於某些網頁編輯程式內建的特效，那你已經走上不歸路了。拉回話題，這裡不打算大書特書 JavaScript 的原理和語法、方法、屬性、物件等，直接進入應用面來說明如何上手 JavaScript。
取得或設定物件屬性值
先來思考一下，HTML文件中有什麼資料可能會需要被讀取出來，或需要被重新設定？比如有張圖片，圖片來源是什麼？這時用讀取的方式，那能不能改呢？就是設定，既然能讀取，也能設定，那是不是就能在瀏覽過程中改變呢？沒錯！這就是JavaScript可執行的基本功之一。
每一個HTML中的標籤，都可以加上id為這個標籤加上識名稱，例如某個儲存格
| .... |
那麼，這個以my作為識別的HTML標籤，在JavaScript眼中，透過「由識別元取得元件」的相關資料就不是難事，而所謂由識別元取得元件，轉換成JavaScript語言，變成：
getElementById=由識別元（ById）取得（get）元件（Element）
非常直譯式的語法，別忘了，這是HTML文件（document）完整語法當然就變成：
document.getElementById('my')
這樣就取得了以my識別的HTML元件了。接下來呢？想知道以my識別的儲存格中的文字是什麼顏色？
document.getElementById('my').style.color
這個.style又是什麼呢？因為顏色等屬性，都是樣式嘛，再用前節提到的方法來記憶一下：
文件（document）的由識別元取得元件（getElementById）名為my的樣式（style）的顏色（color）
那這個儲存格的背景色是什麼呢？
document.getElementById('my').style.backgroundColor
想要改變背景色？
document.getElementById('my').style.backgroundColor='色碼';
這麼來看，其實JavaScript的語法並不難，反而，顏色是color，背景色是backgroundColor等這些代表名稱比較難，又分大小寫，這才真的難。常用的資料列表如下：
包含的HTML內容 document.getElementById('ID').innerHTML
使用樣式
document.getElementById('ID').className
顏色
document.getElementById('ID').style.color
背景色
document.getElementById('ID').style.backgroundColor
背景影像
document.getElementById('ID').style.backgroundImage
顯示？
document.getElementById('ID').style.visibility
取得或設定表單物件值
表單部份的處理，也是JavaScript可運用的重頭戲，首先，有一份表單，看起來可能像（取材自台灣雅虎）
紅框部份就是一份表單，這份表單在原始 HTML 原始檔中，看起來像是：
元件 之間的所有表單元件，都歸屬在這個表單之中，以這份表單而言，只有一個文字欄位，和一個執行表單動作的按鈕。
而文字欄位的語法是
input 是固定語法，套句白話的說法是：這裡有個表單元件喔！
type 則是宣告這個表單元件是什麼類型，指定類型為 text，同樣的，套句白話的說法是： 這裡有個表單元件是文字欄位喔！
name 屬性為這個文字欄位的表單元件命名，以便我們使用 JavaScript 來控制。再套句白話說法：這裡有個表單元件是文字欄位，名字叫作 searchStr 喔！
而完整一點的寫法，把
同樣的，在 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。
有些屬性是「唯讀」的，也就只能把值讀取出來，不能設定，這種屬性就稱為唯讀，本書不打算在這裡列一份清單告訴讀者些是唯讀，恐怕讀者會消化不良。
能夠讀取表單的值，就代表能檢查表單中的值是合規定的還是不合規定，比如在年齡欄裡，不能填入A，在血型欄裡，不能填入X型等，這就是表單驗證。要作到表單驗證，要先能讀取表單元件裡的資料，原理已經說明過了，接下來就把表單各種元件可能的值的語法列出來供讀者參考。
文字欄位
HTML語法
值
document.formName.textName.value
值的長度
document.formName.textName.value.length
是否唯讀
document.formName.textName.readOnly
文字區塊
HTML語法
值
document.formName.textareaName.value
值的長度
document.formName.textareaName.value.length
是否唯讀
document.formName.textareaName.readOnly
寬度
document.formName.textareaName.cols
高度
document.formName.textareaName.rows
單選核取
HTML語法
共幾項
document.formName.radioName.length
第N項的值
document.formName.radioName[N].value
第N項核取？
document.formName.radioName[N].checked
只有一項的值
document.formName.radioName.text
只有一項核取？
document.formName.radioName.checked
註：N由0開始計算
多選核取
HTML語法
共幾項
document.formName.boxName.length
第N項的值
document.formName.boxName[N].value
第N項核取？
document.formName.boxme[N].checked
只有一項的值
document.formName.boxName.text
只有一項核取？
document.formName.boxe.checked
註：N由0開始計算
下拉清單
HTML語法
共幾項
document.formName.selectName.length
選到第N項
document.formName.selectName.selectedIndex
第N項的值
document.formName.selectName.options[N].value
第N項的文字
document.formName.selectName.options[N].text
註：N由0開始計算
按鈕
HTML語法
按鈕上的字
document.formName.btnName.value
按鈕可不可按
document.formName.btnName.disabled
條件式和迴路
有了基本語法概念後，JavaScript最多的語法，if，最基本的迴路則是for，語法分別如下：
if (條件){
如果條件成立，要處理的動作
}else{
如果條件不成立，要處理的動作
}
通常條件是偵測某一個變數值，例如a等不等於1，就寫成：
if (a==1)
請注意，要連續兩個等號，JavaScript中，用於判斷值的等號，要連續兩個等號。
如果是要測試「不等於」則寫成：
if (a!=1)
迴路基本語法則為：
for (var i=起始值;i<最大值;i++){
要處理的動作}
迴路中要處理的動作，也可以加上條件式，判斷過再進行適當處理。例如，判斷表單中單選中，那一個項目被選取，可以使用迴路加條件式判斷，如：
for (var i=0;i
到這裡就找到被選取的項目
}
}
以上，就是基本的JavaScript，把握這幾條原則，在本書範例中含有JavaScript程式時，讀者可以對照參考。
回 · 基礎JAVASCRIPT教學 ．01、JavaScript 簡介 這一篇文章封面