DIV CSS 佈局教程網

今天開始MooTools系列教程的第4講。如果你還沒有看過上一講，請先查看上一篇教程《Mootools 1.2教程(3)——數組使用簡介》。今天我們先不講MooTools，而是講一講JavaScript中的函數（function）的基本知識。

但是，為了符合MooTools這個主題，你需要知道在哪裡該使用MooTools的函數。此前，我們已經在我們的所有示例代碼中，把代碼都放在domready方法中。當我們需要把它放在domready的外面時，我們使用了函數（function）。在你在domready裡面調用函數之前，函數並不會被執行。

一般來說，一種比較好的方式是盡可能地把你的函數代碼都放在頁面之外的某一個地方，然後通過JavaScript應用來調用它們。當你只是寫代碼玩玩，可能把所有的東西寫在一個頁面上更容易一些。在這個教程中，我們使用下面的約定：

參考代碼： [復制代碼] [保存代碼]

1. <script type="text/javascript">
2. /*
3.  * 函數定義寫在這裡
4.  */
5.  
6. window.addEvent('domready', function() {
7.     /*
8.      * 函數調用寫在這裡
9.      */
10. });
11. </script>

所有的例子都遵循這個格式，當頁面載入的時候（load）執行函數代碼。在每個函數的下面，都有一個相應的按鈕，你可以點擊它們，然後看到結果。這是通過使用MooTools的事件處理來完成的，明天我們將會講到這個。

函數基礎

在JavaScript中，有幾種方式來定義函數，由於我們的主題是講解MooTools，因此我們將選擇MooTools的首選方式。下面的示例是一個函數定義的開始。我們什麼了一個變量，並命名為simple_function，並吧這個變量定義為一個函數：

參考代碼： [復制代碼] [保存代碼]

1. var simple_function = function(){

然後我們給這個函數增加了一個alert語句，當函數被調用的時候就會執行：

參考代碼： [復制代碼] [保存代碼]

1. alert('This is a simple function');

最後，我們以一個花括號結束這個函數的定義：

參考代碼： [復制代碼] [保存代碼]

1. }

這個關閉花括號看起來是一件非常簡單的事情，但是很多時候要追蹤這個問題卻是一件很痛苦的事情。因此，適度地強迫對函數定義的關閉符號進行檢查是個不錯的主意。

在下面的例子中，我們把它們組合起來了。在聲明這個函數之後，我們在頁面加載後的domready事件裡面添加了對這個函數的調用。可以點擊例子下面的按鈕查看調用函數simple_function();後的結果。

參考代碼： [復制代碼] [保存代碼]

1. // 定義simple_function為一個函數
2. var simple_function = function(){
3.     alert('This is a simple function');
4. }
5.  
6. window.addEvent('domready', function() {
7.     // 當頁面加載後調用simple_function
8.     simple_function();
9. });

單個參數

雖然你有很多代碼可以輕松地隨時調用，這已經很有用了，但是如果你可以給它傳遞參數（信息）進行處理，這將會更有用。要在函數中使用參數，你需要在function後面的括號中添加一個變量，就像這樣：

參考代碼： [復制代碼] [保存代碼]

1. var name_of_function = function(name_of_the_parameter){
2.     /* 函數代碼寫在這裡 */
3. }

一旦你這樣做了，在這個函數內部就可以使用這個變量了。盡管你可以給參數取任何你想要的名字，但是讓參數名更有意義是個不錯的選擇。舉個例子來說，如果你要傳遞一個小鎮的名字，可能你把參數命名為town_name比其他更模糊的名字要好一些（