JS綜合學習教程

一、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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章