函數是由事件驅動的或者當它被調用時執行的可重覆使用的代碼塊。 實例1: 效果:通過點擊按鈕“點我”,會彈出"Hello World!"的提示框! 1.JavaScript 基本函數語法 函數就是包裹在花括弧中的代碼塊,前面使用了關鍵詞 function: 當調用該函數時,會執行函數內的代碼。 可以在 ...
函數是由事件驅動的或者當它被調用時執行的可重覆使用的代碼塊。
實例1:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實例1</title> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">點我</button> </body> </html>
效果:通過點擊按鈕“點我”,會彈出"Hello World!"的提示框!
1.JavaScript 基本函數語法
函數就是包裹在花括弧中的代碼塊,前面使用了關鍵詞 function:
function functionname() { // 執行代碼 }
當調用該函數時,會執行函數內的代碼。
可以在某事件發生時直接調用函數(比如當用戶點擊按鈕時),並且可由 JavaScript 在任何位置進行調用。
註:JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的,並且必須以與函數名稱相同的大小寫來調用函數。
2.調用帶參數的函數
在調用函數時,我們可以向其傳遞值,這些值被稱為參數。
這些參數可以在函數中使用。
您可以發送任意多的參數,由逗號 (,) 分隔:
myFunction(argument1,argument2)
當您聲明函數時,請把參數作為變數來聲明:
function myFunction(var1,var2) { //代碼 }
變數和參數必須以一致的順序出現。第一個變數就是第一個被傳遞的參數的給定的值,以此類推。
實例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p>點擊這個按鈕,來調用帶參數的函數。</p> 10 <button onclick="myFunction('Harry Potter','Wizard')">點擊這裡</button> 11 <script> 12 function myFunction(name,job){ 13 alert("Welcome " + name + ", the " + job); 14 } 15 </script> 16 17 </body> 18 </html>
函數很靈活,您可以使用不同的參數來調用該函數,這樣就會給出不同的消息:
實例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鳥教程(runoob.com)</title> 6 </head> 7 <body> 8 9 <p>請點擊其中的一個按鈕,來調用帶參數的函數。</p> 10 <button onclick="myFunction('Harry Potter','Wizard')">點擊按鈕1</button> 11 <button onclick="myFunction('Bob','Builder')">點擊按鈕2</button> 12 <script> 13 function myFunction(name,job) 14 { 15 alert("Welcome " + name + ", the " + job); 16 } 17 </script> 18 19 </body> 20 </html>
上面的函數點擊按鈕1會彈出Welcome Harry Potter,Wizard。
上面的函數點擊按鈕2會彈出Welcome Bob,Builder。
3.帶有返回值的函數
有時,我們會希望函數將值返回調用它的地方。
通過使用 return 語句就可以實現。
在使用 return 語句時,函數會停止執行,並返回指定的值。
function myFunction()
{
var x=5;
return x;
}
上面的函數會返回值 5。
實例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p>本例調用的函數會執行一個計算,然後返回結果:</p> 10 <p id="demo"></p> 11 <script> 12 function myFunction(a,b){ 13 return a*b; 14 } 15 document.getElementById("demo").innerHTML=myFunction(5,3); 16 </script> 17 18 </body> 19 </html>
輸出的結果是15.
如果僅僅希望退出函數時 ,也可使用 return 語句。返回值是可選的:
1 //如果 a 大於 b,則上面的代碼將退出函數,並不會計算 a 和 b 的總和 2 function myFunction(a,b) 3 { 4 if (a>b) 5 { 6 return; 7 } 8 x=a+b 9 }
4.局部 JavaScript 變數
在 JavaScript 函數內部聲明的變數(使用 var)是局部變數,所以只能在函數內部訪問它。(該變數的作用域是局部的)。
我們可以在不同的函數中使用名稱相同的局部變數,因為只有聲明過該變數的函數才能識別出該變數。
只要函數運行完畢,本地變數就會被刪除。
5.全局 JavaScript 變數
在函數外聲明的變數是全局變數,網頁上的所有腳本和函數都能訪問它。
6.JavaScript 變數的生存期
JavaScript 變數的生命期從它們被聲明的時間開始。
局部變數會在函數運行以後被刪除。
全局變數會在頁面關閉後被刪除。