我們可以粗淺地這麼說——舉凡能在瀏覽器上使用到的元件，我們都可以將之視為物件。

物件模型層次(The Object-Model Hierarchy)

文件的物件層次其基本的作用是用來提供 Script 在瀏覽器視窗所包含的物件中來引用相關的物件。層次就某個方面來說，它就是路徑，Script 可用它來精確定位或參考某個物件。在 JS 中，文件物件的層次是一種「包含」的層次，而不是「繼承」的層次，也就說沒有一個物件會繼承其高層物件所屬的方法或屬性。

當瀏覽器戴入一張網頁的同時，瀏覽器會依據標記語言文件與其它適當資訊的特定值，來建立一定數量的 JS 物件。而這些物件將會存在於標記語言文件它自身的層次結構中。

每張網頁皆有(至少)以下物件：

• navigator(瀏覽器)：存放瀏覽器相關資訊與 plug-ins 資訊。
• window(視窗)：有適用於整個視窗的資訊，框架文件中的每一個子視窗也是視窗物件。
• document(文件)：包含依據文件內容的資訊，如：背景顏色、鏈結與表單等等。
• location(位址)：當前網頁位址的資訊。
• history(瀏覽記錄)：包含先前網頁位址的資訊。

依據它的內容，文件當中也可以包含其它的物件。例如在文件當中的每一個 <form> 標籤都會產生相對應的 form 物件。提到具體物件的定義，您必須指定物件的名稱和它所繼承的所有物件名。通常，在文件中物件的命名是由標記語言標籤所屬的標籤名稱來決定的。

那我們應該要如何使用正確的方式來指定或引用文件當中的目標物件呢？這時我們就要注意一下物件的層次然後再來指定或引用。現在，我們就使用下面較為通俗的例子來說明。

例如在一間「學校」裡頭，有許多間的「教室」，而教室裡有許多位的「學生」。在前述之中我們可以將「學校」當成是一個瀏覽的視窗，「教室」則可以將它視為一張張的網頁，而「學生」可將它當作是網頁中的某個物件。

如果我們要指定或引用某個教室裡的學生「王小明」，這時我們就要注意順序將它完整敘述出，而且須將「各部份之間」用半形句點 . 連接之︰

學校.3年3班.學生.王小明

我們也可以想像「王小明」具有某些特定的技術或方法來做動作：

學校.3年3班.學生.王小明.動作()

然而，這時王小明的動作並沒有完成，其動作的方法需要一個參數來指引它應該怎麼做動作。

學校.3年3班.學生.王小明.動作(起立)

這時，我們所指定的王小明完成了所有應有的動作。

由以上的說明中，我們可發現到，指定物件或引用物件的方式是由大到小或由上到下的，對於這種方式我們可以稱之為「物件的順序層次」，而在網頁之中也是以這種相同的方式來分層次的。假如某個物件的作用域越小，其物件位置的「假設路徑」就越多(因為我們所引用的物件也多)，對客戶端 JS 而言，其作用域最大是不會超過瀏覽器的。

左邊的圖是一個最低公用標準的文件物件層次圖，它可以在所有的瀏覽器當中施行。

例如，當我們想要來指定或者是引用 form 中的 button 物件時，其寫法為：

doucment.form.button

文件物件是如何產生的(How Document Objects Are Born)

當一份標記語言文件被瀏覽器載入後，瀏覽器會在記憶體裡保留由文件中標記語言標記語言的標籤來產生的物件模型，每個文件都有其相應的 window 物件。以下就是一個簡易的示範：

	由於瀏覽器載入了該份文件，所以在當前的視窗之中，瀏覽器會在其模型中產生一個 document 物件。
	然後我們可以在這份標記語言文件當中添加一個表單元素(也就是 form 標籤對)，然後我們再重新載入這份文件，此時瀏覽器的物件模型中則會產生一個 form 物件，而 form 物件在當前層次中是被包含在 document 物件中。
	然後我們在此標記語言文件當中再添加一個文字輸入元素，重新載入該文件後，此時模型中的視窗則會包含一個文件，文件中包含一個表單，表單中則包含一個文字輸入元素。
	然後我們在此標記語言文件當中再添加一個按鈕元素，然後重新載入該文件，因為文字輸入元素和按鈕元素是屬於同一層次的，所以在物件模型中的表現則是被包含在表單元素中。

物件的引用(The Object References)

每當一份標記語言文件載入瀏覽器後，該文件中的所有物件均會依據瀏覽器文件物件模型(Document Object Model，DOM)所規定的層次結構來存放這些物件。假如一個腳本(Script)要控制一個物件，就會有一個相對應的方式來指向一個物件，我們讓腳本來指出它所要的是那一個物件，這種方式我們則可稱之為「物件的引用」或「物件的參考」。

對於每個物件的引用，其引用的路徑(層次)必須包括從頂端的層次到目標物件的層次，而在這個路徑中，每個相連物件之間必須使用句號來隔開彼此。

以下就是一個簡易的 JS 物件引用的示範：

	因為在每個視窗(或框架)中只能有一個文件，所以我們對於一個文件的引用方式為： window.document

從上面我們可以瞭解到，我們引用一個層次越低的物件，其引用的路徑(層次)也就會越長。

※因為在正常的情況下每一個視窗它就只能有一份文件，所以我們對於物件的引用上可以省略 window 這個物件，然後直接從 document 開始引用。

屬性、方法與事件處理(Properties、Methods And Event Handlers)

每個物件在某種程度上是唯一的，而我們定義一個物件可以從三方面來探討：它看起來像什麼、它是如何起作用的以及腳本如何控制它，這三方面分別代表了物件的屬性、方法及事件處理。

屬性(Properties)

每個物理上的物件都會有一些定義該物件特徵的集合，例如一支筆有其長度、直徑或者顏色等等的特徵，而我們可以把這些特徵統稱為屬性。每個特徵或多或少都有一個與它相對應的值，例如一支筆的顏色屬性可能是「黑色」、「藍色」或者「紅色」，這些顏色名稱就是一個文字值；而其長度對它而言就可能是一個數值。

例如：我們先前所提到那個王小明的說明：

學校.3年3班.學生.王小明.身高

由此我們就可以知道，屬性是從屬於物件的，所以我們對於一個物件的屬性引用就是「物件引用」之後加一個句點，然後再加上屬性名稱。例如：

document.bgcolor

方法(Methods)

屬性就像是描述物件的形容詞，而方法就像是物件的動詞，方法指的是所有和物件相關的動作。方法是瀏覽器的一些預設程序，例如 open() 、write() …等等。我們在網頁中安插一些 JS 的方法名稱，瀏覽器就會進行這些方法的程序。

讓方法有其作用的行為，我們可以稱之為「方法的引用」。在 JS 中，方法的引用是由一些方法名稱的關鍵字加上括號 () 所組合成的。例如：

document.write()

有時候為了完成一些 Script 的任務，我們必須在過程中加入一些訊息，對於方法所發送或傳遞的訊息或者是讓其有作用的東西，我們可稱之為「參數」。例如：

document.write("嗨～您好。")

上述簡短的範例則會在文件上顯示——嗨～您好。

事件處理(Event Handlers)

所謂事件指的是在文件中的動作。一般而言，通常指的是瀏覽者動作之後的結果，譬如瀏覽者點擊一個按鈕或者是在文字區中輸入一些字元。例如：

<input type="button" value="請按我" onclick="window.alert('嗨～您好。')" />

上面是一個簡單的例子，它在網頁上會產生一個按鈕，按鈕上的文字為「請按我」，onclick 是一個事件，當按下按鈕後則會產生一個對話訊息方塊，其內容訊息為「嗨～您好。」。

strObj = new String(Str)  Str：字串
String(Num)               Num：數值(轉換為字串)

用來存放或處理字串的物件。

//範例
var myStr = new String(12345);
var myData = myStr + 6789;			//自動將 6789 由數值轉換為字串
									//("字串 + 數值"會自動變成"字串 + 字串")

document.write(myData);				//結果為 123456789(這個是字串不是數值)
document.write(typeof(myData));		//檢查 myData 變數的結果為 string

用來做文字上的修飾效果。

//範例
var myStr1 = "The Time Of My Life";
var myStr2 = "2";var myStr3 = "3";
	document.write(myStr1.big() + "<br />");
	document.write(myStr1.blink() + "<br />");			//IE無效果
	document.write(myStr1.bold() + "<br />");
	document.write(myStr1.fixed() + "<br />");
	document.write(myStr1.italics() + "<br />");
	document.write(myStr1.small() + "<br />");
	document.write(myStr1.strike() + "<br />");
	document.write("H" + myStr2.sub() + "O" + "<br />");
	document.write("2" + myStr3.sup() + "= 8");

strObj.fontcolor(color)  color：顏色的名稱或 RGB
strObj.fontsize(size)    size：1~7 的文字大小

用來設定文字的顏色與大小。

//範例
var myStr = "The Time Of My Life";
	document.write(myStr.fontcolor("red") + "<br />");
	document.write(myStr.fontsize(6) + "<br />");
	document.write(myStr.fontcolor("blue").fontsize(7));

strObj.link(url)  url：鏈結的網址或路徑與檔名

用來設定文字的超鏈結。

//範例
var myStr = "TO SeedNET";
	document.write(myStr.link('http://www.seed.net.tw'));

strObj.toLowerCase()  全部轉為小寫
strObj.toUpperCase()  全部轉為大寫

用來設定英文字母大小寫的轉換。

//範例
var myStr = "AChGUydseEZxQbj";
	document.write("原本字串內容：" + myStr + "<br />");
	document.write("全部轉為小寫：" + myStr.toLowerCase() + "<br />");
	document.write("全部轉為大寫：" + myStr.toUpperCase());

strObj.charCodeAt(n)              將字元轉換成 Unicode 編碼
                                  n：指定字元的位置
String.fromCharCode(c1,c2,…,cN)   將 Unicode 編碼轉換成字元
                                  c1,c2,…,cN：編碼

用來做字碼與字元的轉換。

//範例
//指定字元的位置其起始位置為 0 例如位置 3 表示字串中的第 4 個字元
var myStr = "JavaScript";
	document.write(myStr.charCodeAt(4));		//結果 S 轉換成 83
	document.write(String.fromCharCode(83));	//結果 83 轉換成 S

strObj.length

用來傳回字串的長度。

//範例
document.write("webpages".length);				//結果為 8
document.write("家庭聯絡簿".length);				//結果為 5

strObj.indexOf(subStr,start)      subStr：欲搜尋的子字串
strObj.lastIndexOf(subStr,start)  start：開始搜尋的位置

indexOf 會從字串左側開始搜尋，lastIndexOf 是會從字串右側開始搜尋。

//範例
<div>ABCDEFGhijklmnopq</div>					//網頁中某段內容

//網頁中 JavaScript 區段
document.write("ABCDEFG".indexOf("FG",0));		//傳回 FG 在字串中 5 的起始位置上
document.write("ABCDEFG".lastIndexOf("EF",10));	//傳回在 4 的位置上
document.write("ABCDEFG".indexOf("123",0));		//找不到傳回 -1

strObj.match(regExp)           strObj：字串或字串物件的名稱
strObj.replace(regExp,repStr)  regExp：正規表達式的樣式字串
strObj.search(regExp)          repStr：取代用的字串

使用正規表達式來比對(match)、取代(replace)與搜尋(search)特定的字串。無法比對成功時傳回 null。

//範例
var myStr = "abcdef ABCDEF"
	document.write(myStr.match(/abc/gi));		//比對結果顯示為 abc,ABC
	document.write(myStr.search(/ABC/));		//搜尋結果在字串 7 的位置找到
	document.write(myStr.replace(/ABC/,123));	//結果顯示為 abcdef 123DEF

strObj.charAt(N)               strObj：字串或字串物件的名稱
strObj.slice(start,end)        N：字元位置
strObj.split(delimiter,limit)  start：字元起始位置
strObj.substr(start,strcount)  end：字元終止位置
strObj.substring(start,end)    delimiter：切割用的字串
                               limit：最大分割數
                               strcount：字元數

charAt 是用來取出一個字元，slice 是用來取出字串片段，split 是以指定的字串來分割，substr 是取出指定位置起始的字串，substring 是取出指定範圍內的字串。

//範例
document.write("ABCDEFGHI".charAt(5));		//結果為 F(字串起始的位置是 0)
document.write("ABCDEFGHI".slice(3,6));		//結果為 DEF(起始於 3 終止於 6)
document.write("ABCDEFGHI".split("FGHI"));	//結果為 ABCDE,
document.write("ABCDEFGHI".substr(0,3));	//結果為 ABC
document.write("ABCDEFGHI".substring(1,6));	//結果為 BCDEF

regObj = new RegExp(pattern, attributes)     regObj：正規表達式物件的名稱
                                             pattern：字串樣式
regObj = /pattern/attributes                 attributes：欲比對的方式
                                             g = 完全比對、i = 忽略大小寫、m = 多列。
                                             比對無法成功時傳回 null。

用來存放正規表達式的物件。

//範例
var myReg = new RegExp("ABc", "ig");	//以 ABc 樣式字串來比對並且忽略大小寫與完全比對
var myStr = "abcdef ABCDEF";			//欲比對的目標字串
var myData = myStr.match(myReg);		//使用字串物件的 match() 來比對

document.write("字串 ABc 比對" + myStr + "的結果為：" + myData);
//結果為 字串 ABc 比對abcdef ABCDEF的結果為：abc,ABC

RegExp.$1~$9

$1 ~ $9：$1 是第一個字串 $2 是第二個字串…以此類推

$1~$9 屬性是用來存放與樣式比對成功的字串。

//範例
//樣式為 "任意的英數字元 + 空白字元 + 任意的英數字元 + 空白字元 + 任意的英數字元" 且為完全比對
//並且使用括號來保存所匹配的英數字元
var myReg = new RegExp("(\\w+)\\s(\\w+)\\s(\\w+)","g");
var myStr = "abc ABC 123";								//欲比對的目標
var myData = myStr.replace(myReg,"$3, $1 and $2");		//使用字串物件的 replace() 來置換

document.write("myData 內容： " + myData);              //myData 內容： 123, abc and ABC
document.write("$1 內容結果： " + RegExp.$1);			//$1 內容結果： abc
document.write("$2 內容結果： " + RegExp.$2);			//$2 內容結果： ABC
document.write("$3 內容結果： " + RegExp.$3);			//$3 內容結果： 123

regObj.exec(string)         regObj：正規表達式物件的名稱
regObj.lastIndex = start    string：欲搜尋的字串
regObj.test(string)         start：開始位置

exec 是用來開始比對。

test 是用來檢查有無匹配成功。

lastIndex 是用來指定下次比對的起始位置，如果沒有使用 g 來完全比對或者不代表是全域樣式的 RegExp 物件，將不能使用這個屬性。

//範例
myReg = /..ABC/g;								//樣式為 "任何字元 + 任何字元 + ABC"
myReg.lastIndex = 5;							//從目標的第 6 個字元開始比對
myFlag = myReg.test("11ABC22ABC33ABCXXABC");	//檢查有無匹配樣式的字串
myData = myReg.exec("11ABC22ABC33ABCXXABC");	//開始比對目標字串

document.write("test 的結果： " + myFlag);		//結果為 true
document.write("exec 的結果： " + myData);		//結果為 33ABC

regObj.global         傳回是否為完全比對的值(true或false) - g
regObj.ignoreCase     傳回是否為忽略大小寫的值(true或false) - i
RegExp.multiline      指定是否要多列比對的值(true或false) - m

用來傳回或指定搜尋條件的 true 或 false 值。

//範例
var myReg1 = /ABC/;
var myReg2 = /ABC/g;
var myReg3 = /ABC/;
var myReg4 = /ABC/i;

document.write(myReg1.global);			//結果為 false
document.write(myReg2.global);			//結果為 true
document.write(myReg3.ignoreCase);		//結果為 false
document.write(myReg4.ignoreCase);		//結果為 true

RegExp.lastMatch         傳回最後匹配成功的字串

用來傳回最後比對成功的字串。

//範例
myReg = /ABC../g;
myStr = "ABC12ABC34ABC56ABC789";
myData = myStr.match(myReg);

document.write("全部比對成功的字串： " + myData);
//結果為 ABC12,ABC34,ABC56,ABC78
document.write("最後比對成功的字串： " + RegExp.lastMatch);
//結果為 ABC78

RegExp.leftContext         傳回匹配成功字串的左邊字串
RegExp.rightContext        傳回匹配成功字串的右邊字串

用來傳回所匹配字串的左右邊字串。

//範例
myReg = new RegExp("(i am)");
myStr = "hi~i am skyfate.";
myData = myStr.match(myReg);

document.write("比對的字串： " + myStr);					//結果為 hi~i am skyfate.
document.write("比對的結果： " + myData);					//結果為 i am,i am
document.write("左方的字串： " + RegExp.leftContext);		//結果為 hi~
document.write("右方的字串： " + RegExp.rightContext);	//結果為 skyfate.

regObj.source

用來傳回樣式的字串。

//範例
var myReg = new RegExp("The Time of my Life", "ig");

document.write("正規表達式物件的樣式字串：" + myReg.source);
//正規表達式物件的樣式字串：The Time of my Life

numObj = new Number()
numObj = new Number(value)

numObj：數值物件的名稱
value：數值

這是用來存取數值的物件，其主要用途是想將變數儲存為數值。

//範例
var a = "99";								//字串
var b = new Number(a);
document.write(a + 1);						//結果為 991
document.write(b + 1);						//結果為 100

numObj.MAX_VALUE             傳回可使用的最大值
numObj.MIN_VALUE             傳回可使用的最小值
numObj.NEGATIVE_INFINITY     傳回負的無限大
numObj.POSITIVE_INFINITY     傳回無限大
numObj.NaN                   傳回非數值

這是用來存放數值的最大、最小值或者無限大的值。NaN(Not a Number)，非數值。

//範例
document.write(Number.MAX_VALUE);			//結果為 1.7976931348623157e+308
document.write(Number.MIN_VALUE);			//結果為 5e-324
document.write(Number.NEGATIVE_INFINITY);	//結果為 -Infinity
document.write(Number.POSITIVE_INFINITY);	//結果為 Infinity
document.write(Number.NaN);					//結果為 NaN

toExponential 是用來傳回轉換成指數形式的值，toFixed 是用來傳回指定小數位數的值，toPrecision 是用來傳回指定位數的值。

//範例
var a = 345600.999;
	document.write(a.toExponential());		//結果為 3.45600999e+5
	document.write(a.toExponential(5));		//結果為 3.45601e+5
	document.write(a.toFixed(2));			//結果為 345601.00
	document.write(a.toPrecision(12));		//結果為 345600.999000

Math.constant
Math.function()

constant：數學常數
function()：數學函式

Math 物件擁有數學常數(屬性)和函式(方法)，想使用這個物件的話，並不需要使用 new 來建立物件的實體(副本)。

Math.abs(x)
Math.PI

x：值或算數運算式

abs 是用來傳回絕對值。

PI 是用來傳回圓週率的值。

//範例
document.write(Math.abs(1 - 4));				//結果為 3
document.write(Math.PI);						//結果為 3.141592653589793

用來做三角函數的處理。

//範例
var a = 1;
	document.write(Math.sin(a));				//結果為 0.8414709848078965
	document.write(Math.cos(a));				//結果為 0.5403023058681398
	document.write(Math.tan(a));				//結果為 1.5574077246549023
	document.write(Math.asin(a));				//結果為 1.5707963267948966
	document.write(Math.acos(a));				//結果為 0
	document.write(Math.atan(a));				//結果為 0.7853981633974483
	document.write(Math.atan(a,1));				//結果為 0.7853981633974483

用來將小數整數化。

//範例
var a = 5.67;var b = 5.43;
	document.write(Math.ceil(a));				//結果為 6
	document.write(Math.floor(a));				//結果為 5
	document.write(Math.round(b));				//結果為 5

log、LOG2E、LOG10E 是用來傳回對數值。E、LN2、LN10 是用來傳回自然對數的值。

//範例
document.write(Math.log(2));					//結果為 0.6931471805599453
document.write(Math.LOG2E);						//結果為 1.4426950408889634
document.write(Math.LOG10E);					//結果為 0.4342944819032518
document.write(Math.E);							//結果為 2.718281828459045( Euler 常數)
document.write(Math.LN2);						//結果為 0.6931471805599453
document.write(Math.LN10);						//結果為 2.302585092994046

pow 是用來傳回乘冪值。

exp 是用來傳回 e 的乘冪值。

//範例
document.write(Math.pow(2,3));					//結果為 8( 2 的 3 次方)
document.write(Math.exp(2));					//結果為 7.38905609893065

這些是用來傳回平方根的值。

//範例
document.write(Math.sqrt(4));					//結果為 2
document.write(Math.SQRT1_2);					//結果為 0.7071067811865476
document.write(Math.SQRT2);						//結果為 1.4142135623730951

用來傳回兩個比較後的值。

//範例
document.write(Math.max(1,5));					//結果為 5
document.write(Math.min(7,6));					//結果為 6

Math.random()

用來傳回 0 以上未滿 1 的亂數值。

//範例
document.write(Math.random());					//結果為 0 以上未滿 1 的亂數
document.write(Math.round(Math.random() * 10));	//結果為 0 以上(含0)未滿 11 的整數亂數