Javasceipt索引
Javasceipt放在哪裡 2
在哪裡放置 JavaScript 2
位於 head 部分的指令碼： 2
位於 body 部分的指令碼： 2
在 body 和 head 部分的指令碼： 2
使用外部 JavaScript 3
資料類型 3
變數 4
聲明（建立） JavaScript 變數 4
向 JavaScript 變數賦值 4
向未聲明的 JavaScript 變數賦值 4
重新聲明 JavaScript 變數 4
JavaScript 算術 5
運算子 5
數組 5
迴圈語句 7
函數 7
事件 7
Javasceipt中的對象 8
執行個體 9
1.表單驗證 9
2. 計時器 13
3. 序號驗證 14
Javasceipt放在哪裡
在哪裡放置 JavaScript
頁面中的指令碼會在頁面載入瀏覽器後立即執行。我們並不總希望這樣。有時，我們希望當頁面載入時執行指令碼，而另外的時候，我們則希望當使用者觸發事件時才執行指令碼。
位於 head 部分的指令碼：
當指令碼被調用時，或者當事件被觸發時，指令碼就會被執行。當你把指令碼放置到 head 部分後，就可以確保在需要使用指令碼之前，它已經被載入了。
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
....
位於 body 部分的指令碼：
在頁面載入時指令碼就會被執行。當你把指令碼放置於 body 部分後，它就會產生頁面的內容。
<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
</html>
在 body 和 head 部分的指令碼：
你可以在文檔中放置任何數量的指令碼，因此你既可以把指令碼放置到 body，又可以放置到 head 部分。
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
</html>
使用外部 JavaScript
有時，你也許希望在若干個頁面中運行 JavaScript，同時不在每個頁面中寫相同的指令碼。
為了達到這個目的，你可以將 JavaScript 寫入一個外部檔案之中。然後以 .js 為尾碼儲存這個檔案。
注意：外部檔案不能包含 <script> 標籤。
然後把 .js 檔案指定給 <script> 標籤中的 "src" 屬性，就可以使用這個外部檔案了：
<html>
<head>
<script src="xxx.js">....</script>
</head>
<body>
</body>
</html>
提示：您可以把 .js 檔案放到網站目錄中通常存放指令碼的子目錄中，這樣更容易管理和維護。
資料類型
| 數 據 類 型 |
說 明 |
舉 例 |
| 字串型 |
使用單引號或雙引號括起來的一個或多個字元 |
如"PHP"、"I like study PHP"等 |
| 數值型 |
包括整數或浮點數（包含小數點的
數或科學記號標記法的數） |
如-128、12.9、6.98e6等 |
| 布爾型 |
布爾型常量只有兩種狀態，即true或false |
如event.returnValue=false |
| 對象型 |
用於指定JavaScript程式中用到的對象 |
如網頁表單元素 |
| Null值 |
可以通過給一個變數賦 null 值來清除變數的內容 |
如a=null |
| Undefined |
表示該變數尚未被賦值 |
如var a |
變數
聲明（建立） JavaScript 變數
在 JavaScript 中建立變數經常被稱為“聲明”變數。
您可以通過 var 語句來聲明 JavaScript 變數：
var x; var carname;
在以上聲明之後，變數並沒有值，不過您可以在聲明它們時向變數賦值：
var x=5; var carname="Volvo";
注釋：在為變數賦文本值時，請為該值加引號。
向 JavaScript 變數賦值
通過賦值語句向 JavaScript 變數賦值：
x=5; carname="Volvo";
變數名在 = 符號的左邊，而需要向變數賦的值在 = 的右側。
在以上語句執行後，變數 x 中儲存的值是 5，而 carname 的值是 Volvo。
向未聲明的 JavaScript 變數賦值
如果您所賦值的變數還未進行過聲明，該變數會自動聲明。
這些語句：
x=5; carname="Volvo";
與這些語句的效果相同：
var x=5; var carname="Volvo";
重新聲明 JavaScript 變數
如果您再次聲明了 JavaScript 變數，該變數也不會丟失其原始值。
var x=5; var x;
在以上語句執行後，變數 x 的值仍然是 5。在重新聲明該變數時，x 的值不會被重設或清除。
JavaScript 算術
正如代數一樣，您可以使用 JavaScript 變數來做算術：
y=x-5; z=y+5;
運算子
| == |
等於 |
x==8 為 false |
| === |
全等（值和類型） |
x===5 為 true；x==="5" 為 false |
數組
定義數組
數組對象用來在單獨的變數名中儲存一系列的值。
我們使用關鍵詞 new 來建立數組對象。下面的代碼定義了一個名為 myArray 的數組對象：
var myArray=new Array()
有兩種向數組賦值的方法（你可以添加任意多的值，就像你可以定義你需要的任意多的變數一樣）。
1:
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一個整數自變數來控制數組的容量：
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2:
var mycars=new Array("Saab","Volvo","BMW")
注意：如果你需要在數組內指定數值或者邏輯值，那麼變數類型應該是數值變數或者布爾變數，而不是字元變數。
訪問數組
通過指定數組名以及索引號碼，你可以訪問某個特定的元素。
下面是程式碼：
document.write(mycars[0])
下面是輸出：
Saab
修改已有數組中的值
如需修改已有數組中的值，只要向指定下標號添加一個新值即可：
mycars[0]="Opel";
現在，以上代碼：
document.write(mycars[0]);
將輸出：
Opel
迴圈語句
函數
事件
JavaScript 使我們有能力建立動態網頁面。事件是可以被 JavaScript 偵測到的行為。
網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數的事件。比方說，我們可以在使用者點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁面中定義。
事件舉例：
· 滑鼠點擊
· 頁面或映像載入
· 滑鼠懸浮於頁面的某個熱點之上
· 在表單中選取輸入框
· 確認表單
· 鍵盤按鍵
注意：事件通常與函數配合使用，當事件發生時函數才會執行。
如果需要更多有關 Javascript 可識別事件的知識，請閱讀我們的 JavaScript 事件參考手冊。
onload 和 onUnload
當使用者進入或離開頁面時就會觸發 onload 和 onUnload 事件。
onload 事件常用來檢測訪問者的瀏覽器類型和版本，然後根據這些資訊載入特定版本的網頁。
onload 和 onUnload 事件也常被用來處理使用者進入或離開頁面時所建立的 cookies。例如，當某使用者第一次進入頁面時，你可以使用訊息框來詢問使用者的姓名。姓名會儲存在 cookie 中。當使用者再次進入這個頁面時，你可以使用另一個訊息框來和這個使用者打招呼："Welcome John Doe!"。
onFocus, onBlur 和 onChange
onFocus、onBlur 和 onChange 事件通常相互配合用來驗證表單。
下面是一個使用 onChange 事件的例子。使用者一旦改變了域的內容，checkEmail() 函數就會被調用。
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit
onSubmit 用於在提交表單之前驗證所有的表單域。
下面是一個使用 onSubmit 事件的例子。當使用者單擊表單中的確認按鈕時，checkForm() 函數就會被調用。假若域的值無效，此次提交就會被取消。checkForm() 函數的返回值是 true 或者 false。如果返回值為true，則提交表單，反之取消提交。
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut 用來建立“動態”按鈕。
下面是一個使用 onMouseOver 事件的例子。當 onMouseOver 事件被指令碼偵測到時，就會彈出一個警告框：
<a href="http://www.w3school.com.cn"
onmouseover="alert("An onMouseOver event");return false">
<img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20121211/"w3school.gif" width="100" height="30">
</a>
Javasceipt中的對象
1.內建對象（math、date、string、內建函數）
Data對象
定時器
2.瀏覽器對象（window對象）
Window方法
Location方法
History方法
3.文字物件
4.自訂對象
執行個體
1.表單驗證
<HTML>
<HEAD>
<TITLE> 表格及表單應用 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<script>
function validate()
{
var username=document.getElementById("username");
var password=document.getElementById("psw1");
var conpassword=document.getElementById("psw2");
var gender=document.getElementsByName("gender");
var interest=document.getElementsByName("hobby");
var n=0;
var comment=document.getElementById("info");
if(username.value.length<1)
{alert("使用者名稱不可為空！");
return false;
}
if(username.value.length<4username.value.length>10)
{alert("使用者名稱長度應介於4-10之間！");
return false;
}
if(password.value.length<1)
{alert("密碼不可為空！");
return false;
}
if(password.value.length<4password.value.length>10)
{alert("密碼長度應介於4-10之間！");
return false;
}
if(password.value!=conpassword.value)
{alert("確認密碼與密碼不符！");
conpassword.value="";
return false;
}
if(!gender[0].checked&&!gender[1].checked)
{alert("性別必選其一！");
return false;
}
for(var i=0;i<interest.length;i++)
{
if(interest[i].checked)
{n++;}
}
if(n<1)
{alert("興趣至少選一個！");
return false;
}
if(n>3)
{alert("興趣最多選三個！");
return false;
}
if(comment.value.length<1)
{alert("簡曆必須填寫！");
return false;
}
return true;
}
</script>
</HEAD>
<BODY >
<CENTER><H2>填寫使用者資訊頁面<H2></CENTER>
<form action="http://www.jianqiao.com/bbs/login.jsp" enctype="multipart/form-data" method="post" onsubmit="return validate()">
<TABLE BORDER=2 HEIGHT=400 WIDTH=400 BGCOLOR=PINK ALIGN=CENTER>
<TR>
<TD>用 戶 名:
</TD>
<TD><input type="text" name="username">
</TD>
</TR>
<TR>
<TD>密 碼:
</TD>
<TD><input type="password" name="psw1">
</TD>
</TR>
<TR>
<TD>確認密碼:
</TD>
<TD><input type="password" name="psw2">
</TD>
</TR>
<TR>
<TD>性 別:
</TD>
<TD>
<input type="radio" name="gender" value="male" >男
<input type="radio" name="gender" value="female">女
</TD>
</TR>
<TR>
<TD>愛 好：
</TD>
<TD><input type="checkbox" name="hobby" value="sport">體育
<input type="checkbox" name="hobby" value="drawing" >畫畫
<input type="checkbox" name="hobby" value="Photography">攝影
<input type="checkbox" name="hobby" value="travel">旅遊
</TD>
</TR>
<TR>
<TD>您的學曆：
</TD>
<TD>
<select name="education background" >
<option value="choice">--請選擇--
<option value="middle school">初中
<option value="height school">高中
<option value="university">大學
<option value="master">碩士
<option value="doctor">博士
</select>
</TD>
</TR>
<TR>
<TD>您的簡曆：
</TD>
<TD><textarea name="info" cols ="40" rows = "5"></textarea>
</TD>
</TR>
<TR>
<TD>上傳附件: </TD>
<TD><input type="file" name="f1"></TD>
</TR>
<TR align=center>
<TD colspan=2><input type="submit" value="提交">
<input type="reset" value="重設"></TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML> |
2.計時器
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById("txt").value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="開始計時！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止計時！" onClick="stopCount()">
</form>
<p>
請點擊上面的“開始計時”按鈕。輸入框會從 0 開始一直進行計時。點擊“停止計時”可停止計時。
</p>
</body>
</html>
3.序號驗證
<HTML>
<HEAD>
<TITLE>link</TITLE>
<script type="text/javascript">
function moveNext(Object,index)
{
if(Object.value.length==4)
{document.forms[0].elements[index+1].focus();}
}
function showResult()
{
var f=document.forms[0];
var result="";
for(var i=0;i<4;i++)
{
result+=f.elements[i].value;
}
alert("序號為:"+result);
}
</script>
</HEAD>
<BODY onload="document.forms[0].elements[0].focus();">
<form>
<input type="text" size="4" maxlength="4" onkeyup="moveNext(this,0);">-
<input type="text" size="4" maxlength="4" onkeyup="moveNext(this,1);">-
<input type="text" size="3" maxlength="4" onkeyup="moveNext(this,2);">-
<input type="text" size="4" maxlength="4" onkeyup="moveNext(this,3);">
<input type="button" value="顯示" onClick="showResult();">
</BODY>
</HTML>
本文連結http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20121211/34877.html
