功能函數

電腦於物理治療運用 >> JavaScript 語法 >> 文件的編輯 / 變數的運用 / 視窗的變化 / 滑鼠的控制 / 功能函數 / 條件函數 / 迴圈的使用 / JavaScript 製作特效 /   

　

功能函數是指先定義一個含有一個或多個 JavaScript 程式的次程式 (subprogram)，然後在文件中其他位置輸入執行該功能函數的指令，就可以不斷的執行此一次程式。 這樣可以簡化整個程式的內容。功能函數的運用頗多，無法一一列舉，本節就介紹幾個簡單的功能函數如下：

設定文件
設定視窗
產生提示匣
產生動畫效果
使用不同框架

功能函數包括定義與執行兩部份：

  • 功能函數定義的指令為 function、後面加上功能函數名稱、空白小括號 ( )、 再加上 { } 來定義函數內容，即完成功能函數之定義。如與變數結合，則將變數名稱置於括號內，再由 { } 來定義變數的意義，。
  • 功能函數執行時，只要於需要的地方鍵入此功能函數名稱即可。

    • 無論是定義或執行功能函數，皆須置於 <script> </script> 之間。 通常在 <head> <head> 中先行定義，使該功能函數在網頁開啟時就可以儲存在記憶體中，而能於 <body> </body> 中隨意執行，無需重複撰寫該功能函數的定義。

    設定文件的功能函數

    　

    設定文件的指令為 document.method，其相關的指令操作，如 document.write (編輯文字)等， 請詳見「文件的編輯」一節。

    如果只是一個簡單的功能函數，且只有使用一次，則亦可將定義與執行程式均置於 <body> </body> 之間所需要的地方。詳見「重複三次」 與「大叫三聲」二例。

    功能函數可與變數結合，在小括號內註明變數名稱，即 (變數名稱)，再由 { } 來定義該變數的意義。執行此功能函數時，鍵入此功能函數名稱，並在括號內置變數的對應值， 則此對應值會直接傳到功能函數的變數內，以使該功能函數執行。 詳見「五彩文字」的例題。

    用途 JavaScript 語法 實例
    句子重複數次，或相同的句子在文章的不同地方出現。 <script language=javascript>
    function 功能函數名稱( ) {document.write("字串")}
    功能函數名稱( )
    功能函數名稱( )
    功能函數名稱( )
    </script>    		 重複三次
    在 <head></head>間編輯含有變數的文字編輯功能函數，而在<body></body>間使用時，只須改變變數對應值，即可編輯不同的文字。 <head>
    <script language=javascript>
    function 功能函數名稱(變數名稱) {document.write(變數名稱)}
    </script>
    </head>
    <body>
    <script language=javascript>
    功能函數名稱(變數對應值一)
    功能函數名稱(變數對應值二)
    </script>
    </body>    		 大叫三聲
    編輯重複數個句子，使每一句的前半段使用固定文字，而後半段為不同文字。 <script language=javascript>
    function 功能函數名稱(變數名稱) {
    document.write("固定字串" + 變數名稱)
    }
    功能函數名稱(變數對應值一)
    功能函數名稱(變數對應值二)
    </script>    		 五彩文字
    滑鼠經過時，會改變主體背景顏色。 <script language=javascript>
     function 功能函數名稱 {document.bgColor=color }
    </script>
    <form>
    <input type=button onmouseover="功能函數名稱">
    </form>
    		政黨顏色
    滑鼠經過時，圖片會改變；滑鼠離開時，圖片會變回來。 <script language=javascript>
    function 功能函數名稱一( ){document.圖檔名稱.src="圖檔二"}
    function 功能函數名稱二( ){document.圖檔名稱.src="圖檔一"
    }
    </script>
    <a href="原網頁位址" onmouseover="功能函數名稱一( )"
         onmouseout="功能函數名稱二( )" >
    <img src="圖檔一" border=0 name="圖檔名稱"
             width=圖檔寬度 height=圖檔高度>
    </a>
    		快樂臉變化

      back to top

    設定視窗變化

    　

    設定視窗變化，可以是改變視窗的規格或控制視窗相關的參數，詳見「視窗的變化」一節。 功能函數可設定與視窗變化相關的指令如下：

  • 開啟視窗： window.open 指令
  • 關閉視窗： window.close 指令
  • 狀態列變化： window.status 指令
    • 用途 JavaScript 語法 實例
    在按鈕上按一下，會出現小視窗，連結至現存的網頁。 <script language=javascript>
    function 功能函數名稱( ) {
    功能函數名稱=window.open("小視窗位址","小視窗名稱",
        "toolbar=no,menubar=no,directories=no,
        status=no,scrollbars=yes,resize=no,width=200,height=150")
    }
    <form>
    <input type=button value=按鈕上文字 onclick=功能函數名稱( )>
    </form>
    </script>    		 再次提醒你
    猜猜我是誰
    在按鈕上按一下，會出現小視窗，連結至虛擬的網頁。
    open(' ',小視窗名稱,小視窗規格)之 ' ' 表示開一新空白網頁。    		 <script language=javascript>
    function 功能函數名稱( ) {
    變數名稱 = open("","小視窗名稱","toolbar=no,directories=no,menubar=no");
    變數名稱.document.write("新網頁內容字串");
    }
    <form>
    <input type=button value=按鈕上文字 onclick=功能函數名稱( )>
    </form>
    </script>    		 武林密笈
    在超連結上按一下，會出現小視窗； 而且小視窗所連結的網頁可視情況設定不同的連結，這樣才不會開啟太多小視窗。 <script language=javascript>
    function 功能函數名稱(變數名稱) {
    window.open(變數名稱,"小視窗名稱",
        "toolbar=no,menubar=no,directories=no,
        status=no,scrollbars=yes,resize=no,width=500,height=150")
    }
    <a href="javascript:功能函數名稱('小視窗位址')">
    超連結文字
    </a>
    </script>    		 解釋名詞
    設定時間，自動更換狀態列文字。 如更換之字串為空白，則代表自動清除狀態列文字。
    setTimeOut( )為設定時間自動執行指令，其中時間設定之單位為毫秒數。
    return true 表示主網頁不變更的意思。    		 <script language=javascript>
    function 功能函數名稱一( ) {
    window.status = 狀態列文字一;
    setTimeout("功能函數名稱二( )",毫秒數)
    }
    function 功能函數名稱二( ) {
    window.status = 狀態列文字二
    }
    </script>
    <a href=" "  onmouseover="功能函數名稱一( ); return true;">
    超連結文字或圖片
    </a>    		 自動清除
    按不同按鈕時，狀態列出現不同的文字變化。 <script language=javascript>
    function 功能函數名稱(變數名稱) {window.status = 變數名稱}
    </script>
    <form>
    <input type=button value=按鈕文字一
               onclick="功能函數名稱('文字一')">
    <input type=button value=按鈕文字二
               onclick="功能函數名稱('文字二') ">
    </form>    		 提醒文字
    貼身情人

      back to top

    產生提示匣

    　

    提示匣的指令為 alert("訊息文字")，是一個以對話視窗 (dialog) 的方式，出現想要告知的簡短訊息，並有一個「確定」的按鈕，與瀏覽者互動。詳見視窗的變化之 「出現提示匣」一節。 提示匣可以用按鈕 (<input>) 指令、超連結 (<a>)、或 <body> 指令來呼叫。

    用途 JavaScript 語法 實例
    在按鈕上按一下，會出現提示匣。 <script language="javascript">
     function 功能函數名稱( )
           {alert("提示匣文字")}
    </script>
    <form>
    <input type=button value="按鈕文字" onclick="功能函數名稱( )">
    </form>    		 按按看
    在按鈕上按一下，會出現提示匣告訴你計算的結果。 <script language= " javascript ">
    function 功能函數名稱( ){
    var x=數字一;
    var y=數字二;
    var 變數名稱 = x * y;
    alert(變數名稱);
    }
    </script>
    <form>
    <input type=button value="按鈕文字" onclick="功能函數名稱( )" >
    </form>    		 九九乘法表
    按超連結會出現提示匣，再連結至新網頁。 若希望螢幕僅出現提示匣，則超連結至本頁網址。 <script language=javascript>
    function 功能函數名稱( ) {alert('提示匣文字')}
    </script>
    <a href="新網頁位址" onclick="功能函數名稱( )">
    超連結文字
    </a>    		 你知道嗎？
    你累了嗎？
    提示匣功能
    填入文字，按 enter 後，填入文字會出現在提示匣內。
    this.value 指輸入之文字。    		 <script language="javascript">
    function 功能函數名稱(變數名稱) {alert(變數名稱 + "其他文字")}
    </script>
    <form>
    <input type=text onblur="功能函數名稱(this.value)">
    </form>    		 輸入名字
    輸入文字再按按鈕後，會出現含有該輸入文字的提示匣。 <script language=javascript>
    function 功能函數名稱(變數名稱) {
        alert(變數名稱.按鈕名稱.value+ "其他文字")}
    }
    </script>
    <form>
    <input type=text   name="按鈕名稱">
    <input type=button  onclick="功能函數名稱(this.變數名稱)">
    </form>    		 恭喜中獎
    在超連結上按一下，先出現含變數的提示匣，再進行超連結。 <script language=javascript>
    function 功能函數名稱(變數){alert('變數')}
    </script>
    <a href="新網頁網址" onclick="功能函數名稱(變數對應值 )">
    超連結字串</a>    		 你成功了

      back to top

    產生動畫效果

    　

    動畫製作需使用動畫製作軟體，但運用 JavaScript 的 OnMouseOver 與 OnMouseOut 也可以產生簡易的動畫效果。

    用途 JavaScript 語法 實例
    先指定一張空白底色圖片，當滑鼠經過時，更換原來圖片為新圖片，造成圖片出現的效果。 而滑鼠移開時，將新圖片更換為空白圖片，則新圖片會消失。 <head>
    <script language=javascript>
    變數一 = "空白圖片路徑"
    變數二 = "新圖片路徑"
    function 功能函數一(變數三){變數三.src = 變數二}
    function 功能函數二(變數三){變數三.src = 變數一}
    </script>
    </head>
    <body>
    <img name=圖片名稱 border=0 src="空白圖片路徑">
    <a onMouseOver="功能函數一(圖片名稱)"
        onMouseOut="功能函數二(圖片名稱)">
    超連結
    </a>
    </body>    		 出現右箭頭

      back to top

    使用不同框架的功能函數

    　

    框架指令為 <frame>，是分割數個可分別讀取 HTML 檔案的視窗，任一框架內設定的功能函數，均可與其他框架相互分享。

    用途 JavaScript 語法 實例
    　 　 　

      back to top

    本網頁於 02/22/2002 製作，並於 11/03/2005更新 © 2003 版權為柴惠敏所有，如需引用請先告知