javascript 教學javascript 是一種腳本語言，也算是程式語言，簡稱JS，
可用來進行網頁的撰寫，為網頁提供各種豐富的效果。也可用來撰寫遊戲。
* 朋友們若是覺得本教學對您有幫助，請點個讚~
javascript 教學：
完整連結如下。文章中藍色部分為程式碼，紅色部分為重點概念，
並附帶有範例，方便同學學習。
一、基礎教學：
二、函式
三、 javascript 物件
四、 javascript 內建核心物件
五、 window 物件
六、 javascript DOM
七、 javascript 事件
八、 javascript cookie
處理cookie的訣竅：
前一節敘述的幾個javascript語法雖是處理cookie的基本語法，但在實用上並不方便。如設定有效期限時，要先建立一個Date物件，再將之轉換成數字進行加減，又再將之轉換回Date物件，又再將之轉換為GMT字串。又如欲獲得某cookie名稱所對應的值時，javascript並沒有提供適當函式(document.cookie回傳了全部的cookie之名稱與其值)。故要快速、簡潔的處理cookie，必須自己寫函式。如：
function set_cookie(name, value, expires, domain, path)
{
var cookie_string=name+"="+value+";";
if(arguments[2])
{
var this_date=new Date();
this_date.setTime(this_date.getTime()+expires*1000);
this_date=this_date.toUTCString();
cookie_string+="expires="+this_date+";";
}
if(arguments[3])
{
cookie_string+="domain="+domain+";";
}
if(arguments[4])
{
cookie_string+="path="+path+";";
}
document.cookie=cookie_string;
}
(2) 讀取某名稱之cookie之值的函式：
function get_cookie(item_)
{
if (!document.cookie){return false;}
var S=document.cookie;
var SA=S.split("; ");
for (var i=0;i<SA.length;i++)
{
var sub_SA=SA[i].split("=");
var this_name=sub_SA[0];
var this_value=sub_SA[1];
if(this_name==item_){return this_value;}
}
return false;
}
(3) 利用上述兩函式，可以方便的對cookie進行操作。如：
set_cookie("name","weiwei","60*60*24");
set_cookie("age","18","60*60*24");
document.write("hi! I'm "+get_cookie("name")+", "+get_cookie("age")+" years old!");
執行後顯示：hi! I'm weiwei, 18 years old!
而若要刪除該cookie，即用：
set_cookie("name","weiwei","-1"); 即可。
2. 利用javascript對cookie進行操作：
(1) 建立一個cookie：
document.cookie=”名稱=值;屬性名一=屬性值一;屬性名二=屬性值二;屬性名三=屬性值三…”;
其中，名稱指的是cookie的名稱，值就是cookie的資料值。屬性名就是就是1.(3-2)所提到的expires、domain、path、secure。在建立cookie時，名稱是一定要寫的，值可以不寫(不寫會被瀏覽器默認為空字串)，各個屬性名和屬性值，也都是可以不寫的。本指令看似簡單，其實是包含了所有javascript對cookie的基本操作。說明如下：
|
屬性名 |
屬性值的意義 |
|
expires |
※ 此乃該cookie的有效期限。這所謂的「有效期限」，只對硬體cookie有意義，對記憶體cookie沒意義。一旦當前時間超過這個有效期限，該硬體cookie就無法被瀏覽器所存取。但要注意，就算超過有效期限，硬體cookie未必會消失，仍有可能在硬體中存活一段時間。 ※ 其屬性值代表該cookie的有效期限，其型態是javascript之日期物件的GMT字串格式。可宣告一個日期物件，然後用其成員函式toGMTString()來獲得其GMT字串格式。 ※ 若其屬性值沒有被設定，則瀏覽器會自動將cookie當作記憶體cookie，意即此cookie不會存放在硬碟內，且當使用者關閉瀏覽器時，cookie便自動消失。 |
|
domain |
※ 此乃該cookie能夠作用的網域。該網域之外的網頁是無法存取該cookie的。 ※ 假設吾人申請到的網域名稱為www.cryst.com，將其屬性值設定為.cryst.com，表示吾人欲讓此cookie能被整個cryst.com及其子網域存取。若不設定其值，則預設為當前網頁所在的網域(此項之屬性值通常不設定)。 |
|
path |
※ 其屬性值是個資料夾路徑，表示該cookie在domain中，能被這個路徑中資料夾（及其所有子代資料夾）中的網頁所讀取。該資料夾路徑之外的網頁是無法存取該cookie的。 ※ 若其屬性值設定為/，表示該cookie允許網站根目錄下的所有網頁存取之。 ※ 若其屬性值沒有被設定，則會被默認為當前網頁所在的資料夾。譬如說當前網頁的URL網址是： http://localhost/phptt/cookie_test.php 這也就是說其在相對於網站根目錄的路徑是： /phptt/cookie_test.php 那麼當前網頁所在之資料夾路徑（也就是默認路徑）為： /phptt |
|
secure |
※ 不是每一個cookie都具有secure的屬性，大部分的cookie都不具有此屬性。若一個cookie具有此屬性，表示此cookie所攜帶的資訊其機密性較高，或是說此cookie在傳送時須用安全性較高的協定(如https)傳送，而無法用http來傳送。 ※ 此屬性並沒有屬性值，且預設上，一個cookie並不具有此屬性。所以，若要將cookie賦予此屬性，不必寫屬性名=屬性值，只要寫屬性名就好了。譬如： document.cookie=”username=jade;secure”; |
(2) 用document.cookie的回傳字串來顯示cookie：
document.cookie的回傳字串中包含了所有「歸該網頁管的cookie」的資料，但不包含這些cookie的屬性。其形式為：
名稱一=值一; 名稱二=值二; 名稱三=值三; …
我們稱每個「名稱=值」為一個「配對」，每個配對之間以「分號」加上「空白字元區」隔開，組成document.cookie的回傳字串。
若目前瀏覽器中並沒有任何cookie可供當前網頁使用，則document.cookie之值會是空字串。我們可用以下程式碼來檢查當前網頁「目前有無cookie可用」：
if(document.cookie){document.write("有cookie可用")}
else{document.write("沒有cookie可用");}
(3) 修改一個cookie的設定：
如前所述，每一個cookie都有一個專屬的名稱。所以，在此指令：
document.cookie=”名稱=值;屬性名一=屬性值一;屬性名二=屬性值二;屬性名三=屬性值三…”;
之中，若名稱是一個已經存在的cookie名稱，那麼該指令就會為同一個cookie修改設定。範例如下：
var date1 = new Date();
date1.setTime(date1.getTime()+5*1000);
date1=date1.toUTCString();
var date2 = new Date();
date2.setTime(date2.getTime()+60*1000);
date2=date2.toUTCString();
document.cookie="name=weiwei;expires="+date1;
document.cookie="name=nunu;expires="+date2;
document.write(document.cookie);
則網頁執行後顯示：name=nunu。
(4) 設定一個新的cookie：
如前所述，每一個cookie都有一個專屬的名稱。所以，在此指令：
document.cookie=”名稱=值;屬性名一=屬性值一;屬性名二=屬性值二;屬性名三=屬性值三…”;
之中，若名稱並非是一個已經存在的cookie名稱，那麼該指令就會設定一個新的cookie。範例如下：
var date1 = new Date();
date1.setTime(date1.getTime()+5*1000);
date1=date1.toUTCString();
var date2 = new Date();
date2.setTime(date2.getTime()+60*1000);
date2=date2.toUTCString();
document.cookie="name=weiwei;expires="+date1;
document.cookie="user=nunu;expires="+date2; //這一行設定了新的cookie，其名稱為user。
document.write(document.cookie);
則網頁執行後顯示：name=weiwei; user=nunu。
(5) 刪除cookie：
Javascript並沒有提供一個方便的函式來專門刪除某cookie。我們要達成的效果，應是讓此cookie無法再被瀏覽器所使用。所以，利用：
document.cookie=”名稱=值;屬性名一=屬性值一;屬性名二=屬性值二;屬性名三=屬性值三…”;
將該cookie設為過期(也就是將expires屬性之值設定為早於當前時間)，就可以達到這個效果。
(6) 此指令中，
”名稱=值;屬性名一=屬性值一;屬性名二=屬性值二;屬性名三=屬性值三…”
這個字串之內的空白字元是不計的。也就是說：
document.cookie=”名稱=值”;
和：
document.cookie=” 名稱 = 值 ”;
兩句語法的意思和效果完全一模一樣。例如以下程式碼：
document.cookie="user=kkk";
document.write(document.cookie);
執行後會顯示：user=kkk
而換一個寫法：
document.cookie=" user = kkk ";
document.write(document.cookie);
執行後也會顯示：user=kkk
cookie簡介：
cookie，是一個小檔案(檔案內容是一些字串)。
(1) cookie的由來：一般伺服器在允許客戶端瀏覽器的要求、並送出網頁檔後，不會去紀錄該名客戶在瀏覽器上做了哪些動作。有些時候，伺服器需要知道客戶做了哪些動作，好讓客戶端離線後、再次瀏覽該網頁時能接續之前的工作進度、而不必重頭來過。若由伺服器本身來記錄客戶端的進度在技術上當然是沒問題的，但是這很消耗伺服器的資源。譬如有的網站一天就有上千名瀏覽者，伺服器要為每一名瀏覽者建立紀錄檔案，那勢必需要更多的硬體容量，很花成本。所以發明了cookie來解決這個問題。cookie就是這樣的紀錄檔，每個客戶端都讓自己的瀏覽器將自己的進度或狀態存成cookie檔、放在自己的主機中，就不會占用伺服器資源。cookie可存放在記憶體中，也可存放在硬碟中。存放在記憶體的cookie稱為「記憶體cookie」，使用期限短，在使用者關閉瀏覽器後就會自動消失；存放在硬體的cookie稱為「硬體cookie」，使用期限長，由網頁程式碼決定該cookie的「有效期限」，過了有效期限，硬體cookie就會自動消失。當然，在有效期限到達之前，使用者也可以自行刪除該硬體cookie。
(2) 有很多人認為使用cookie是不安全的。因為使用者的cookie中可能含有私人資訊(譬如會員帳號、交易內容、工作內容…等)，而一般客戶端主機的網路防禦力較伺服器弱，比較容易被駭客入侵，這些私人資訊放在這麼容易被入侵的地方實在不安全。因此，大部分使用cookie的人，都已漸漸避免在cookie中放置使用者私人資訊，多放一些「就算外洩也沒什麼大不了的資訊」，或者在重要資訊上進行加密。
(3) 了解cookie：一個cookie中包含「資訊」和「屬性」。所謂資訊，乃是cookie所攜帶的資訊，可以放在主機中儲存起來，也可以傳送給伺服器。所謂屬性，則定義了cookie的功能、作用方式…等。
(3-1) cookie的資訊，其形式為「cookie名稱和值的配對」，每個cookie都有一個名稱，也對應到一個值。
(3-2) cookie的屬性，有以下幾項：expires、domain、path、secure…等等。留待下節討論
DOM2的事件處理模式：
DOM0的事件處理模式有個為人所詬病的不便之處。因為其將事件處理函式當作元件的屬性，所以同樣的事件處裡函式若重複指派，則後指派者會覆蓋掉先指派者，如下例：
<body >
<input type="button" id="test" value="按我" />
<input type="text" id="output" />
</body>
<script type="text/javascript">
document.getElementById("test").setAttribute("onclick","document.getElementById('output').value+='1';");
document.getElementById("test").setAttribute("onclick","document.getElementById('output').value+='2';");
document.getElementById("test").setAttribute("onclick","document.getElementById('output').value+='3';");
</script>
在執行後、接著按下按鈕之後，文字輸入框中只顯示：3。若設計者希望能夠為一個元件指派多個事件處理函式，則其需用DOM2的事件處理模式。
DOM2的事件處理模式，其用法依瀏覽器及其版本而異。大致上分為兩種：在IE8及其以下版本的瀏覽器為一種，chrome、firefox、IE9及其以上版本為另一種。分述如下：
語法為：元件.attachEvent("事件處理函式名稱", 無名函式);
其中，無名函式，也有人稱「匿名函式」，即是省略名稱的函式，寫法如：
function (參數一, 參數二…)
{ //函式內容 }
※ 在函式內容中，this關鍵字代表觸發該事件之元件本身。
※ 無名函式也可寫為自訂函式的名稱，但其後不得加括號。也就是說，若有個自訂函式為：
function myfunc1()
{ document.write(“hi!”);}
則無名函式可以寫成myfunc1，但若寫成myfunc1()則是錯誤的寫法。或問：若這個自訂函式要輸入參數的話怎麼辦？譬如：
function myfunc2(A,B)
{ document.write(A+B);}
假設要計算A為3、B為4的情況，那只需將無名函式寫成這樣就好了：
function(){myfunc2(3,4);}
※ 範例如：
<body >
<input type="button" id="test" value="按我" />
<input type="text" id="output" />
</body>
<script type="text/javascript">
document.getElementById("test").attachEvent("onclick",function(){document.getElementById("output").value+='1';});
document.getElementById("test").attachEvent("onclick",function(){document.getElementById("output").value+='2';});
document.getElementById("test").attachEvent("onclick",function(){document.getElementById("output").value+='3';});
</script>
在執行後、接著按下按鈕之後，文字輸入框中會顯示：321。
(2) 在chrome、firefox、IE9及其以上版本中：
語法為：元件.addEventListener("事件名稱", 無名函式);
其中，事件名稱並不以on開頭，如click、keypress…等
※ 範例如：
<body >
<input type="button" id="test" value="按我" />
<input type="text" id="output" />
</body>
<script type="text/javascript">
document.getElementById("test").addEventListener("click",function(){document.getElementById("output").value+='1';});
document.getElementById("test").addEventListener("click",function(){document.getElementById("output").value+='2';});
document.getElementById("test").addEventListener("click",function(){document.getElementById("output").value+='3';});
</script>
在執行後、接著按下按鈕之後，文字輸入框中會顯示：123。注意，其與(1)所說的attachEvent方法相較之下，兩者觸發這三個事件處理函式的順序是相反的。
二、在javascript中，為元件的事件建立事件處理函式
在每個事件發生之後即會啟動事件處理函式，接著我們會希望能夠執行一些程式碼來達成一些效果。如何將這些要執行的程式碼與元件的事件處理函式作連結（這稱為「事件處理模式」），其方法有許多種，隨著DOM（document object model，文件物件模式）版本不同而不同，也隨著瀏覽器不同而不同。以下，我們介紹DOM0和DOM2的事件處理模式。
1. DOM0的事件處理模式：
DOM0將事件處理函式當作元件的屬性。上述所有將事件處理函式寫在html標籤中的寫法，就符合DOM0的事件處理模式。所以，以DOM0的事件處理模式而言，要在javascript中為某元件設定事件處理函式，也一樣是要把他當作元件的屬性來設定。語法如下：
(1) 元件.setAttribute("事件處理函式名稱", "執行碼");
其中，執行碼就是該元件在發生該事件後，會執行的程式碼，也就是該事件的「效果」。執行碼的寫法可以是呼叫一個已存在的函式，如：
函式名(參數一, 參數二…);
也可以是單純的javascript程式碼。
範例如下：
<body>
<input type="text" id="text1" />
</body>
<script type="text/javascript">
function get_msg(S)
{ document.write(S); }
document.getElementById("text1").setAttribute("onclick","get_msg('OK!');");
</script>
這是呼叫一個已存在的函式給執行碼，又如：
<body>
<input type="text" id="text1" />
</body>
<script type="text/javascript">
document.getElementById("text1").setAttribute("onclick","document.write('OK!');");
</script>
這是將執行碼直接寫成javascript程式碼。上述這兩種寫法有著相同的效果：若使用者之滑鼠在ID為text1的那個元件上按了一下，螢幕會顯示出OK!的文字。
(2) 要解除該元件的事件處理函式，就像解除該元件的屬性一樣。語法如：
元件.removeAttribute("事件處理函式名稱");
(3) DOM0事件處理模式有個所謂的「事件往上傳遞(英文為 event bubbling)」的特性，即觸發該事件的元件中，如果其祖先元件有為同樣的事件處理函式設定執行碼，則會一併執行其祖先元件的這些執行碼。如下列程式碼：
<body onclick="document.getElementById('test').value+='BODY,';">
<div onclick="document.getElementById('test').value+='DIV,';">
<table id="this_table" >
<tbody ondblclick="document.getElementById('test').value+='TBODY,';">
<tr>
<td><input type="button" onclick="document.getElementById('test').value+='BUTTON,';" value="按我" /></td>
</tr>
</tbody>
</table>
</div>
<input type="text" id="test" size="30"/>
</body>
<script type="text/javascript">
document.getElementById('this_table').setAttribute("onclick","document.getElementById('test').value+='TABLE,';");
</script>
程式執行後、按下「按我」按鈕後，顯示出的是：
雖然我們按下的是button元件，但除了button元件本身的onclick事件處理函式被觸發之外，其祖先元件中的onclick事件處理函式也被觸發了！而且由顯示訊息的先後，還可看出是button元件本身的onclick事件處理函式先被觸發，接著觸發的順序從其輩分低的祖先、到輩份高的祖先，這就是所謂的「事件往上傳遞」。這種設計是考量到在瀏覽視窗中，後代元件的位置通常和祖先元件重疊，當我們在某個元件上用滑鼠觸發事件時，瀏覽器並無法分辨使用者是要觸發祖先元件還是後代元件，所以就從後代元件到祖先元件中搜索，看其是否有相應的事件處理函式，若有就觸發之。
(4) 事件本身：
在事件觸發的時候，瀏覽器會將事件的相關資訊儲存在一個物件上。此物件名為event（event在javascript中是關鍵字），是個環境變數（包含「整個程式之作業環境之訊息」的變數）。而對於不同種類的事件，event物件所存的資訊也是不一樣的。
(4-1) 對所有種類的事件而言：
(4-1-1) event物件常用的成員：
※ event物件.type：該事件的事件名稱。
※ event物件.srcElement：一個元件之指標。乃是觸發此事件的元件之指標。此成員在chrome、firefox等瀏覽器中是法使用的。在IE等瀏覽器中是可用的。
※ event物件.target：和event物件.srcElement相同。不過此成員在IE8及其以下版本的瀏覽器中是無法使用的。在chrome、firefox等瀏覽器中是可用的。
※ 範例如下：
<head>
<script type="text/javascript">
function tt(this_e)
{
var target = this_e.target ? this_e.target : this_e.srcElement;
document.getElementById('test').value=target.id;
} //這樣寫，在IE、chorme、firefox等主要瀏覽器中均有效
</script>
</head>
<body >
<input type="text" id="test" />
<input type="text" id="test2" onkeypress="tt(event);" />
</body>
這樣一來，在id為test2的文字輸入列中按下任意的鍵盤按鍵，則在id為test的文字輸入列中就會顯示test2。
(4-1-2) event物件常用的成員函式：
※ event物件.preventDefault()：此成員函式一執行，則可停止此事件再繼續產生任何效果(包括原本的效果)。不過此函式在IE8及其以下版本的瀏覽器中是無法使用的。在chrome、firefox等瀏覽器中是可用的。在IE8及其以下版本的瀏覽器中另有一寫法能達成此函式的作用，語法為：event物件.returnValue=false;。範例如下：
<head>
<script type="text/javascript">
function tt(this_e)
{
var target = this_e.target ? this_e.target : this_e.srcElement;
document.getElementById('test').value=target.id;
if(this_e.preventDefault){ this_e.preventDefault();}
else { this_e.returnValue=false;} //這樣寫，在IE、chorme、firefox等主要瀏覽器中均有效
}
</script>
</head>
<body >
<input type="text" id="test" />
<input type="text" id="test2" onkeypress="tt(event);" />
</body>
執行程式後，若在id為test2的文字輸入框中按了k鍵，則在id為test的文字輸入框中就顯示test2。不過，在id為test的文字輸入框中就不會出現k這個字元了！這告訴我們兩件事：
a. 就算設計者沒有為文字輸入框設定任何事件處理函式，只要在文字輸入框中按下按鍵，就是觸發了內建的鍵盤事件處理函式。「顯示字元」就是這個事件的效果。
b. 若設計者有為文字輸入框設定事件處理函式，「顯示字元」這個效果發生在「自設的事件處理函式的效果（如function tt(event)）」之後。所以只要在「自設的事件處理函式的效果」中執行event物件.preventDefault();或是event物件.returnValue=false;來讓此事件失效，則後續所有的效果(包括「顯示字元」)都不會發生了。
※ event物件.stopPropagation()：此成員函式一執行，則可停止事件的往上傳遞。不過此函式在IE8及其以下版本的瀏覽器中是無法使用的。在chrome、firefox等瀏覽器中是可用的。在IE8及其以下版本的瀏覽器中另有一寫法能達成此函式的作用，語法為：event物件.cancelBubble=true;。
(4-2) 對於滑鼠事件而言：
(4-2-1) event物件常用的成員：
※ event物件.altKey：一個bool。若為true，表示該事件觸發時按著Alt鍵。若為false則否。
※ event物件.ctrlKey：一個bool。若為true，表示該事件觸發時按著Ctrl鍵。若為false則否。
※ event物件.shiftKey：一個bool。若為true，表示該事件觸發時按著Shift鍵。若為false則否。
※ event物件.clientX：一個整數。表示該事件觸發時，滑鼠的X座標（以網頁文件的左上角為座標零點）。
※ event物件.clientY：一個整數。表示該事件觸發時，滑鼠的Y座標（以網頁文件的左上角為座標零點）。
※ event物件.screenX：一個整數。表示該事件觸發時，滑鼠的X座標（以螢幕的左上角為座標零點）。
※ event物件.screenY：一個整數。表示該事件觸發時，滑鼠的Y座標（以螢幕的左上角為座標零點）。
(4-3) 對於鍵盤事件而言：
(4-3-1) event物件常用的成員：
※ event物件.keyCode：一個整數。代表所按下之鍵盤按鍵的編號。此成員在chrome、firefox等瀏覽器中是法使用的。在IE等瀏覽器中是可用的。
※ event物件.which：和event物件.keyCode相同。不過此成員在IE8及其以下版本的瀏覽器中是無法使用的。在chrome、firefox等瀏覽器中是可用的。
※ 範例如下：
<head>
<script type="text/javascript">
function tt(this_e)
{
var this_key_code = this_e.keyCode ? this_e.keyCode : this_e.which;
document.getElementById('y').value=this_key_code;
} //這樣寫，在IE、chorme、firefox等主要瀏覽器中均有效
</script>
</head>
<body >
<input type="text" id="x" style="position:absolute" onkeydown="tt(event);">
<label style="position:absolute; left:175px;">unicode of key:</label>
<input type="text" id="y" style="position:absolute ; left:280px;" >
</body>
//執行後，在左邊的文字輸入框內按下按鍵，如按下g，顯示：
71就是g這個按鍵的統一編碼。
所謂「事件」，是指使用者對網頁中的某個元件進行某種操作時會發生，所謂的「事件處理函式」，則是在該事件發生後的那一瞬間所執行的函式。每種事件的事件處理函式，其名稱都是在事件名稱前加上on兩個字母。例如，load事件的事件處理函式名為onload，click事件的事件處理函式名為onclick…等等。要為一個元件設定某事件的事件處理函式，可以將事件處理函式寫在該元件的html標籤的屬性(屬性名稱就是事件處理函式的名稱，如onload、onclick等等)中，也可以寫在javascript程式碼區中。
※ 在html標籤中定義網頁事件、表單事件與控制項事件的事件處理函式
※ 前註：有一些事件，只限定在某些瀏覽器或瀏覽器版本才能夠使用，換了個瀏覽器、或版本，即不能用了。而以下所介紹的事件，在現行的所有瀏覽器及版本中都能運作正常。
1. 瀏覽器事件：表示使用者對瀏覽器進行操作。瀏覽器事件要寫在主體區標籤<body>之內。常用的瀏覽器事件及其相對應的事件處理函式介紹如下：
(1) load事件、onload事件處理函式：當使用者開啟網頁時，實際上所執行的動作，是向伺服端發出一個「要求」，要求瀏覽網頁，若此要求被允許，則伺服端會傳送網頁文件檔給用戶端，load事件即代表「用戶端瀏覽器下載完網頁文件檔」這一件事的發生。其事件處理函式的用法例如：
<body onload="alert('歡迎光臨!!');" ></body>
//執行後顯示：
(2) unload事件、onunload事件處理函式：unload事件代表「用戶端執行跳轉網頁或關閉網頁」此一操作的發生。其事件處理函式的用法例如（設伺服器資料夾內有一網頁檔案名test2.php）：
<body onunload="alert('謝謝光臨!!');" >
<a href="test2.php">點我跳轉網頁</a>
</body>
//執行後下超連結，然後顯示：
(3) resize事件、onresize事件處理函式：resize事件代表「使用者改變瀏覽器視窗的大小」此一操作的發生。其事件處理函式用法例如：
<body onresize="document.getElementById('tt').value+='x';">
<input id="tt" type="text" />
</body>
2. 表單事件：表示使用者對表單進行操作。表單事件之事件處理函式只能寫在表單標籤<from>之內。常用的表單事件及其事件處理函式有（以下程式碼皆寫在主體區）：
(1) reset事件、onreset事件處理函式：reset事件表示在表單中按下「reset控制項」這個操作。這不會掩蓋掉「reset控制項」原本的效果。其事件處理函式的用法如：
<form name="表單一" method="post" onreset="this.term1.size=50" >
<input name="term1" type="text" size="10"/>
<input type="reset" value="按我"/>
</form>
執行結果顯示：
按下「按我」之後，顯示：
確實已達到將文字方塊加長的效果。
※注意：script指令碼中，若欲為控制項的某個屬性設值，其寫法為：表單名稱.控制項名稱.屬性=值。在上例中，this表示該表單本身。
(2) submit事件、onsubmit事件處理函式：submit事件表示在表單5中按下「submit控制項」這個操作。其事件處理函式的用法如：
<form name="表單一" method="post" onsubmit="
if(!(this.term1.value))
{return false;}
else
{this.summit();}
" >
<input name="term1" type="text" size="10"/>
<input type="submit" value="呈交"/>
</form>
說明：上述javascript指令碼中表示：「如果term1沒有被使用者輸入，則表單不會呈交。若有被輸入，則呈交」。可用來檢查表單是否被完整輸入(這是重要應用!)。
3.控制項事件（適用於輸入控制項，也適用於其他表單控制項）：表示使用者對控制項進行操作。控制項事件的事件處理函式是寫在控制項標籤之內。常用的控制項事件有（以下程式碼皆寫在主體區）：
(1) click事件：控制項被滑鼠左鍵按下，就觸發此事件。其事件處理函式名為onclick。
(2) dbclick事件：控制項被滑鼠左鍵雙擊，就觸發此事件。其事件處理函式名為ondbclick。
(3) focus事件：控制項「成為焦點」，就觸發此事件。所謂的「成為焦點」，指的是控制項被使用者所選取而成為當前欲操作的控制項（用滑鼠點擊控制項、或用鍵盤選取都會使控制項「成為焦點」）。其事件處理函式名為onfocus。
(4) blur事件：控制項「失焦」時，就觸發此事件。所謂「失焦」，即控制項在「成為焦點」之後，使用者不再選取此控制項。譬如在點擊此控制項之後，使用者又點擊的網頁其他地方，造成此控制項「失焦」。其事件處理函式名為onblur。
(5) change事件：表單的值受到使用者的改變時，就觸發此事件。其事件處理函式名為onchange，
用法如下：
<form name="表單一" method="post" action="test2.php" >
<input name="term1" type="text" size="10" onchange="
if(this.size==10){this.size=50;}
else{this.size=10;}"/>
<input type="submit" value="呈交"/>
</form>
執行結果顯示：
輸入kk後，顯示：
重新輸入kkk後，顯示：
(6) mousedown事件：控制項被使用者按下滑鼠按鍵(左鍵右鍵均可)時會觸發。其事件處理函式名為onmousedown。
(7) mouseup事件：控制項被使用者按下滑鼠按鍵後，使用者放開按鍵(左鍵右鍵均可)，就觸發此事件。其事件處理函式名為onmouseup。
註：click事件事實上就是利用滑鼠左鍵產生mousedown事件之後，再用滑鼠左鍵產生mouseup事件。
(8) mousemove事件：滑鼠在控制項上移動，就觸發此事件。其事件處理函式名為onmousemove。
(9) mouseover事件：滑鼠移到控制項上，就觸發此事件。其事件處理函式名為onmouseover。
(10) mouseout事件：滑鼠移到控制項上後，又從控制項上移開，就觸發此事件。其事件處理函式名為onmouseout。
(11) mouseenter事件：滑鼠進入控制項中，就觸發此事件。其事件處理函式名為onmouseenter。
(12) mouseleave事件：滑鼠進入控制項後，又從控制項上移開，就觸發此事件。其事件處理函式名為onmouseleave。
(13) keydown事件：用鍵盤選取控制項（用tab鍵或快捷鍵）時、或者在選取此控制項後，使用者按下鍵盤，就觸發此事件。其事件處理函式名為onkeydown，用法如：
<input name="tt" type="text" onkeydown="this.value+='d'"/>
//執行後，在文字輸入框輸入a，顯示：
(14) keyup事件：用鍵盤選取控制項時、或者在選取此控制項後，使用者按下鍵盤之後鬆開的動作，就觸發此事件。其事件處理函式名為onkeyup。
(15) keypress事件：用鍵盤選取控制項，使用者完成整個「按」的動作後，就觸發此事件。其事件處理函式名為onkeypress。註：keypress事件事實上就是keydown事件而後再加上keyup事件。
(16) select事件：使用者選取控制項中的文字時，觸發此事件。只有對文字輸入控制項來說才有效果。其事件處理函式名為onselect，用法如：
<form name="表單一" method="post" action="test2.php" >
<input name="tt" type="text" size="10" onselect="表單一.tt.size=50"><br/>
</form>
執行後，在文字方塊內輸入ggg，顯示：
用滑鼠將ggg給選取，顯示：
(17) scroll事件：若元件具有拉條（scrollbar），則當拉條被拉動時，就會觸發此事件。其事件處理函式名為onscroll。
若是想在javascript中設定CSS樣式及style樣式（程式碼形式為：document物件.style.style子屬性=值;），必須注意，各種style子屬性及其值的程式碼名稱在javascript中不盡相同，這是很麻煩的一點。以下是各CSS和style子屬性對應在javascript中的程式碼名稱（對應的規則為：CSS/style子屬性中的-符號去除、-符號後之字母改為大寫）：
|
CSS/style 子屬性 |
javascrip中名稱 |
|
文字： |
|
|
font-size |
fontSize |
|
font-family |
fontFamily |
|
font-style |
fontStyle |
|
font-weight |
fontWeight |
|
text-align |
textAlign |
|
text-decoration |
textDecoration |
|
letter-spacing |
letterSpacing |
|
line-height |
lineHeight |
|
color |
同左 |
|
背景： |
|
|
background-color |
backgroundColor |
|
background-image |
backgroundImage |
|
background-position |
backgroundPosition |
|
background-repeat |
backgroundRepeat |
|
background-attachment |
backgroundAttachment |
|
定位： |
|
|
position |
同左 |
|
top |
同左 |
|
left |
同左 |
|
bottom |
同左 |
|
right |
同左 |
|
z-index |
zIndex |
|
長寬： |
|
|
height |
同左 |
|
width |
同左 |
|
邊框： |
|
|
border |
同左 |
|
border-color |
borderColor |
|
border-top-color |
borderTopColor |
|
border-bottom-color |
borderBottomColor |
|
border-left-color |
borderLeftColor |
|
border-right-color |
borderRightColor |
|
border-width |
borderWidth |
|
border-top- width |
borderTopWidth |
|
border-bottom- width |
borderBottomWidth |
|
border-left- width |
borderLeftWidth |
|
border-right- width |
borderRightWidth |
|
滑鼠鼠標： |
|
|
cursor |
同左 |
|
內外邊界： |
|
|
margin |
同左 |
|
padding |
同左 |
|
margin-top |
marginTop |
|
margin-bottom |
marginBottom |
|
margin-left |
marginLeft |
|
margin-right |
marginRight |
|
padding-top |
paddingTop |
|
padding-bottom |
paddingBottom |
|
padding-left |
paddingLeft |
|
padding-right |
paddingRight |
|
其他： |
|
|
display |
同左 |
|
|
|
利用DOM處理表格及其子結構：
(1) 呼叫表格中的儲存格：要呼叫儲存格，程式碼的形式為：
表格物件.rows[列的序數].cells[儲存格的序數];
列的序數為由上到下排序，儲存格的序數為由左到右排序。如：
<table width="300" border="1" style="text-align:center" id="tt">
<tr height="30">
<td width="100">A</td><td width="100">B</td><td width="100">C</td>
</tr>
<tr height="30">
<td colspan="2">D</td><td>E</td>
</tr>
</table>
<input type="button" value="按我" onclick="
var tobj=document.getElementById('tt');
tobj.rows[0].cells[0].innerHTML='甲';
tobj.rows[0].cells[1].innerHTML='乙';
tobj.rows[0].cells[2].innerHTML='丙';
tobj.rows[1].cells[0].innerHTML='丁';
tobj.rows[1].cells[1].innerHTML='戊';
"/>
//執行後顯示：
//按下按鈕後顯示：
註：利用成員屬性length可以得知在表格中的列數、或在列中的儲存格數。如：
(2) 在表格中插入新的列或儲存格：程式碼的形式為：
表格物件.insertRow(列的序數); //插入列
表格物件.rows[列的序數].insertCell (儲存格的序數); //插入儲存格
註：若光有表格物件.insertRow(列的序數);是不夠的，那只會插入列而不會插入儲存格。承(1)中的程式碼範例：
<table width="300" border="1" style="text-align:center" id="tt">
<tr height="30">
<td width="100">A</td><td width="100">B</td><td width="100">C</td>
</tr>
<tr height="30">
<td colspan="2">D</td><td>E</td>
</tr>
</table>
<input type="button" value="按我" onclick="
var tobj=document.getElementById('tt');
tobj.insertRow(2);
tobj.rows[2].height='30';
tobj.rows[2].insertCell(0);tobj.rows[2].cells[0].innerHTML='F';
tobj.rows[2].insertCell(1);tobj.rows[2].cells[1].innerHTML='G';
tobj.rows[2].insertCell(2);tobj.rows[2].cells[2].innerHTML='H';
"/>
//執行並且按下按鈕後顯示：
(2) 在表格中刪除原有的列或儲存格：程式碼的形式為：
表格物件.deleteRow(列的序數); //插入列
表格物件.rows[列的序數].deleteCell (儲存格的序數); //插入儲存格
承(1)中的程式碼範例：
<table width="300" border="1" style="text-align:center" id="tt">
<tr height="30">
<td width="100">A</td><td width="100">B</td><td width="100">C</td>
</tr>
<tr height="30">
<td colspan="2">D</td><td>E</td>
</tr>
</table>
<input type="button" value="按我" onclick="
var tobj=document.getElementById('tt');
tobj.deleteRow(1);
tobj.rows[0].deleteCell(2);
"/>
//執行並且按下按鈕後顯示：
1. document的成員物件陣列：使用document.成員物件陣列名稱來存取。成員物件陣列名稱如下：
(1) anchors：即是錨點。在<a>標籤中若有設定name屬性，即為錨點。如：
<a name="tt1">tt1</a>
<a name="tt2">tt2</a>
<a>tt3</a>
<script type="text/javascript">
document.write(document.anchors.length); //顯示2
</script>
註一：anchors.length表示錨點的數目。
註二：javascript程式碼是根據「程式碼執行的當前狀況」來執行，若上述程式碼寫成如：
<script type="text/javascript">
document.write(document.anchors.length);
</script>
<a name="tt1">tt1</a>
<a name="tt2">tt2</a>
<a>tt3</a>
則document.anchors.length的顯示結果會是0。因為在document.anchors.length這一行執行時，還沒有執行<a>標籤的宣告！
(2) embeds：即網頁中的<embed>標籤，主要用來處理遷入的多媒體物件。因近年來實用性越低，且幾乎已被<object>標籤所取代，故不詳述。
(3) forms：即是表單物件，實用性很高。大部分的表單物件在html教學中已有講解，在此僅做補充。常用的物件成員及物件成員函式有：
(3-1) this：這是javascript的關鍵字，代表當前物件本身。表單中的物件可用this.form來呼叫物件本身所在的表單，例如：
<form name="f1" >
<input type="text" name="tt1" />
<input type="button" name="tt2" value="顯示時間" onclick="
var now =new Date();
this.form.tt1.value=now.toLocaleString();"
/></form>
//執行後顯示：
//按下按鈕後顯示： 
(3-2) action：表單呈送之後，所要跳轉的網頁之URL網址。
(3-3) elements：表單中的控制項，依照宣告順序來決定序數。可用elements[N]來呼叫表單中序數為N的控制項。如：
<form>
<input type="text" size="10"/>
<input type="text" size="10"/>
<input type="button" value="確定" onclick="
var f1=this.form;
f1.elements[0].value='0';
f1.elements[1].value='1'; "/>
</form>
//執行後顯示：
//按下按鈕後顯示： 
(3-4) name：表單的名稱。
(3-5) method：表單傳送時使用的方式。常見值有：get、post…等。
(3-6) encoding：表單資料在呈送時，所採取的編碼種類。即是表單屬性enctype。預設值為：application/x-www-form-urlencoded。
(3-7) target：表單呈送之後，開啟跳轉網頁的視窗名稱。若表單在內嵌式框架中，則此項需特別注意。其值為（以下，關於視窗、父視窗與視窗架構，請參閱javascript教學à window物件及其子物件à一. 2）：
※ _blank：表示開啟新的視窗作為跳轉網頁視窗。這是預設值。
※ _parent：表示以當前視窗的父視窗作為跳轉網頁視窗。
※ _slef：表示以當前視窗作為跳轉網頁視窗。
※ _top：表示以當前視窗架構的始祖視窗作為跳轉網頁視窗。
※ 視窗名稱：若某視窗有使用window.name此成員來設定視窗名稱，則可使用該視窗的視窗名稱來呼叫該視窗。
(3-8) reset()：此函式的效用為使整個表單回到預設值，相當於按下reset控制項。
(3-9) submit()：此函式的效用為呈送表單，相當於按下submit控制項。與action搭配，可使同一份表單有多個跳轉網頁的選擇。
2. document成員物件，有幾個常用也實用的成員函式與成員屬性，如：
(1) innerHTML：若document成員物件在html中是成對標籤而非獨立標籤，則innerHTML成員屬性代表的，就是該成對標籤之內所包含的程式碼。如：
<table border="1">
<tr><td id="tt">測試</td></tr>
</table>
<script type="text/javascript">
document.write(document.getElementById('tt').innerHTML); //顯示：測試
</script>
又如：
<table border="1">
<tr><td id="tt">測試</td></tr>
</table>
<input type="button" value="按我" onclick="
document.getElementById('tt').innerHTML='測試完畢';"/>
//執行後顯示：
//按下按鈕後，顯示：
註一：若標籤內部的程式碼包含別的html標籤，則此函式仍會回傳完整的程式碼。這是很實用的功能，可以用來即時修改程式碼。
(2) style：可更改document物件的style屬性。程式碼形式為：
document物件.style.子屬性=值;
如：
<table border="1" id="tt" style="position:absolute; top:100px; left:100px;">
<tr height="30">
<td width="100">A</td><td width="100">B</td><td width="100">C</td>
</tr>
</table>
<input type="button" value="按我" onclick="
document.getElementById('tt').style.top='200px'; //設定document物件的style
"/>
//執行後按下按鈕，可改變表格的位置。
(3) className：document物件所使用的CSS類別名稱。即是該物件標籤之class屬性的值。
(4) offsetTop、offsetLeft：這兩個屬性代表document物件在瀏覽器視窗中的座標值。offsetTop為document物件最頂部的Y座標值，offsetLeft為document物件最左部的X座標值。
document的成員變數：使用document.成員變數名稱來存取。常用成員變數名稱如下：
(1) cookie
在「cookie」該章節有專門介紹：
(2) domain：網域名稱。在本機伺服器測試中，如：
document.write(document.domain); //顯示：localhost
(3) lastModified：網頁文件最後被使用者使用、或被設計者修改的時間。如：
<input type="button" value="按下" onclick="document.getElementById('tt').value=document.lastModified"/>
<input id="tt" type="text" /> //執行，按下按鈕，顯示如：01/19/2014 23:39:15
(4) title：網頁文件標題。設定標題的方法如：
document.title=”標題名稱”;
這一行會覆蓋掉<title>標題名稱</title>的設定。
註：若沒有用document.title=”標題名稱”;設定標題名稱，而想要用document.write(document.title);來讀取標題名稱，則document.write(document.title);必須寫在<title>標題名稱</title>之後。
(5) URL：網頁的URL位址。如：
document.write(document.URL); //顯示：http://localhost/phptt/test1.php
介紹：DOM（document object model），文件物件模式，是指：將網頁檔(如html檔或php檔…等)文件，給當作物件來操作。而html標籤被當作網頁文件下的成員物件，html標籤的屬性也被當作成員物件的成員。以下是網頁物件的類別架構圖(紫灰色是本章介紹的部分)：
1. 標籤物件陣列：
javascript將每一個html標籤當作一個物件，標籤屬性當作物件成員。一網頁檔中可能有好幾個相同的標籤(比如好幾個圖片標籤<img />)，javascript將這些同種的標籤當作物件陣列，並且依照標籤建立的先後順序來安排其序數。
(1) 使用 document.getElementsByTagName(“標籤名稱”)[序數]來存取標籤物件，回傳結果以物件陣列的形式存放。並用document.getElementsByTagName(“標籤名稱”)[序數].屬性名稱來存取屬性。如：
<input type="button" value="狀態一" onclick="document.getElementsByTagName('input')[2].value='狀態二'"/>
<input type="button" value="狀態一"/>
<input type="button" value="狀態一"/>
執行後顯示：
按下第一個按鈕後，顯示： 
註：若沒有寫[序數]，則不會產生效果。
(2) 要存取標籤物件，較有效率、且推薦使用的方法是將「要用到的」標籤給設定識別屬性id，然後利用document.getElementById('id名稱')來存取標籤物件。回傳結果以單一物件的形式存放。如：
<input type="button" value="狀態一" onclick="document.getElementById('tt').value='狀態二'"/>
<input type="button" value="狀態一"/>
<input id="tt" type="button" value="狀態一"/>
執行後顯示：
按下第一個按鈕後，顯示： 
(3)若想要一次回傳多個所指定的物件(以物件矩陣的形式回傳)，可用getElementsByName(“標籤物件name”);來取得。
(4)對於表單標籤<form>及其內標籤、圖片標籤<img />、視窗框架標籤<frameset>來說，亦可將「要用到的」標籤給設定屬性name，然後直接用document.標籤物件name.其內標籤物件name來存取標籤（當然，(2-2)的做法仍是有效的）。如：
<head> <!-- 這裡是表頭區的開始 -->
<script type="text/javascript">
function show_picture(){
if (document.表單一.tt[0].checked){document.yy[0].src='img/p2.jpg';}
if (document.表單一.tt[1].checked){document.yy[1].src='img/p2.jpg';}
if (document.表單一.tt[2].checked){document.yy[2].src='img/p2.jpg';}
}
</script>
</head> <!-- 這裡是表頭區的結束 -->
<body > <!-- 這裡是主體區的開始 -->
<img name="yy" src="img/p1.jpg"/>
<img name="yy" src="img/p1.jpg"/>
<img name="yy" src="img/p1.jpg"/>
<br/>
要換哪張圖?
<form name="表單一">
<input name="tt" id="1" type="radio" />1
<input name="tt" id="2" type="radio" />2
<input name="tt" id="3" type="radio" />3
<input type="button" id="4" onclick="show_picture();" value="確定"/>
</form>
</body > <!-- 這裡是主體區的結束 -->
//執行結果：
//按下第2個radio後，再按下確定，顯示：
一、window物件的子物件ànavigator物件：navigator物件包含者使用者的瀏覽器與作業系統資訊，有些時候，設計者必須要知到使用者的瀏覽器資訊以解決相容性問題。navigator物件的屬性及成員函式有：
1. appName：使用者瀏覽器之種類名稱。例如，本機在IE8進行測試：
document.writeln(navigator.appName); //顯示：Microsoft Internet Explorer
2. appVersion：使用者瀏覽器之版本名稱：
3. platform：使用者的作業系統。
4. userAgent：使用者瀏覽器之資訊。
5. javaEnabled()：若使用者瀏覽器Java applet，則回傳true，否則回傳false。
二、window物件的子物件àscreen物件：screen物件包含者使用者的螢幕設定。筆者認為較有用的成員有：
1. height：使用者螢幕在垂直方向上的高度。單位是像素。如：
document.writeln(screen.height); //顯示：768
2. width：使用者螢幕在水平方向上的寬度。單位是像素。
3. colorDepth：使用者螢幕的色彩模式。如：32，表示是32位元的色彩模式。
三、window物件的子物件àhistory物件：history物件包含使用者的瀏覽紀錄。使用時最好不要省略其父物件window。常用的物件成員與成員函式有：
1. length：此視窗內，曾經瀏覽過的網頁的數目。
2. back()：這個函式可回到瀏覽歷程中的上一個網頁。
3. forward()：這個函式可進到瀏覽歷程中的下一個網頁。若沒有下一個網頁，則此函式無效。
四、window物件的子物件àlocation物件：location物件表示當前視窗的URL網址。可以指派其值，使網頁跳轉到其他網址的網頁，如：
window.location="test1.php";
//執行之後，網頁便會跳轉到test1.php
Location物件的子物件中，常用的有：href、protocol、host、pathname、search、port。除了port子物件是表示開啟網頁所使用的通訊埠口，其他子物件乃是相應著URL網址的子結構。必須先說明一份URL網址的子結構，如下：
protocol//host/pathname search
protocol是網頁所使用的通訊協議，host是伺服器主機名稱或網域名稱，pathname是網頁路徑，search即是一般所謂的URL參數。如，在一份URL網址為：
http://localhost/phptt/test1.php?mei=weiwei 的網頁下，程式碼如：
document.writeln(window.location.href);
//顯示：http://localhost/phptt/test1.php?mei=weiwei
document.writeln(window.location.protocol); //顯示：http:
document.writeln(window.location.host); //顯示：localhost
document.writeln(window.location.pathname); //顯示：/phptt/test1.php
document.writeln(window.location.search); //顯示：?mei=weiwei
※ location物件尚有成員函式如reload()，其效果為使網頁重新載入，相當於按下「重新整理」按鍵。
window物件的成員
1. opener：若A視窗是在B視窗中，由window.open()函式所開啟，則說「B視窗是A視窗的opener」。所以，在A視窗中若有程式碼：
window.opener，其指的就是B視窗的window物件，當然亦可以利用window.opener.物件成員來更改B視窗中的內容。opener在呼叫時不能省略其父物件window。
設，伺服器資料夾中有opentest.php檔案，其程式碼為：
<body>
opentest
<input type="button" value="按我" id="tt" onclick="
window.open('test1.php','blank_');" />
</body>
又有test.php檔案，其程式碼為：
<body>
test1
<input type="button" value="按我" onclick="window.opener.document.getElementById('tt').value='tset1到此一遊';" />
</body>
//執行opentest.php後，按下按鈕，顯示：
//按下test1.php網頁中的按鈕，顯示：
2. parent：window.parent，其指的就是「當前視窗之父視窗」，當然亦可以利用window.parent.物件成員來更改「當前視窗之父視窗」的網頁內容。parent在呼叫時不能省略其父物件window。用法與opener很類似。
3. top：window.top，其指的就是「當前視窗在其視窗架構中的始祖視窗」，當然亦可以利用window.top.物件成員來更改始祖視窗的網頁內容。top在呼叫時不能省略其父物件window。用法與opener很類似。
4. self：指的就是當前視窗本身。在呼叫時不能省略其父物件window。
5. length：其值為當前視窗的子視窗數量。如：
<body>
<iframe src="test1.php" width="300" height="50"
style="position:absolute; top:50px; left:10px; "></iframe>
<iframe src="test1.php" width="300" height="50"
style="position:absolute; top:150px; left:10px;"></iframe>
<iframe src="test1.php" width="300" height="50"
style="position:absolute; top:250px; left:10px;"></iframe>
<script>
document.write(window.length); //顯示3，表示當前視窗有3個子視窗(就是那3個嵌入式框架的視窗)
</script>
</body>
6. status：這個屬性表示狀態列的訊息。如：
window.status="這是狀態列訊息";
執行後顯示：
7. location物件：這個屬性表示網址列的網址。如：
window.location="test1.php";
執行之後，網頁便會跳轉到test1.php
8. closed：此屬性是個布林值。若指定的視窗已關閉，則此屬性之值為true，若沒關閉則為false。
9. name：此為當前視窗的名稱，其寫法不可省略父物件window。若一個視窗有用name屬性來設定視窗名稱，則在用open([“URL位址”] [,”名稱”] [,”選項”])來開啟彈跳視窗時，可將該視窗的name代入參數名稱來呼叫該視窗。如：
設，今在伺服器資料夾有test1.php、test2.php、tset3.php三個網頁文件檔：
test1.php程式碼如下：
<body style="color:#063">
這是test1這是test1這是test1這是test1這是test1這是test1這是test1這是test1
這是test1這是test1這是test1這是test1這是test1這是test1這是test1這是test1
</body>
test2.php程式碼如下：
<body>
這是test2
<input type="button" value="按我" onclick="window.open('test1.php','test3')"/>
</body>
test3.php程式碼如下：
<body>
<script type="text/javascript">
window.name="test3"; </script>
這是test3
</body>
又有frametest.php檔，程式碼如下：
<body>
<iframe src="test1.php" width="300" height="50"
style="position:absolute; top:50px; left:10px; "></iframe>
<iframe src="test2.php" width="300" height="50"
style="position:absolute; top:150px; left:10px;"></iframe>
<iframe src="test3.php" width="300" height="50"
style="position:absolute; top:250px; left:10px;"></iframe>
</body>
//執行frametest.php檔，顯示：
//按下「按我」按鈕，顯示：
10. 重要的備註：上述一切物件方法或是物件成員對於「非當前視窗」的操作，只限於單一瀏覽者、特定瀏覽器、特定的瀏覽行為。例如：若B是A的父視窗，瀏覽者甲在A視窗對其父視窗進行了某些操作，把B視窗中的輸入控制項的值給更改了，而另一個瀏覽者乙在瀏覽B視窗的時候，看到的輸入控制項的值並不是更改過後的。這些操作雖然可以達成即時互動，但畢竟無法更改網頁檔的程式碼，故只是伺服端與特定瀏覽者的「雙向即時互動」。若要達到瀏覽者與其他瀏覽者之間的「群體即時互動」，還是要依靠資料庫或是互動平台吧！
window物件的成員函式：
1. alert(變數或值)：顯示一個警告視窗，視窗內容為指定的變數或值。如：
<input type="button" value="按我" onclick="alert('歡迎光臨!');"/>
// 執行，並且按下按鈕後顯示：
也可以將視窗內容寫為與表單變數有關，如：
<input type="text" id="tt" />
<input type="button" value="按我" onclick="alert(document.getElementById('tt').value+'您好,歡迎光臨!');"/>
// 執行後，輸入變數至表單，如：
按下按鈕後，顯示：
2. confirm(變數或值)：顯示一個確認對話框，對話框內容為指定的變數或值。此對話框有兩個選項按鈕：「確定」以及「取消」。當使用者按下「確定」後，此函式回傳true，若使用者按下「取消」，此函式回傳false。如：
您的性別:<input type="text" id="tt" />
<input type="button" value="按我" onclick="
if(confirm('請問您是男生嗎?'))
{document.getElementById('tt').value='男';}
else{document.getElementById('tt').value='女';};
"
/>
// 執行後，按下按鈕、顯示對話框，接著按下「確定」，即顯示：
若在對話框按下「取消」，即顯示：
註：本例中，即使使用者按下對話框右上角的「X」，效果也會如同按下「取消」。
3. prompt(變數或值)：顯示一個文字輸入框，框中的提示為指定的變數或值。此對話框有兩個選項按鈕：「確定」以及「取消」。當使用者按下「確定」後，回傳值為使用者輸入的文字。當使用者按下「取消」後，回傳null。如：
<input type="text" id="tt" size="30"/>
<input type="button" value="按我"
onclick="document.getElementById('tt').value='天增歲月人增壽,'+prompt('天增歲月人增壽,請對下聯:')"
/>
// 執行後，按下按鈕，輸入文字，如：
按下「確定」後，顯示：
4. open([“URL位址”] [,”名稱”] [,”選項”])：此函式可以開啟彈跳視窗。其寫法不能省略父物件window，否則瀏覽器會無法分辨「到底是哪個視窗要執行此成員函式」、或者是「到底要呼叫哪個視窗的成員」。各參數介紹如下：
(1) URL位址：為彈跳視窗的URL位址。若不設定URL位址，則彈跳視窗為空白視窗。
(2) 名稱：此參數決定「到底哪個視窗轉變為彈跳視窗」。此參數的值，說明如下：
※ _blank：表示開啟新的視窗作為彈跳視窗。這是預設值。
※ _parent：表示以當前視窗的父視窗作為彈跳視窗。
※ _slef：表示以當前視窗作為彈跳視窗。
※ _top：表示以當前視窗架構的始祖視窗作為彈跳視窗。
※ 視窗名稱：若某視窗有使用window.name此成員來設定視窗名稱，則可使用該視窗的視窗名稱來呼叫該視窗(請參閱三-9)。
(3) 選項：此參數決定彈跳視窗的樣式。在此，必須先說明一個視窗中，各項基本子結構的名稱。以下是一個標準視窗：
接著說明選項參數的寫法。這個參數有許多的子參數，其中有些子參數可以決定彈跳視窗是否具有某項特性，若其值為yes或1則是，若其值為no或者0則否，稱這些參數為「特性參數」。如：
※ location：決定彈跳視窗否顯示網址列。寫法例如：
<input type="button" value="按我" onclick="window.open('test1.php','_blank','location=1')">
※ titlebar：決定彈跳視窗是否顯示標題列。
※ menubar：決定彈跳視窗是否顯示主選單。
※ toolbar：決定彈跳視窗是否顯示工具列。
※ status：決定彈跳視窗是否顯示狀態列。
※ scrollbars：決定彈跳視窗是否顯示捲軸。
※ resizable：決定彈跳視窗是否可以由使用者調整大小。
另外，有些子參數可以設定彈跳視窗的長寬及位置，稱這些參數為「座標參數」。如：
※ width：設定彈跳視窗的橫向寬度。其值為數值，單位為像素。如：
window.open('test1.php','_blank','width=800');
※ hieght：設定彈跳視窗的直向高度。其值為數值，單位為像素。
※ top：設定彈跳視窗的Y座標值。其值為數值，單位為像素。
※ left：設定彈跳視窗的X座標值。其值為數值，單位為像素。
（重要！！）：極需注意的是，選項參數若沒有設定，則特性參數一律預設為yes。但若選項參數有被設定（無論是設定特性參數還是座標參數），則「沒有被設定到的特性參數」一律預設為no！如：
window.open('test1.php','_blank','location=1');
則彈跳視窗上，除了網址列外，標題列、主選單…等等都不見了，而且也不能由使用者調整尺寸大小！
5. close()：關閉當前視窗。其寫法不能省略父物件window。利用close()還可以關閉當前視窗的父視窗或者子視窗。如：
<body>
<script type="text/javascript">var tt</script>
<input type="button" value="打開" onclick="tt =window.open('test1.php','_blank')">
<input type="button" value="關閉" onclick="tt.close()">
</body>
執行後，按下「打開」，顯示：
按下「關閉」，顯示：
6. setInterval(“程式碼或函式” , 時間間隔 [,程式語言種類])與clearInterval(setInterval物件)：setInterval()函式每經過一次時間間隔（單位為毫秒），就執行一次程式碼或函式。程式語言種類可寫可不寫，若不寫，預設值是JavaScript。例如：
<head> <!-- 表頭區的開始-->
<script type="text/javascript">
function timing(){
var now=new Date();
document.getElementById('tt').value=now.toLocaleString();
}
</script>
</head> <!-- 表頭區的結束-->
<body> <!-- 主體區的開始-->
<input type="button" id="tt" value="按我" onclick="setInterval('timing()',1*1000);"/> <!-- 這行使用了setInterval()函式-->
</body> <!-- 表頭區的結束->
//執行後顯示：
//按下按鈕後所顯示的是： 
//經過30秒後所顯示的是： 
如此便做成了即時計時器。
註一：若程式碼寫成：
<head> <!-- 表頭區的開始-->
<script type="text/javascript">
function timing(){
var now=new Date();
document.write(now.toLocaleString()); <!-- 這裡改成用document.write()輸出 -->
}
</script>
</head> <!-- 表頭區的結束-->
<body> <!-- 主體區的開始-->
<input type="button" id="tt" value="按我" onclick="setInterval('timing()',1*1000);"/>
</body> <!-- 表頭區的結束->
註二：若setInterval()函式中的第一個參數是函式、且有傳遞參數、而參數又是以變數形態寫入，亦可。例如：
<body>
<input type="button" id="tt" value="按我"/><script type="text/javascript">
var x="現在時間:";
function timing(s){
var now=new Date();
document.getElementById("tt").value=s+now.toLocaleString();
}
setInterval('timing(x)',1*1000);
</script>
</body>
※ 若想要停止程式碼或函式的重複執行，就必須在setInterval()函式建立時，將其回傳的物件給儲存成變數（稱為「setInterval物件」），並且利用clearInterval(setInterval物件名稱); 來終止該setInterval物件的重複執行。如：
<body>
<input type="button" id="tt" value="按我" onclick="clearInterval(repeat)"/> <!-- 這行使用了clearInterval ()函式-->
<script type="text/javascript">
function timing(){
var now=new Date();
document.getElementById("tt").value=now.toLocaleString();
}
var repeat=setInterval('timing()',1*1000); <!-- 這行使用了setInterval()函式-->
</script>
</body>
//執行後，計時器自動運轉，在按下按鈕後，計時器便中止了。
7. setTimeout(“程式碼或函式” ,時間 [,程式語言種類])與clearTimeout (setTimeout物件)：setTimeout ()函式一被呼叫，在經過時間（單位為毫秒）之後，便會執行程式碼或函式。程式語言種類可寫可不寫，若不寫，預設值是JavaScript。例如：
setTimeout("document.write('test')",5*1000);
//執行後5秒，即顯示test
※ 若在經過時間之前，因故想要停止程式碼或函式的執行，就必須在setTimeout ()函式建立時，將其回傳的物件給儲存成變數（稱為「setTimeout物件」），並且利用clearTimeout (setTimeout物件); 來終止該setTimeout物件的到期執行。如：
<head> <!-- 表頭區的開始-->
<script type="text/javascript">
var exe=setTimeout("document.write('test')",5*1000);
</script>
</head> <!-- 表頭區的結束-->
<body> <!--主體區的開始-->
<input type="button" value="中斷" onclick="clearTimeout(exe);" />
</body> <!-- 主體區的結束-->
8. print()：啟動印表機，並且準備將當前頁面的文件檔給列印。註：若當前頁面包含嵌入式框架(iframe)，則一般來說，嵌入式框架中的內容不會被付諸列印。
9. focus()：指定某視窗成為前景視窗，並觸發該視窗的onFocus事件。通常伴隨著彈跳視窗的建立，使彈跳視窗成為前景視窗所用。不能省略其父物件。如：
<input type="button" value="按我" onclick="
var newwin=window.open('test1.php','blank_');
newwin.focus();" />
10. blur()：此函式指定某視窗成為後景視窗，並觸發該視窗的onBlur事件。不能省略其父物件。如：
<input type="button" value="按我" onclick="
var newwin=window.open('test1.php','blank_');
newwin.blur();" />
11. moveBy(a,b)：此函式可以使視窗在X軸方向移動a個像素的距離、在Y軸方向移動b個像素的距離。a、b為整數。座標圖如下：
程式碼例如：
<input type="button" value="按我" onclick="moveBy(200,200);"/>
執行後，若是按下按鈕，則整個視窗往右移200px，往下移200px。
12. moveTo(a,b)：此函式以視窗的最左上角為參考點，將視窗移至參考點之X座標=a、Y座標=b之處。a、b為整數。
13. resizeBy(a,b)：此函式可以使視窗在X軸方向增加a個像素的寬度、在Y軸方向增加b個像素的長度。a、b為整數。
14. resizeTo(a,b)：此函式可以設定視窗尺寸，設定其在X軸方向的寬度為a個像素、在Y軸方向的長度為b個像素。a、b為整數。
15. scrollBy(a,b)：此函式可以將捲軸往X軸方向移動a個像素、往Y軸方向移動b個像素。a、b為整數。
16. scrollTo(a,b)：此函式可以將捲軸移到視窗內X座標=a、Y座標=b之處。a、b為整數。
1. window物件，所指的就是瀏覽器視窗本身，在網頁物件中是最上層的物件。以下是網頁物件的類別架構圖(紫灰色是本章介紹的部分)：
一般來說，在一張網頁文件檔中，要呼叫document、navigator、screen等等window物件的成員物件（或稱「子物件」），正確的程式碼寫法應如：
window.document.成員
window.navigator.成員
window.screen.成員
…等等。
但由上圖可知，window是整張網頁檔中最上層的物件，故在呼叫window物件的成員物件時，程式碼也可以省略掉window，如：
document.成員
navigator.成員
screen.成員
…等等。
2. 在此，必須先說明視窗的「家族關係」，這與框架（傳統框架以及嵌入式框架）有關。設，在伺服器資料夾中，有test1.php、test2.php、test3.php三個網頁文件檔：
test1.php內容程式碼為：
<body style="color:#063">
這是test1這是test1這是test1這是test1這是test1這是test1這是test1這是test1
這是test1這是test1這是test1這是test1這是test1這是test1這是test1這是test1
</body>
test2.php內容程式碼為：<body>這是test2</body>
test3.php內容程式碼為：<body>這是test3</body>
又，在伺服器資料夾中，有frametest.php網頁文件檔，內容程式碼為：
<body>
<iframe src="test1.php" width="300" height="50"
style="position:absolute; top:50px; left:10px; "></iframe>
<iframe src="test2.php" width="300" height="50" marginwidth="30"
style="position:absolute; top:150px; left:10px;"></iframe>
<iframe src="test3.php" width="300" height="50"
style="position:absolute; top:250px; left:10px;"></iframe>
</body>
執行frametest.php後顯示：
※ 這時，我們可以說：「frametest.php的視窗」是「test1.php 的視窗」
、「test2.php 的視窗」、「test3.php 的視窗」三者的「父視窗」。可畫視窗架構圖
為：
※ 在以上的架構圖中，「frametest.php的視窗」沒有父視窗，於是我們稱：「frametest.php的視窗」是整個架構的「始祖視窗」。
3. 視窗的「前景」與「後景」之分：後景視窗會被前景視窗遮蓋住，而後景視窗的標題列之顏色較淡。如圖：
在物件中可存放多個變數、多個函式。
在javascript中，任何資料型態，包括數字、字串、函式、矩陣、html標籤…等等都可當作物件(Object)，這點與c++等語言是不同的。
1. 物件的宣告與存取：
(1)在javascript裡宣告物件，不同於C++或php，不需要宣告類別，而是直接宣告物件。宣告方法有許多種：
(1-1) 先宣告物件，再於物件外部設定物件成員與成員函式：
var 物件名稱 = new Object(); 或是 var 物件名稱;
物件名稱.成員名稱1=值1;
物件名稱.成員名稱2=值2;
…
物件名稱.成員函式名稱1=function(參數列){//程式內容;};
(1-2)宣告物件時也設定物件成員與成員函式：
(1-2-1)：
var 物件名稱 = new Object(
{
“成員名稱1”:值1,
“成員名稱2”:值2,
…
“成員函式名稱1”: function(參數列){//程式內容;}
}
);
(1-2-2)：成員名稱也可不用雙引號包覆：
var 物件名稱 = new Object(
{
成員名稱1:值1,
成員名稱2:值2,
…
成員函式名稱1: function(參數列){//程式內容;}
}
);
(1-2-3)：也可省略new Object()：
var 物件名稱 =
{
成員名稱1:值1,
成員名稱2:值2,
…
成員函式名稱1: function(參數列){//程式內容;}
};
(2) 物件成員的存取：
方法不只一種，都可達成同樣的效果。如下：
(2-1) 讀取成員：
※ 物件名稱.成員名稱;
※ 物件名稱[“成員名稱”];
※ 物件名稱[‘成員名稱’]
(2-2) 設定成員：
※ 物件名稱.成員名稱 = 值;
※ 物件名稱[“成員名稱”] = 值;
※ 物件名稱[‘成員名稱’] = 值;
(3) 範例如：
var person1= new Object({
"name":"weiwei",
"age":18,
"salary":2500,
"position":"流風名媛",
"self_introduction_to":function(s){
document.write("嗨!"+s+".我是"+this.name+",今年"+this.age+"...請多多指教!");}
});
//存取物件成員及成員函式的方法如下：
document.write(person1.name); //顯示：weiwei
person1.self_introduction_to("乘龍"); //顯示：嗨!乘龍.我是weiwei,今年18...請多多指教!
//註：javascript可以用eval內建函式使得使用者在某些操作之後，利用外部宣告來創造物件的成員與成員函式。
2. 物件內部成員、成員函式的操作：
(1) 獲取一物件的內部資訊(for in 用法)：
for(代號 in 物件){ //內部程式碼}
此for輪流經過該物件中的每一個成員或成員函式。在內部程式碼的寫法裡，this關鍵字代表該物件本身；代號可以是自訂的，其代表的是每一個成員或成員函式；物件[代號]代表的是該成員或成員函式的值。請看下例：
var person1= new Object({
name:"weiwei",
age:18,
salary:2500,
position:"流風名媛",
self_introduction_to:function(s){
document.write("嗨!"+s+".我是"+this.name+",今年"+this.age+"...請多多指教!");}
});
for (a in person1)
{ document.write(a+":"+person1[a]+"<br/>");}
則檔案執行後，顯示：
name:weiwei
age:18
salary:2500
position:流風名媛
self_introduction_to:function(s){ document.write("嗨!"+s+".我是"+this.name+",今年"+this.age+"...請多多指教!");}
這方法也可用來檢視所有的html物件。
(2) 檢查一物件中是否有某些成員或成員函式(in關鍵字的用法)：
“成員或成員函式名稱” in 物件名稱;
此用法會回傳一個bool。若為true，表示在此物件之中有個名為成員或成員函式名稱的成員或成員函式，若為false則否。
(3) 刪除一物件內部的成員或成員函式(delete關鍵字的用法)：
delete 物件名稱.成員或成員函式名稱;
即可刪除該物件中該成員或成員函式。
3. 物件的複製：
當我們在javascript中宣告物件時，譬如：
var 物件名稱 = new Object();
程式碼中的物件名稱事實上不是指物件本身，而是指一個「連接到物件本身的指標」。我們是藉由對這個指標進行操作，進而操作物件的。請看下例：
var person1= new Object({
name:"weiwei",
age:18,
salary:2500,
position:"流風名媛",
self_introduction_to:function(s){
document.write("嗨!"+s+".我是"+this.name+",今年"+this.age+"...請多多指教!");}
});
var person2=person1;
person2.name="nunu";
person2.age=20;
document.write(person1.name+":"+person1.age+","+person2.name+":"+person2.age);
執行結果卻顯示：
nunu:20, nunu:20
對於熟悉C++等語言的人來說會感到奇怪，明明只對person2設定name和age，為何連person1的name和age也跟著改變了？事實上，這是因為在javascript中，person1、和person2都是一個指標，且指向同一個物件。var person2=person1;這一行，只不過是將指標person1複製到一個新的指標person2，卻不是複製新的物件。
要複製新的物件，得用以下寫法：
var person2=JSON.parse(JSON.stringify(person1));
如此一來，person2和person1所指的就是兩個獨立的物件，彼此不會互相影響了。
4. with的用法：
with(物件){//程式碼;}的用法可以讓操作物件的程式碼變得簡單，表示內部程式碼都在該物件底下執行。以上例的person1物件為例：
document.write(person1.name+":"+person1.age);
這寫法相當於：
with(person1)
{ document.write(name+":"+age);}
執行後都會顯示weiwei:18。
這用法方便於對同一物件進行多次操作時。
字串的正規表示法(regular expreesion，或稱正則表達式)：
javascript的正規表示法與PHP的正規表示法有所不同。正規表示法的作用在於用來檢查字串是否符合此正規表示法，以便進行某些判斷。
正規表示法學習起來有點複雜，最好自己多寫、多做測試，才容易明白。
(1) 正規表示法由「敘述條件」、「首尾條件」、「附註條件」構成，而「敘述條件」、「首尾條件」被用 / 符號包住，「附註條件」則寫在 / 之外。
「敘述條件」由至少一個的「形式條件」構成，而「形式條件」又由「字元條件」與「次數條件」構成。如：
註：[]內的條件可寫可不寫，但寫與不寫，造成的效果不同。
一個字串之中，只要有至少一個子字串符合「一個正規表示法中的所有條件」，我們就說「這個字串，通過了這個正規表示法的檢驗」，否則就是沒通過。
真正需要介紹的，是字元條件、次數條件、首尾條件、附註條件。以下僅只介紹常用的條件，若欲知道全部的條件，還是去查書吧…
(2) 字元條件：字元條件的設定，是針對字串中的單一字元所用。字元條件可以是以下所列出的：
※ 普通字元(也就是數字、文字、空白字元)：數字是阿拉伯數字，文字可以是各國文字，包括英文和中文。
※ \符號：符號（比如. \ + ? { } ( ) [ ] = ! < > | 這些東西）要用脫逸字元 \ 加以區分。
※ [鍵盤字元一鍵盤字元二鍵盤字元三…]：鍵盤字元可以是普通字元或者是/符號。這種寫法，表示字元條件是鍵盤字元一鍵盤字元二鍵盤字元三…的聯集（鍵盤字元一鍵盤字元二鍵盤字元三…中間並沒有用空白鍵分隔）。
如：
字元條件[ab3]表示：這個字元若是a或是b或是3，都代表通過此字元條件，如果不是a也不是b也不是3，就代表不通過此字元條件。
※ [a-z]：代表所有小寫英文字的聯集。相當於：[abcdefghijklmnopqrstuvwxyz]
※ [A-Z]：代表所有大寫英文字的聯集。相當於：[ABCDEFGHIJKLMNOPQRSTUVWXYZ]
※ [\u4e00-\u9fa5]：代表所有中文字的聯集。
※ [0-9]：代表所有阿拉伯數字的聯集。相當於：[0123456789]
註：[a-z]、 [A-Z]、 [0-9]這三者之相互聯集也是存在的，如[a-zA-Z]代表大小寫英文字母的聯集，[0-9a-z]代表小寫英文字母和阿拉伯數字的聯集，[a-zA-Z0-9]代表大小寫英文字母和阿拉伯數字的聯集。
※ \w：代表大小寫英文字母和阿拉伯數字的聯集，相當於：[a-zA-Z0-9]
※ \d：代表所有阿拉伯數字的聯集。相當於：[0-9]
※ \s：空白字元。
※ [^鍵盤字元一鍵盤字元二鍵盤字元三…]：鍵盤字元可以是普通字元或者是/符號。這種寫法，表示字元條件是鍵盤字元一鍵盤字元二鍵盤字元三…取聯集之後的反集，也就是說，字元條件是：任何不是鍵盤字元一、也不是鍵盤字元二、也不是鍵盤字元三…的字元。
如：
字元條件[^gh6]表示：這個字元只要不是g也不是h也不是6，都代表通過此字元條件。
※ \W：代表大小寫英文字母和阿拉伯數字的聯集的反集，相當於：[^a-zA-Z0-9]
※ \S：代表任何非空白字元。
(3) 次數條件：次數條件是接在字元條件之後，代表其前面的那個字元條件的「連續執行次數」的限制。次數條件可以是：
※ {n}：n是非負整數，代表其前面的那個字元條件的「連續執行次數」等於n。
※ {n,}：n是非負整數，代表其前面的那個字元條件的「連續執行次數」大於或等於n。
※ {n, m}：n、m是非負整數，代表其前面的那個字元條件的「連續執行次數」大於或等於n，且小於或等於m。
※ *：相當於{0,}。
※ +：相當於{1,}。
註：次數條件可以不寫，若不寫，則預設相當於：{1}。
(4) 首尾條件：首尾條件可用來幫敘述條件定位。首尾條件通常寫在敘述條件之外、/符號之內。首尾條件可為：
※ 首條件 ^：在正規表示法中的範例為：
/^敘述條件一敘述條件二敘述條件三…/
表示在字串的開端，就要開始比對敘述條件一敘述條件二敘述條件三…
※ 尾條件 $：在正規表示法中的範例為：
/敘述條件一敘述條件二敘述條件三…$/
表示比對敘述條件一敘述條件二敘述條件三…完成之後，必須是字串的尾端。
例如：
※ /^[A-Z][0-9]{9}$/ 是台式身分證格式的正規表示法。
※ /^[\u4e00-\u9fa5_a-zA-Z0-9]*$/ 表示字串中的所有字元，只能是中文、大小寫英文、數字或 _ 符號。通常用來讓使用者輸入某人事物的名稱。
(5) 附註條件：附註條件是在檢驗字串是否通過正規表示法時的設定。附註條件有三種：
※ i：檢驗時不區分大小寫，即是將[a-z]和[A-Z]視為相同。
※ m：多行檢驗模式。
※ g：在字串的成員函式match()和replace()執行時才有作用。在(7)說明。
註：附註條件可以「寫在一起」，如：/^[A-Z][0-9]{9}$/img、/^[A-Z][0-9]{9}$/mi、/^[A-Z][0-9]{9}$/ig…等等，這些格式都是可用的。
(6) 正規表示物件與其成員函式：正規表示物件，即是一個「帶有某種正規表示法」的物件，用來對字串進行作用。
javascript中，正規表示物件的宣告法為：
var 變數名稱 = RegExp( 正規表示法 ); 如：
var tt1 =RegExp(/^[A-Z][0-9]{9}$/ig);
正規表示物件的成員函式：正規表示物件的成員函式可用來對字串進行作用。常用的有：
(6-1) test(字串)：檢驗字串是否通過該正規表示物件的正規表示法，若有則回傳true，否則回傳false。如：
var tt =/^[a-z]\w+\@com.tw$/;
var tt1=new RegExp(tt);
document.write(tt1.test("dpp772@com.tw")); //顯示：true
document.write(tt1.test("julia66753@com.tw")); //顯示：true
document.write(tt1.test("1pp772@com.tw")); //顯示：false
document.write(tt1.test("DDD@com.tw")); //顯示：false
document.write(tt1.test("dpp772@com.taiwan")); //顯示：false
(6-2) exec(字串)：若字串通過該正規表示物件的正規表示法，則回傳第一個被發現、符合該正規表示法的子字串，否則回傳null。如：
var tt =/[a-z]{2}\.[0-9]{2}/;
var tt1=new RegExp(tt);
document.write(tt1.exec("dpd.234")); //顯示：pd.23
document.write(tt1.exec("5aa.1234@bb.4321")); //顯示：aa.12
document.write(tt1.exec("123.asd")); //顯示：null
document.write(tt1.exec("dsa.1")); //顯示：null
(7) 正規表示物件與字串的成員函式：字串有兩個成員函式，可以使用正規表示物件。
(7-1) match(正規表示物件)：若字串通過該正規表示物件的正規表示法，則回傳符合該正規表示法的子字串，否則回傳null。如：
s="A2R3GG...5W5";
var tt =new RegExp(/[a-z][0-9]/i); //這正規表示法有附註條件i
document.write(s.match(tt)); //顯示：A2
註：若想將「所有」符合該正規表示法的子字串都回傳，則要在正規表示法中用到附註條件g。如：
s="A2R3GG...5W5";
var tt =new RegExp(/[a-z][0-9]/ig); //這正規表示法有附註條件i和g
document.write(s.match(tt)); //顯示：A2,R3,W5
(7-2) replace(正規表示物件 , 子字串1)：若字串通過該正規表示物件的正規表示法，則將符合該正規表示法的子字串以子字串1來取代，並且將字串回傳。如：
s="A2R3GG...5W5";
var tt =new RegExp(/[a-z][0-9]/i); //這正規表示法有附註條件i
document.write(s.replace(tt,"花哈")); //顯示：花哈R3GG...5W5
註：若想將「所有」符合該正規表示法的子字串都取代，則要在正規表示法中用到附註條件g。如：
s="A2R3GG...5W5";
var tt =new RegExp(/[a-z][0-9]/ig); //這正規表示法有附註條件i和g
document.write(s.replace(tt,"花哈")); //顯示：花哈花哈GG...5花哈
字串：
字串即是文字，是一連串字元的組合。
字串的處理模式和矩陣有些類似。無論是數字、英文字母、符號、中文字、空白字元，都被當作一個字元，且可用序數呼叫。如：
var stt='@123456'
document.write(stt[3]); //顯示：3
可用length成員來獲得其元素個數，如：
var stt='@123456'
document.write(stt.length); //顯示：7
1. 常用成員函式如下：
(1). indexOf(“子字串” [,N])：可搜尋子字串的位置並且回傳，以序數表示。N代表從序數N開始搜尋起（搜尋範圍包含序數N）。若沒有設定N，則從頭搜尋。若搜尋不到指定的子字串，則回傳-1。如：
var stt='@123456'
document.write(stt.indexOf("34")); //顯示：3
document.write(stt.indexOf("49")); //顯示： -1
註：若是字串中，要搜尋的子字串有兩個以上，則只會回傳最先找到的子字串。如：
var stt='@123123';
document.write(stt.indexOf("3")); //顯示3
(2). lastIndexOf(“子字串” [,N])：效果和indexOf(“子字串” [,N]) 一模一樣，只不過indexOf(“子字串” [,N]) 是從字串開端開始搜尋到尾端，而 lastIndexOf(“子字串” [,N]) 是從字串尾端開始搜尋到開端。如：
var stt='@123456'
document.write(stt.lastIndexOf("34")); //顯示：3
document.write(stt.lastIndexOf("49")); //顯示： -1
註：若是字串中，要搜尋的子字串有兩個以上，則只會回傳最先找到的子字串。如：
var stt='@123123';
document.write(stt.lastIndexOf("3")); //顯示：6
(3). replace(“子字串1”, “子字串2”)：將字串中的子字串1給代換成子字串2。如：
var stt='I like weiwei!'
document.write(stt.replace("weiwei","nunu")); //顯示：I like nunu!
註：若是字串中，要取代的子字串有兩個以上，則只會取代最先找到的子字串(也就是序數最前面的子字串)。如：
var stt='weiwei weiwei!'
document.write(stt.replace("weiwei","nunu")); //顯示：nunu weiwei!
若要使全部的指定子字串都被取代，可以使用正規表示法(參看2-(7))。如：
var stt='weiwei weiwei!'
document.write(stt.replace(/weiwei/g,"nunu")); //顯示：nunu nunu!
(4). split(‘分隔字元’)：將字串依照分隔字元分割開來，分割後的子字串成為元素，並且形成陣列。此函式便回傳這個陣列。如：
var stt='weiwei&nunu&rain';
var a=stt.split('&');
document.write(a[1]); //顯示：nunu
(5). substr(N1 [,N2])：將字串從序數N1開始後的N2個字元回傳。若不設定N2，則將字串從序數N1開始後的所有字元回傳。不會影響原先字串。如：
var stt='@123456';
s=stt.substr(2,4);
document.write(s); //顯示：2345
(6). substring(N1 [,N2])：將字串從序數N1開始到N2-1的字元回傳。若不設定N2，則將字串從序數N1開始後的所有字元回傳。不會影響原先字串。如：
var stt='@123456';
s=stt.substring(2,4);
document.write(s); //顯示：23
(7). 轉換英文字母的大小寫：可用toLowerCase()將字串轉換成小寫，以及用toUpperCase()將字串轉換成大寫。如：
var stt='aaDD';
document.write(stt.toLowerCase()); //顯示：aadd
document.write(stt.toUpperCase()); //顯示：AADD
三、數學物件Math：Math本身就是javascript的數學物件。其內建函式之使用方法為：Math.內建函式名稱(參數);。
常用的幾個成員函式有：
abs(x)：回傳x的絕對值。
cos(x)：回傳x的cos值。x的單位為徑度。
sin(x)：回傳x的sin值。x的單位為徑度。
tan(x)：回傳x的tan值。x的單位為徑度。
sqrt(x)：回傳x的平方根。
exp(x)：回傳exp的x次方。
log(x)：回傳以exp為底數、x為真數的對數。
pow(x,y)：回傳x的y次方。
round(x)：回傳x經四捨五入後的值。
floor (x)：回傳x經無條件捨去法後的值。
ceil(x)：回傳x經無條件進位法的值。
min(x1, x2, x3, x4,…)：回傳輸入參數中的最小值。
max(x1, x2, x3, x4,…)：回傳輸入參數中的最大值。
random()：回傳一個浮點數亂數x，且 0<x<1。
※ 以下是回傳整數亂數的範例：
var R=Math.ceil(100*Math.random());
則回傳之整數亂數x，其大小範圍為：0<x<=100
又：
var R=Math.floor(100*Math.random());
則回傳之整數亂數x，其大小範圍為：0<=x<100
javascript 教學 (1) C# (1) Linux 教學 (1) C++ (1) Mysql (1) 網路連結 (1) linux shell script (1) 高中英文單字 (26)
