數位書香: (13)事件處理器下篇

Onload事件
Onlaod事件最常應用於網頁載入時，而事件控制器就加在<BODY>標籤內，其應用如下。

<BODY OnLoad="JavaScript程式敘述或呼叫函式">

其實，Onlaod事件也可以應用於頁框、影像載入時，應用在頁框時就將事件控制器就加在<FramSET>標籤內，而應用在影像時就將事件控制器就加在<IMG>標籤內

//當頁框載入時呼叫init()函式
<frameset onload="init()">
//當影像載入時呼叫imgload()
<img src="home.gif" onload="imgload()">

複製代碼

實做學習
使用OnLoad事件控制器，讓網頁載入時蹦現一個訊息視窗。

HTML>
<HEAD><TITLE>OnLoad事件</TITLE></HEAD>
<BODY OnLoad="alert('網頁開始載入')">
訊息視窗出現在網頁載入!!
</BODY>
</HTML>

OnUnLoad事件
在當你離開目前瀏覽的網頁時，OnUnLoad 事件就會被引發，這裡所謂的『離開』可能是你點選了網頁中的超鏈結進行其他網頁文件的連結瀏覽動作、選擇前往上一個曾經瀏過的網頁(回到前一頁)、選擇前往下一個曾經瀏過的網頁（前往下一頁）以及關閉瀏覽視窗。

OnUnLoad="JavaScript程式敘述或呼叫函式"

最常見的應用例子就是當瀏覽者離開網頁時，蹦出一個訊息視窗，而在訊息視窗中則顯示一些感謝的話：

<HTML>
<HEAD><TITLE>OnUnLoad事件</TITLE></HEAD>
<BODY OnUnLoad="alert('感謝您的光臨!!\n歡迎有空常來捧場')">
當你離開本網頁將出現感謝視窗!!
</BODY>
</HTML>

setTimeout()定時器
setTimeout()是在JavaScript中的一種計算事件執行時間的方法，主要的目的在指定延遲函數或敘述的執行，其使用格式如下：

SetTimeout(“code”,interval);

SetTimeout(“欲執行的程式碼或函式”,等待時間);

code：在指定的等待時間結束後所要執行的程式碼或函式呼叫。
interval：指定執行setTimeout()內程式碼或函式呼叫的等待時間。
setTimeout()方法的『Interval（等待時間）』設定值的每個單位等於1/1000秒，因此，若我們希望一秒鐘後執行setTimeout()內程式碼或函式呼叫時，則我們必須將setTimeout()方法的『Interval（等待時間）』設定值設為1000，也就是1000 x 1/1000 =1秒。

實做學習
使用OnLoad事件控制器與setTimeout()方法，讓網頁狀態列中產生字串文字跑馬燈。

<HTML>
<HEAD><TITLE>狀態列跑馬燈</TITLE></HEAD>
<SCRIPT Language="JavaScript">
//將出現在狀態列的訊息文字字串
msg="這是一個簡易的狀態列跑馬燈"
//預設開始顯示的字串長度
txt=0;
//跑馬燈函式
function statustxt()
{
//在狀態列加入訊息指定長度的訊息字串
status = msg.substring(0, txt+1);
//將顯示的文字長度加1
txt=txt+1;
//當完整的訊息文字顯示完畢後
//再重新開始逐字加入顯示
if ( txt >= msg.length )
{ txt=0; }
//重複執行函式
setTimeout("statustxt()", 200);
}
</SCRIPT>
<BODY onLoad="statustxt()">
</BODY>
</HTML>

程式碼第12行，.substring(begin,end)：擷取起始與結束數值間的文字。
程式碼第17行，msg.length代表取得變數msg的字元長度。

進階研究
使用OnLoad事件控制器與setTimeout()方法，讓網頁狀態列中產生一個即時的小鬧鐘，本例將時間字串的組合（statclock()函式）及顯示時間字串於狀態列（statustxt()函式）的功能分別寫成兩個函式。

<HTML>
<HEAD><TITLE>狀態列小時鐘</TITLE></HEAD>
<SCRIPT Language="JavaScript">
//取得現在時間函式
function statclock()
{
now = new Date();
//取得時間"小時"
hours = now.getHours();
//取得時間"分鐘"
minutes = now.getMinutes();
//取得時間"秒"
seconds = now.getSeconds();
//如果取得的小時時間數值大於12點則下午,反之則顯示上午
timeValue = (hours >= 12) ? "下午 " : "上午 "
//如果取得的小時時間數值大於12點則代表下午
//為了顯示12小時制,所以,若如果取得的小時時間數值大於12點則減12
timeValue += ((hours > 12) ? hours - 12 : hours) + " 點";
//為了顯示"兩位數"的分鐘時間,所以,若取得的分鐘時間數值小於10
//則在前方加上"0"
timeValue += ((minutes < 10) ? " 0" : " ") + minutes + " 分";
//為了顯示"兩位數"的秒時間,所以,如果取得的秒時間數值小於10
//則在前方加上"0"
timeValue += ((seconds < 10) ? " 0" : " ") + seconds + " 秒";
}
//狀態列小時鐘函式
function statustxt()
{
statclock();
//將時間字串資料顯示於狀態列中
status = timeValue;
//重複執行狀態列小時鐘函式
setTimeout("statustxt()", 1000);
}
</SCRIPT>
<BODY onLoad="statustxt()">
</BODY>
</HTML>

程式碼第7行，利用new建構子建立時間日期物件now()。
程式碼第9行，利用時間日期物件的getHours()方法擷取時間「小時」。
程式碼第11行，利用時間日期物件的getMinutes()方法擷取時間「分鐘」。
程式碼第13行，利用時間日期物件的getSeconds()方法擷取時間「秒」。
程式碼第15行，timeValue是一個裝載我們要顯示在狀態列的小時鐘字串變數，我們並未在函式內利用var關鍵字宣告timeValue變數，因此程式中任何的函式都可以取用這個變數內的資料。在此行程式敘述中，我們利用if判斷敘述來決定小時鐘該顯示「上午」或「下午」，如果取得的小時時間數值大於12則下午,反之則顯示為「上午」。
程式碼第18行，如果取得的小時時間數值大於12點則代表下午，為了顯示12小時制,所以,若如果取得的小時時間數值大於12點則減12，並且將「時」間字串資料串接到timeValue變數中。
程式碼第21行，為了顯示"兩位數"的「分」鐘時間，所以，若取得的「分」鐘時間數值小於10則在前方加上"0"，然後將「分鐘」時間字串資料串接到timeValue變數中。
程式碼第24行，為了顯示"兩位數"的「秒」時間，因此，如果取得的「秒」時間數值小於10則在前方加上"0"，然後將「秒」時間字串資料串接到timeValue變數中。
程式碼第32行，將statclock()函式中所完成的時間字串資料（timeValue變數內的資料）顯示於狀態列中。
程式碼第34行，利用setTimeout()方法重複執行狀態列小時鐘函式，動態地在狀態列中顯示即時的時間。

Powerpoint

2019年3月22日星期五

(13)事件處理器下篇

沒有留言:

張貼留言

版權宣告

Powerpoint

2019年3月22日 星期五

(13)事件處理器 下篇

沒有留言:

張貼留言

2019年3月22日星期五

(13)事件處理器下篇