JAVASCRIPT學習筆記基礎(三)
事件
JavaScript 使我們有能力創建動態頁麵。事件是可以被 JavaScript 偵測到的行為。
網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數的事件。比方說,我們可以在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁麵中定義。
事件舉例:
- 鼠標點擊
- 頁麵或圖像載入
- 鼠標懸浮於頁麵的某個熱點之上
- 在表單中選取輸入框
- 確認表單
- 鍵盤按鍵
注意:事件通常與函數配合使用,當事件發生時函數才會執行。
事件句柄
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作(action),比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下麵是一個屬性列表,這些屬性可插入 HTML 標簽來定義事件動作。
FF: Firefox, N: Netscape, IE: Internet Explorer
屬性 | 當以下情況發生時,出現此事件 | FF | N | IE |
---|---|---|---|---|
onabort | 圖像加載被中斷 | 1 | 3 | 4 |
onblur | 元素失去焦點 | 1 | 2 | 3 |
onchange | 用戶改變域的內容 | 1 | 2 | 3 |
onclick | 鼠標點擊某個對象 | 1 | 2 | 3 |
ondblclick | 鼠標雙擊某個對象 | 1 | 4 | 4 |
onerror | 當加載文檔或圖像時發生某個錯誤 | 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 |
try...catch..
<html> <head> <script type="text/javascript"> var txt="" function message() { try { addlert("Welcome guest!") } catch(err) { txt="本頁中存在錯誤。\n\n" txt+="錯誤描述:"+err.description+"\n\n" txt+="點擊‘確定’繼續。\n\n" alert(txt) } } </script> </head> <body> <input type="button" value="查看消息" /> </body> </html>
下一個例子會顯示一個確認框,讓用戶來選擇在發生錯誤時點擊確定按鈕來繼續瀏覽網頁,還是點擊取消按鈕來回到首頁。如果 confirm 方法的返回值為 false,代碼會把用戶重定向到其他的頁麵。如果 confirm 方法的返回值為 true,那麼代碼什麼也不會做。
<html> <head> <script type="text/javascript"> var txt="" function message() { try { addlert("歡迎用戶"); } catch(err) { txt="本頁中存在錯誤。\n\n" txt+="點擊“確定”繼續查看本頁,\n" txt+="點擊“取消”返回首頁。\n\n" if(!confirm(txt)) { document.location.href="https://www.baidu.com" } } } </script> </head> <body> <input type="button" value="查看消息" /> </body> </html>
Throw 聲明
throw 聲明的作用是創建 exception(異常)。你可以把這個聲明與 try...catch 聲明配合使用,以達到控製程序流並產生精確錯誤消息的目的。
語法:
throw(exception)
exception 可以是字符串、整數、邏輯值或者對象。
注意:使用小寫字母編寫 throw。使用大寫字母會出錯!
實例 1
下麵的實例的作用是測定變量 x 的值。如果 x 的值大於 10 或者小於 0,錯誤就會被拋出 (throw)。這個錯誤被 catch 的參數捕獲後,就會顯示出自定義的出錯信息。
<html> <body> <script> var x=prompt("請輸入0至10之間的數","") try { if(x>10) throw "Err1" else if(x<0) throw "Err2" else if(isNaN(x)) throw "Err3" } catch(er) { if(er=="Err1") alert("錯誤!該值太大!") if(er=="Err2") alert("錯誤!該值太小!") if(er=="Err3") alert("錯誤!該值不是數字!") } </script> </body> </html>
onerror 事件
我們剛講過如何使用 try...catch 聲明來捕獲網頁中的錯誤。現在,我們繼續講解如何使用 onerror 事件來達到相同的目的。
隻要頁麵中出現腳本錯誤,就會產生 onerror 事件。
如果需要利用 onerror 事件,就必須創建一個處理錯誤的函數。你可以把這個函數叫作 onerror 事件處理器 (onerror event handler)。這個事件處理器使用三個參數來調用:msg(錯誤消息)、url(發生錯誤的頁麵的 url)、line(發生錯誤的代碼行)。
語法:
onerror=handleErrfunction handleErr(msg,url,l) { //Handle the error here return true or false }
瀏覽器是否顯示標準的錯誤消息,取決於 onerror 的返回值。如果返回值為 false,則在控製台 (JavaScript console) 中顯示錯誤消息。反之則不會。
<html> <head> <script type="text/javascript"> onerror=handleErr var txt="" function handleErr(msg,url,l) { txt="本頁中存在錯誤。\n\n" txt+="錯誤:" + msg + "\n" txt+="URL: " + url + "\n" txt+="行:" + l + "\n\n" txt+="點擊“確定”繼續。\n\n" alert(txt) return true } function message() { adddlert("Welcome guest!") } </script> </head> <body> <input type="button" value="查看消息" /> </body> </html>
JavaScript 特殊字符
你可以在 JavaScript 中使用反斜杠來向文本字符串添加特殊字符。
插入特殊字符
反斜杠用來在文本字符串中插入省略號、換行符、引號和其他特殊字符。
請看下麵的 JavaScript 代碼:
var txt="We are the so-called "Vikings"
from the north."
document.write(txt)
在 JavaScript 中,字符串使用單引號或者雙引號來起始或者結束。這意味著上麵的字符串將被截為:We are the so-called。
要解決這個問題,就必須把在 "Viking" 中的引號前麵加上反斜杠 (\)。這樣就可以把每個雙引號轉換為字麵上的字符串。
var txt="We are the so-called \"Vikings\"
from the north."
document.write(txt)
現在 JavaScript 就可以輸出正確的文本字符串了:We are the so-called "Vikings" from the north。
這是另一個例子:
document.write ("You \&
me are singing!")
上麵的例子會產生以下輸出:
You & me are singing!
下麵的表格列出了其餘的特殊字符,這些特殊字符都可以使用反斜杠來添加到文本字符串中:
代碼 | 輸出 |
---|---|
\' | 單引號 |
\" | 雙引號 |
\& | 和號 |
\\ | 反斜杠 |
\n | 換行符 |
\r | 回車符 |
\t | 製表符 |
\b | 退格符 |
\f | 換頁符 |
本節的內容是:在使用 JavaScript 進行編碼的過程中,其他一些需要了解的重要事項。
JavaScript 對大小寫敏感
名為 "myfunction" 的函數和名為 "myFunction" 的函數是兩個不同的函數,同樣,變量 "myVar" 和變量 "myvar" 也是不同的。
JavaScript 對大小寫敏感 - 所以當您創建或使用變量、對象及函數時,請注意字符的大小寫。
空格
JavaScript 會忽略多餘的空格。所以您可以在代碼中添加適當的空格,使得代碼的可讀性更強。下麵的兩行是等效的:
name="Hege" name = "Hege"
換行
您可以在文本字符串內部使用反斜杠對代碼進行折行。下麵的例子是正確的:
document.write("Hello \ World!")
但是不能像這樣折行:
document.write \ ("Hello World!")
JavaScript 對象簡介
JavaScript 是麵向對象的編程語言 (OOP)。
OOP 語言使我們有能力自定義對象和變量類型。
麵向對象編程
JavaScript 是麵向對象的編程語言 (OOP)。OOP 語言使我們有能力定義自己的對象和變量類型。
別著急,我們會在高級 JavaScript 的部分講解如何創建自己的對象。現在,我們要開始學習內建的 JavaScript 對象,以及如何使用它們。從下一節開始,我們將具體地依次講解的這些內建的 JavaScript 對象。
注意:對象隻是一種特殊的數據。對象擁有屬性和方法。
屬性
屬性指與對象有關的值。
在下麵的例子中,我們使用字符串對象的長度屬性來計算字符串中的字符數目。
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length
)
</script>
上麵的代碼輸出為:
12
方法
方法指對象可以執行的行為(或者可以完成的功能)。
在下麵的例子中,我們使用字符串對象的 toUpperCase() 方法來顯示大寫字母文本。
<script type="text/javascript">
var str="Hello world!"
document.write(str.toUpperCase()
)
</script>
上麵的代碼輸出為:
HELLO WORLD!
JavaScript String 對象參考手冊
String 對象
String 對象用於處理文本(字符串)。
創建 String 對象的語法:
new String(s); String(s);
參數
參數 s 是要存儲在 String 對象中或轉換成原始字符串的值。
返回值
當 String() 和運算符 new 一起作為構造函數使用時,它返回一個新創建的 String 對象,存放的是字符串 s 或 s 的字符串表示。
當不用 new 運算符調用 String() 時,它隻把 s 轉換成原始的字符串,並返回轉換後的值。
String 對象屬性
FF: Firefox, IE: Internet Explorer
屬性 | 描述 | FF | IE |
---|---|---|---|
constructor | 對創建該對象的函數的引用 | 1 | 4 |
length | 字符串的長度 | 1 | 3 |
prototype | 允許您向對象添加屬性和方法 | 1 | 4 |
String 對象方法
FF: Firefox, IE: Internet Explorer
方法 | 描述 | FF | IE |
---|---|---|---|
anchor() | 創建 HTML 錨。 | 1 | 3 |
big() | 用大號字體顯示字符串。 | 1 | 3 |
blink() | 顯示閃動字符串。 | 1 | |
bold() | 使用粗體顯示字符串。 | 1 | 3 |
charAt() | 返回在指定位置的字符。 | 1 | 3 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 編碼。 | 1 | 4 |
concat() | 連接字符串。 | 1 | 4 |
fixed() | 以打字機文本顯示字符串。 | 1 | 3 |
fontcolor() | 使用指定的顏色來顯示字符串。 | 1 | 3 |
fontsize() | 使用指定的尺寸來顯示字符串。 | 1 | 3 |
fromCharCode() | 從字符編碼創建一個字符串。 | 1 | 4 |
indexOf() | 檢索字符串。 | 1 | 3 |
italics() | 使用斜體顯示字符串。 | 1 | 3 |
lastIndexOf() | 從後向前搜索字符串。 | 1 | 3 |
link() | 將字符串顯示為鏈接。 | 1 | 3 |
localeCompare() | 用本地特定的順序來比較兩個字符串。 | 1 | 4 |
match() | 找到一個或多個正在表達式的匹配。 | 1 | 4 |
replace() | 替換與正則表達式匹配的子串。 | 1 | 4 |
search() | 檢索與正則表達式相匹配的值。 | 1 | 4 |
slice() | 提取字符串的片斷,並在新的字符串中返回被提取的部分。 | 1 | 4 |
small() | 使用小字號來顯示字符串。 | 1 | 3 |
split() | 把字符串分割為字符串數組。 | 1 | 4 |
strike() | 使用刪除線來顯示字符串。 | 1 | 3 |
sub() | 把字符串顯示為下標。 | 1 | 3 |
substr() | 從起始索引號提取字符串中指定數目的字符。 | 1 | 4 |
substring() | 提取字符串中兩個指定的索引號之間的字符。 | 1 | 3 |
sup() | 把字符串顯示為上標。 | 1 | 3 |
toLocaleLowerCase() | 把字符串轉換為小寫。 | - | - |
toLocaleUpperCase() | 把字符串轉換為大寫。 | - | - |
toLowerCase() | 把字符串轉換為小寫。 | 1 | 3 |
toUpperCase() | 把字符串轉換為大寫。 | 1 | 3 |
toSource() | 代表對象的源代碼。 | 1 | - |
toString() | 返回字符串。 | - | - |
valueOf() | 返回某個字符串對象的原始值。 | 1 | 4 |
String 對象描述
字符串是 JavaScript 的一種基本的數據類型。
String 對象的 length 屬性聲明了該字符串中的字符數。
String 類定義了大量操作字符串的方法,例如從字符串中提取字符或子串,或者檢索字符或子串。
需要注意的是,JavaScript 的字符串是不可變的(immutable),String 類定義的方法都不能改變字符串的內容。像 String.toUpperCase() 這樣的方法,返回的是全新的字符串,而不是修改原始字符串。
在較早的 Netscape 代碼基的 JavaScript 實現中(例如 Firefox 實現中),字符串的行為就像隻讀的字符數組。例如,從字符串 s 中提取第三個字符,可以用 s[2] 代替更加標準的 s.charAt(2)。此外,對字符串應用 for/in 循環時,它將枚舉字符串中每個字符的數組下標(但要注意,ECMAScript 標準規定,不能枚舉 length 屬性)。因為字符串的數組行為不標準,所以應該避免使用它。
JavaScript Date 對象參考手冊
Date 對象
Date 對象用於處理日期和時間。
創建 Date 對象的語法:
var myDate=new Date()
注釋:Date 對象會自動把當前日期和時間保存為其初始值。
Date 對象屬性
FF: Firefox, IE: Internet Explorer
屬性 | 描述 | FF | IE |
---|---|---|---|
constructor | 返回對創建此對象的 Date 函數的引用。 | 1 | 4 |
prototype | 使您有能力向對象添加屬性和方法。 | 1 | 4 |
Date 對象方法
FF: Firefox, IE: Internet Explorer
方法 | 描述 | FF | IE |
---|---|---|---|
Date() | 返回當日的日期和時間。 | 1 | 3 |
getDate() | 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 | 1 | 3 |
getDay() | 從 Date 對象返回一周中的某一天 (0 ~ 6)。 | 1 | 3 |
getMonth() | 從 Date 對象返回月份 (0 ~ 11)。 | 1 | 3 |
getFullYear() | 從 Date 對象以四位數字返回年份。 | 1 | 4 |
getYear() | 請使用 getFullYear() 方法代替。 | 1 | 3 |
getHours() | 返回 Date 對象的小時 (0 ~ 23)。 | 1 | 3 |
getMinutes() | 返回 Date 對象的分鍾 (0 ~ 59)。 | 1 | 3 |
getSeconds() | 返回 Date 對象的秒數 (0 ~ 59)。 | 1 | 3 |
getMilliseconds() | 返回 Date 對象的毫秒(0 ~ 999)。 | 1 | 4 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒數。 | 1 | 3 |
getTimezoneOffset() | 返回本地時間與格林威治標準時間 (GMT) 的分鍾差。 | 1 | 3 |
getUTCDate() | 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。 | 1 | 4 |
getUTCDay() | 根據世界時從 Date 對象返回周中的一天 (0 ~ 6)。 | 1 | 4 |
getUTCMonth() | 根據世界時從 Date 對象返回月份 (0 ~ 11)。 | 1 | 4 |
getUTCFullYear() | 根據世界時從 Date 對象返回四位數的年份。 | 1 | 4 |
getUTCHours() | 根據世界時返回 Date 對象的小時 (0 ~ 23)。 | 1 | 4 |
getUTCMinutes() | 根據世界時返回 Date 對象的分鍾 (0 ~ 59)。 | 1 | 4 |
getUTCSeconds() | 根據世界時返回 Date 對象的秒鍾 (0 ~ 59)。 | 1 | 4 |
getUTCMilliseconds() | 根據世界時返回 Date 對象的毫秒(0 ~ 999)。 | 1 | 4 |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒數。 | 1 | 3 |
setDate() | 設置 Date 對象中月的某一天 (1 ~ 31)。 | 1 | 3 |
setMonth() | 設置 Date 對象中月份 (0 ~ 11)。 | 1 | 3 |
setFullYear() | 設置 Date 對象中的年份(四位數字)。 | 1 | 4 |
setYear() | 請使用 setFullYear() 方法代替。 | 1 | 3 |
setHours() | 設置 Date 對象中的小時 (0 ~ 23)。 | 1 | 3 |
setMinutes() | 設置 Date 對象中的分鍾 (0 ~ 59)。 | 1 | 3 |
setSeconds() | 設置 Date 對象中的秒鍾 (0 ~ 59)。 | 1 | 3 |
setMilliseconds() | 設置 Date 對象中的毫秒 (0 ~ 999)。 | 1 | 4 |
setTime() | 以毫秒設置 Date 對象。 | 1 | 3 |
setUTCDate() | 根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。 | 1 | 4 |
setUTCMonth() | 根據世界時設置 Date 對象中的月份 (0 ~ 11)。 | 1 | 4 |
setUTCFullYear() | 根據世界時設置 Date 對象中的年份(四位數字)。 | 1 | 4 |
setUTCHours() | 根據世界時設置 Date 對象中的小時 (0 ~ 23)。 | 1 | 4 |
setUTCMinutes() | 根據世界時設置 Date 對象中的分鍾 (0 ~ 59)。 | 1 | 4 |
setUTCSeconds() | 根據世界時設置 Date 對象中的秒鍾 (0 ~ 59)。 | 1 | 4 |
setUTCMilliseconds() | 根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。 | 1 | 4 |
toSource() | 返回該對象的源代碼。 | 1 | - |
toString() | 把 Date 對象轉換為字符串。 | 1 | 4 |
toTimeString() | 把 Date 對象的時間部分轉換為字符串。 | 1 | 4 |
toDateString() | 把 Date 對象的日期部分轉換為字符串。 | 1 | 4 |
toGMTString() | 請使用 toUTCString() 方法代替。 | 1 | 3 |
toUTCString() | 根據世界時,把 Date 對象轉換為字符串。 | 1 | 4 |
toLocaleString() | 根據本地時間格式,把 Date 對象轉換為字符串。 | 1 | 3 |
toLocaleTimeString() | 根據本地時間格式,把 Date 對象的時間部分轉換為字符串。 | 1 | 3 |
toLocaleDateString() | 根據本地時間格式,把 Date 對象的日期部分轉換為字符串。 | 1 | 3 |
UTC() | 根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。 | 1 | 3 |
valueOf() | 返回 Date 對象的原始值。 | 1 | 4 |
最後更新:2017-04-02 06:52:21