JavaScript是一種腳本語言，可以在瀏覽器中直接運行；
JavaScript代碼可以直接嵌套在HTML網頁中，響應事件，執行事件處理函數。
一、基本語法
1》數據類型：int、float、string、boolean、null空類型；
2》變量：使用命令var聲明變量，格式：var 變量名 [ =值 ]；
3》運算符：算術運算符、關係運算符、邏輯運算符、字符串運算符、位操作運算符、賦值運算符和條件運算符等運算符
4》控制語句：分支語句（if、switch），循環語句（while 、do-while、for）；
5》函數的定義和調用：
//函數聲明格式：
function functionName([parameter1, parameter2,…]){
//有關的處理語句;
}
二、事件
在瀏覽器中網頁與客戶的交互都是通過“事件”引發的，當一個事件發生時，執行相應的JavaSript腳本或指定的函數。
1》JavaScript的事件
JavaScript事件、事件處理函數及何時觸發事件處理函數關係
|
事件 |
事件處理函數名 |
何 時 觸 發 |
|
change |
onChange |
當表單元素獲取焦點，且內容值發生改變時觸發 |
|
click |
onClick |
單擊鼠標左鍵時觸發 |
|
focus |
onFocus |
任何元素或窗口本身獲得焦點時觸發 |
|
keydown |
onKeydown |
鍵盤鍵被按下時觸發，如果一直按着某鍵，則會不斷觸發 |
|
select |
onSelect |
選中文本時觸發 |
|
submit |
onSubmit |
單擊提交按鈕時，在<form>上觸發 |
2》在HTML中引用（指定）事件處理函數（函數的調用）
在HTML中指定事件處理程序，需要在HTML標記中添加相應的事件處理程序的屬性，並在其中指定作爲屬性值的代碼或是函數名稱。
使用格式：<標籤 各有關屬性及其屬性值 on事件名稱="函數名稱(參數)">
<!-- 通過input輸入標籤，引發單擊事件，該事件的處理函數名是onClick()，
要完成的功能是通過函數test()實現的，而函數test()的功能是顯示一個提示窗口
（由windows的alert方法完成），並提示“事件引發一操作，併成功執行了這個操作！”。 -->
<html>
<head>
<meta charset="UTF-8">
<title>單擊鼠標事件示例</title>
<head>
<script language="javascript">
function test(){
window.alert("事件引發一操作，併成功執行了這個操作！");
}
</script>
</head>
<body>
<form action="">
<input type="button" value="警告對話框" onclick="test()"><br/>
</form>
</body>
</html>
三、對象
JavaScript中設有瀏覽器的文檔對象：window 、navigator、screen、history、location、document，利用這些對象，實現對網頁信息的操作和處理加工。
1》window對象
|
方 法 |
描 述 |
|
alert() |
彈出一個警告對話框 |
|
confirm() |
顯示一個確認對話框，單擊“確認”按鈕時返回true，否則返回false |
|
prompt() |
彈出一個提示對話框，並要求輸入一個簡單的字符串 |
2》location對象
location對象實現頁面的自動跳轉。
使用格式： window.location.href="網頁路徑";
3》document對象
每個HTML文檔被加載後都會在內存中創建一個document對象，該對象存放整個網頁HTML內容，從中可獲取頁面表單的各種信息，並對這些信息進行操作加工處理。
//假設有如下的表單：
<form action="" name= "form1" >
<input type="text" name= "t1" value="" >
</form>
//獲取表單域對象：
var fObj=document.form1.t1;
//form1爲表單的名字，t1爲某表單域的name值
//獲取表單域的值（其中，fObj是表單域對象名。）：
var v=fObj.value;
三、使用樣例：
/**
輸入表單的驗證就是對錶單中輸入的數據進行檢驗，
如果表單中填入的數據不符合要求，則禁止提交，並給用戶適當的提示信息，以便用戶重新輸入。
當所有輸入的數據符合所要求後，才允許提交，
並進入表單標籤的action屬性所指定的處理程序，即：<form action="提交後，進入的處理頁面">。
（1）註冊頁面，需要驗證的表單輸入域和要求：
用戶名：用戶名是否爲空，是否符合規定的格式
（用戶名由字母開頭，後跟字母、數字或下劃線！）。
密碼：密碼長度是否超過6，兩次密碼輸入是否一致。
郵箱地址：郵箱地址必須符合郵箱格式。
（2）必須注意提交表單並實現輸入驗證的方式
使用“button類型”按鈕提交，“提交”時先執行“響應函數”。提交方式爲：
<input type="button" value="提交" onClick="響應函數">
另外，在驗證函數中，當都滿足格式後，採用如下格式，實現提交：document.forms[0].submit();
**/
//JS文件
function validate(){
var name=document.forms[0].userName.value;
var pwd=document.forms[0].userPwd.value;
var pwd1=document.forms[0].userPwd1.value;
var email=document.forms[0].userEmail.value;
var accept=document.forms[0].accept.checked;
var regl=/[a-zA-Z]\w*/;
var reg2= /\w+([-+.']\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/;
if(name.length<=0) alert("用戶名不能爲空！");
else if(!regl.test(name)) alert("用戶名格式不正確！");
else if(pwd.length<6) alert("密碼長度必須大於等於6！");
else if(pwd!=pwd1) alert("兩次密碼不一致！");
else if(!reg2.test(email)) alert("郵件格式不正確！");
else if(accept==false) alert("您需要仔細閱讀並同意接受用戶使用協議！");
else document.forms[0].submit();
}
//html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>具有輸入驗證的註冊頁面</title>
<script language="javascript" src=" ch02_4.js"></script>
<link href="ch02_4.css" type="text/css" rel="stylesheet">
</head>
<body>
<form action="">
<table align="center">
<tr>
<td colspan="3" align="center" height="40" id="abc">填寫註冊信息</td>
</tr>
<tr>
<td align="right" id="t">用戶名:*</td>
<td><input type="text" name="userName" /></td>
<td id="i">用戶名由字母開頭，後跟字母、數字或下劃線！</td>
</tr>
<tr>
<td align="right" id="t">密碼:*</td>
<td><input type="password" name="userPwd" /></td>
<td id="i">設置登錄密碼，至少6位！</td>
</tr>
<tr>
<td align="right" id="t">確認密碼:*</td>
<td><input type="password" name="userPwd1" /></td>
<td id="i">請再輸入一次你的密碼！</td>
</tr>
<tr>
<td align="right" id="t">性別:*</td>
<td><input type="radio" name="userSex" value="男" checked />男 <input
type="radio" name="userSex" value="女" />女</td>
<td id="i">請選擇你的性別！</td>
</tr>
<tr>
<td align="right" id="t">郵箱地址:*</td>
<td><input type="text" name="userEmail" /></td>
<td id="i">請填寫您的常用郵箱，可以用此郵箱找回密碼！</td>
</tr>
<tr>
<td align="right" valign="top" id="t">基本情況:*</td>
<td colspan="2"><textarea name="userBasicInfo" rows="5"
cols="50"></textarea></td>
</tr>
<tr>
<td colspan="3" align="center" height="15"><input
type="checkbox" name="accept" value="yes" /> 我已經仔細閱讀並同意接受用戶使用協議</td>
</tr>
<tr>
<td colspan="3" align="center" height="40">
<input type="Button" value="確認" onClick="validate()"/>
<input type="reset" value="取消" /></td>
</tr>
</table>
</form>
</body>
</html>