# JavaScript 函數
**函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。**
## 實例
```
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">點擊這里</button>
</body>
</html>
```
## JavaScript 函數語法
函數就是包裹在花括號中的代碼塊,前面使用了關鍵詞 function:
```
function functionname()
{
這里是要執行的代碼
}
```
當調用該函數時,會執行函數內的代碼。
可以在某事件發生時直接調用函數(比如當用戶點擊按鈕時),并且可由 JavaScript 在任何位置進行調用。
提示:JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的,并且必須以與函數名稱相同的大小寫來調用函數。
## 調用帶參數的函數
在調用函數時,您可以向其傳遞值,這些值被稱為參數。
這些參數可以在函數中使用。
您可以發送任意多的參數,由逗號 (,) 分隔:
```
myFunction(_argument1_,_argument2_)
```
當您聲明函數時,請把參數作為變量來聲明:
```
function myFunction(`var1`,`var2`)
{
這里是要執行的代碼
}
```
變量和參數必須以一致的順序出現。第一個變量就是第一個被傳遞的參數的給定的值,以此類推。
### 實例
```
<button onclick="myFunction('Bill Gates','CEO')">點擊這里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + `name` + ", the " + `job`);
}
</script>
```
上面的函數會當按鈕被點擊時提示 "Welcome Bill Gates, the CEO"。
函數很靈活,您可以使用不同的參數來調用該函數,這樣就會給出不同的消息:
### 實例
```
<button onclick="myFunction('Harry Potter','Wizard')">點擊這里</button>
<button onclick="myFunction('Bob','Builder')">點擊這里</button>
```
根據您點擊的不同的按鈕,上面的例子會提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。
## 帶有返回值的函數
有時,我們會希望函數將值返回調用它的地方。
通過使用 return 語句就可以實現。
在使用 return 語句時,函數會停止執行,并返回指定的值。
### 語法
```
function myFunction()
{
var x=5;
`return x;`
}
```
上面的函數會返回值 5。
注釋:整個 JavaScript 并不會停止執行,僅僅是函數。JavaScript 將繼續執行代碼,從調用函數的地方。
函數調用將被返回值取代:
```
var myVar=myFunction();
```
myVar 變量的值是 5,也就是函數 "myFunction()" 所返回的值。
即使不把它保存為變量,您也可以使用返回值:
```
document.getElementById("demo").innerHTML=myFunction();
```
"demo" 元素的 innerHTML 將成為 5,也就是函數 "myFunction()" 所返回的值。
您可以使返回值基于傳遞到函數中的參數:
### 實例
計算兩個數字的乘積,并返回結果:
```
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
```
"demo" 元素的 innerHTML 將是:
```
12
```
在您僅僅希望退出函數時 ,也可使用 return 語句。返回值是可選的:
```
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
```
如果 a 大于 b,則上面的代碼將退出函數,并不會計算 a 和 b 的總和。
## 局部 JavaScript 變量
在 JavaScript 函數內部聲明的變量(使用 var)是_局部_變量,所以只能在函數內部訪問它。(該變量的作用域是局部的)。
您可以在不同的函數中使用名稱相同的局部變量,因為只有聲明過該變量的函數才能識別出該變量。
只要函數運行完畢,本地變量就會被刪除。
## 全局 JavaScript 變量
在函數外聲明的變量是_全局_變量,網頁上的所有腳本和函數都能訪問它。
## JavaScript 變量的生存期
JavaScript 變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行以后被刪除。
全局變量會在頁面關閉后被刪除。
## 向未聲明的 JavaScript 變量來分配值
如果您把值賦給尚未聲明的變量,該變量將被自動作為全局變量聲明。
這條語句:
```
carname="Volvo";
```
將聲明一個_全局_變量 carname,即使它在函數內執行。
## 課外書
如需更多有關 _JavaScript 函數_的知識,請閱讀 JavaScript 高級教程中的相關內容:
[ECMAScript 函數概述](/js/pro_js_functions.asp "ECMAScript 函數概述")
本節講解函數的概念,ECMAScript 如何聲明并調用函數,以及函數如何返回值。
[ECMAScript arguments 對象](/js/pro_js_functions_arguments_object.asp "ECMAScript arguments 對象")
本節介紹了此對象的基本用法,然后講解了如何使用 length 屬性來測定函數的參數數目,以及模擬函數重載。
[ECMAScript Function 對象(類)](/js/pro_js_functions_function_object.asp "ECMAScript Function 對象(類)")
本節講解了如何使用 Function 類創建函數,然后介紹了 Function 對象的屬性和方法。
[ECMAScript 閉包(closure)](/js/pro_js_functions_closures.asp "ECMAScript 閉包(closure)")
本節講解了閉包(closure)的概念,并分別為您展示了簡單和稍復雜的兩個閉包實例。
- JavaScript 基礎
- JavaScript 簡介
- JavaScript 使用
- JavaScript 輸出
- JavaScript 語句
- JavaScript 注釋
- JavaScript 變量
- JavaScript 數據類型
- JavaScript 對象
- JavaScript 函數
- JavaScript 運算符
- JavaScript 比較和邏輯運算符
- JavaScript If...Else 語句
- JavaScript Switch 語句
- JavaScript For 循環
- JavaScript While 循環
- JavaScript Break 和 Continue 語句
- JavaScript 錯誤 - Throw、Try 和 Catch
- JavaScript 表單驗證
- JavaScript 保留關鍵字
- JavaScript JSON
- javascript:void(0) 含義
- JavaScript 高級
- JavaScript 對象
- JavaScript Number 對象
- JavaScript 字符串(String)對象
- JavaScript Date(日期)對象
- JavaScript Array(數組)對象
- JavaScript Boolean(邏輯)對象
- JavaScript Math(算數)對象
- JavaScript RegExp 對象
- JavaScript BOM
- JavaScript Window - 瀏覽器對象模型
- JavaScript Window Screen
- JavaScript Window Location
- JavaScript Window History
- JavaScript Window Navigator
- JavaScript 消息框
- JavaScript 計時
- JavaScript Cookies
- HTML DOM
- HTML DOM 簡介
- HTML DOM 節點
- HTML DOM 方法
- HTML DOM 屬性
- HTML DOM 訪問
- HTML DOM - 修改
- HTML DOM - 修改 HTML 內容
- HTML DOM - 元素
- HTML DOM - 事件
- HTML DOM - 導航
- JavaScript HTML DOM EventListener
- AJAX 教程
- AJAX 簡介
- AJAX 實例
- AJAX - 創建 XMLHttpRequest 對象
- AJAX - 向服務器發送請求
- AJAX - 服務器響應
- AJAX - onreadystatechange 事件
- AJAX ASP/PHP 請求實例
- AJAX 數據庫實例
- AJAX XML 實例
- jQuery 基礎
- jQuery 簡介
- jQuery 安裝
- jQuery 語法
- jQuery 選擇器
- jQuery 事件
- jQuery 效果
- jQuery 效果 - 隱藏和顯示
- jQuery 效果 - 淡入淡出
- jQuery 效果 - 滑動
- jQuery 效果 - 動畫
- jQuery 停止動畫
- jQuery Callback 函數
- jQuery - Chaining
- jQuery HTML
- jQuery - 獲得內容和屬性
- jQuery - 設置內容和屬性
- jQuery - 添加元素
- jQuery - 刪除元素
- jQuery - 獲取并設置 CSS 類
- jQuery - css() 方法
- jQuery - 尺寸
- jQuery 遍歷
- jQuery 遍歷
- jQuery 遍歷 - 祖先
- jQuery 遍歷 - 后代
- jQuery 遍歷 - 同胞
- jQuery 遍歷 - 過濾
- jQuery - AJAX
- jQuery - AJAX 簡介
- jQuery - AJAX load() 方法
- jQuery - AJAX get() 和 post() 方法
- jQuery 雜項
- jQuery - noConflict() 方法
- JavaScript 高級教程
- JavaScript 的歷史
- JavaScript 實現
- ECMAScript 基礎
- ECMAScript 語法
- ECMAScript 變量
- ECMAScript 關鍵字
- ECMAScript 保留字
- ECMAScript 原始值和引用值
- ECMAScript 原始類型
- ECMAScript 類型轉換
- ECMAScript 引用類型
- ECMAScript 運算符
- ECMAScript 一元運算符
- ECMAScript 位運算符
- ECMAScript Boolean 運算符
- ECMAScript 乘性運算符
- ECMAScript 加性運算符
- ECMAScript 關系運算符
- ECMAScript 等性運算符
- ECMAScript 條件運算符
- ECMAScript 賦值運算符
- ECMAScript 逗號運算符
- ECMAScript 語句
- ECMAScript if 語句
- ECMAScript 迭代語句
- ECMAScript 標簽語句
- ECMAScript break 和 continue 語句
- ECMAScript with 語句
- ECMAScript switch 語句
- ECMAScript 函數
- ECMAScript 函數概述
- ECMAScript arguments 對象
- ECMAScript Function 對象(類)
- ECMAScript 閉包(closure)
- ECMAScript 對象
- ECMAScript 面向對象技術
- ECMAScript 對象應用
- ECMAScript 對象類型
- ECMAScript 對象作用域
- ECMAScript 定義類或對象
- ECMAScript 修改對象
- ECMAScript 繼承
- ECMAScript 繼承機制實例
- ECMAScript 繼承機制實現
- Google 地圖API
- Google 地圖API Key
- Google Maps 基礎
- Google 地圖疊加層
- Google 地圖事件
- Google 地圖控件集
- Google 地圖類型
- Google 地圖 API 參考手冊
- 地圖 API Map() 構造器
- 免責聲明