按此前往javascript完整教學目錄

 

 

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後,按下按鈕,顯示:

image

//按下test1.php網頁中的按鈕,顯示:

image

 

2. parentwindow.parent,其指的就是「當前視窗之父視窗」,當然亦可以利用window.parent.物件成員來更改「當前視窗之父視窗」的網頁內容。parent在呼叫時不能省略其父物件window。用法與opener很類似。

3. topwindow.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.phptest2.phptset3.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檔,顯示:

image

//按下「按我」按鈕,顯示:

image

 

10. 重要的備註:上述一切物件方法或是物件成員對於「非當前視窗」的操作,只限於單一瀏覽者、特定瀏覽器、特定的瀏覽行為。例如:若BA的父視窗,瀏覽者甲在A視窗對其父視窗進行了某些操作,把B視窗中的輸入控制項的值給更改了,而另一個瀏覽者乙在瀏覽B視窗的時候,看到的輸入控制項的值並不是更改過後的。這些操作雖然可以達成即時互動,但畢竟無法更改網頁檔的程式碼,故只是伺服端與特定瀏覽者的「雙向即時互動」。若要達到瀏覽者與其他瀏覽者之間的「群體即時互動」,還是要依靠資料庫或是互動平台吧!

 

 

 

上一篇:window物件的成員函式

下一篇:其他window子物件

文章標籤

埃伯 發表在 痞客邦 留言(0) 人氣()

按此前往javascript完整教學目錄

 

 

window物件的成員函式:

1. alert(變數或值):顯示一個警告視窗,視窗內容為指定的變數或值。如:

<input  type="button" value="按我" onclick="alert('歡迎光臨!');"/>

// 執行,並且按下按鈕後顯示:

image

 

也可以將視窗內容寫為與表單變數有關,如:

<input  type="text" id="tt" />

<input  type="button" value="按我" onclick="alert(document.getElementById('tt').value+'您好,歡迎光臨!');"/>

// 執行後,輸入變數至表單,如:

image

按下按鈕後,顯示:

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='';};

"

/>

// 執行後,按下按鈕、顯示對話框,接著按下「確定」,即顯示:

image

若在對話框按下「取消」,即顯示:

image

註:本例中,即使使用者按下對話框右上角的「X」,效果也會如同按下「取消」。

 

3. prompt(變數或值):顯示一個文字輸入框,框中的提示為指定的變數或值。此對話框有兩個選項按鈕:「確定」以及「取消」。當使用者按下「確定」後,回傳值為使用者輸入的文字。當使用者按下「取消」後,回傳null。如:

<input type="text" id="tt" size="30"/>

<input  type="button" value="按我"

onclick="document.getElementById('tt').value='天增歲月人增壽,'+prompt('天增歲月人增壽,請對下聯:')"

/>

// 執行後,按下按鈕,輸入文字,如:

image

按下「確定」後,顯示:

image

 

 

4. open([“URL位址”] [,”名稱”] [,”選項”]):此函式可以開啟彈跳視窗。其寫法不能省略父物件window,否則瀏覽器會無法分辨「到底是哪個視窗要執行此成員函式」、或者是「到底要呼叫哪個視窗的成員」。各參數介紹如下:

(1) URL位址:為彈跳視窗的URL位址。若不設定URL位址,則彈跳視窗為空白視窗。

(2) 名稱:此參數決定「到底哪個視窗轉變為彈跳視窗」。此參數的值,說明如下:

_blank:表示開啟新的視窗作為彈跳視窗。這是預設值。

_parent:表示以當前視窗的父視窗作為彈跳視窗。

_slef:表示以當前視窗作為彈跳視窗。

_top:表示以當前視窗架構的始祖視窗作為彈跳視窗。

視窗名稱:若某視窗有使用window.name此成員來設定視窗名稱,則可使用該視窗的視窗名稱來呼叫該視窗(請參閱三-9)

(3) 選項此參數決定彈跳視窗的樣式。在此,必須先說明一個視窗中,各項基本子結構的名稱。以下是一個標準視窗:

image

接著說明選項參數的寫法。這個參數有許多的子參數,其中有些子參數可以決定彈跳視窗是否具有某項特性,若其值為yes1則是,若其值為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>

執行後,按下「打開」,顯示:

image

按下「關閉」,顯示:

image

 

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>    <!-- 表頭區的結束->

//執行後顯示:image

//按下按鈕後所顯示的是: image

//經過30秒後所顯示的是: image

如此便做成了即時計時器。

註一:若程式碼寫成:

<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個像素的距離。ab為整數。座標圖如下:

image

程式碼例如:

<input type="button" value="按我" onclick="moveBy(200,200);"/>

執行後,若是按下按鈕,則整個視窗往右移200px,往下移200px

12. moveTo(a,b):此函式以視窗的最左上角為參考點,將視窗移至參考點之X座標=aY座標=b之處。ab為整數。

13. resizeBy(a,b):此函式可以使視窗在X軸方向增加a個像素的寬度、在Y軸方向增加b個像素的長度。ab為整數。

14. resizeTo(a,b):此函式可以設定視窗尺寸,設定其在X軸方向的寬度為a個像素、在Y軸方向的長度為b個像素。ab為整數。

15. scrollBy(a,b):此函式可以將捲軸往X軸方向移動a個像素、往Y軸方向移動b個像素。ab為整數。

16. scrollTo(a,b):此函式可以將捲軸移到視窗內X座標=aY座標=b之處。ab為整數。

 

 

 

上一篇:window 物件 介紹

下一篇:window物件的成員

文章標籤

埃伯 發表在 痞客邦 留言(0) 人氣()

按此前往javascript完整教學目錄

 

 

1. window物件,所指的就是瀏覽器視窗本身,在網頁物件中是最上層的物件。以下是網頁物件的類別架構圖(紫灰色是本章介紹的部分)

未命名

一般來說,在一張網頁文件檔中,要呼叫documentnavigatorscreen等等window物件的成員物件(或稱「子物件」),正確的程式碼寫法應如:

window.document.成員

window.navigator.成員

window.screen.成員

等等。

但由上圖可知,window是整張網頁檔中最上層的物件,故在呼叫window物件的成員物件時,程式碼也可以省略掉window,如:

document.成員

navigator.成員

screen.成員

等等。

 

2. 在此,必須先說明視窗的「家族關係」,這與框架(傳統框架以及嵌入式框架)有關。設,在伺服器資料夾中,有test1.phptest2.phptest3.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後顯示:

h

這時,我們可以說:frametest.php的視窗」是「test1.php 的視窗」

、「test2.php 的視窗」、「test3.php 的視窗」三者的「父視窗」。可畫視窗架構圖

為:

image

 

在以上的架構圖中,「frametest.php的視窗」沒有父視窗,於是我們稱:frametest.php的視窗」是整個架構的「始祖視窗」。

 

3. 視窗的「前景」與「後景」之分:後景視窗會被前景視窗遮蓋住,而後景視窗的標題列之顏色較淡。如圖:

image

 

 

 

 

上一篇:javascript-正規表達式

下一篇:window物件的成員函式

文章標籤

埃伯 發表在 痞客邦 留言(0) 人氣()

按此前往javascript完整教學目錄

 

 

 

在物件中可存放多個變數、多個函式。

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設定nameage,為何連person1nameage也跟著改變了?事實上,這是因為在javascript中,person1、和person2都是一個指標,且指向同一個物件。var person2=person1;這一行,只不過是將指標person1複製到一個新的指標person2,卻不是複製新的物件。

要複製新的物件,得用以下寫法:

var person2=JSON.parse(JSON.stringify(person1));

如此一來,person2person1所指的就是兩個獨立的物件,彼此不會互相影響了。

 

4. with的用法:

with(物件){//程式碼;}的用法可以讓操作物件的程式碼變得簡單,表示內部程式碼都在該物件底下執行。以上例的person1物件為例:

document.write(person1.name+":"+person1.age);

這寫法相當於:

with(person1)

{ document.write(name+":"+age);}

執行後都會顯示weiwei:18

這用法方便於對同一物件進行多次操作時。

 

 

上一篇:javascript 遞迴函式

下一篇:javascript 日期物件 Date

文章標籤

埃伯 發表在 痞客邦 留言(0) 人氣()

按此前往javascript完整教學目錄

 

 

字串的正規表示法(regular expreesion,或稱正則表達式)

javascript正規表示法PHP正規表示法有所不同。正規表示法的作用在於用來檢查字串是否符合此正規表示法,以便進行某些判斷。

正規表示法學習起來有點複雜,最好自己多寫、多做測試,才容易明白。

(1) 正規表示法由「敘述條件」、「首尾條件」、「附註條件」構成,而「敘述條件」、「首尾條件」被用 / 符號包住,「附註條件」則寫在 / 之外。

敘述條件」由至少一個的「形式條件」構成,而「形式條件」又由「字元條件」與「次數條件」構成。如:

 

未命名.bmp

註:[]內的條件可寫可不寫,但寫與不寫,造成的效果不同。

一個字串之中,只要有至少一個子字串符合「一個正規表示法中的所有條件」,我們就說「這個字串,通過了這個正規表示法的檢驗」,否則就是沒通過。

真正需要介紹的,是字元條件次數條件首尾條件附註條件以下僅只介紹常用的條件,若欲知道全部的條件,還是去查書吧

(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}nm是非負整數,代表其前面的那個字元條件的「連續執行次數」大於或等於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);    //這正規表示法有附註條件ig

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);    //這正規表示法有附註條件ig

document.write(s.replace(tt,"花哈"));    //顯示:花哈花哈GG...5花哈

 

 

上一篇:javascript 字串

下一篇:window 物件 介紹

文章標籤

埃伯 發表在 痞客邦 留言(0) 人氣()