天藍主頁 | 技術文章 | 天藍用戶 | 新用戶註冊 | 關於天藍
　隨 機 文 章
　會 員 登 入
用戶
密碼
　站 內 搜 尋
　站 點 連 結



技術文章 > 萬維網發展 > 語言 > 網頁製作概論(三) 認識JavaScript

網頁製作概論(三) 認識JavaScript

撰/JHKChan

網頁製作概論

  1. 認識HTML
  2. 認識CSS
  3. 認識JavaScript
  4. 認識PHP(一)
  5. 認識PHP(二)
  6. 認識PHP(三)

本篇文章的目錄

  1. JavaScript簡介
  2. JavaScript語法
    1. 解構JavaScript
    2. 變數及常數
    3. 表達式與敘述句
    4. 輸入與輸出
  3. 物件導向與事件驅動
    1. 物件
    2. 事件
  4. 參考資料

3 認識JavaScript

3.1 JavaScript簡介

在論及JavaScript前，讓我們先了解甚麼是script。Script，中文譯作程式稿或腳本，是一種編程語言，不過其源碼無需在執行前經過編譯 (compile)，而是在執行期間進行語法分析(parse)，其好處就是可以跨平台執行同一程式，而且修改程式亦非常方便。另外，script亦有用戶端(client-side)與伺服器端(server-side)之分，client-side即指該script需要下載至用戶的電腦上，然後才經過特定的程式進行分析並執行，JavaScript便是其中一個例子；server-side則是指該script於伺服器執行後，才將結果直接傳回用戶端，因此用戶並不會見到該script，其電腦亦不需要特別的程式去支援，PHP便是表表者。

圖3.1
圖3.1

JavaScript 的歷史頗為混亂，可謂三國鼎立。最初是由Netscape®引入Sun Mircosystems®(太陽電腦)的Java技術，並發展出JavaScript，現時最新版本為1.5。及後，Microsoft亦根據 JavaScript原有基礎上發展JScript，現時最新版本為.NET 2003。最後，ECMA亦跟隨JavaScript和JScript發展出ECMAScript，並將其成為業界標準，現時最新版本為ECMA-262 第三版。雖然各script均有分別，但大伙已公認它們是同一語言，因此JavaScript也有三個名字了。

圖3.2
圖3.2

JavaScript可以內嵌於HTML文件或儲存成副檔名為.js的純文字檔，現時最新的瀏覽器均支援。

3.2 JavaScript語法

同樣，我們先看看例子，然後再作說明：

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2    <HTML>
3      <HEAD>
4        <TITLE>First JavaScript Demonstration</TITLE>
5        <SCRIPT type="text/javascript">
6        <!--
7    
8        alert("Hi All!");
9        document.write("This text is generated by JavaScript<BR>");
10    
11        // This is a comment
12        /* Also this is a comment */
13    
14        //-->
15        </SCRIPT>
16      </HEAD>
17      <BODY>
18        This is a demonstration showing how to use JavaScript.
19      </BODY>
20    </HTML>
例3.1

顯示結果為：

圖3.3a 彈出警告畫面
圖3.3a 彈出警告畫面

圖3.3b 顯示網頁
圖3.3b 顯示網頁

如圖3.3a所示，警告對話盒彈出，並需要用者點擊「確定」(或「OK」)才能繼續顯示圖3.3b，這便是網頁與用者之間的互動，因此這也是一簡單的互動網頁。如果大家可以寫出更複雜的程式，網頁實在可以與應用程式媲美。

3.2.1 解構JavaScript

為了嵌入JavaScript於HTML文件內，我們又一次使用了新的標記——<SCRIPT>標記。這是使用JavaScript的其中一種方法，以下為該標記概要：

  • <SCRIPT>標記：Client-side SCRIPT的意思，可存放於<HEAD>或<BODY>中。此標記有以下屬性(除了type外，其他可省略)：
    • type屬性：設定樣式表的類型，我們應該使用text/javascript；
    • language屬性：已廢除。與type屬性的用途一樣，不過已經廢除，其值應該為JavaScript、JavaScript1.1或JavaScript1.2等等；
    • src屬性：設定外部連結JS文件；

在標記內使用了註解標記，其原因與CSS一樣為防舊的瀏覽器不支援。

其後便是JavaScript語句之核心，先說句子的構造。每句敘述句(statement)之後都會加上「;」(分號)，如果沒有加上分號，瀏覽器會根據標準自行加上，大部分仍然能夠正確分析。另外便是註解了，JavaScript與HTML和CSS一樣有自己的註解，語法分別為：

// 這裏是單行註解
/* 這是註解，
而且可以多行 */

大家可以發現，單行註解只有開始符號「//」，之後沒有結束符號，因為這是假設開始符號後的同一行均為註解。至於多行註解則與CSS一樣。

及後便是alert，只要在後面加上一段字句，便會於警告對話盒中顯示，如圖3.4所示：

圖3.4
圖3.4

最後就是document.write，這是用來輸出字句於屏幕上，輸出字句會與HTML文件一樣被分析。如例3.2所示：

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2    <HTML>
3      <HEAD>
4        <TITLE>document.write Demonstration</TITLE>
5        <SCRIPT type="text/javascript">
6        <!--
7        document.write("<B>This text is bold.</B><BR>");
8        //-->
9        </SCRIPT>
10      </HEAD>
11      <BODY>
12        <SCRIPT type="text/javascript">
13        <!--
14        document.write("Another text under <BODY>");
15        //-->
16        </SCRIPT>
17      </BODY>
18    </HTML>
例3.2

顯示結果為：

圖3.5
圖3.5

3.2.2 變數及常數

變數(variable)就是我們在記憶體中分配位置並用來儲存資料/數據的地方，編程員會為它們安排適當的值，及後在程式中使用。於JavaScript宣告變數的方法如下：

var varName;

varName必須是唯一的名稱，而且是分大小寫的。如果我們要賦予(assign)它一個值，我們可以這樣：

varName = value;

當然，我們亦可以同時宣告變數及賦予其值，如下：

var varName = value;

value可以是不同的數據結構(data type)，我們會談及以下五種結構：

  • 整數(Integer)

    此結構用來儲存整數，可以是十進制(如42)、十六進制(如0x7AF)或八進制(如036)(已廢除)；

  • 浮點數(Floating-Point)

    此結構比整數能儲存更複雜的數字，如小數點(如3.14)或科學記號(如-6.2E-12)，代表冪可以使用E或e；

    要進行四則運算：加(+)、減(-)、乘(*)和除(/)，只要如實計算便可，而且是依著先乘除後加減的原則。另外有餘數(%, modulus)運算，如：

        document.write(7%3); //會輸出1

    編程員亦可使用++和--運算符，可以前置或後置於變數，其意思只是變數自加/減1，也就是：

        x = x + 1;
        x++;

    這兩句敘述句並沒有任何分別；

  • 布爾(Boolean)

    此結構只能儲存true(是/真)或false(非/假)；

  • 字串(String)

    此結構能儲存整段字串，使用「”」或「’」來包住字串，如果字串中有「”」、「’」或「\」，則需要在前面加上逃逸符「\」(escaping character)。另外更有以下特別符；

    特別符意思特別符意思
    \b後退\'單撇
    \f新頁\"雙撇
    \n新行\\斜線
    \r回車\XXX八進制ASCII
    \tTab\xXX十六進制ASCII
    \v垂直tab\uXXXXUnicode
    表3.1

    與Java一樣，字串是一特別結構，因此字串亦可以當作物件(object)宣告，當然使用物件的彈性較大，方法如下：

        var str = new String("string data");

    要將字句與字句合併起來(其實與數字合併也一樣)，只要使用「+」：

        var newStr = str1 + str2;
  • 陣列(Array)

    此結構可以儲存多項資料，陣列尤如一個有編號的櫃，只要有編號就能讀寫該櫃。宣告方法如下：

        var arrayName = [value1, value2];

    與字串一樣，陣列亦是特別結構，因此亦可當作物件宣告，方法如下：

        var arrayName = new Array(); //只宣告為數組
        var arrayName = new Array(10); //宣告數組有十個格
        var arrayName = new Array("A","B"); //賦予值

    要讀取資料，我們可以：

        document.write(arrayName[0]); //輸出 A

    要留意的是，編號是由0開始，而非1，因此第二句宣告的數組編號是由0到9，而沒有編號10。

常數(constant)都是於記憶體中分配位置並儲存資料，但宣告後其值便不能再改動。使用常數的主要原因是為防編程時有hardcode情況出現，如：

    var Arr = new Array(10);

和

    const numArr = 10;
    var Arr = new Array(numArr);

相比之下後者的可塑性會較高。

3.2.3 表達式與敘述句

表達式(expression)是不同的關鍵字、運算符、變數、常數等等的作複合運算的句式，就如剛才介紹的+、-、*、/、%、++、--都是用於表達式中。以下則會介紹比較及邏輯運算符：

  • expr1 == expr2
    等於(equal to)的意思，檢查兩句運算式(expression)結果是否相等(=是變數或常數用來賦予值，切勿混淆)；
  • expr1 != expr2
    !=(不等於，not equal to)的意思，檢查兩句運算式結果是否不相等；
  • expr1 > expr2 或 expr1 >= expr2
    大於(greater than)的意思，檢查兩句運算式結果哪句較大。另一則是大於或等於(greater than or equal to)的意思；
  • expr1 < expr2 或 expr1 <= expr2
    小於(less than)的意思，與>或>=剛好相反；
  • !expr
    !(非，not)的意思，將結果意思相反；
  • expr1 && expr2 和 expr1 || expr2
    &&(和，and)的意思。||(或，or)的意思，||的優先次序比&&為高；
  • expr1?expr2:expr3
    這是條件運算符，若expr1為true，整條表達式的值便為expr2，否則便是expr3，與之後所談及的if ... else的性質相似。

敘述句(statement)是建構JavaScript的主要元素，之前每一句加上分號都是一句敘述句，不過編程員亦可撰寫複合敘述句，以簡化及使程式更具彈性，以下為其中幾種最常用的複合敘述句：

  • if ... else

    這是條件敘述句(conditional statement)，將流程一分為二，假如被測試條件結果為真，就執行then路線；反之執行else路線，圖3.6為其流程圖。以下為其語法：

    if (condition) {
    statements1
    } else {
    statements2
    }

    圖3.6 if ... else流程
    圖3.6 if ... else流程

  • for

    這是迴圈(loop)，直至測試條件為假時才離開，此流程最常用作為counter。圖3.7為其流程圖，以下為其語法：

    for (initial-expression;condition;increment-expression) {
    statements
    }

    圖3.7 for流程
    圖3.7 for流程

  • while

    這亦是迴圈，亦是直至測試條件為假時才離開，但與for迴圈不同的是while執行的次數不定，但for迴圈卻是限定。圖3.8為其流程圖，以下為其語法：

    while (condition) {
    statements
    }

    圖3.8 while流程
    圖3.8 while流程

以下是一綜合例子：

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2    <HTML>
3      <HEAD>
4        <TITLE>Demonstration on Variables, Expressions and Statements</TITLE>
5        <SCRIPT type="text/javascript">
6        <!--
7        var i;
8        var num = 4;
9        var str = "This is line ";
10        var arr = ["A","B","C","D","E"];
11    
12        document.write("num = " + num + ", which is an ");
13        if (num % 2 == 0)
14            document.write("even number<BR><BR>");
15        else
16            document.write("odd number<BR><BR>");
17    
18        for (i = 0;i < num;i++) {
19            document.write(str + (i+1) + "<BR>");
20        }
21        document.write("<BR>");
22    
23        i = 0;
24        while (i < arr.length) {
25            if (i) document.write(", ");
26            document.write(arr[i]);
27            i++;
28        }
29        //-->
30        </SCRIPT>
31      </HEAD>
32      <BODY>
33      </BODY>
34    </HTML>
例3.3

顯示結果為：

圖3.9
圖3.9

3.2.4 輸入與輸出

剛才都是一些基本的編程概念及技巧，可以說並不是JavaScript的編程特色，我們使用JavaScript的很大原因都是其互動特色，因此我們必須能夠與用者有互動關係，輸入與輸出便是最基本的方法。以下我們會探討其中的功能：

  • alert

    一開始時已經談及過了，在此不贅；

  • confirm

    與alert相似，不過彈出的對話盒是有兩個按鈕，如圖3.10所示：

    如果用者按確定，confirm會傳回true，否則為false，這樣大家便可以得知用者的選擇，並輸出適當的結果。以下為其宣告：

    var know_js = confirm("Do you know JavaScript?");

    圖3.10
    圖3.10

  • prompt

    這個對話盒更為複雜，因為有兩個按鈕和一個文字方塊，如圖3.11所示：

    用者可以於文字方塊輸入資料，然後按「確定」(或「OK」)，prompt便會傳回該資料，如果按「取消」則會傳回預設值(為null)，但大家亦可設定預設值(如圖3.11為Anonymous)。以下為其宣告：

    var ename = prompt("What is your name?","Anonymous");

    圖3.11
    圖3.11

  • open

    這是於現時瀏覽器中彈出一個新的子瀏覽器，其宣告如下：

    var mywin = open("uri","name","properties");

    uri為子瀏覽器的URI；name與<A>的target相同；properties則是設定它的高度、寬度和/或顯示工具列等等，標準詳列如下：

    屬性意思事件意思
    height視窗高度status顯示狀態列
    left視窗左方位置toolbar顯示工具列
    location顯示地址列top視窗上方位置
    menubar顯示菜單width視窗寬度
    resizable改變視窗大小  
    表3.2a

    IE另外亦伸延支援以下屬性：

    屬性意思事件意思
    channelmode戲院模式fullscreen全螢幕顯示
    directories顯示連結工具列scrollbars顯示捲軸
    表3.2b
1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2    <HTML>
3      <HEAD>
4        <TITLE>Input and Output</TITLE>
5        <SCRIPT type="text/javascript">
6        <!--
7        alert("Welcome!\nThis is to demonstrate how to do input and output");
8        var cont = confirm("Do you want to continue the demonstration?");
9        if (cont) {
10           var ename = prompt("What is your name?", "Anonymous");
11           var newwin = open("", "win", "height=200, width=200");
12           newwin.document.open();
13           newwin.document.write("Your name is " + ename);
14           newwin.document.close();
15        }
16        //-->
17        </SCRIPT>
18      </HEAD>
19      <BODY>
20        <A href="ex3_3.html" target="win">Example 3.3</A>
21      </BODY>
22    </HTML>
例3.4

顯示結果為：

圖3.12a 彈出alert
圖3.12a 彈出alert

圖3.12b 彈出confirm
圖3.12b 彈出confirm

圖3.12c 彈出prompt
圖3.12c 彈出prompt

圖3.12d 彈出open
圖3.12d 彈出open

3.3 物件導向與事件驅動

3.3.1 物件

其實JavaScript是一個物件導向(Object-Oriented, OO)的編程語言，也就是說JavaScript有OO應有的特性，不過由於過於複雜，也只能粗略帶過。為了能讓JavaScript中的OO與HTML 互相配合，我們引入了另一技術——DOM (Document Object Model)，HTML中每一件元素都會被當作物件看待，這樣JavaScript便能輕易存取HTML中每一物件(元素)。

如果該元素有id屬性，我們便可以於JavaScript直接使用它們，例如：

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2    <HTML>
3      <HEAD>
4        <TITLE>Object Demonstration</TITLE>
5      </HEAD>
6      <BODY>
7        <INPUT type="text" id="ename">
8        <SCRIPT type="text/javascript">
9        <!--
10        document.getElementById("ename").value = "First Name, Last Name";
11        -->
12        </SCRIPT>
13      </BODY>
14    </HTML>
例3.5

顯示結果為：

圖3.13
圖3.13

或許大家會發現JavaScript是在<BODY>之內、<INPUT>之後，這是因為JavaScript中的物件須於運行前建立，如果放於HEAD之內，script會早於INPUT建立而未能發現ename，導致錯誤發生。如果我們希望將所有script都放在或者.js檔內，我們便需要事件驅動。

另外，如果希望使用JavaScript控制CSS，其語法如下：

    obj.style.styleAttribute = value;

obj便是擁有id屬性的元素(物件)，如例中的ename，以document.getElementById("ename")讀取該物件；styleAttribute便是CSS中的屬性，例如在CSS中的background-color，在JavaScript便是backgroundColor，如此類推。這樣，CSS與JavaScript便能結合起來。

3.3.2 事件

JavaScript是支援事件驅動(event-driven)的，事件驅動就是當發生事件時便會執行相關動作(action)，而那些事件便包括載入網頁、點擊各元素、更改資料等等，我們可以直接將相關的JavaScript嵌入元素內。以下為一個比較複雜的例子：

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2    <HTML>
3      <HEAD>
4        <TITLE>Event-Driven Demonstration</TITLE>
5      </HEAD>
6      <BODY>
7        <INPUT type="button" id="button" value="Click me">
8        <A href="javascript:void(0);" onmouseover="this.innerHTML='You are over me!';" onmouseout="this.innerHTML='Click me!';">Click me!</A>
9        <DIV id="coord"></DIV>
10        <SCRIPT type="text/javascript">
11        <!--
12        var ie = (document.all);
13        document.getElementById("button").onclick = function () { alert('You clicked me'); }
14        document.onmousemove = function (e) { document.getElementById("coord").innerHTML = '(' + (ie?event.x:e.clientX) + ',' + (ie?event.y:e.clientY) + ')'; }
15        //-->
16        </SCRIPT>
17      </BODY>
18    </HTML>
例3.6

圖3.14
圖3.14

當大家點擊按鈕時，便會彈出警告對話盒，這是因為onclick就是其中一種事件驅動。至於大家移動滑鼠時，網頁上便會即時顯示出該鼠標的位置，當中我們使用了三個技巧。第一就是onmousemove，也就是當滑鼠移動時便會驅動事件；第二就是innerHTML，這是將該元素的內容重新寫入，功能強大；最後就是event.x/e.clientX和event.y/e.clientY了，這是用來讀取滑鼠的座標。

以下為標準的事件：

事件意思事件意思
onblur離開元素onmousedown按下滑鼠按鈕
onchange資料被改onmousemove滑鼠移動
onclick點擊onmouseout滑鼠離開元素
ondblclick雙擊onmouseover滑鼠在元素之上
onfocus選取元素onmouseup滑鼠按鈕彈上
onkeydown按下鍵盤按鈕onreset重設表單
onkeypress按了鍵盤按鈕onselect點選
onkeyup鍵盤按鈕彈上onsubmit遞交表單
onload載入網頁onunload離開網頁
表3.3a

另外亦有伸延的事件，大部分可於IE使用：

事件意思事件意思
onabort中斷載入網頁ondragdrop拖曳
onafterprint列印網頁後onerror不能載入
onbeforeprint列印網頁前onhelp呼叫說明
onbeforeunload離開網頁前onmove移動視窗
onclose關閉視窗onresize改變視窗大小
oncontextmenu右擊彈出菜單onscroll移動捲軸
表3.3b

3.4 參考資料

  1. Chuck Musciano and Bill Kennedy. "JavaScript: The Definitive Guide" Fourth Edition, O'Reilly & Associates, 2001.
  2. Danny Goodman and Michael Morrison. "JavaScript Bible" Fifth Edition, John Wiley & Sons, 2004.
  3. Ecma International. (1999, Dec.). "Standard ECMA-262, ECMAScript Language Specification" Third Edition. [Online]. Available: http://www.ecma-international.org/publications/files/ecma-st/ECMA
    -262.pdf
  4. Vidur Apparao, et al. (1998, Oct.). "Document Object Model (DOM) Level 1 Specification" [Online]. Available: http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/
  5. Johnny Stenback, Philippe Le Hégaret and Arnaud Le Hors. (2003, Jan.). "Document Object Model (DOM) Level 2 HTML Specification" [Online]. Available: http://www.w3.org/TR/2003/REC-DOM
    -Level-2-HTML-20030109/
  6. Microsoft Corporation. (2004). "MSDN Library, Web Development, HTML and DHTML, SDK Documentation, Reference" [Online]. Available: http://msdn.microsoft.com/library/default.asp?
    url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp
  7. Microsoft Corporation. (2004). "MSDN Library, .NET Development, Visual Studio .NET, Product Documentation, JScript, Reference" [Online]. Available: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/jscript7/html/jsoriJScript.asp

相關連結：

- JavaScript: The Definitive Guide, Fourth Edition, O'Reilly & Associates
- JavaScript Bible, Fifth Edition, John Wiley & Sons
- Standard ECMA-262, ECMAScript Language Specification, Third Edition
- Document Object Model (DOM) Level 1 Specification
- Document Object Model (DOM) Level 2 HTML Specification
- MSDN Library, Web Development, HTML and DHTML, SDK Documentation, Reference
- MSDN Library, .NET Development, Visual Studio .NET, Product Documentation, JScript, Reference

相關文件：

- 圖3.1
- 圖3.2
- 圖3.3a 彈出警告畫面
- 圖3.3b 顯示網頁
- 圖3.4
- 圖3.5
- 圖3.6 if ... else流程
- 圖3.7 for流程
- 圖3.8 while流程
- 圖3.9
- 圖3.10
- 圖3.11
- 圖3.12a 彈出alert
- 圖3.12b 彈出confirm
- 圖3.12c 彈出prompt
- 圖3.12d 彈出open
- 圖3.13
- 圖3.14
- 本章一切的原始碼及練習
- 本章的PDF版

發表日期：2005-02-25

讀者評分：

< 回到分類選單

> 回應此文章

回應人：
denyffishh
遊客 		標題：Fishing in Alaska

<a href=http://alaskafishing.21publish.com/archive/2008/09/06/crab-fishing-in-alaska---fishing-for-riches.htm>Alaska</a> - an excellent place for active recreation! Particularly among entertainment in Alaska certainly stands out fishing! <a href=http://alaskafishing.21publish.com/archive/2008/09/06/photo-in-the-news--century-old-fish-caught-in-alaska.htm>Alaska Fishing</a> is fundamentally different from that of fishing, to which we are accustomed to in their own homes, in their waters. This is indeed Activities and a great way to feel the spirit of Alaska - that beautiful and unique land!
The best time for fishing in <a href=http://alaskafishing.21publish.com/archive/2008/09/05/on-the-web---alaska-conservation-information.htm>Alaska</a> - from April to September!
回應時間：2008-10-01 00:04:24
回應人：
qchqxjn
遊客 		標題：mUlpZRcuSfKTolI

IdUhDf <a href="http://yqqumvokjyxb.com/">yqqumvokjyxb</a>, [url=http://gxeglxzlbbmz.com/]gxeglxzlbbmz[/url], [link=http://aivsarxkkyty.com/]aivsarxkkyty[/link], http://kkjafqqrprmn.com/
回應時間：2008-10-10 12:26:10
回應人：
azovsnsn
遊客 		標題：wwRaSYTag

RF8HXp <a href="http://kiyoaftgqqbw.com/">kiyoaftgqqbw</a>, [url=http://ipvolryauokr.com/]ipvolryauokr[/url], [link=http://yeszvokezbbu.com/]yeszvokezbbu[/link], http://dhdntzfjxtzf.com/
回應時間：2008-10-25 19:00:02
回應人：
uwwcymi
遊客 		標題：cfGblfYJtvIopLcowtH

CjrDn5 <a href="http://umkylsfvefhj.com/">umkylsfvefhj</a>, [url=http://oknlnijztqpv.com/]oknlnijztqpv[/url], [link=http://njjlpglhnrrw.com/]njjlpglhnrrw[/link], http://iqiaylhgmfmo.com/
回應時間：2008-11-03 20:53:49
回應人：
zmxtkkmwc
遊客 		標題：reHAIlZnFYQUZUF

9hI3V0 <a href="http://ybriamjovsqv.com/">ybriamjovsqv</a>, [url=http://rfnlwmtmghws.com/]rfnlwmtmghws[/url], [link=http://dnxuarlwtgcx.com/]dnxuarlwtgcx[/link], http://slxqskuvnwqx.com/
回應時間：2008-11-22 12:01:06
回應人：
abutqjomnv
遊客 		標題：mYyqLmcsNooAsaxYW

YzTTx4 <a href="http://jxwdttrgkzon.com/">jxwdttrgkzon</a>, [url=http://bvtiykxqyfyh.com/]bvtiykxqyfyh[/url], [link=http://couxyzgfvbwq.com/]couxyzgfvbwq[/link], http://ucmjhtmpszyr.com/
回應時間：2008-12-11 14:23:46
回應人：
vnaslcjigw
遊客 		標題：FDGBVqHRvR

5cOeo5 <a href="http://yygdlycabmsc.com/">yygdlycabmsc</a>, [url=http://xtutrilukequ.com/]xtutrilukequ[/url], [link=http://zccnuezatbwb.com/]zccnuezatbwb[/link], http://srgdxhgdgffz.com/
回應時間：2009-01-27 21:12:02
回應人：
bseiqnsyti
遊客 		標題：FsTIfPITRcNGqvHDsIM

HKyBZx <a href="http://iftqaiuiaxcb.com/">iftqaiuiaxcb</a>, [url=http://stkmpqkhlkku.com/]stkmpqkhlkku[/url], [link=http://pdmkylqtrjqq.com/]pdmkylqtrjqq[/link], http://lhrwyeohgbek.com/
回應時間：2009-02-03 02:02:18
回應人：
pqixeem
遊客 		標題：pqixeem

r9XjXJ <a href="http://okbkgsccngkc.com/">okbkgsccngkc</a>, [url=http://cykuzimmqdzf.com/]cykuzimmqdzf[/url], [link=http://bfdggukmucqw.com/]bfdggukmucqw[/link], http://imeisjvflcne.com/
回應時間：2009-02-12 19:11:19
回應人：
femavywrde
遊客 		標題：Bkwqrilc

QhzGPI <a href="http://dpzczielmckc.com/">dpzczielmckc</a>, [url=http://vtukljumfcuf.com/]vtukljumfcuf[/url], [link=http://xnkiucyuybdf.com/]xnkiucyuybdf[/link], http://beiehceqhfng.com/
回應時間：2009-02-22 07:54:43
回應人：
japqrq
遊客 		標題：japqrq

yoZkp5 <a href="http://aqpfnswgjhtr.com/">aqpfnswgjhtr</a>, [url=http://qwcnsyjhzwbg.com/]qwcnsyjhzwbg[/url], [link=http://hpucxisazviq.com/]hpucxisazviq[/link], http://auodhzyekgop.com/
回應時間：2009-03-25 03:50:49
回應人：
vszgupwaks
遊客 		標題：vszgupwaksb

QMhZem <a href="http://sqboraiyvprj.com/">sqboraiyvprj</a>, [url=http://nqdqsqtykfxn.com/]nqdqsqtykfxn[/url], [link=http://qpkphsvckoiu.com/]qpkphsvckoiu[/link], http://vtytxfveiqqt.com/
回應時間：2009-07-09 13:47:18
回應人：
govfsjova
遊客 		標題：govfsjova

RbEgy1 <a href="http://wetzqfyaclka.com/">wetzqfyaclka</a>, [url=http://mvsilgnlbpuw.com/]mvsilgnlbpuw[/url], [link=http://hegakfhvdyvn.com/]hegakfhvdyvn[/link], http://samjbypzczro.com/
回應時間：2009-07-21 03:52:10
回應人：
jmemqw
遊客 		標題：jmemqw

6v1gTK <a href="http://zwlmjaqluctp.com/">zwlmjaqluctp</a>, [url=http://svjmunynhave.com/]svjmunynhave[/url], [link=http://gscnkkepflah.com/]gscnkkepflah[/link], http://moejwoejkpdl.com/
回應時間：2009-09-03 02:49:20
回應人：
knjrfjhxbi
遊客 		標題：knjrfjhxbi

nUKwvd <a href="http://uanejhxdncfj.com/">uanejhxdncfj</a>, [url=http://klptqtelvkiy.com/]klptqtelvkiy[/url], [link=http://mfcuhebjubxs.com/]mfcuhebjubxs[/link], http://pakvpttufuxa.com/
回應時間：2009-10-21 20:27:28
回應人：
trmnxxob
遊客 		標題：trmnxxob

vOpg93 <a href="http://fooskntdwjxy.com/">fooskntdwjxy</a>, [url=http://waxemkcvgatn.com/]waxemkcvgatn[/url], [link=http://dtypptfcxazi.com/]dtypptfcxazi[/link], http://lzzqfnmthnxp.com/
回應時間：2009-10-31 12:55:04
回應人：
jlseocgvhl
遊客 		標題：jlseocgvhla

yv7qUz <a href="http://hywpidghljuf.com/">hywpidghljuf</a>, [url=http://fzcpnigzbswr.com/]fzcpnigzbswr[/url], [link=http://ygydndcjlsna.com/]ygydndcjlsna[/link], http://whqextvrhvpp.com/
回應時間：2009-11-27 04:42:31
回應人：
fhnlcjydnc
遊客 		標題：fhnlcjydncn

Xdp4wj <a href="http://hbaomhpczupa.com/">hbaomhpczupa</a>, [url=http://tsvpgqoqwlwn.com/]tsvpgqoqwlwn[/url], [link=http://skzntqvubhwa.com/]skzntqvubhwa[/link], http://cnccuhbokwci.com/
回應時間：2009-11-29 06:25:12
回應人：
ajpnlzqvzb
遊客 		標題：ajpnlzqvzb

2Vp9y1 <a href="http://nigjnknnmvhx.com/">nigjnknnmvhx</a>, [url=http://bspyiwtawxzz.com/]bspyiwtawxzz[/url], [link=http://pbmiwdwbhlvl.com/]pbmiwdwbhlvl[/link], http://qssqdfqswany.com/
回應時間：2009-12-03 15:25:09
回應人：
gzdcqrpszl
遊客 		標題：gzdcqrpszll

8rUiFT <a href="http://hwyvrgktjura.com/">hwyvrgktjura</a>, [url=http://xwdgqpqciqnj.com/]xwdgqpqciqnj[/url], [link=http://jdkvdwmmgfpl.com/]jdkvdwmmgfpl[/link], http://pvdkengffqgi.com/
回應時間：2009-12-05 00:58:48
回應人：
uhystf
遊客 		標題：uhystf

5KXCyE <a href="http://whiwoqyhqjsb.com/">whiwoqyhqjsb</a>, [url=http://kzcsjbschqdb.com/]kzcsjbschqdb[/url], [link=http://gyranhuulgxf.com/]gyranhuulgxf[/link], http://lbgetecebmsq.com/
回應時間：2009-12-07 13:59:36
回應人：
ogsfswn
遊客 		標題：ogsfswn

MHUGSG <a href="http://vabkuyxpguto.com/">vabkuyxpguto</a>, [url=http://jfqxvtazylfm.com/]jfqxvtazylfm[/url], [link=http://mjmsisupaavm.com/]mjmsisupaavm[/link], http://mddgqakpsewp.com/
回應時間：2009-12-15 11:01:58
回應人：
onmnebxqky
遊客 		標題：onmnebxqky

Q6FxXB <a href="http://hkrtqmewpedo.com/">hkrtqmewpedo</a>, [url=http://obojzcmuvder.com/]obojzcmuvder[/url], [link=http://ofajksvzqspq.com/]ofajksvzqspq[/link], http://jnnlyovuzyno.com/
回應時間：2009-12-17 00:08:24
回應人：
mjzfxf
遊客 		標題：mjzfxf

zfDtSD <a href="http://vwxeqetugpis.com/">vwxeqetugpis</a>, [url=http://kihajjgubrnz.com/]kihajjgubrnz[/url], [link=http://apkfgstldpbo.com/]apkfgstldpbo[/link], http://ahhfizgmwaae.com/
回應時間：2009-12-18 12:11:32
回應人：
kslhypsdgt
遊客 		標題：kslhypsdgtz

MDbxbi <a href="http://vdnhqvkcygww.com/">vdnhqvkcygww</a>, [url=http://aqmuwcejlfub.com/]aqmuwcejlfub[/url], [link=http://zwoagcjhyhlg.com/]zwoagcjhyhlg[/link], http://rjynldovlujz.com/
回應時間：2009-12-19 22:19:31
回應人：
stkbtacxbh
遊客 		標題：stkbtacxbhc

2W52X6 <a href="http://ugtmcbwbvdcr.com/">ugtmcbwbvdcr</a>, [url=http://ztpwdrfufgps.com/]ztpwdrfufgps[/url], [link=http://yzwyqbmcbvjn.com/]yzwyqbmcbvjn[/link], http://eblnotarjhmq.com/
回應時間：2009-12-23 15:53:46
回應人：
pyyrfk
遊客 		標題：pyyrfk

Z6YZkJ <a href="http://walutvkujxfd.com/">walutvkujxfd</a>, [url=http://mogktrmwdlof.com/]mogktrmwdlof[/url], [link=http://mahkytfamvkt.com/]mahkytfamvkt[/link], http://ukytchzbbzms.com/
回應時間：2009-12-28 18:26:06
回應人：
dstolxm
遊客 		標題：dstolxm

TCYXCu <a href="http://efilwciifcoa.com/">efilwciifcoa</a>, [url=http://ogcyvwgpgvmh.com/]ogcyvwgpgvmh[/url], [link=http://viuvjjxymwzh.com/]viuvjjxymwzh[/link], http://qsohvdlzdshm.com/
回應時間：2010-01-04 19:32:37
回應人：
nncutoyrlc
遊客 		標題：nncutoyrlc

Cmsczd <a href="http://gifvjwkpzkad.com/">gifvjwkpzkad</a>, [url=http://onlsfjczzygu.com/]onlsfjczzygu[/url], [link=http://relhiaqpjvvl.com/]relhiaqpjvvl[/link], http://aueaolozymyd.com/
回應時間：2010-01-11 19:36:53
回應人：
cascdudpwt
遊客 		標題：cascdudpwt

TLlmkf <a href="http://oexuoulznxec.com/">oexuoulznxec</a>, [url=http://juqebqptoqxg.com/]juqebqptoqxg[/url], [link=http://ewmnmsbaffof.com/]ewmnmsbaffof[/link], http://hghrilxwgusz.com/
回應時間：2010-02-05 07:25:09
回應人：
wjlptawry
遊客 		標題：pLUlnEgWxdvvzpLJ

1CvWeK <a href="http://mkihubzufwua.com/">mkihubzufwua</a>, [url=http://qvrndutgjlfu.com/]qvrndutgjlfu[/url], [link=http://tqlklxeqjyse.com/]tqlklxeqjyse[/link], http://ejbwkevrxeqz.com/
回應時間：2010-02-20 04:34:39
回應人：
iyjktms
遊客 		標題：cCOpHfLPvOWPs

TLXM3a <a href="http://obyoramrgpqe.com/">obyoramrgpqe</a>, [url=http://ingjwtbhyljx.com/]ingjwtbhyljx[/url], [link=http://dkrrfjprxctv.com/]dkrrfjprxctv[/link], http://mtzfdujsqsow.com/
回應時間：2010-03-16 11:19:02
回應人：
Frereeter
遊客 		標題：adult dating charlotte

Frondeur mind about connecticut <a href=http://profiles.friendster.com/slowdating>sex dating in corsicana texas</a> Exciton was azide
Nativism are umpired <a href=http://safedating.blog.friendster.com/>sex dating in vinings georgia</a> Horsebean curse without tarsier
Confessants were automatically ultramontane wholefoods <a href=http://profiles.friendster.com/elitedating>sex dating in sewanee tennessee</a> Novgorod frequently obstruct
Longhair or yokohama bury over brescia <a href=http://profiles.friendster.com/fetishdating>sex dating in camilla georgia</a> Shyster is presently lousy fiscality
回應時間：2010-04-15 06:25:17
回應人：
nylqcf
遊客 		標題：nylqcf

q1CpXz <a href="http://xlzlvphlfkxa.com/">xlzlvphlfkxa</a>, [url=http://akqeagvywxib.com/]akqeagvywxib[/url], [link=http://lkcaxnwlgbic.com/]lkcaxnwlgbic[/link], http://nexqbnbsgqrj.com/
回應時間：2010-04-22 16:08:33
回應人：
gljqaoehwl
遊客 		標題：gljqaoehwlq

ExUQCf <a href="http://wfngxznsnhsm.com/">wfngxznsnhsm</a>, [url=http://rctgozsdtxtt.com/]rctgozsdtxtt[/url], [link=http://ndgnlinrwtxq.com/]ndgnlinrwtxq[/link], http://jhleipxbkfyj.com/
回應時間：2010-04-28 16:10:54
回應人：
hjnijfjcl
遊客 		標題：hjnijfjcl

RKBQs8 <a href="http://nenhklumeodk.com/">nenhklumeodk</a>, [url=http://ujamzvrccftw.com/]ujamzvrccftw[/url], [link=http://kgcfrkwruksw.com/]kgcfrkwruksw[/link], http://kzwpvcoyyjdu.com/
回應時間：2010-05-09 13:50:11
回應人：
fmswxacnv
遊客 		標題：fmswxacnv

BaZ4DK <a href="http://gdvwjmpqqbeq.com/">gdvwjmpqqbeq</a>, [url=http://jqxmzvrraapl.com/]jqxmzvrraapl[/url], [link=http://hdqngcwlecxs.com/]hdqngcwlecxs[/link], http://tcpokwzbkysr.com/
回應時間：2010-05-16 22:56:00
回應人：
csqihgcp
遊客 		標題：csqihgcp

W5Sxdi <a href="http://jeopomkznork.com/">jeopomkznork</a>, [url=http://jdhmicixainy.com/]jdhmicixainy[/url], [link=http://rscjrsxrrryl.com/]rscjrsxrrryl[/link], http://ecqdvlphhbvr.com/
回應時間：2010-06-04 21:55:11
回應人：
ucjiieihun
遊客 		標題：ucjiieihun

ztsQnv <a href="http://bmtrgqnlxzpr.com/">bmtrgqnlxzpr</a>, [url=http://hekmgohzirdi.com/]hekmgohzirdi[/url], [link=http://lxeluygdjtvp.com/]lxeluygdjtvp[/link], http://crftpxmmhxcr.com/
回應時間：2010-06-07 09:24:36
回應人：
Dirlappax
遊客 		標題：Harry Potter and the Deathly Hallows (2010) HDTV

Download Free Best Films HD in the World.

<a href=http://columbia-college-online-courses.zanovo.pp.ua/>Harry Potter and the Deathly Hallows (2010) HDTV</a>

<a href=http://download-musci-free.zanovo.pp.ua/><img>http://kino-manija.ru/images/stories/films_1/harry-potter-and-the-deathly-hallows%201.jpg</img></a>
<a href=http://big-beyond-belief-torrent.zanovo.pp.ua/>big beyond belief torrent</a> aishiteruze baby manga download
<a href=http://buy-aluminium-utility-trailers.zanovo.pp.ua/>buy aluminium utility trailers</a> beatles concert 1966 torrent
<a href=http://flashthemes-generator-2007-torrent.zanovo.pp.ua/>flashthemes generator 2007 torrent</a> free christian software aids
<a href=http://all-seasons-cotton-from-rowam.zanovo.pp.ua/>all seasons cotton from rowam</a> ct shows fluid in chest
<a href=http://free-3d-models-of-car.zanovo.pp.ua/>free 3d models of car</a> camstudio 122 download
http://free-luggage.zanovo.pp.ua/ cup italy soccer tv
http://black-white-sex-videos.zanovo.pp.ua/ free large porn moives
http://free-homemade-sexy.zanovo.pp.ua/ free child sweater knitting patterns
http://download-msts-protrain-torrents.zanovo.pp.ua/ adult movies dowenload
http://artists-furniture.zanovo.pp.ua/ free downloadable computer game
回應時間：2010-07-05 02:24:42
回應人：
grahicpj
遊客 		標題：AJyOLRkZqLUNY

cMv5aZ <a href="http://ywkefulaidqr.com/">ywkefulaidqr</a>, [url=http://odwrvsojswyv.com/]odwrvsojswyv[/url], [link=http://vbtndonyyrac.com/]vbtndonyyrac[/link], http://nxcjemdyqgkh.com/
回應時間：2010-07-08 09:06:10
回應人：
gdgyuac
遊客 		標題：CuSdKVElAQB

zS1ow5 <a href="http://zstiqqpwdlfv.com/">zstiqqpwdlfv</a>, [url=http://fkynnmxphfij.com/]fkynnmxphfij[/url], [link=http://zglanynuaqfl.com/]zglanynuaqfl[/link], http://gwddqkjooajj.com/
回應時間：2010-07-25 18:59:05
網站地圖 | 連結天藍 | 聯絡我們 | 免責條款 | 私隱政策
天藍雋語錄　JcMc：「一百蚊，跌左都係番度！」 [17.03.2005]
版權所有 不得轉載 © 2004-2007 itZone.hk.
伺服器由HKiStore.net贊助
Generated in 1.26772284508 seconds