JavaScript function Part 1


目錄 : 網頁設計學習課程參考

在寫程式的時候, 常會遇到有一些程式碼需要在網頁好幾個不同的重覆使用. 甚至同一段程式在不同的網頁中都需要使用. 雖然我們可以把程式碼用複製貼上的方式複製到其他地方, 但如果過了一陣子之後要修改該段程式碼, 難道又要把程式碼重新用複製貼上的方式複製到所有先前用的地方嗎? 這樣顯然不是很有效率的工作方式. 因此我們現在要向各位介紹如何寫JavaScript的函數 (function). 我們把要重覆使用的程式碼寫在function中, 需要使用該段程式碼的功能時, 只要呼叫該function即可. 如果要修改該段程式碼, 只要修改該function內的部份即可. 只要呼叫function的方式沒改, function呼叫的地方是不用修改的.  修改維護程式的工作會更簡單有效率.

JavaScript function 可用下列語法定義:

           function function_name(parameter_1, parameter_2, ...) {
                  ---要重覆使用的程式碼---
                 return 回傳值;
           }

在JavaScript程式碼中定義function時必須以function關鍵字開始, 隨後接function的名稱. 名稱後需放置一對圓括號( ). 如有輸入的變數, 可放置在圓括號中. 在圓括號後放置一對大括號{  }, 其中放置function的程式碼. 在function結束時, 如有值回傳至原來呼叫function的程式碼時, 可在function最後加上一個return指令. 如沒有值回傳可省略return指令.

範例

在本例子中, 我們定義一名稱為factorial的function, 用以計算階乘函數. 當我們輸入正整數n 時,此function回傳n!. 我們在網頁中將呼叫此function三次, 分別計算3!, 4!, 及5!. 程式碼如下:



執行結果如下:

JavaScript function除了可以直接放在網頁中, 也可以分離出來放在一個*.js 檔.只要在網頁中加入一個script標籤引入該*.js檔即可使用該function.

範例

我們在所用的Aptana Project中點選檔案夾Scripts, 按右鍵新增*.js檔.



把檔案命名為 lesson14a.js.



然後把前一範例中的function fractorial複製至lesson14a.js中.



在網頁中加入一個script標籤引入該*.js檔, 如下圖.


網頁中只需用前一範例中相同的方式呼叫function, 如下圖.


執行結果如下:


PS: 版權所有,侵犯著作權必告.

留言