JS基礎學習筆記整理

JavaScript是一種基於對象的腳本編程語言，是瀏覽器上的程序語言。當web容器輸出內容到瀏覽器時，這個內容是包含js源代碼的，此時，JavaScript可以操作瀏覽器上的一切內容，在瀏覽器上提供用戶交互，頁面美化，增加頁面的智能性。

JavaScript是一種基於對象的語言，通過 JavaScript代碼來操作對象――訪問或者設置對象的屬性，編寫對象的特定的事件（方法）代碼。

JavaScript中的對象是由屬性(properties)和方法(methods)兩個基本的元素的構成的。前者是對象在實施其所需要行爲的過程中，實現信息的裝載單位，從而與變量相關聯；後者是指對象能夠按照設計者的意圖而被執行，從而與特定的函數相聯。

對象從哪裏來？JavaScript可以操作的對象有下列三個來源：

1.瀏覽器環境和 HTML標籤語句所構成的現成對象（鏈接、圖像、插件、HTML表單元素、瀏覽器細節等）；

2.通過 JavaScript的內置類所創建的對象，比如 Data（日期）和 Number(數值)；

3.通過 JavaScript編程，用戶自己創建的對象；

1.JavaScript 代碼的加入

a. JavaScript的代碼的加入，通過在Web頁中直接寫入：

//JavaScript語言代碼；

//JavaScript 語言代碼；

//…

</Script>

通過標識<Script> </Script>指明其中包含的是Script腳本代碼；

通過Language ="JavaScript"說明標識中使用的語言，這裏是JavaScript語言；

可將<Script></Script>標識放入<Head>...</Head>或<Body>...</Body>之間。將 JavaScript標識放置<Head>...</Head>在頭部之間，使之在頁面文檔主體和其餘部分代碼之前裝載。尤其是一些函數的代碼，建議讀者將這些代碼放在<Head>... </Head>在頭部之間。

也可以將 JavaScript標識放置在<Body>... </Body>主體之間以實現某些部分動態地創建文檔

b. οnclick=’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的瀏覽器的高級屬性中啓用腳本調試，可以發現錯誤存在的地方。

◆ 應用外部腳本庫

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'); //0

parseInt(‘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"

οnkeypress="var k=event.keyCode; returnk>=48&&k<=57||k==46"

οnpaste="return !clipboardData.getData('text').match(/\D/)"

οndragenter="return false"

style="ime-mode:Disabled"

JavaScript  onpaste事件，禁止粘貼,如果你想像支付寶的註冊頁面，整個表單都是禁止粘貼的話可以在body標籤上加οnpaste=”return false”；

οncοpy="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頁面的源文件如下：

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 頁面的表單輸入等目標對象進行比較，根據比較對象中是否包含匹配模式，執行相應的程序。

4.1 定義正則表達式

類似於字符串被定義在引號內，正則表達式被定義在一對“/”中間。

varfilter =/m$/

該句創建了一個正則表達式，可以匹配任意以字母 m 結尾的字符串。其中位於“/”定界符之間的部分就是將要在目標對象中進行匹配的模式。用戶只要把希望查找匹配對象的模式內容放入“/”定界符之間即可。爲了能夠使用戶更加靈活的定製模式內容，正則表達式提供了專門的“元字符”。所謂元字符就是指那些在正則表達式中具有特殊意義的專用字符，可以用來規定其前導字符（即位於元字符前面的字符）在目標對象中的出現模式。

較爲常用的元字符包括：“+”，“*”，以及“?”。其中，“+”元字符規定其前導字符必須在目標對象中連續出現一次或多次，“*”元字符規定其前導字符必須在目標對象中出現零次或連續多次，而“?”元字符規定其前導對象必須在目標對象中連續出現零次或一次。

除了元字符之外，用戶還可以精確指定模式在匹配對象中出現的頻率。例如，

/jim{2,6}/

上述正則表達式規定字符 m 可以在匹配對象中連續出現 2-6 次，因此，上述正則表達式可以同jimmy或jimmmmmy 等字符串相匹配。

對如何使用正則表達式有了初步瞭解之後，我們來看一下其它幾個重要的元字符的使用方式。

\s：用於匹配單個空格符，包括 tab 鍵和換行符；

\S：用於匹配除單個空格符之外的所有字符；

\d：用於匹配從 0 到 9 的數字；

\w：用於匹配字母，數字或下劃線字符；

\W：用於匹配所有與\w 不匹配的字符；

（說明：我們可以把\s 和\S 以及\w 和\W 看作互爲逆運算）

除了我們以上所介紹的元字符之外，正則表達式中還具有另外一種較爲獨特的專用字符，即定位符。定位符用於規定匹配模式在目標對象中的出現位置。

較爲常用的定位符包括：“^”, “$”, “\b” 以及 “\B”。其中，“^”定位符規定匹配模式必須出現在目標字符串的開頭，“$”定位符規定匹配模式必須出現在目標對象的結尾，\b定位符規定匹配模式必須出現在目標字符串的開頭或結尾的兩個邊界之一，而“\B”定位符則規定匹配對象必須位於目標字符串的開頭和結尾兩個邊界之內，即匹配對象既不能作爲目標字符串的開頭，也不能作爲目標字符串的結尾。同樣，我們也可以把“^”和“$”以及“\b”和“\B”看作是互爲逆運算的兩組定位符。

/\bbom/

因爲上述正則表達式模式以“\b”定位符開頭，所以可以與目標對象中以 “bomb”, 或 “bom”開頭的字符串相匹配。

/man\b/

因爲上述正則表達式模式以“\b”定位符結尾，所以可以與目標對象中以“human”,“woman”或“man”結尾的字符串相匹配。

4.2 字符類

字符類是括在方括號中的文字字符組合。因此，正則表達式/[xyz]/可以匹配任意包括 x、y、z 中一個字符。在字符類中經常出現下列符號“^”、“-”、“|”符號。如下例子：

/[^A-C]/

上述字符串將會與目標對象中除 A，B，和 C 之外的任何字符相匹配。一般來說，當“^”出現在 “[]”內時就被視做否定運算符；而當“^”位於“[]”之外，或沒有“[]”時，則應當被視做定位符。

/Th\*/

上述正則表達式將會與目標對象中的“Th*”而非“The”等相匹配。反斜槓“\”表示轉義字符序列，比如“\*”表示字符*，“\n”表示換行。

下列式子表示可以匹配3 個數字或者4 個小寫字母：

varfilter =/\d{3}|[a-z]{4}/;

4.2 正則表達式的應用例子

我們可以使用正則表達式的test 或者 search 方法來發現字符中是否符合某個模式。比如：

varResultFlag = forms[0].UserName.value.search(/[a-z]|[A-Z]/);

if(ResultFlag==-1){alert(表單中的UserName 沒有包含任何字符！)};

下列爲一個檢查用戶郵件地址格式的例子

<scriptlanguage="Javascript">

<!--

functionvertifyMailAddress(obj){

varemail = obj.email.value;

var pattern =

/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;

flag =pattern.test(email);

if(flag){

alert("恭喜！郵件地址輸入正確，表單將提交！");return true;

}else{

alert("失敗！郵件地址格式不正確!表單不會提交"); return false;

}

--></script>

<body>

<formonSubmit="return vertifyMailAddress(this);">

<inputname="email" type="text">

<inputtype="submit">

</form>

</body>

laoma4102

發佈了39 篇原創文章 · 獲贊 16 · 訪問量 11萬+

私信關注

JS基礎學習筆記整理

1.JavaScript 代碼的加入

1.區分大小寫

2.不匹配的引號、圓括號或花括號

4.換行

5.多餘的逗號

6.HTML id 衝突

7.變量作用域

8.覆蓋函數/重載函數

9.字符串替換

10.parseInt

11. ‘this’

12. 遺漏的參數

13. for關鍵字

14. switch語句

15. undefined ≠ null

16. 事件處理陷阱

Python實現大麥網搶票的四大關鍵技術點解析

回車換行問題0x0D和0x0A

提交表單到新的窗口，只顯示一個窗口

新彈出的窗口最大化，和點擊右上角最大化一樣的效果

論男女關係

struts資源文件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結