1.7.1　JavaScript函數

函數用于隔離一組語句，以便程序的其他部分能夠使用這些代碼。函數通常是方法的同義詞，這兩個術語可以交換使用。它們之間有些不同，但其區別在本書中不重要。JavaScript使用兩類函數：一類是已定義好的函數，另一類是自己定義的函數。

要定義自己的函數，需要輸入function關鍵字，后跟函數名和開始、結束圓括號。函數中的語句包含在花括號（{}）內。下面是定義函數的語法：

要使用一個預定義的JavaScript函數，只需要使用函數名，后跟開始和結束圓括號。例如，本章前面已經使用了write()方法、getElementById()方法、open()方法和close()方法，這些都是JavaScript函數的例子。

例1.18使用了自定義函數和預定義函數。為了方便，例1.19再次使用了這些代碼，并討論每類函數的不同特征。

例1.19　兩類函數

我們從函數（或方法）的角度討論這個例子。第17行通過代碼onclick="openWin()"調用第一個函數，即用戶定義的函數openWin()。控制流跳至第5行，即定義函數openWin()的位置。當openWin()被調用時將執行兩條語句，它們分別在第6行和第9行花括號之間的第7行和第8行。第7行的第1條語句調用預定義JavaScript函數open()，在圓括號里的內容定義將傳遞給函數open()的參數（本節稍后將更詳細地討論參數）。函數open()收集的信息存儲在變量smallWindow中，以便可以在程序的其他地方使用。第8行的第2條語句調用預定義JavaScript函數write()，其圓括號里有一些內容。write()函數（或方法）包含程序員不需要看到的指令，這些指令告訴計算機顯示在圓括號里的任何內容。這些信息成為函數open()創建的新窗口內容。

在這兩條語句執行之后，函數openWin()就完成了任務。控制流現在返回到調用函數openWin()的地方，也就是第17行。由于它是第17行的末尾，因此控制流現在前往第18行。

當單擊第二個按鈕時，執行第18行。此時將調用自定義函數closeWin()，控制流前往定義函數closeWin()的第10行。該函數只有一條語句，即調用函數close()簡單地關閉這個小窗口。

JavaScript的預定義函數非常多，這里難以全部列出。隨著本書的進展，我們將使用更多的預定義函數，此外也會學習如何定義自己的函數。Web設計者與Web程序員的主要不同在于：Web設計者可以使用預定義的JavaScript函數，而Web程序員要實際編寫自己的函數代碼！

1.7.1.1　參數

如果從未編寫過任何程序，那么你會對函數名字后面的圓括號感到奇怪。圓括號起什么作用呢？應當放入什么？為什么一些函數在圓括號內有東西，而另一些沒有？放入圓括號內的“東西”稱為參數。這里對這些問題的回答是一般化的，以后要編寫更復雜的函數時再深入討論參數。

一般來說，參數是傳遞給函數的值。函數會做某些事情，可能是做簡單的事情（如例1.19所示的一條關閉窗口的語句），也可能是做許多事情。例如，我們可能編寫一個函數，為用戶的購物車商品計算銷售稅。在這種情況下，這個函數可能將購買總額乘以用戶所在州的銷售稅率。這個函數將對購買了$25.67商品且所在州銷售稅率為4.25%的用戶和購買了$1348.97商品且所在州銷售稅率為7.5%的用戶做相同的事情。當然最后的結果會非常不同，但是使用的程序代碼完全相同。不同在于購買總額和使用的銷售稅率。在偽代碼中，這樣一個函數可能看起來像這樣：

注意這些只是最基本的代碼，實際的程序將輸出貨幣格式并顯示說明。但是重點在于只要知道購買額和銷售稅率，這個函數就能計算出正確的結果。當程序調用這個函數時，它有兩個參數，分別表示用戶的購買額和所在州的銷售稅率。在調用這個函數的語句中，程序員必須把兩個值放入圓括號內。

當調用函數時不僅要包含參數值，還要按正確的次序包含參數值。在這個偽代碼例子中，第一個值必須是購買額，第二個值必須是稅率。如果按錯誤的次序傳遞參數值，那么函數仍然會工作但結果將是不正確的，如例1.20所示。

例1.20　含參數的函數

當執行這個程序時，輸出看起來像這樣：

這個用戶的實際購買總額應該是$100.00*1.065，即$106.50。當按下“Button 1”按鈕時，傳遞給函數的第1個值是100，第2個值是0.065。這個100將存儲在這個函數的變量purchaseAmt中，而0.065存儲在變量taxRate中。第7行計算銷售稅，將100（purchaseAmt）乘以0.065（taxRate）得到tax=6.5。第8行計算總額，把6.5（tax）加上100（purchaseAmt）得到total=106.5。結果是

然而，當按下“Button 2”按鈕時，傳遞給函數的第1個值是0.065，第2個值是100。這個0.065將存儲在這個函數的變量purchaseAmt中，100存儲在變量taxRate中。第7行計算銷售稅，將0.065（purchaseAmt）乘以100（taxRate）得到tax=6.5。但是第8行計算總額時，把6.5（tax）加上0.065（purchaseAmt）得到total=6.565。結果是

這個例子演示了參數的兩個特性，一是使用參數能夠使函數更為通用，二是為函數傳遞多個參數時必須按照正確的次序。例1.20也展示了函數的無效調用方式，它只能計算$100.00購買額在6.5%稅率情況下的總計費用。若想要這個函數計算任何購買額在任何稅率情況下的總計費用，其中一種做法是使用非常有用的JavaScript預定義函數prompt()。

1.7.1.2　prompt()函數

prompt()方法（或函數）提示用戶錄入程序員可以任意處理的值。它顯示一個對話框提示訪客錄入，然后返回string類型的值。這意味著如果用戶錄入一個數字，那么這個數字首先存儲為文本。第2章將學習如何確保用戶能夠錄入適于計算的數字。現在，我們使用prompt()函數得到用戶輸入的文本。prompt()函數的語法如下：

參數message是程序員想要在對話框中顯示的任何信息，而第2個參數是可選的。這個方法執行時將要求用戶輸入回答。例如，可能要求用戶輸入他的名字，從而提示信息可能是"Please enter your name"，并且可能將默認文本區域設置為空白或者"John Doe"。例1.21使用prompt()函數獲得一些用戶信息。

例1.21　使用prompt()方法　下面將結合之前所學的知識，使用prompt()方法讓用戶輸入一種喜愛的食物，并且據此在網頁上顯示一條新信息。

當用戶按下按鈕（第12行)時，將調用自定義函數showPrompt()。然后控制前往定義函數showPrompt()的第4行，而第6行調用函數prompt()。該提示對話框上的信息是“What’s your favorite food?”，并且包含默認答案“carrots and celery”。然而，當用戶輸入新的喜愛食物時，將存儲在變量food中。第7行通過使用document對象、一個點和write()方法在網頁上顯示新信息。新信息的內容是文本和變量值的組合。開始時這個頁面看起來像這樣：

然后在按下按鈕之后，提示如下：

如果用戶在提示中錄入pizza，頁面將會顯示

但是如果用戶錄入cake，頁面將會顯示