【JavaScript從入門到精通】第三課初探JavaScript魅力-03

時間 2019-11-06

標籤 javascript 入門精通第三初探魅力欄目 JavaScript 简体版

原文原文鏈接

第三課初探JavaScript魅力-03

函數傳參

上節課的時候咱們已經講了什麼是函數,實際上,函數在功能上就相似於css的class同樣,將一段代碼包裹起來使用。爲了讓函數的功能更加的豐富和實用，咱們須要用到的就是函數傳參。咱們已經提過，JS將參數放在函數名後的圓括號內，而爲了具體說明參數怎麼使用，咱們舉一個小例子。css

咱們在HTML頁面中放入一個有顏色的div塊，並加入3個按鈕，其目的是經過點擊按鈕來改變div塊的顏色。經過前面兩節課的學習，咱們能夠很輕鬆地寫出下面的代碼來實現這個功能：html

<html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> #div1{ width:200px; height:200px; background:red; } </style> <script> function toGreen() { var oDiv=document.getElementById('div1'); oDiv.style.background='green'; } function toYellow() { var oDiv=document.getElementById('div1'); oDiv.style.background='yellow'; } function toBlack() { var oDiv=document.getElementById('div1'); oDiv.style.background='black'; } </script> </head> <body> <input type="button" value="變綠" onclick="toGreen();" /> <input type="button" value="變黃" onclick="toYellow();" /> <input type="button" value="變黑" onclick="toBlack();" /> <div id="div1"> </div> </body> </html>

效果以下：瀏覽器

能夠看到，爲了實現這一功能咱們一共寫了三個函數，做用分別是讓div塊變綠、變黃、變紅。這三個函數的結構幾乎如出一轍：經過getElementById獲取到div1並賦值給oDiv，而後修改其background屬性，惟一的區別是具體的顏色值不一樣。因此，有沒有辦法將這三個函數進行合併呢？天然是有的，方法就是咱們這節課要講的函數傳參。ide

這裏，咱們先將前面講函數的定義和調用那個例子拿過來。函數

function show()       
{                       //定義
  alert("a");
}
show();            //調用

運行網頁後會固定彈出內容爲「a」的窗口。這樣的功能是否是太簡單了？若是我但願它彈出的內容是我給定的內容應該怎麼作？答案即是使用參數。post

參數的使用方法其實很簡單，在這個例子裏，咱們在函數的()放入一個num，這個num相似於前面講的變量，名字由編寫者自定，而且函數定義的時候num自身的值是未知的。如何肯定num的值呢？在調用函數的時候，在()內輸入的值即是num的具體值。示例以下：學習

function show(num)       
{               
  alert(num);
}
show(12);

結果以下：htm

運行程序後，彈出來的窗口值變爲了12。咱們修改show()裏的值，運行結果也會發生相應的變化。因而，咱們就能夠稱num爲函數show()的參數。這個例子咱們能夠看出，函數參數扮演的是佔位符的角色，在定義的時候參數僅僅是佔據一個位置而沒有具體的值，其值在函數調用時才被傳入。blog

值得注意的是，對於一個函數來講，它的參數是能夠有不少個的，傳入多個參數時，咱們用逗號將參數隔開：ip

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';
}

在這個小例子中，兩者不存在任何區別。在日常的書寫中，因爲第一種比第二種更爲簡便，所以大多選用第一種寫法。而第二種寫法的好處是，[]內放置的是一個字符串（關於字符串的具體內容本課末會講），而字符串能夠經過變量來儲存，也能夠經過參數傳遞具體的值。所以，前一個案例裏想經過參數改變樣式名的目的即可以經過這種方法達成。實現代碼以下：

<html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> #div1{ width:200px; height:200px; background:red; } </style> <script> function setStyle(name, value) { var oDiv=document.getElementById('div1'); oDiv.style[name]=value; } </script> </head> <body> <input type="button" value="變寬" onclick="setStyle('width', '400px')" /> <input type="button" value="變高" onclick="setStyle('height', '400px')" /> <input type="button" value="變綠" onclick="setStyle('background', 'green')" /> <div id="div1"> </div> </body> </html>

效果以下：

這樣，不管想改變div的什麼屬性，均可以經過傳遞參數來實現了。

順便一提，在JS裏，任何使用.字符的地方，均可以用[]代替，例如document.getElementById('div1')能夠修改成document['getElementById']('div1')，oDiv.style.[name]能夠修改成oDiv['style'][name]，具體如何使用視實際狀況而定。