參考資料來源W3School(http://www.w3school.com.cn)
JavaScript 事件
事件通常與函數配合使用,這樣就可以通過發生的事件來驅動函數執行。
屬性 | 當以下情況發生時,出現此事件 | Firefox | Netscape | 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 |
舉一個比較常用的例子:
<input type="text" size="30" id="email" οnchange="checkEmail()">
JavaScript 特殊字符
var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
上面的結果爲:We are the so-called "Vikings" from the north。
代碼 | 輸出 |
---|---|
\' | 單引號 |
\" | 雙引號 |
\& | 和號 |
\\ | 反斜槓 |
\n | 換行符 |
\r | 回車符 |
\t | 製表符 |
\b | 退格符 |
\f | 換頁符 |
面向對象編程
JavaScript 是面向對象的編程語言 (OOP)。真厲害,難道它還會繼承......
先看看它自己的內部對象
String 對象
字符串是 JavaScript 的一種基本的數據類型。
String 對象的 length 屬性聲明瞭該字符串中的字符數。
String 類定義了大量操作字符串的方法,例如從字符串中提取字符或子串,或者檢索字符或子串。
需要注意的是,JavaScript 的字符串是不可變的(immutable),String 類定義的方法都不能改變字符串的內容。像 String.toUpperCase() 這樣的方法,返回的是全新的字符串,而不是修改原始字符串。
var txt="Hello world!"
document.write(txt.length)
document.write(txt.toUpperCase())
開始以爲JavaScript只是一個輕量的腳本語言,應該沒有多少東西,原來不是,所以要查看詳細的String對象的屬性和方法,請參考String 對象
Date
Date 對象用於處理日期和時間。Date 對象會自動把當前日期和時間保存爲其初始值。
var myDate=new Date()
Array
有兩種向數組賦值的方法(你可以添加任意多的值,就像你可以定義你需要的任意多的變量一樣)。
1:JavaScript Array 對象參考手冊
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一個整數自變量來控制數組的容量:
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2:
var mycars=new Array("Saab","Volvo","BMW")
注意:如果你需要在數組內指定數值或者邏輯值,那麼變量類型應該是數值變量或者布爾變量,而不是字符變量。
訪問數組的代碼爲:document.write(mycars[0]);
如要修改則:mycars[0]="Opel";
Boolean
您可以將 Boolean 對象理解爲一個產生邏輯值的對象包裝器。Boolean(邏輯)對象用於將非邏輯值轉換爲邏輯值(true 或者 false)。
如果邏輯對象無初始值或者其值爲 0、-0、null、""、false、undefined 或者 NaN,那麼對象的值爲 false。否則,其值爲 true(即使當自變量爲字符串 "false" 時)!
下面的所有的代碼行均會創建初始值爲 false 的 Boolean 對象。
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
Math
Math(算數)對象的作用是:執行普通的算數任務。Math 對象提供多種算數值類型和函數。無需在使用這個對象之前對它進行定義。
document.write(Math.round(4.7));//使用了 Math 對象的 round 方法對一個數進行四捨五入,結果爲5
document.write(Math.random());//產生0到1之間的隨機數
document.write(Math.floor(Math.random()*11)) ;//用floor() 方法和 random() 來返回一個介於 0 和 10 之間的隨機數
RegExp
RegExp 是正則表達式的縮寫。當您檢索某個文本時,可以使用一種模式來描述要檢索的內容。RegExp 就是這種模式。簡單的模式可以是一個單獨的字符。更復雜的模式包括了更多的字符,並可用於解析、格式檢查、替換等等。您可以規定字符串中的檢索位置,以及要檢索的字符類型,等等。
new RegExp(pattern, attributes);
參數 pattern 是一個字符串,指定了正則表達式的模式或其他正則表達式。
參數 attributes 是一個可選的字符串,包含屬性 "g"、"i" 和 "m",分別用於指定全局匹配、區分大小寫的匹配和多行匹配。ECMAScript 標準化之前,不支持 m 屬性。如果pattern 是正則表達式,而不是字符串,則必須省略該參數。
方法 | 描述 | FF | IE |
---|---|---|---|
compile | 編譯正則表達式。 | 1 | 4 |
exec | 檢索字符串中指定的值。返回找到的值,並確定其位置。 | 1 | 4 |
test | 檢索字符串中指定的值。返回 true 或 false。 | 1 | 4 |
JavaScript HTML DOM 對象
HTML DOM 是 W3C 標準(是 HTML 文檔對象模型的英文縮寫,Document Object Model for HTML)。
HTML DOM 定義了用於 HTML 的一系列標準的對象,以及訪問和處理 HTML 文檔的標準方法。
通過 DOM,可以訪問所有的 HTML 元素,連同它們所包含的文本和屬性。可以對其中的內容進行修改和刪除,同時也可以創建新的元素。
HTML DOM 獨立於平臺和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。
這個真的厲害哦。原來每一個HTML元素都是DOM對象,那真的是想怎麼處理就怎麼處理了。
DOM對象 | 描述 |
---|---|
Document | 代表整個 HTML 文檔,用來訪問頁面中的所有元素。 |
Anchor | 代表 <a> 元素。 |
Area | 代表圖像地圖中的 <area> 元素。 |
Base | 代表 <base> 元素。 |
Body | 代表圖像地圖中的 <body> 元素。 |
Button | 代表 <button> 元素。 |
Event | 代表事件的狀態 |
Form | 代表 <form> 元素 |
Frame | 代表 <frame> 元素 |
Frameset | 代表 <frameset> 元素 |
Iframe | 代表 <iframe> 元素 |
Image | 代表 <img> 元素 |
Input button | 代表 HTML 表單中的按鈕 |
Input checkbox | 代表 HTML 表單中的選擇框 |
Input file | 代表 HTML 表單中的 fileupload 。 |
Input hidden | 代表 HTML 表單中的隱藏域。 |
Input password | 代表 HTML 表單中的密碼域。 |
Input radio | 代表 HTML 表單中的單選框。 |
Input reset | 代表 HTML 表單中的重置按鈕。 |
Input submit | 代表 HTML 表單中的確認按鈕。 |
Input text | 代表 HTML 表單中的文本輸入域。 |
Link | 代表 <link> 元素 |
Meta | 代表 <meta> 元素 |
Object | 代表一個 <Object> 元素 |
Option | 代表 <option> 元素 |
Select | 代表 HTML 表單中的選擇列表。 |
Style | 代表某個單獨的樣式聲明。 |
Table | 代表 <table> 元素。 |
TableData | 代表 <td> 元素。 |
TableRow | 代表 <tr> 元素。 |
Textarea | 代表 <textarea> 元素。 |
Window 對象
Window 對象表示一個瀏覽器窗口或一個框架。在客戶端 JavaScript 中,Window 對象是全局對象,所有的表達式都在當前的環境中計算。也就是說,要引用當前窗口根本不需要特殊的語法,可以把那個窗口的屬性作爲全局變量來使用。例如,可以只寫document,而不必寫 window.document。原來alert()就是Windows對象的方法。
Navigator 對象
Navigator 對象包含有關瀏覽器的信息。
Navigator 對象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進行平臺專用的配置。
雖然這個對象的名稱顯而易見的是 Netscape 的 Navigator 瀏覽器,但其他實現了 JavaScript 的瀏覽器也支持這個對象。
Navigator 對象的實例是唯一的,可以用 Window 對象的 navigator 屬性來引用它。
比方說可以知道瀏覽器的版本,操作系統使用的默認語言等,詳情參考Navigator對象
Screen 對象
Screen 對象包含有關客戶端顯示屏幕的信息。每個 Window 對象的 screen 屬性都引用一個 Screen 對象。Screen 對象中存放着有關顯示瀏覽器屏幕的信息。JavaScript 程序將利用這些信息來優化它們的輸出,以達到用戶的顯示要求。例如,一個程序可以根據顯示器的尺寸選擇使用大圖像還是使用小圖像,它還可以根據顯示器的顏色深度選擇使用 16 位色還是使用 8 位色的圖形。另外,JavaScript 程序還能根據有關屏幕尺寸的信息將新的瀏覽器窗口定位在屏幕中間。
詳情參考Screen對象
History 對象
History 對象最初設計來表示窗口的瀏覽歷史。但出於隱私方面的原因,History 對象不再允許腳本訪問已經訪問過的實際 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。
詳情參考History對象
Location 對象
Location 對象存儲在 Window 對象的 Location 屬性中,表示那個窗口中當前顯示的文檔的 Web 地址。它的 href 屬性存放的是文檔的完整 URL,其他屬性則分別描述了 URL 的各個部分。這些屬性與 Anchor 對象(或 Area 對象)的 URL 屬性非常相似。當一個 Location 對象被轉換成字符串,href 屬性的值被返回。這意味着你可以使用表達式 location 來替代 location.href。