返回列表 上一主題 發帖

[教學] (教學第8篇)JavaScript 函式

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1195 
主題
395 
精華
113 
積分
1747 
點名
0  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2025-5-11 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2010-5-10 01:28 | 只看該作者

[教學] (教學第8篇)JavaScript 函式

函式的撰寫可以說是JavaScript程式的核心，所謂函式(function)就是將會經常撰寫而重複執行的程式敘述區塊封裝起來成為一獨立的程式單元，以便增進程式的執行效能與節省程式開發的時間。

函式撰寫格式
  1. function 函式名稱(參數1,參數2…)
  2. {
  3.   函式程式區塊
  4. }
複製代碼

  • 要撰寫函式必須使用function這個保留字來宣告函式。
  • 必須指定函式的名稱，若我們要使用函式，則我們必須呼叫此函式名稱。
  • 在函式『（）』括號內給予指定參數，此參數是我們呼叫函式時所傳遞的訊息資料，在該函式內使用該參數就如同使用變數一般。
  • 在函式『{}』大括號內所撰寫的程式敘述只在函式被呼叫使用時方會執行。


呼叫函式
假設我們撰寫了一個函式如下：
  1. function myfunction()
  2. { document.write(“歡迎光臨!!”) ;}
複製代碼
這個函式若單純的放置在HTML文件中將是毫無意義的，因為：函式沒有被呼叫使用，則函式內的程式敘述是不會被執行的！如果要使函式內的程式碼被執行，則我們必須呼叫該函式：
  1. <HTML>
  2. <HEAD>
  3. <TITLE>呼叫函式</TITLE>
  4. </HEAD>
  5. <BODY>

  7. <SCRIPT Language="JavaScript">
  8. function myfunction()
  9. {
  10. document.write("歡迎光臨!!");
  11. }
  12. myfunction(); //呼叫函式
  13. </SCRIPT>

  15. </BODY>
  16. </HTML>
複製代碼
由上例我們可以清楚的了解：若想要執行某個函式，只要直接呼叫其名稱即可！

帶有參數的函式
在上一小節的myfunction()函式中，我們並沒有使用『參數』，也就說：myfunction()函式的內容（輸出問候語：歡迎光臨!!）永遠是固定而不會變化的，因為我們並沒有一個令函式產生變化的『參數(變數)』！  為了使函式能有多樣化的效能，所以我們必須善加利用函式的『參數』：
  1. <HTML>
  2. <HEAD>
  3. <TITLE>含有參數的函式</TITLE>
  4. </HEAD>
  5. <BODY>

  7. <SCRIPT Language="JavaScript">
  8. function myfunction(msg)
  9. {
  10. document.write(msg);
  11. }
  12. myfunction("歡迎光臨!!"); //呼叫函式
  13. myfunction("親愛的網友"); //呼叫函式
  14. </SCRIPT>

  16. </BODY>
  17. </HTML>
複製代碼
在本例中：

  • 我們為函式指定了一個參數msg，因此在函式的程式敘述中將不會是輸出一段固定的字串，輸出的資料內容將隨參數msg而改變。
  • 程式碼第12行，第一次呼叫函式時我們指定了一個參數值『歡迎光臨!!』給函式的參數msg，此時函式內的程式敘述幫我們輸出了『歡迎光臨!!』這段字串。
  • 程式碼第13行，再次呼叫函式，此時我們指定了另一個參數值『親愛的網友』給函式的參數msg，此時函式內的程式敘述幫我們輸出了『親愛的網友』這段字串，相同的資料輸出動作，但是輸出的結果卻是不同的。


函式的回傳值
參數的傳遞並非是單向的，我們可以在呼叫函式時傳遞資料給函式，相對的，函式也可以傳遞資料給函式本身以外的程式或函式，怎麼讓函數有回傳值呢？很簡單，只要在函數結束之前，值行下列格式的敘述即可。
  1. 函式名 = 欲傳遞的回傳值
複製代碼
例如：我們撰寫一個f(x)=x*2+x的函式。
  1. function f(x)
  2. {
  3. f = x*2 + x;
  4. }
複製代碼
在上例子中函式的名稱為f，同時含有一個參數x，因為我們希望函式能傳回運算式的算結果，所以直接將『x^2+x』的運算結果指定給函數名稱f！

變數的宣告
在之前的學習應用中，當我們要使用變數時都是直接拿來就用，例如：
  1. x = “練習題”;
複製代碼
其實，這是我們簡略了『宣告』的動作，實際上，凡是要使用變數就必須先進行變數的宣告，正確的變數使用方式如下：
  1. var x;
  2. x = “練習題”;
複製代碼
上列敘述中的『var』即為『宣告』的意思，如果我們沒有先行宣告變數就直接使用，那我們所使用的這個變數，JavaScript就直接將它歸類為『全域(Global)』變數！全域變數是任何屬於程式的物件都可以利用的，相對於全域變數還有另一種變數類型稱為：『區域(Local)變數』，區域變數的影響範圍就比較小，只限於宣告變數的函式內有效，當離開程式的執行函式返回主程式時，區域變數就會從記憶體中被釋放掉，那我們該如何宣告全域及區域變數呢？其關鍵就在於變數宣告的位置！
例如：
  1. <HTML>
  2. <HEAD>
  3. <TITLE>全域變數</TITLE>
  4. </HEAD>
  5. <BODY>

  7. <SCRIPT Language="JavaScript">
  8. test=5;
  9. myfunction(10);
  10. document.write(test);
  11. function myfunction(num)
  12. {
  13. test=num*2+num;
  14. }
  15. </SCRIPT>

  17. </BODY>
  18. </HTML>
複製代碼
請問：上例中最後的變數test輸出值為多少，當然不會是『5』了！因為test變數在此為全域變數任何屬於程式的物件都可以利用的，因此，呼叫函式後，變數test就被指定為函式運算結果「30」，而不是原來的「5」了！那怎麼辦呢？我們可以將程式改成這樣：
  1. <HTML>
  2. <HEAD>
  3. <TITLE>區域變數</TITLE>
  4. </HEAD>
  5. <BODY>

  7. <SCRIPT Language="JavaScript">
  8. test=5;
  9. myfunction(10);
  10. document.write(test);
  11. function myfunction(num)
  12. {
  13. var test;
  14. test=num*2+num;
  15. }
  16. </SCRIPT>

  18. </BODY>
  19. </HTML>
複製代碼
如此一來，test變數值就依然維持為「5」，這代表我們在函式內所宣告的test變數跟函式之外的變數test一點關係都沒有！也就是說雖然變數名稱都是「test」，但是在函式內所使用的「test」是個區域變數，而函式外所使用的「test」則是一個全域變數！

提示：
當我們在函式中使用變數時，請儘量使用var來宣告變數，以必避免函式在執行過程中意外的改變了全域變數而造成整體程式執行的錯誤！
收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

        靜思自在 : 世上有兩件事不能等：一、孝順 二、行善。
返回列表 上一主題