第三課 初探JavaScript魅力-03
函數傳參
上節課的時候我們已經講了什么是函數,實際上,函數在功能上就類似于css的class一樣,將一段代碼包裹起來使用。為了讓函數的功能更加的豐富和實用，我們需要用到的就是函數傳參。我們已經提過，JS將參數放在函數名后的圓括號內，而為了具體說明參數怎么使用，我們舉一個小例子。
我們在HTML頁面中放入一個有顏色的div塊，并加入3個按鈕，其目的是通過點擊按鈕來改變div塊的顏色。通過前面兩節課的學習，我們可以很輕松地寫出下面的代碼來實現這個功能：
效果如下：
可以看到，為了實現這一功能我們一共寫了三個函數，作用分別是讓div塊變綠、變黃、變紅。這三個函數的結構幾乎一模一樣：通過getElementById獲取到div1并賦值給oDiv，然后修改其background屬性，唯一的區別是具體的顏色值不同。所以，有沒有辦法將這三個函數進行合并呢？自然是有的，方法就是我們這節課要講的函數傳參。
這里，我們先將前面講函數的定義和調用那個例子拿過來。
function show()
{ //定義
alert("a");
}
show(); //調用
運行網頁后會固定彈出內容為“a”的窗口。這樣的功能是不是太簡單了？如果我希望它彈出的內容是我給定的內容應該怎么做？答案便是使用參數。
參數的使用方法其實很簡單，在這個例子里，我們在函數的()放入一個num，這個num類似于前面講的變量，名字由編寫者自定，并且函數定義的時候num自身的值是未知的。如何確定num的值呢？在調用函數的時候，在()內輸入的值便是num的具體值。示例如下：
function show(num)
{
alert(num);
}
show(12);
結果如下：
運行程序后，彈出來的窗口值變為了12。我們修改show()里的值，運行結果也會發生相應的變化。于是，我們就可以稱num為函數show()的參數。這個例子我們可以看出，函數參數扮演的是占位符的角色，在定義的時候參數僅僅是占據一個位置而沒有具體的值，其值在函數調用時才被傳入。
值得注意的是，對于一個函數來說，它的參數是可以有很多個的，傳入多個參數時，我們用逗號將參數隔開：
function show(a,b)
{
alert(a+b);
}
show(5,12);
結果如下：
需要注意傳入的值要和參數一一對應（a=5，b=12）。
現在我們就通過傳參的方法將前面的代碼進行合并。我們寫一個統一的函數setColor，并傳入一個color參數（用于決定將div修改為什么顏色），保留前面三個函數的主體部分，只將顏色具體的值修改為color，color具體的值則在button里調用setColor函數時再決定。 修改后的代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1{
width:200px;
height:200px;
background:red;
}
</style>
<script>
function setColor(color){
var oDiv=document.getElementById('div1');
oDiv.style.background=color;
}
</script>
</head>
<body>
<input type="button" value="變綠" onclick="setColor('green');" />
<input type="button" value="變黃" onclick="setColor('yellow');" />
<input type="button" value="變黑" onclick="setColor('black');" />
<div id="div1">
</div>
</body>
</html>
傳參的具體內容就是這些，但關于傳參，很多初學者都會有這樣的疑惑：我們如何判斷一個函數是否應該使用參數傳遞呢？一個比較簡單的判斷方法是，當我們的函數如果存在一部分內容在定義時無法確定下來，就有使用參數傳遞的必要。
改變Div的任意樣式
剛才的程序里的函數setColor，其作用只能修改div的背景顏色。假設我們想通過一個函數，來改變一個div的各種樣式，例如寬，高，邊框等，又應該如何對我們的函數進行修改呢？
很明顯，想修改Div的任意樣式，有兩處是無法確定的，一個是具體的樣式名(name)，一個是具體樣式的值(value)，因此我們需要兩個參數。如果按照我們前面所講，那么JS函數的寫法應該如下：
functionsetStyle(name,value)
{
var oDiv=document.getElementById('div1');
oDiv.style.name=value;
}
實際上，嘗試一下就會發現，這個函數是無法正常運行的。原因出在這種寫法下，瀏覽器并不會認為oDiv.style.name中的name和參數中的name是同一個東西，而會認為這是一個叫“name”的樣式，當然css中并沒有名為“name”的樣式，因此無法執行。
為了解決這個問題，我們必須了解第二種操作屬性方法。第一種操作屬性的方法就是我們已經學過的使用.字符連接，我們之前所有案例都是通過這種方法來操作屬性。而第二種操作屬性的方法，是通過['屬性名']的方法來進行操作。具體的使用方法如下：
function setText()
{
var oTxt=document.getElementById.('txt1');
//第一種操作屬性的方法
oTxt.value='dsfasdfasdf';
//第二種操作屬性的方法
oTxt['value']='dsfasdfasdf';
}
在這個小例子中，二者不存在任何區別。在平常的書寫中，由于第一種比第二種更為簡便，因此大多選用第一種寫法。而第二種寫法的好處是，[]內放置的是一個字符串（關于字符串的具體內容本課末會講），而字符串可以通過變量來儲存，也可以通過參數傳遞具體的值。因此，前一個案例里想通過參數改變樣式名的目的便可以通過這種方法達成。 實現代碼如下：
效果如下：
這樣，無論想改變div的什么屬性，都可以通過傳遞參數來實現了。
順便一提，在JS里，任何使用.字符的地方，都可以用[]代替，例如document.getElementById('div1')可以修改為document['getElementById']('div1')，oDiv.style.[name]可以修改為oDiv['style'][name]，具體如何使用視實際情況而定。
字符串和變量——區別和關系
觀察前面的代碼，可以看到有很多使用""和''的地方，在JS里使用引號標注的就是字符串。變量和字符串之間有什么關聯或者區別呢？
對于變量和參數來說，使用它們是不需要加引號的，而字符串則必須加上引號。 對于下面一個例子：
alert(abc);
文章列表
留言列表
