JavaScript學習筆記

《JavaScript學習筆記》由會員分享，可在線閱讀，更多相關《JavaScript學習筆記（66頁珍藏版）》請在裝配圖網(wǎng)上搜索。

JavaScript學習筆記 第一章JavaScript基礎 1. 如何實現(xiàn)JavaScript 4 (1) 如何把JavaScript代碼放到HTML頁面里 4 l 使用 l 使用 JavaScript.js文件： document.write("外部的JavaScript文件"); alert("消息"); l 如何與老瀏覽器打交道 那些不支持 JavaScript 的瀏覽器會把腳本作為頁面的內(nèi)容來顯示。為了防止這種情況發(fā)生，我們可以使用這樣的 HTML 注釋標簽： 注釋行末尾的兩個正斜杠是 JavaScript 的注釋符號，它會阻止 JavaScript 編譯器對這一行的編譯。 (2) 把JavaScript代碼放到HTML頁面不同的位置 頁面中的腳本會在頁面載入瀏覽器后立即執(zhí)行。我們并不總希望這樣。有時，我們希望當頁面載入時執(zhí)行腳本，而另外的時候，我們則希望當用戶觸發(fā)事件時才執(zhí)行腳本。 l 把JavaScript代碼放到HTML部分 把頁面載入時就需要執(zhí)行的JavaScript代碼放到標簽之間。這是一種規(guī)范，建議這樣做。 l 把JavaScript代碼放到HTML部分 把當腳本被調用時，或當事件被觸發(fā)時才會執(zhí)行的JavaScript代碼放到標簽之中，這樣就可以確保在調用JavaScript之前就載入了它。這是一種規(guī)范，建議這樣做。 l 示例代碼 head 2. JavaScript語句與注釋 (1) JavaScript語句結束符 通常要在每行語句結尾加上一個分號(;)，但是根據(jù)JavaScript標準語句結尾的分號是可選的，瀏覽器會把行末作為語句的結尾。 (2) JavaScript代碼塊 JavaScript可以分批的組合起來，使用“{”“}”把多條語句括起來組成代碼塊。代碼塊的作用是一并的執(zhí)行語句序列。 (3) JavaScript注釋 (4) JavaScript變量 l 變量命名規(guī)則 JavaScript變量對大小寫敏感，變量必須是以字母或下劃線開頭 l 申明或創(chuàng)建變量 l 重新申明變量 3. JavaScript運算符 (1) 基本運算符 基本運算符有+、-、*、%、++、--、=、類似+=的運算符，其使用方式與編程語言(Java、C、C#等)基本一樣。下面主要演示+運算符。 (2) 位運算符(~(非運算)、&(與運算)、|(或運算)、^(異或運算)) (3) Boolean運算(!(求反運算)、&&(與運算)、||(或運算)) 對boolean值進行的運算，與編程語言的運算方式基本一致。 (4) 關系運算(<、>、<=、>=、==、!=) (5) 等性運算符(==、===、!=、!==) 下表是一些特殊情況的值： 表達式 值 表達式 值 表達式 值 null==undefined true “NaN”==NaN false 5==NaN false NaN==NaN false NaN!=NaN true false==0 true true==1 true true==2 false undefined==0 false null==0 fale “5”==5 true 全等號由三個等號表示（===），只有在無需類型轉換運算數(shù)就相等的情況下，才返回 true。 (6) 條件運算符 variable = boolean_expression ? true_value : false_value;條件運算符與編程語言的使用方式基本一致。 (7) 其他運算符 l 賦值運算符 每種主要的算術運算以及其他幾個運算都有復合賦值運算符： 乘法/賦值（*=） 除法/賦值（/=） 取模/賦值（%=） 加法/賦值（+=） 減法/賦值（-=） 左移/賦值（<<=） 有符號右移/賦值（>>=） 無符號右移/賦值（>>>=） l 逗號運算符 用逗號運算符可以在一條語句中執(zhí)行多個運算。 例如：var iNum1 = 1, iNum = 2, iNum3 = 3; l typeof運算符 typeof 運算符有一個參數(shù)，即要檢查的變量或值，對變量或值調用 typeof 運算符將返回下列值之一：Undefined：如果變量是 Undefined 類型的；Boolean：如果變量是 Boolean 類型的；Number：如果變量是 Number 類型的；String：如果變量是 String 類型的；Object：如果變量是一種引用類型或 Null 類型的。 Undefined：Undefined類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。 null：另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。alert(null == undefined); //輸出 "true"。 l delete運算符 delete 運算符刪除對以前定義的對象屬性或方法的引用。例如： l instanceof運算符 能用 instanceof 運算符檢查給定變量指向的對象的類型。例如： 使用instanceof 運算符會出現(xiàn)很多意想不到的結果，建議不用。使用原型方式(或混合的構造函數(shù)/原型方式)申明instanceof才有用 4. with語句 (1) 語法及作用 作用：with 語句用于設置代碼在特定對象中的作用域。 語法：with (對象) { 對象使用范圍 } (2) 示例 提示：with 語句是運行緩慢的代碼塊，尤其是在已設置了屬性值時。大多數(shù)情況下，如果可能，最好避免使用它。 5. 分支語句 (1) if...else...語句 (2) switch語句 6. 消息框 (1) 警告框 語法：alert(“文本”); (2) 確認框 語法：confirm(“文本”); (3) 提示框 語法：prompt(“文本”,“默認值”); 7. 函數(shù)(一般定義到標簽之間) (1) 定義函數(shù) function 函數(shù)名(var1,var2,...,varX) { 代碼．．．(return) } 在函數(shù)內(nèi)申明的變量，只能在函數(shù)中訪問(其生存期就在整個函數(shù)中)。在函數(shù)外申明的變量，在整個HTML頁面內(nèi)都有效(生存期在整個HTML頁面)。 (2) 關于函數(shù)的arguments對象 l 在函數(shù)代碼中，使用特殊對象 arguments，開發(fā)者無需明確指出參數(shù)名，就能訪問它們。 例如，在函數(shù) sayHi() 中，第一個參數(shù)是 message。用 arguments[0] 也可以訪問這個值，即第一 個參數(shù)的值（第一個參數(shù)位于位置 0，第二個參數(shù)位于位置 1，依此類推）。 l 使用arguments.length檢測參數(shù)個數(shù) l 模擬函數(shù)重載 (3) Function對象(類) l Function對象的使用 函數(shù)實際上是功能完整的對象。Function 類可以表示開發(fā)者定義的任何函數(shù)。用 Function 類直接創(chuàng)建函數(shù)的語法如下：var function_name = new function(arg1, arg2, ..., argN, function_body)。 盡管可以使用 Function 構造函數(shù)創(chuàng)建函數(shù)，但最好不要使用它，因為用它定義函數(shù)比用傳統(tǒng)方式要慢得多。不過，所有函數(shù)都應看作 Function 類的實例。 l 使用Function類的length屬性 使用Function的length屬性可以得到函數(shù)的形參個數(shù) l 使用Function類的valueOf()方法和toString()方法 這兩個方法返回的都是函數(shù)的源代碼，在調試時尤其有用。 (4) 閉包 閉包就是：函數(shù)可以使用函數(shù)之外定義的變量。 就像使用任何高級函數(shù)一樣，使用閉包要小心，因為它們可能會變得非常復雜。 8. 循環(huán)語句 (1) for循環(huán) l for循環(huán)的使用格式 格式1： for (變量=開始值;變量<=結束值;變量=變量+步進值) { 需執(zhí)行的代碼 } 格式2： for (property in expression) { 需執(zhí)行的代碼 } l 例子 (2) while循環(huán) l While循環(huán)的使用格式 格式1： while (expression) { 需執(zhí)行的代碼 } 格式2： do { 需執(zhí)行的代碼 } while (條件); l 例子 (3) 使用break和continue退出循環(huán) break 命令可以終止循環(huán)的運行，然后繼續(xù)執(zhí)行循環(huán)之后的代碼（如果循環(huán)之后有代碼的話）。continue 命令會終止當前的循環(huán)，然后從下一個值繼續(xù)運行。 9. JavaScript事件 (1) 事件句柄 FF: Firefox, N: Netscape, IE: Internet Explorer 屬性 當以下情況發(fā)生時，出現(xiàn)此事件 FF N IE onabort 圖像加載被中斷 1 3 4 onblur 元素失去焦點 1 2 3 onchange 用戶改變域的內(nèi)容 1 2 3 onclick 鼠標點擊某個對象 1 2 3 ondblclick 鼠標雙擊某個對象 1 4 4 onerror 當加載文檔或圖像時發(fā)生某個錯誤 1 3 4 onfocus 元素獲得焦點 1 2 3 onkeydown 某個鍵盤的鍵被按下 1 4 3 onkeypress 某個鍵盤的鍵被按下或按住 1 4 3 onkeyup 某個鍵盤的鍵被松開 1 4 3 onload 某個頁面或圖像被完成加載 1 2 3 onmousedown 某個鼠標按鍵被按下 1 4 4 onmousemove 鼠標被移動 1 6 3 onmouseout 鼠標從某元素移開 1 4 4 onmouseover 鼠標被移到某元素之上 1 2 3 onmouseup 某個鼠標按鍵被松開 1 4 4 onreset 重置按鈕被點擊 1 3 4 onresize 窗口或框架被調整尺寸 1 4 4 onselect 文本被選定 1 2 3 onsubmit 提交按鈕被點擊 1 2 3 onunload 用戶退出頁面 1 2 3 (2) onload和onUnload 當用戶進入或離開頁面時就會觸發(fā) onload 和 onUnload 事件。onload 事件常用來檢測訪問者的瀏覽器類型和版本，然后根據(jù)這些信息載入特定版本的網(wǎng)頁。 (3) onFocus, onBlur 和 onChange onFocus、onBlur 和 onChange 事件通常相互配合用來驗證表單。 (4) onSubmit onSubmit 用于在提交表單之前驗證所有的表單域。下面是一個使用 onSubmit 事件的例子。當用戶單擊表單中的確認按鈕時，checkForm() 函數(shù)就會被調用。假若域的值無效，此次提交就會被取消。checkForm() 函數(shù)的返回值是 true 或者 false。如果返回值為true，則提交表單，反之取消提交。

(5) onMouseOver 和 onMouseOut onMouseOver 和 onMouseOut 用來創(chuàng)建“動態(tài)的”按鈕。下面是一個使用 onMouseOver 事件的例子。當 onMouseOver 事件被腳本偵測到時，就會彈出一個警告框： (6) JavaScript 計時事件 通過使用 JavaScript，我們有能力作到在一個設定的時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調用后立即執(zhí)行。我們稱之為計時事件。在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是: setTimeout()：未來的某時執(zhí)行代碼，語法：var t=setTimeout("javascript語句",毫秒) clearTimeout()：取消setTimeout()，語法：clearTimeout(setTimeout_variable) 10. 異常處理Try...Catch 語句 (1) 異常處理格式 try { //在此運行代碼 } catch(err) { //在此處理錯誤 } (2) 例子 (3) Throw聲明 l Throw語法 throw(exception); exception可以是字符串、整數(shù)、邏輯值或者對象。 l 例子 (4) onerror事件 l onerror事件功能 可以使用 onerror 事件捕獲網(wǎng)頁中的錯誤。（chrome、opera、safari 瀏覽器不支持,不建議使用） l 語法 onerror=handleErrfunction handleErr(msg,url,l) { //Handle the error here return true or false } 瀏覽器是否顯示標準的錯誤消息，取決于onerror的返回值。如果返回值為 false，則在控制臺(JavaScript console)中顯示錯誤消息。反之則不會 l 例子 11. 特殊字符與注意點 (1) 特殊字符 代碼 輸出 | 代碼 輸出 | 代碼 輸出 \ 單引號 | \" 雙引號 | \t 制表符 \& 和號 | \\ 反斜杠 | \b 退格符 \n 換行符 | \r 回車符 | \f 換頁符 (2) 注意點 l JavaScript 對大小寫敏感 l 空格 JavaScript會忽略多余的空格。所以您可以在代碼中添加適當?shù)目崭瘢沟么a的可讀性更強。下面的行是等效的：name="Hege"與name = "Hege" l 換行 您可以在文本字符串內(nèi)部使用反斜杠對代碼進行折行。下面的例子是正確的： document.write("Hello \ World!") 但是不能像這樣折行： document.write \ ("Hello World!") 2、 JavaScript對象 1. JavaScript對象簡介 (1) JavaScript對象也是有屬性和方法的 l 對象屬性的使用 l 對象方法的使用 (2) 對象的定義與實例化 可以先實例化對象，再定義對象的屬性和方法。