一、JavaScript 對象
JavaScript 中的所有事物都是對象:字符串、數字、數組、日期,等等。在 JavaScript 中,對象是擁有屬性和方法的數據。屬性是與對象相關的值。方法是能夠在對象上執行的動作。舉例:汽車就是現實生活中的對象。汽車的屬性包括名稱、型號、重量、顏色等。所有汽車都有這些屬性,但是每款車的屬性都不盡相同。汽車的方法可以是啓動、駕駛、剎車等。所有汽車都擁有這些方法,但是它們被執行的時間都不盡相同。
在 JavaScript 中,對象是數據(變量),擁有屬性和方法。當您像這樣聲明一個 JavaScript 變量時:var txt = "Hello"; 您實際上已經創建了一個 JavaScript 字符串對象。字符串對象擁有內建的屬性 length。對於上面的字符串來說,length 的值是 5。字符串對象同時擁有若干個內建的方法。
屬性:
txt.length=5
方法:
txt.indexOf()
txt.replace()
txt.search()
1、創建JS對象:
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
<!DOCTYPE html>
<html>
<body>
<script>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>
然後訪問對象的屬性和方法和java語言裏面是一樣的。
二、JavaScript 函數
函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。
1、JavaScript 函數語法
函數就是包裹在花括號中的代碼塊,前面使用了關鍵詞 function:
function functionname()
{
這裏是要執行的代碼
}
當調用該函數時,會執行函數內的代碼。可以在某事件發生時直接調用函數(比如當用戶點擊按鈕時),並且可由 JavaScript 在任何位置進行調用。
提示:JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的,並且必須以與函數名稱相同的大小寫來調用函數。
2、調用帶參數的函數
<button οnclick="myFunction('Bill Gates','CEO')">點擊這裏</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
有時,我們會希望函數將值返回調用它的地方。通過使用 return 語句就可以實現。在使用 return 語句時,函數會停止執行,並返回指定的值。
語法
function myFunction()
{
var x=5;
return x;
}
在您僅僅希望退出函數時 ,也可使用 return 語句。返回值是可選的
三、JavaScript 錯誤 - Throw、Try 和 Catch
try 語句測試代碼塊的錯誤。
catch 語句處理錯誤。
throw 語句創建自定義錯誤。
1、錯誤一定會發生
當 JavaScript 引擎執行 JavaScript 代碼時,會發生各種錯誤:可能是語法錯誤,通常是程序員造成的編碼錯誤或錯別字。可能是拼寫錯誤或語言中缺少的功能(可能由於瀏覽器差異)。可能是由於來自服務器或用戶的錯誤輸出而導致的錯誤。當然,也可能是由於許多其他不可預知的因素。
2、JavaScript 拋出錯誤
當錯誤發生時,當事情出問題時,JavaScript 引擎通常會停止,並生成一個錯誤消息。描述這種情況的技術術語是:JavaScript 將拋出一個錯誤。
3、JavaScript 測試和捕捉
try 語句允許我們定義在執行時進行錯誤測試的代碼塊。catch 語句允許我們定義當 try 代碼塊發生錯誤時,所執行的代碼塊。JavaScript 語句 try 和 catch 是成對出現的。
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()">
</body>
</html>
4、Throw 語句
throw 語句允許我們創建自定義錯誤。正確的技術術語是:創建或拋出異常(exception)。如果把 throw 與 try 和 catch 一起使用,那麼您能夠控制程序流,並生成自定義的錯誤消息。
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值爲空";
if(isNaN(x)) throw "不是數字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="錯誤:" + err + "。";
}
}
</script>
<h1>我的第一個 JavaScript 程序</h1>
<p>請輸入 5 到 10 之間的數字:</p>
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">測試輸入值</button>
<p id="mess"></p>
</body>
</html>
四、JavaScript 表單驗證
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
1、JavaScript 表單驗證
被 JavaScript 驗證的這些典型的表單數據有:
- 用戶是否已填寫表單中的必填項目?
- 用戶輸入的郵件地址是否合法?
- 用戶是否已輸入合法的日期?
- 用戶是否在數據域 (numeric field) 中輸入了文本?
2、必填(或必選)項目
下面的函數用來檢查用戶是否已填寫表單中的必填(或必選)項目。假如必填或必選項爲空,那麼警告框會彈出,並且函數的返回值爲 false,否則函數的返回值則爲true(意味着數據沒有問題):
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
下面是連同 HTML 表單的代碼:
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
3、E-mail 驗證
下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。意思就是說,輸入的數據必須包含 @ 符號和點號(.)。同時,@ 不可以是郵件地址的首字符,並且 @ 之後需有至少一個點號:
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
下面是連同 HTML 表單的完整代碼:
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>