• 函數(shù)：

獨(dú)立于主程序的、具有特定功能的一段程序代碼塊。

  • 函數(shù)的定義：

格式：
function 函數(shù)名([參數(shù)[,參數(shù)...]]){
     <語句組>
     [return <表達(dá)式>；]
}

約定：
1、函數(shù)名：易于識(shí)別；（同變量命名規(guī)則）
2、程序代碼：模塊化設(shè)計(jì)；
3、函數(shù)位置：按邏輯順序，集中置頂。（<head>...</head>）

  • return語句：

格式：
return <表達(dá)式>；

功能：返回表達(dá)式的值。

  • 函數(shù)的調(diào)用：

格式：
函數(shù)名([參數(shù)[,參數(shù)...]])

例1：
<Script>

function showName(name){
     document.write ( "我是" + name );
}

showName("黃雅玲");

</Script>

例2：
<Script>

function showName(name){
     str="我是" + name;
     return str;
}

document.write(showName("黃雅玲"));

</Script>

  • 事件：

    用戶對(duì)瀏覽器所做的特定的動(dòng)作（操作），是實(shí)現(xiàn)交互操作的一種機(jī)制。

事件名稱 適用對(duì)象 意義 說明
Abort image 終止 當(dāng)圖形尚未完全加載前
Blur
失去焦點(diǎn)
Change t/pw/ta/select 改變
DragDrop window 拖曳
Error
img/win 錯(cuò)誤加載文件或圖形時(shí)發(fā)生錯(cuò)誤
Focus
取得焦點(diǎn)
Move window 移動(dòng)
Reset form 重置
Submit form

Click/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove
  • 事件處理程序：

瀏覽器響應(yīng)某個(gè)事件，實(shí)現(xiàn)用戶的交互操作而進(jìn)行的處理（過程）。

  • 事件處理程序的調(diào)用：

    瀏覽器等待用戶的交互操作，并在事件發(fā)生時(shí)，自動(dòng)調(diào)用事件處理程序（函數(shù)），完成事件處理過程。

    HTML標(biāo)簽屬性：

    格式：
    <tag on事件=“<語句組>|<函數(shù)名>”>

    例1：
    <body onload="alert('建議瀏覽器的分辨率：800x600');">
    <body onload="var str='建議瀏覽器的分辨率：800x600';alert(str);">

    例2：
    <script>
    function show(){
         var str="建議瀏覽器的分辨率：800x600";
         alert(str);
    }
    </script>
    <body onload="show();">

    對(duì)象屬性：

    格式：
    對(duì)象名.on事件=<語句>|<函數(shù)名>

    例1：
    document.    onload=alert("建議瀏覽器的分辨率：800x600");

    var str="建議瀏覽器的分辨率：800x600";
    document.onload=alert(str);

    例2：
    <script>
    function show(){
         var str="建議瀏覽器的分辨率：800x600";
         alert(str);
    }
    document.onload=show();
    </script>

例1：
<Body>
<FORM>
請(qǐng)輸入基本資料：<BR>
姓名：
<INPUT TYPE="text" NAME="usr" SIZE="8">
<INPUT TYPE="button" VALUE=" 請(qǐng)單擊" onClick="alert('謝謝你的填寫...')">
</Body>

例2：
<Script>
function handelError(img){
     msg = "有一圖文件，名為： \'" + img.name + "\'\n無法順利顯示，請(qǐng)通知系統(tǒng)管理人員" + "，敬備薄禮相送。";
     alert(msg);
}
</Script>

<IMG SRC="abc.gif" NAME="中國(guó)電信的廣告" onError="handelError(this)">

例3：
<Body>
<A onMouseOver="status='最棒的學(xué)習(xí)網(wǎng)站';return true;" onMouseOut="status='完畢'">文哥網(wǎng)絡(luò)技術(shù)學(xué)習(xí)網(wǎng)</A>
</Body>

例4：
<Body>
<FONT STYLE="cursor:hand" onClick="location='http://www.hubert.idv.tw/'" onMouseOver="status='最棒的在線學(xué)習(xí)網(wǎng)站'; this.color='red';return true;" onMouseOut="status='完畢'; this.color='blue';">文哥網(wǎng)絡(luò)技術(shù)學(xué)習(xí)網(wǎng)</FONT>
</Body>

例5：
<Script>
function mOver(object,msg){
    status = msg;
    object.color = "red";
    object.face = "華文楷體";
}

function mOut(object){
    status = '完畢';
    object.color = "blue";
    object.face = "幼圓";
}
</Script>

<Body>
<FONT STYLE="cursor:hand" onClick="location='http://www.hubert.idv.tw/'" onMouseOver="mOver(this,'最棒的線上學(xué)習(xí)網(wǎng)站'); return true;" onMouseOut="mOut(this)">文哥網(wǎng)絡(luò)技術(shù)學(xué)習(xí)網(wǎng)</FONT>
</Body>

例6：
<STYLE> A {text-decoration:none} </STYLE>

<BODY>
搜尋引擎：<BR>

<IMG SRC="images\snow1.gif" NAME=gif_1>
<A onMouseOver="document.gif_1.src='images\\snow.gif'" onMouseOut="document.gif_1.src='images\\snow1.gif'">蕃薯藤</A>< BR>

<IMG SRC="images\snow1.gif" NAME=gif_2>
<A onMouseOver="document.gif_2.src='images\\snow.gif'" onMouseOut="document.gif_2.src='images\\snow1.gif'">奇摩站</A>
</BODY>

例7：
<Script>

var url = new Array(3);
url[0] = "http://www.yam.org.tw/";
url[1] = "http://www.kimo.com/";
url[2] = "http://chinese.yahoo.com/";

function goto(i) {
     location = url[i];
}

</Script>

<table width=250><tr><td>
<form><fieldset>
<legend>搜尋引擎</legend>
<input name="go" type="radio" onClick="goto(0)">蕃薯藤
<input name="go" type="radio" onClick="goto(1)">奇摩
<input name="go" type="radio" onClick="goto(2)">中文雅虎
</fieldset></form>
</table>
　
  • 定時(shí)器：（延遲器）

用以指定在一段特定的時(shí)間后執(zhí)行某段程序。

  • setTimeout()：（1.0版）

格式：

[定時(shí)器對(duì)象名=] setTimeout(“<表達(dá)式>”，毫秒)

功能：執(zhí)行<表達(dá)式>一次。



例1：
<Script>

function count() {
     setTimeout("alert('三秒到了')",3000)
}

</Script>

<INPUT TYPE="button" VALUE=" 計(jì)時(shí)開始" onClick="count()">

例2：
<Script>

function show() {
     document.all['news'].style.display = "";
     setTimeout("hide()",500);
}

function hide() {
     document.all['news'].style.display = "none";
     setTimeout("show()",500);
}

</Script>

<Body onload="show()">
最新消息：<FONT ID="news" STYLE="display:none">十面埋伏...</FONT>
</Body>

  • clearTimeout()：終止定時(shí)器

格式：

clearTimeout(定時(shí)器對(duì)象名)

  • setInterval()：（1.2版）

格式：

[定時(shí)器對(duì)象名=] setInterval(“<表達(dá)式>”，毫秒)

功能：重復(fù)執(zhí)行<表達(dá)式>，直至窗口、框架被關(guān)閉或執(zhí)行clearInterval。

  • clearInterval()：終止定時(shí)器

格式：

clearInterval(定時(shí)器對(duì)象名)

例1：
<Script>

var sec = 0;
timerID = setInterval("count()",1000);

function count() {
     num.innerHTML = sec++;
}

</Script>

停留時(shí)間：
<FONT ID="num" FACE="impact">0</FONT>秒鐘
<INPUT TYPE="button" VALUE="停止" onClick="clearInterval(timerID)">

例2：
<Script>

var str = "這是一個(gè)在線拍賣的網(wǎng)站，請(qǐng)盡情血拼吧！";
var seq = 0;

function scroll() {
     msg = str.substring(0, seq+1);
     banner.innerHTML = msg;
     seq++;
     if (seq >= str.length) seq = 0;
}

</Script>

<Body onLoad="setInterval('scroll()',500)">
<FONT ID="banner"></FONT>
</Body>
　
  • 圖像對(duì)象：

網(wǎng)頁中的圖像均會(huì)被自動(dòng)看作圖像對(duì)象，并依順序，分別表示為document.images[0]，document.images[1]...

  • 建立圖像對(duì)象：

格式：

圖像對(duì)象名稱=new Image([寬度],[高度])　　　//px

  • 圖像對(duì)象的屬性：

border complete height hspace lowsrc name src vspace width

  • 圖像對(duì)象的事件：

onAbort onError onKeyDown onKeyPress onKeyUop onLoad

例1：（預(yù)載）
<Script>

img0 = new Image();
img0.src = "images/snow0.gif";

img1 = new Image();
img1.src = "images/snow1.gif";

document.write ("已經(jīng)讀取兩個(gè)圖文件，但此時(shí)不顯示。");

</Script>

例2：
<Script>
function img-preload(idx){
     eval("img"+idx+" = new Image()");
     eval("img"+idx+".src = 'images/snow"+idx+".gif'");
}

img-preload(0);
img-preload(1);
document.write ("已經(jīng)讀取兩個(gè)圖文件，但此時(shí)不顯示。");

</Script>

例3：
<Script>
function img-preload(imgname,idx){
     eval("img"+idx+" = new Image()");
     eval("img"+idx+".src = 'images/"+imgname+".gif'");
}

img-preload("snow0",0);
img-preload("snow1",1);
document.write ("已經(jīng)讀取兩個(gè)圖文件，但此時(shí)不顯示。");

</Script>



ExtJS教程- Hibernate教程-Struts2 教程-Lucene教程