本單元要介紹『事件』的觀念，並先以『計時器事件』為例來說明。

Presentation on theme: "本單元要介紹『事件』的觀念，並先以『計時器事件』為例來說明。"— Presentation transcript:

1 本單元要介紹『事件』的觀念，並先以『計時器事件』為例來說明。
JavaScript 計事器事件

2 事件 發生事情就是事件 觸發事件：滑鼠按鍵按下或放開、圖形載入中斷或錯誤、滑鼠點擊一次或兩次、滑鼠游標移到目標物上、滑鼠游標移開目標物、按鈕被按下......等等。 觸發事件 處理事件 JavaScript 計事器事件

3 處理事件 處理事件：由程式設計者撰寫，用來告訴電腦『如何去處理這個事件』。 觸發事件 處理事件 JavaScript 計事器事件

4 JavaScript 的事件 - 1/8 事件處理器 onAbort 支援物件 Image 觸發 當圖形還未完全載入時，即被使用者按下停止鈕
觸發 當圖形還未完全載入時，即被使用者按下停止鈕 事件處理器 onError 觸發 載入圖片發生錯誤時 JavaScript 計事器事件

5 JavaScript 的事件 - 2/8 事件處理器 onFocus 支援物件 Window、所有表單元件
觸發 將游標移到該元件上或用滑鼠點選該元件時 事件處理器 onBlur 觸發 將游標移開該元件或用滑鼠點選另外的元件時 事件處理器 onChange 支援物件 Select、 文字輸入元件 觸發 當使用者改變點選的項目或作用的元件時 JavaScript 計事器事件

6 JavaScript 的事件 - 3/8 事件處理器 onClick 支援物件 Link、 按鈕元件 觸發 當使用者點一下滑鼠左鍵時
觸發 當使用者點一下滑鼠左鍵時 事件處理器 onDblClick 支援物件 Document、 Image、 Link、 按鈕元件 觸發 使用者連點滑鼠左鍵兩次時 JavaScript 計事器事件

7 JavaScript 的事件 - 4/8 事件處理器 onKeyDown 支援物件 Document、Link、 Image、文字輸入元件
觸發 鍵盤按鍵被按下的那一瞬間 事件處理器 onKeyUp 觸發 鍵盤按鍵被放開的那一瞬間 事件處理器 onKeyPress 觸發 鍵盤按鍵被按下時(是onKeyDown與onKeyUp的組合) JavaScript 計事器事件

8 JavaScript 的事件 - 5/8 事件處理器 onLoad 支援物件 Window、 Image 觸發 瀏覽器載入該文件或圖片時
觸發 瀏覽器載入該文件或圖片時 事件處理器 onUnload 支援物件 Window 觸發 使用者關閉或離開目前網頁 事件處理器 onResize 支援物件 Window 觸發 視窗大小被改變時 JavaScript 計事器事件

9 JavaScript 的事件 - 6/8 事件處理器 onMouseDown
支援物件 Document、 Image、 Link、 按鈕元件 觸發 使用者按下滑鼠按鍵 事件處理器 onMouseUp 觸發 使用者放開滑鼠按鍵 JavaScript 計事器事件

10 JavaScript 的事件 - 7/8 事件處理器 onMouseOver 支援物件 Image、 Link
觸發 滑鼠移到元件或超連結上時 事件處理器 onMouseOut 觸發 滑鼠移出元件或超連結上時 JavaScript 計事器事件

11 JavaScript 的事件 - 8/8 事件處理器 onReset 支援物件 Form 觸發 使用者按下表單的重置鈕時
觸發 使用者按下表單的重置鈕時 事件處理器 onSubmit 觸發 使用者按下表單的送出鈕時 JavaScript 計事器事件

12 計時器事件 設定 setTimeout( ) 或 setInterval( ) 方法時，內部會登記一個事件處理器。
JavaScript 計事器事件

13 當程式載入時執行第43行呼叫visible函式並將參數0傳給它。
第8行visible函式接收到參數後，進入第9行switch判斷式接著到case 0：標籤設定color變數的字串，然後到第11行break中斷其他標籤的執行。 JavaScript 計事器事件

14 第19行將之前設定的color指定給第45行樣式名稱為blinkText的字串，改變該字串的文字顏色。
第22行將第45行原本設定為隱藏的字串顯示出來。 JavaScript 計事器事件

15 第25行設定500毫秒後呼叫第28行的hide函式。 第31行將原本顯示的字串再次隱藏起來。 第32行顏色索引index的值加一。
JavaScript 計事器事件

16 第35行判斷顏色索引index的值是否已超過3若是則將值重設為0。
第38行設定500毫秒後呼叫第8行的visible函式並將新的顏色索引index傳給它。 JavaScript 計事器事件

17 然後visible再根據新的顏色索引值指定給彩色文字字樣。
最後的結果就是範例預覽閃爍的彩色文字的彩色文字四個字，每隔一秒改變一次顏色，中間500毫秒顯示、剩下的500毫秒隱藏，如此就會有閃爍的效果了。 JavaScript 計事器事件

18 自我練習 將上例本來會閃爍（一閃一滅）的變化，改成不閃爍（不會滅）的 6 種顏色變化。 JavaScript 計事器事件

19 第23行設定每隔1000毫秒(就是一秒鐘)呼叫第7行的cntTime函式一次。
第5行設定小時、分鐘、秒數的初始值都為0。 第23行設定每隔1000毫秒(就是一秒鐘)呼叫第7行的cntTime函式一次。 第8行負責秒數的計數第10~14行負責分鐘數的計數第16~20行負責小時數的計數。 第8行的敘述將第34行樣式名稱為secCnt底下<SCRIPT>標籤所夾的sec秒數加一。 JavaScript 計事器事件

20 第10行判斷計數的秒數是否已達60，若是則執行第11行將秒數顯示為0並在第12行將分鐘數加一，第13行將秒數計數的sec重新歸零。
第16行判斷計數的分鐘數是否已達60，若是則執行第17行將分鐘數顯示為0，並在第18行將小時數加一。第19行將分鐘數計數的min重新歸零。 如此就能如讀者在範例預覽看到的顯示來訪者停留的時間了。 JavaScript 計事器事件

21 作業 在你的網頁右上角處，提供『停留時間』的功能。 JavaScript 計事器事件