前端－走在WEB頁面最前端的前端互動師
JavaScript是一種基於物件的指令碼程式語言，是瀏覽器上的程式語言。當web容器輸出內容到瀏覽器時，這個內容是包含js原始碼的，此時，JavaScript可以操作瀏覽器上的一切內容，在瀏覽器上提供使用者互動，頁面美化，增加頁面的智慧性。
JavaScript是一種基於物件的語言，通過 JavaScript程式碼來操作物件――訪問或者設定物件的屬性，編寫物件的特定的事件（方法）程式碼。
JavaScript中的物件是由屬性(properties)和方法(methods)兩個基本的元素的構成的。前者是物件在實施其所需要行為的過程中，實現資訊的裝載單位，從而與變數相關聯；後者是指物件能夠按照設計者的意圖而被執行，從而與特定的函式相聯。
物件從哪裡來？JavaScript可以操作的物件有下列三個來源：
1.瀏覽器環境和 HTML標籤語句所構成的現成物件（連結、影象、外掛、HTML表單元素、瀏覽器細節等）；
2.通過 JavaScript的內建類所建立的物件，比如 Data（日期）和 Number(數值)；
3.通過 JavaScript程式設計，使用者自己建立的物件；
1.JavaScript 程式碼的加入
a. JavaScript的程式碼的加入，通過在Web頁中直接寫入：
<Script Language="JavaScript">
//JavaScript語言程式碼；
//JavaScript 語言程式碼；
//…
</Script>
通過標識<Script> </Script>指明其中包含的是Script指令碼程式碼；
通過Language ="JavaScript"說明標識中使用的語言，這裡是JavaScript語言；
可將<Script></Script>標識放入<Head>...</Head>或<Body>...</Body>之間。將 JavaScript標識放置<Head>...</Head>在頭部之間，使之在頁面文件主體和其餘部分程式碼之前裝載。尤其是一些函式的程式碼，建議讀者將這些程式碼放在<Head>... </Head>在頭部之間。
也可以將 JavaScript標識放置在<Body>... </Body>主體之間以實現某些部分動態地建立文件
b. onclick=’javascript:函式名稱()’ 直接編寫程式碼或呼叫程式碼
c. 使用庫函式<script src="指定的Js 檔案位置"></script>
把一些 JavaScript程式碼（尤其是使用者自己編寫的物件的類檔案）組織成可以反覆使用的庫，具有下列好處：
◆ 減少錯誤，減少 Web頁面的內容。JavaScript庫經過嚴格測試後，可以放心的反覆呼叫，相對於通過拷貝和貼上把 JavaScript函式插入到每個想要呼叫它的HTML檔案而言。同時也使 HTML檔案看起來清楚易讀。
◆ 減少網路流量，提高響應速度。當一個 JavaScript庫的第一次下載到記憶體，無論多少頁引用該庫，瀏覽器都能訪問它。不需要再次下載。
考慮JavaScript 指令碼的位置，要注意下列兩點：
◆Web 內容在瀏覽器中是從上到下的順序解釋的。放在 HTML 的<head></head>之間指令碼比插入Web 的<body></body>的指令碼先處理。比較好的做法是將包含所有預定義函式的指令碼放在 Web的<head></head>之間。這樣，瀏覽器在前面遇到這些函式，確保 Web 的<body></body>中的語句能夠識別這些函式。同樣的道理，在一些網頁下載到瀏覽器中，就會執行的指令碼（比如Web頁的onload 事件關聯的指令碼程式碼），如果這些指令碼要訪問 HTML 標籤所定義的物件，那麼要確保這些物件先於指令碼執行，否則會出現“物件不存在”的錯誤。建議設定 IE的瀏覽器的高階屬性中啟用指令碼除錯，可以發現錯誤存在的地方。
◆ 應用外部指令碼庫
<script language="JavaScript"src="menu_data.js"></script>，瀏覽器會在該HTML檔案所在的目錄下查詢 menu_data.js 檔案，如果把js 檔案存放在別的目錄中，則SRC 屬性值必須反映出那個目錄，也就是必須確保該HTML 檔案能夠找到 js 檔案。
JS中 常見的 陷阱 轉
- 區分大小寫：變數名、屬性和方法全部都區分大小寫
- 不匹配的引號、圓括號或花括號將丟擲錯誤
- 條件語句：3個常見陷阱
- 換行：一直用分號結束語句來避免常見的換行問題
- 標點法：在物件宣告的尾部逗號將導致出錯
- HTML id 衝突
- 變數作用域：全域性變數對區域性變數
- 函式過載：當過載不存在時，覆蓋函式
- 區分string.replace()函式不是全域性的
- parseInt應該包含兩個引數
- “this”和繫結問題
- 為引數設定預設值，以免你遺漏它們
- for each迴圈是用於物件而不是陣列
- switch語句需要點技巧
- 總是在檢查undefined前檢查null
- 時間處理陷阱
1.區分大小寫
變數名和函式名都是區分大小寫的。就像配錯的引號一樣，這些大家都知道。但是，由於錯誤是不作聲的，所以這是一個提醒。為自己選擇一個命名規則，並堅持它。而且，記住JavaScript中的原生函式和CSS屬性都是駱駝拼寫（camelCase）。
getElementById(’myId’) != getElementByID(’myId’); //它應該是“Id”而不是“ID”
getElementById(’myId‘) != getElementById(’myID‘); // “Id”也不等於“ID”
document.getElementById('myId').style.Color; //返回 "undefined"
2.不匹配的引號、圓括號或花括號
避免陷入不匹配的引號、圓括號或花括號陷阱的最好方式是編碼時一直同時寫出開啟和關閉這兩個元素符號，然後在其中間加入程式碼。開始：
var myString = ""; //在輸入字串值之前寫入這對引號
function myFunction(){if(){//關閉每個打開的括弧
}}//統計所有的左括號和右括號數量，並且確保它們相等
alert(parseInt(var1)*(parseInt(var2)+parseInt(var3))); //關閉每個打開的圓括號
每當你開啟一個元素，請關閉它。 當你添加了關閉圓括號後，你再把函式的引數放進圓括號中。 如果有一串圓括號，統計所有開啟的圓括號和所有關閉的圓括號，並且確保這兩個數字相等。
3.條件語句（3個陷阱）
- 所有的條件語句都必須位於圓括號中。執行語句主體不管是一句還是多句都強烈建議用花括號包圍起來，這樣能避免很多因修改或巢狀而產生的潛在錯誤。
if(var1 == var2){//statement}
- 不要犯無意地使用賦值運算子的錯誤：把第二個引數的值賦給第一個引數。因為它是一個邏輯問題，它將一直返回true且不會報錯。
if(var1 = var2){} // 返回true。把var2賦值給var1
- JavaScript是弱型別，除了在switch語句中。當JavaScript在case比較時，它是非弱型別。
4. var myVar = 5;
5. if(myVar == '5'){ //返回true，因為JavaScript是弱型別
6. alert("hi"); //這個alert將執行，因為JavaScript通常不在意資料型別
7. }
8. switch(myVar){
9. case '5':
10. alert("hi"); //這個alert將不會執行，因為資料型別不匹配
11.}
4.換行
當心JavaScript中的硬換行。換行被解釋為表示行結束的分號。即使在字串中，如果在引號中包括了一個硬換行，那麼你會得到一個解析錯誤（未結束的字串）。
var bad = '<ul id="myId"> <li>some text</li> <li>more text</li></ul>'; // 未結束的字串錯誤
var good = '<ul id="myId">' + ‘<li>some text</li>‘ + ‘<li>more text</li>‘ +‘</ul>’; // 正確前面討論過的換行被解釋為分號的規則並不適用於控制結構這種情況：條件語句關閉圓括號後的換行並不是給其一個分號。
一直使用分號和圓括號，那麼你不會因換行而出錯，你的程式碼易於閱讀，且除了那些不使用分號的怪異原始碼外你會少一些顧慮：所以當移動程式碼且最終導致兩個語句在一行時，你無需擔心第一個語句是否正確結束。
5.多餘的逗號
在任何JavaScript物件定義中，最後一個屬性決不能以一個逗號結尾。Firefox不會出錯，而IE會報語法錯誤。
var theObj = { city : "Boston",state : "MA",//IE6和IE7中有“缺少標識符、字串或數字”的錯誤，IE8 beta2修正了它
}6.HTML id 衝突
JavaScript DOM繫結（JavaScript DOM bindings）允許通過HTML id索引。在JavaScript中函式和屬性共享同一個名字空間。所以，當在HTML中的一個id和函式或屬性有相同的名字時，你會得到難以跟蹤的邏輯錯誤。然而這更多是一個CSS最佳實踐的問題，當你不能解決你的JavaScript問題時，想起它是很重要的。
<ul><li id="length">1</li><li id="thisLength">2</li><li id="thatLength">3</li></ul><script>var listitems = document.getElementsByTagName('li');var liCount = listitems.length; //IE下返回的是<li id="length">1</li>這個節點而不是所有<li的數量
var thisLength = document.getElementById('thisLength'); thatLength = document.getElementById('thatLength');//IE下會出現“對象不支援此屬性和方法”的錯誤，IE8 beta2下首次加載頁面會出錯，重新整理頁面則不會
//在IE中thisLength和thatLength直接表示以其為id值的DOM節點，
//所以賦值時會出錯，當有var宣告時，IE會把其當著變量，這個時候就正常了。
</script>如果你要標記(X)HTML，絕不要使用JavaScript方法或屬性名作為id的值。並且，當你寫JavaScript時，避免使用(X)HTML中的id值作為變數名。
7.變數作用域
JavaScript中的許多問題都來自於變數作用域：要麼認為區域性變數是全域性的，要麼用函式中的區域性變數覆蓋了全域性變數。為了避免這些問題，最佳方案是根本沒有任何全域性變數。但是，如果你有一堆，那麼你應該知道這些陷阱。
不用var關鍵字宣告的變數是全域性的。記住使用var關鍵字宣告變數，防止變數具有全域性作用域。在下面例子中，在函式中宣告的變數具有全域性變數，因為沒有使用var關鍵字宣告：
anonymousFuntion1 = function(){globalvar= 'global scope'; //全域性宣告，因為“var”遺漏了
return globalvar;}();alert(globalvar); //彈出“global scope”，因為函式中的變量是全域性宣告
anonymousFuntion2 = function(){ var localvar = 'local scope'; //使用“var”區域性宣告 return localvar;}();alert(localvar); //錯誤“localvar未定義”。沒有全域性定義localvar
作為引數引進到函式的變數名是區域性的。如果引數名也是一個全域性變數的名字，像引數變數一樣有區域性作用域，這沒有衝突。如果你想在函式中改變一個全域性變數，這個函式有一個引數複製於這個全域性變數名，記住所有全域性變數都是window物件的屬性。
var myscope = "global";function showScope(myscope){return myscope; //區域性作用域，即使有一個相同名字的全域性變量
}alert(showScope('local'));function globalScope(myscope){myscope =window.myscope; //全域性作用域
return myscope;}alert(globalScope(’local’));你甚至可以在迴圈中宣告變數：
for(var i = 0; i < myarray.length; i++){}8.覆蓋函式/過載函式
當你不止一次的宣告一個函式時，這個函式的最後一次宣告將覆蓋掉該函式的所有前面版本且不會丟擲任何錯誤或警告。這不同於其他的程式語言，像Java，你能用相同的名字有多重函式，只要它們有不同的引數：呼叫函式過載。在JavaScript中沒有過載。這使得不能在程式碼中使用JavaScript核心部分的名字極其重要。也要當心包含的多個JavaScript檔案，像一個包含的指令碼檔案可能覆蓋另一個指令碼檔案中的函式。請使用匿名函式和名字空間。
(function(){// creation of my namespace創建我的名字空間
if(!window.MYNAMESPACE) { window['MYNAMESPACE'] = {}; }//如果名字空間不存在，就創建它
//這個函式僅能在匿名函式中訪問
function myFunction(var1, var2){//內部的函式代碼在這兒
}// 把內部函式連接到名字空間上，使它通過使用名字空間能訪問匿名函式的外面
window['MYNAMESPACE']['myFunction'] = myFunction;})(); //圓括號= 立即執行
// 包含所有代碼的圓括號使函式匿名
這個例子正式為了實現解決上一個陷阱“變數作用域”的最佳方案。匿名函式詳細內容請看《Javascript的匿名函式》。YUI整個庫只有YAHOO和YAHOO_config兩個全域性變數，它正是大量應用匿名函式和名稱空間的方法來實現，具體請看《Javascript的一種模組模式》。
9.字串替換
一個常見錯誤是假設字串替換方法的行為會對所有可能匹配都產生影響。實際上，JavaScript字串替換隻改變了第一次發生的地方。為了替換所有發生的地方，你需要設定全域性標識。同時需要記住String.replace()的第一個引數是一個正則表示式。
var myString = "this is my string";myString = myString.replace("","%20"); // "this%20is my string"myString = myString.replace(/ /,"%20"); // "this%20is my string"myString = myString.replace(/ /g,"%20"); // "this%20is%20my%20string"10.parseInt
在JavaScript得到整數的最常見錯誤是假設parseInt返回的整數是基於10進位制的。別忘記第二個引數基數，它能是從2到36之間的任何值。為了確保你不會弄錯，請一直包含第二個引數。
parseInt('09/10/08'); //0parseInt(‘09/10/08’,10); //9, 它最可能是你想從一個日期中得到的值
如果parseInt沒有提供第二個引數，則字首為 ‘0x’ 的字串被當作十六進位制，字首為 ‘0′ 的字串被當作八進位制。所有其它字串都被當作是十進位制的。如果 numString 的字首不能解釋為整數，則返回 NaN（而不是數字）。
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (10+9)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定：返回8
第二個引數表示進位制十進位制 二進位制 八進位制 十六進位制
11. ‘this’
另一個常見的錯誤是忘記使用“this”。在JavaScript物件中定義的函式訪問這個物件的屬性，但沒有使用引用識別符號“this”。例如，下面是錯誤的：
function myFunction() { var myObject = { objProperty: "some text", objMethod: function() { alert(objProperty); } }; myObject.objMethod();} function myFunction() {var myObject = { objProperty: "some text", objMethod: function() { alert(this.objProperty); } }; myObject.objMethod();}有一篇AList Apart文章用通俗易懂的英文表達了this繫結的問題。
對this使用最大的陷阱是this在使用過程中其引用會發生改變：
<input type="button" value="Gotcha!" id="MyButton"><script>var MyObject = function () { this.alertMessage = "Javascript rules"; this.ClickHandler = function() {alert(this.alertMessage );
//返回結果不是”JavaScript rules”，執行MyObject.ClickHandler時，
//this的引用實際上指向的是document.getElementById("theText")的引用
}}();document.getElementById(”theText”).onclick = MyObject.ClickHandler</script>其解決方案是：
var MyObject = function () {var self = this;
this.alertMessage = “Javascript rules”; this.OnClick = function() { alert(self.value);}}();類似問題的更多細節和解決方案請看《JavaScript作用域的問題》。
12. 遺漏的引數
當給函式增加一個引數時，一個常見的錯誤是忘記更新這個函式的所有呼叫。如果你需要在已經被呼叫的函式中增加一個引數來處理一個特殊情況下的呼叫，請給這個函式中的這個引數設定預設值，以防萬一在眾多指令碼中的眾多呼叫中的一個忘記更新。
function addressFunction(address, city, state, country){country = country || “US”; //如果沒有傳入country,假設“US”
span>//剩下代碼
}你也能通過獲取arguments來解決。但是在這篇文章我們的注意力在陷阱上。同時在《Javascript風格要素（2）》也介紹了||巧妙應用。
13. for關鍵字
在JavaScript中關鍵字for有兩種使用方式，一個是for語句，一個是for/in語句。for/in語句將遍歷所有的物件屬性（attribute），包括方法和屬性（property）。決不能使用for/in來遍歷陣列：僅在當需要遍歷物件屬性和方法時才使用for/in。
- for(var myVar in myObject)語句用一個指定變數無任何規律地遍歷物件的所有屬性。如果for/in迴圈的主體刪除了一個還沒有枚舉出的屬性，那麼該屬性就不在列舉。如果迴圈主體定義了新屬性，那麼迴圈是否列舉該屬性則是由JavaScript的實現決定。
- for(var 1=0; i < myArray.length; i++)語句會遍歷完一個數組的所有元素。
為了解決這個問題，大體上你可以對物件使用 for … in，對陣列使用for迴圈：
listItems = document.getElementsByTagName('li');
for (var listitem in listItems){
//這裡將遍歷這個物件的所有屬性和方法，包括原生的方法和屬性，但不遍歷這個陣列：出錯了！
}
//因為你要迴圈的是陣列物件，所用for迴圈
for ( var i = 0; i < listItems.length; i++) {
//這是真正你想要的
}
物件的有些屬性以相同的方式標記成只讀的、永久的或不可列舉的，這些屬性for/in無法列舉。實際上，for/in迴圈
會遍歷所有物件的所有可能屬性，包括函式和原型中的屬性。所有修改原型屬性可能對for/in迴圈帶來致命的危害，所以需要採用hasOwnProperty和typeof做一些必要的過濾，最好是用for來代替for/in。
14. switch語句
EstelleWeyl寫了一篇switchstatement quirks，其要點是：
- 沒有資料型別轉換
- 一個匹配，所有的表示式都將執行直到後面的break或return語句執行
- 你可以對一個單獨語句塊使用多個case從句
15. undefined ≠ null
null是一個物件，undefined是一個屬性、方法或變數。存在null是因為物件被定義。如果物件沒有被定義，而測試它是否是null，但因為沒有被定義，它無法測試到，而且會丟擲錯誤。
if(myObject !== null && typeof(myObject) !== 'undefined') {//如果myObject是undefined，它不能測試是否為null，而且還會丟擲錯誤
}if(typeof(myObject) !== 'undefined' && myObject !== null) {//處理myObject的代碼
}HarishMallipeddi對undefined和null有一個說明。
16. 事件處理陷阱
剛接觸事件處理時最常見的寫法就是類似：
window.onclick = MyOnClickMethod這種做法不僅非常容易出現後面的window.onclick事件覆蓋掉前面的事件，還可能導致大名頂頂的IE記憶體洩露問題。為了解決類似問題，4年前Simon Willison就寫出了很流行的addLoadEvent()：
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; }else { window.onload = function() { oldonload(); unc(); } }}addEvent(window,'load',func1,false);addEvent(window,'load',func2,false);addEvent(window,'load',func3,false);當然在JavaScript庫盛行的現在，使用封裝好的事件處理機制是一個很好的選擇，比如在YUI中就可以這樣寫：
YAHOO.util.Event.addListener(window, "click", MyOnClickMethod);來自：http://dancewithnet.com/2008/10/27/javascript-gotchas/
Figure 3: JavaScript 文件物件模型圖
◆ 分析程式碼行 var Userid =document.forms[0].UserId.value;
該語句的功能是將 Web頁面上的名稱為 UserId的 Text物件的值賦給一個變數 Userid。JavaScirpt訪問HTML上標籤所定義的物件，最常常採用的是一種層層限定的逐步收縮法。
在 JavaScript的文件物件模型(DOM)中，視窗（Window）是物件模型的頂端物件，通常來說視窗就是你的瀏覽器。HTML頁面文件是在瀏覽器的視窗中顯示的。目前我們假設頁面不包含幀結構，這裡假設瀏覽器視窗中只顯示一個 Web頁的情景。
瀏覽器的視窗（Window）有它的屬性，比如它顯示的頁面，視窗（Window）底部的狀態條上的文字等等；它也有方法，比如開啟和關閉。通常來說，因為視窗在 JavaScript的文件物件模型(DOM)物件層次的頂層，JavaScript就假設 Window已經存在了，你不必去在 JavaScript程式中刻意寫上它，也就是說 “window.location”和“location”的作用是相同的。窗口裡是 Web頁面，它的物件層次從文件（document）開始。可以用 Window.document來引用它，或者就是簡單的 document，這同我們在國內郵件通訊時，地址一般都不寫“中國”。每個視窗只有一個文件（document）的時候
一般情況下，有收集使用者輸入資訊的文件（document）包含至少一個表單（form），但是可以包含多個。可以通過 document.forms[0]來訪問第一個表單。當然表單一般都有名稱（Name）屬性，也可以通過表單的名稱來訪問，比如：上面的一句 JavaScript也可以寫成
var Userid =document.InputForm.UserId.value;
在Microsoft的 IE瀏覽器環境下，可以不指明表單，還是直接用 all替代（作者建議儘量不要採用這種辦法），如：
var Userid =document.all.UserId.value;
表單中當中會包含很多 Input物件，比如單行文字輸入框（型別為 Text）、文字區域（型別為TextArea）、普通按鈕（型別為 Button）、提交按鈕（型別為 Submit）、重置按鈕（型別為 Reset）、選擇框（型別為 Select）等等。
要訪問例子中的使用者名稱稱錄入的文字框 UserId的 value屬性，可以通過
document.InputForm.UserId.value;
如果要將滑鼠焦點停留該文字輸入框中，可以通過該物件的 focus方法：
document.InputForm.UserId.focus();
比如圖 2-2中“呼叫提交按鈕”的 onclick事件所關聯的函式的語句為：
document.forms[0].BtnSubmit.click();
含義是：訪問到 document（文件）下的forms[0]（表單）下的BtnSubmit按鈕，呼叫該按鈕的 Click事件。
◆ 分析程式碼 document.forms[0].reset();
關於表單中的 Submit和 Reset型別的按鈕： HTML的表單有個 Action屬性，該屬性的值為某個頁面的地址，當表單提交後，表單當中的使用者輸入內容將傳送給 Action所指定的頁面，該頁面做相應的處理，比如獲得使用者的輸入，存入到資料庫系統中去。
對於表單物件來說，有下列兩個方法 submit()和 reset()方法。前者對應表單的提交，後者對應表單內容的復位（初始狀態），以便重新錄入。圖 2中的“重寫”按鈕所關聯的函式的程式碼document.forms[0].reset();就是呼叫表單的 Reset()方法；
表單中的 Input物件有兩種特別的按鈕物件：型別為 Submit的按鈕物件和型別為 Reset的按鈕物件，點選這種按鈕，它的動作就是觸發表單的 submit()事件或者reset()事件。在圖 2的例子中，我們採用型別為 Button的普通按鈕物件來完成這種功能。比如圖 2的“重寫”按鈕如果要用 Reset型別的按鈕替代的話，只需要直接<input type="Reset"name="Reset" value="重寫">,不需要寫它的 Onclick事件程式碼函式，因為這種按鈕的動作預設就是表單 reset()事件。
順便提一下，儘管我們常常採用逐步收縮的方法來訪問 HTML標籤所定義的物件。有時候我們也可以採用下列方法：通過物件的 ID或者物件的名稱來獲得該物件。比如：在圖 2中的使用者名稱稱的輸入框 Text的名稱為UserId，它的 ID為 txtUserId，那麼可以通過
var UserId=document.getElementById("txtUserId").value;
或者
var UserId =document.getElementByName("UserId").value
來取得該物件的 Value的值。
使用單選鈕 (Radio)和多選鈕 (Checkbox)的例子：
function Select_check(objName){
varobj=document.getElementsByName(objName);
var selArray = new Array();
for(var i=0;i<obj.length;i++){
if(obj[i].checked){
selArray[i]=obj[i].value;
}
}
return selArray;
}
對於相關成組單選鈕和多選鈕，在 Web上總是以同名的一組物件出現，在函式中，遍歷物件組的每個元素，如果該元素的是否Checked，如果是，則把該元素的值存入到陣列selArray中，最後，函式返回值為陣列selArray。
3.4.1 字串物件
建立字串物件，一般可以通過： varstrTemp =”This is a string”
請看下列檢測使用者瀏覽器資訊的例子：
function dispBrowser(){
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie 6.0")==-1){
alert("你的瀏覽器不是 IE6.0的，本網頁需要 IE6.0才能得到理想顯示效果！");
}
}
簡要註釋：
如果使用者的瀏覽器為 IE6.0的版本，通過
var userAgent = navigator.userAgent.toLowerCase();
可以得到變數 userAgent的值為“mozilla/4.0 (compatible; msie 6.0;windows nt 5.0; i-navfourf)”，通過toLowercase()方法，將字串轉化為小寫字母，有助於下面的判斷字串是否包含“msie 6.0”，不需要考慮大小寫的問題。navigator物件是瀏覽器環境所構成的物件。
檢查使用者字串是否是為整數：
if (isNaN(strTemp)) {
alert("包含有非數字字元！");
return false;
}
對這種應用，還有一個辦法就是，在使用者輸入的時候就限制使用者只能輸入數字字元（“事先預防機制”比“事後稽核機制”是否更好一些呢？通過 JavaScript來對使用者錄入進行有效性驗證，對 Web伺服器來說，也是“事先預防機制”，防止不符要求，不完整的資料資訊提交到伺服器端），可以採用下面的 Input物件：
<input type="text" name="PageNum"
onkeypress="var k=event.keyCode; returnk>=48&&k<=57||k==46"
onpaste="return !clipboardData.getData('text').match(/\D/)"
ondragenter="return false"
style="ime-mode:Disabled"
/>
JavaScript onpaste事件，禁止貼上,如果你想像支付寶的註冊頁面，整個表單都是禁止貼上的話可以在body標籤上加onpaste=”return false”；
oncopy="return false;" oncut="return false;" 防止複製和剪下
3.4.2 日期物件
JavaScript提供了特殊的內部物件――Date物件。建立日期型別的物件的方法有：
1。 vard_today = new Date(); 建立一個包含當前時間和日期的 Data物件；
2。通過 vard_time = new Date(2004,2,14,20,30,01) 表示建立一個 d_time的 Data物件，它的值為 2004年2月 14號 20點30分 01秒。其中的有些引數如果省略的話，JavaScript會自動以零值補充。
日期物件的常用方法例舉：
getDate() 根據當地時間，返回指定日期的天
getDay() 根據當地時間，返回指定日期的星期幾
getHours() 根據當地時間，返回指定日期的小時
getMonth() 根據當地時間，返回指定日期的月份
getMinutes() 根據當地時間，返回指定日期的分鐘
getYear() 根據當地時間，返回指定日期的年份
setDate() 根據當地時間，設定日期變數的天
setHours() 根據當地時間，設定日期變數的小時
var isnMonths=newinitArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月")
var isnDays=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
isnMonths[today.getMonth()] getMonth()座標從零開始
isnDays[today.getDay()] getDay() 座標星期三返回3，星期日在最前面
函式initArray()用來構造一個數組，該函式使用了JavaScript的 Arguments物件，Arguments物件可以獲得一個函式的所有引數集。
★楨結構和框架視窗 (Frame,IFrame)
3.5.1 瞭解連結的Target屬性
<frameset name=framesetnamecols="180,*" FRAMEBORDER=no border="0"
framespacing="0">
<frame name="Directory" src="left.htm"SCROLLING=AUTO
NORESIZE=yes MarginHeight=0 MarginWidth=0
leftMargin=0 target="right">
<frame name="Content" src="right.htm" SCROLLING=AUTO
NORESIZE=yes>
</frameset>
從上面程式碼可以看出，HTML語句中定義了兩個框架視窗，一個名稱為 Directory，它對應於檔案left.htm，另一個框架視窗為 Content，它對應於檔案 right.htm （該檔案原始碼不包含任何內容，為一張“空白”的 Web頁面）。
上圖左邊的幀 Directory的 Src指向的 Left.htm頁面的原始檔如下：
<HTML><head>
<STYLE type=text/css>
BODY {FONT: 14px 宋體;}
a {color:#ffffff}
</style>
</head>
<bodybgcolor="#000000"><br>
<a href="Js_1.htm"target="Content">1.JavaScritp概述</a><br>
<ahref="Js_2.htm" target="Content">2.JS物件的簡單介紹</a><br>
<ahref="JsTest2.htm" target="Content">3.驗證使用者輸入</a><br>
<inputtype="text" name="DispInfo">
</body>
</HTML>
註釋：
在HTML中，連結的HTML標籤有Target屬性，該屬性用來確定該連結的響應的位置。Target屬性的有效值可以是當前瀏覽器顯示內容的任何框架視窗（Frame或者 Iframe）的名稱，本例子中，表示連結在名稱為Content的幀中顯示。
3.5.2 由JavaScript，在不同的楨 (視窗 )間訪問物件
如果一個瀏覽器顯示內容包含多個（幀）Frame，在不同的（幀）Frame中的Web頁如何通過JavaScript訪問其他幀中的 Web頁的物件呢？
假設右邊頁面中有個按鈕，該按鈕onclick的所關聯的JavaScript程式碼為：
top.Directory.document.forms[0].DispInfo.value="測試測試";
實際上，上述內容也是層層限定的逐步收縮法。對於處於幀 Content頁面，top代表瀏覽器的根視窗，該視窗中包含有 Directory和 Content視窗，top.Directory.document表示：瀏覽器根視窗下的幀 Directory所定義的視窗中的文件。
對於不包含幀或者 Iframe的視窗，我們往往直接通過 document來作為物件訪問的頂部層次，這意味著“當前視窗下的當前文件”。當瀏覽器視窗中包含有幀（或者 Iframe時），而且需要從一個視窗訪問另外一個幀所定義的視窗中的物件時，我們就需要在 document之前，來限定究竟是訪問哪個框架（Frame或者
IFrame）下的文件。
Iframe比幀結構集更加靈活，我們可以在一個 Web頁面的任何位置，加入 Iframe，在標籤中設定引數（從設定大小，到指定邊框樣式等等），通過 SRC的值來指定連線到某個 Web頁面。
4.正則表示式和模式匹配
正則表示式描述了字串的一個模式，可以用來驗證使用者輸入資料的格式。正則表示式可以讓使用者通過使用一系列的特殊字元構建匹配模式，然後把匹配模式與資料檔案、程式輸入以及 WEB 頁面的表單輸入等目標物件進行比較，根據