JavaScript陣列、函式與事件
陣列
陣列是將多個變數結合在一起，每個陣列元素皆可視為變數使用，陣列佔有連續的記憶體空間，陣列提供索引值(index)存取陣列中個別元素，JavaScript語言規定陣列的第一個元素其索引值為0，第二個元素其索引值為1，依此類推，一個陣列擁有n個元素，若要存取陣列最後一個元素，需設定索引值為n-1，由此可知，每個索引值對應一個陣列元素，因此我們只要指定陣列與索引值就可存取陣列中指定的元素。
最常見的陣列就是一維陣列，一維陣列表示只要使用一個索引值就可以存取陣列的元素，一維陣列佔有連續的記憶體空間，一維陣列相當於同一條路上的房子，只要指定這條路的門牌號碼，就可以將信寄到這條路上的收件者，一維陣列也一樣，只要指定陣列名稱相當於地址的路名，而陣列索引值相當於地址的門牌號碼，指定陣列名稱與索引值就可以存取到一維陣列中的元素。
一維陣列的初始化
程式中使用陣列可以事先初始化，初始化為指定陣列每個元素的值，以下就介紹初始化的語法。
我們來看看上述程式範例陣列A的記憶體狀態，如下圖。
陣列與迴圈
利用迴圈變數與陣列索引值結合，經由控制陣列索引值可以存取陣列中所有元素，以下為迴圈變數與陣列索引值結合範例。
使用A[i]存取陣列中元素，使用迴圈控制i的變化，當i等於0，A[i]就會存取陣列A的第一個元素；當i等於1，A[i]就會存取陣列A的第二個元素；當i等於2，A[i]就會存取陣列A的第三個元素，依此類推，就可以存取到陣列所有元素，這就是陣列與迴圈結合可以存取到陣列中所有元素的概念。
陣列的操作函式
使用push函式可以將元素加到陣列最後，使用pop函式可以將陣列最後一個元素刪除，屬性length可以回傳陣列的長度。
本單元範例程式碼如下。
本單元範例程式碼預覽結果如下。
函式
函式用於結構化程式，將相同功能的程式獨立出來，經由函式的呼叫，傳入資料與回傳處理後的結果，程式設計師只要將函式寫好，可以不斷利用此函式做相同動作，可以達成程式碼不重複，要修改此功能，只要更改此函式。再者，其他程式設計師要使用此函式，只要知道此函式的功能，什麼輸入會有怎樣對應的輸出，不需知道函式實作的細節，函式可幫助多位程式設計師共同開發系統，事先規劃好函式名稱與功能，再各自開發函式與整合所有程式，最後達成系統所需求的功能。
函式的定義與呼叫
自訂函式需要包含兩個部分，分別是函式的定義與函式的呼叫。函式的定義是實作函式的功能，輸入參數與回傳處理後的結果，利用函式的呼叫讓函式真正執行，以下分開敘述。
函式的定義
以下為函式的定義，函式名稱後接著一對小括號，小括號可以填入要傳入函式的參數，當參數有多個的時候以逗號隔開，函式的範圍為函式名稱後使用一對大括號所包夾起來的範圍，當函式需要傳回值使用指令return，表示程式執行的控制權由函式轉換為原呼叫函式，函式的定義與傳回值格式，如下表。
函式的呼叫
程式經由函式呼叫，將資料傳入函式，函式處理後傳回結果給呼叫程式，程式中如何呼叫函式？
方法一：無傳回值的呼叫語法
函式名稱(參數值1,參數值2,…)
說明：利用函式名稱與參數來呼叫函式。
方法二：有傳回值的呼叫語法
變數=函式名稱(參數值1,參數值2,…)
說明：等號右邊要先做完，利用函式名稱與參數來呼叫函式，最後函式回傳值給變數，變數就紀錄函式呼叫後的回傳值。
以下範例自訂函式add將三個數字相加，呼叫函式add回傳計算結果。
本單元範例程式碼如下。
本單元範例程式碼預覽結果如下。
事件
事件是使用者與程式互動介面，例如：按下按鈕、點選滑鼠、按下按鍵等都會驅動事件，當發生此事件就會呼叫對應的事件進行處理，該事件內可允許使用者撰寫對應的事件處理程式，經由執行對應的事件處理程式達成所需的功能。
事件處理函式
撰寫事件處理函式的三種方式，如下，以按鈕點選為範例。
方法一：若程式不長，可以使用行內(inline)方式撰寫事件函式。
<div>
<button type="button" onclick="alert('Hello')">Hello</button>
</div>
方法二：建立函式，再註冊此函式給事件onclick。
function Hello(){
alert("Hello");
}
將函式Hello註冊給按鈕的onclick事件。
<div>
<button type="button" onclick="Hello()">Hello</button>
</div>
方法三：經由改寫windows.onload函式，建立與註冊函式給事件onclick。
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
alert("Hello");
}
}
HTML的按鈕部分不須改寫。
<div>
<button type="button" id="btn1">Hello</button>
</div>
本單元範例程式碼如下。
本單元範例程式碼預覽結果如下。
點選第一個「點選顯示時間」按鈕，結果如下。
滑鼠與鍵盤事件
使用者互動中最常用的事件就是滑鼠與鍵盤事件，以下分別敘述滑鼠與鍵盤事件。
本單元範例程式碼如下。
本單元範例程式碼預覽結果如下，滑鼠移動到按鈕上驅動mouseover，離開按鈕驅動mouseout。
