首頁 > 開發者 > JavaScript
標籤：文字框 替換 其他 user onfocus事件 函數實現 返回 input 類型
現在說說什麼是函數。
函數的作用可以寫一次代碼，然後反覆的重用這個代碼。如：我們要完成多組數和
的功能。
var sum;
sum=3+2;
alert(sum);
sum=7+8;
alert(sum);
...//不停重複兩行代碼
如果要實現8組數的和，就需要16行代碼，實現的越多，程式碼也就越多。所以我們
可以把完成特定功能的代碼塊放到一個函數裡面去，直接調用這個函數，就省去重
複輸入大量代碼的麻煩。
使用函數完成：
function add2(a,b){
sum=a+b;
alert(sum);
}//只需要調用函數就可以
如何定義一個函數呢？看看下面的格式：
function 函數名()
{
函數體；
}
function定義函數的關鍵字，“函數名”你為函數取的名字，“函數體”替換為完
成特定功能的代碼。
我們完成對兩個數求和並顯示結果的功能，並給函數起一個有意義的名字:"add2"
代碼如下：
<script type="text/javascript">
function add2(){
sum=3+2;
alert(sum);
}
add2();
</script>
函數定義好後，是不能自動執行的，需要調用它，直接在需要的位置寫函數名。
第一種情況在<script>標籤內調用。
<script type="text/javascript">
function add2()
{
sum=1+1;
alert(sum);
}
add2();//調用函數，直接寫函數名。
</script>
第二種情況：在html檔案中調用，如通過點擊按鈕後調用定義好的函數。
<html>
<head>
<script type="text/javascript">
function add2()
{
sum=5+6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">
//按鈕，onclick點擊事件，直接寫函數名
</form>
</body>
</html>
注意：滑鼠事件後面會說的。
上面說的add2()函數不能實現任意指定兩數相加。其實，定義函數還可以如下格式：
function 函數名(參數1，參數2)
{
函數代碼
}
注意：參數可以多個，根據需要增減參數個數，參數之間用（逗號，）隔開
按照這個格式，函數實現任意兩個數的和應該寫成：
function add2(x,y)
{
sum=x+y;
document.write(sum);
}
x和y則是函數的兩個參數，調用函數的時候，我們可以通過這兩個參數把兩個實際
的加數傳遞給函數了。例如，add2(3,4)會求3+4的和，add2(60,20)則會求60和20的
和。
寫了很久了，發現要輸出結果總是用documen.write，如果想對函數的結果進行處理
怎麼辦呢？
我們只要把document.write(sum)改成如下代碼：
function add2(x,y)
{
sum=x+y;
return sum;//返回函數值，return後面的值叫做傳回值。
}
還可以通過變數儲存調用函數的傳回值，代碼如下：
result=add2(3,4);//語句執行後，result變數中的值為7.
注意：函數中參數和傳回值不只是數字，還可以是字串等其他類型。
下面是一個編程練習：
使用javascript代碼寫出一個函數：實現傳入兩個整數後彈出較大的整數。
代碼如下：
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函數</title>
<script type="text/javascript">
function thant(x,y){
if(x>y){
return x;
}
else if(x<y){
return y;
}
}
var biger=thant(5,4);
//函數體，判斷兩個整數比較的三種情況
//調用函數，實現下面兩組數中，返回較大值。
document.write(" 5 和 4 的較大值是:"+biger+"<br>");
var biger=thant(6,3);
document.write(" 6 和 3 的較大值是:" +biger);
</script>
</head>
<body>
</body>
</html>
接著我們來說說JavaScript建立動態網頁面。事件是可以被JavaScript偵測到的行為。
網頁中的每個元素都可以產生某些可以出發JavaScript函數或程式的事件。
比如說，當使用者單擊按鈕或者提交表單資料時，就發生一個按一下滑鼠(onclick)事件
需要瀏覽器做出處理，返回給使用者一個結果。
主要事件表：
事件說明
onclick按一下滑鼠事件
onmouseover滑鼠經過事件
onmouseout滑鼠移開事件
onchange文字框內容改變事件
onselect文字框內容被選中事件
onfocus游標聚集
onblur游標離開
onload網頁匯入
onunload關閉網頁
onclick是按一下滑鼠事件，當在網頁上單擊滑鼠時，就會發生該事件。同時onclick
事件調用的程式塊就會被執行，通常與按鈕一起使用。
比如我們單擊按鈕時，出發onclick事件，並調用兩個數和的函數add2()。代碼如下：
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("兩數和為："+sum);
}
</script>
</head>
<body>
<form>
<input name="button" type="button" value="點擊提交" onclick="add2()"/>
</form>
</body>
</html>
注意：在網頁中，如使用事件，就在該元素中設定事件屬性。
滑鼠經過事件(onmouseover)
滑鼠經過事件，當滑鼠移到一個對象上時，該對象就觸發onmouseover事件，並執行
onmouseover事件調用的程式。
現實滑鼠經過"確定"按鈕時，觸發onmouseover事件，調用函數info()，彈出訊息框
代碼如下：
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onmouseout</title>
<script type="text/javascript">
function info(){
confirm("請輸入姓名後，再單擊確定！");}
</script>
</head>
<body>
<form>
密碼:<input name="password" type="text">
<input name="button" type="button" value="確定" onmouseover="info()">
<!-- 當滑鼠經過確定按鈕式觸發onmouseover="info()" -->
</form>
</body>
</html>
既然有滑鼠經過事件，肯定也有滑鼠移開事件(onmouseout)
滑鼠移開事件，當滑鼠移開當前對象時，執行onmouseout調用的程式。
當滑鼠移動到"登入"按鈕上，然後再移開時，觸發onmouseout事件，調用函數message()
代碼如下：
<!DOCTYPE HTML>
<head>
<mate http-equiv="Content-Type" content="text/html";charset="utf-8">
<title>onmouseout</title>
<script type="text/javascript">
function message(){
confirm("不要離開，只要輸入密碼，再單擊登入就OK了！")
}
</script>
</head>
<body>
<form>
密碼：<input name="password" type="text">
<input name="button" type="button" value="登入" onmouseout="message()">
<!-- 當移開"登入"按鈕，觸發onmouseout="message()" -->
</form>
</body>
</html>
當網頁中的對象獲得聚點時，執行onfocus調用的程式就會被執行。
如下代碼，當將游標移到文字框內時，即焦點在文字框內，觸發onfocus事件，並調
用函數message()。
<!DOCUTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onfocus</title>
<script type="text/javascript">
function message(){
alert("請在此輸入姓名！");
}
</script>
</head>
<body>
<form>
姓名：<input name="username" type="text" value="請輸入姓名" onfocus="message()">
<!-- 當游標在文字框內時(即文字框得到焦點)，調用message()函數 -->
</form>
</body>
</html>
JavaScript進階（四）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
