Vixual

以下這些 JavaScript 指令，只要打在瀏覽器的網址列即可:

javascript:window.resizeTo(800,600)

javascript:alert("Cookie:"+document.cookie)

javascript:print()

轉址的方式分為:

• 302: 暫時搬移 (Temporarily Moved)
• 301: 永久搬移 (Permanently Moved)

Read more

doiMenu 是一支簡單好用的 DHTML 選單程式，目前的版本是 1.5。

• doiMenu v.1.5 Demo (本站下載)

相關網頁

• Accessible Website Menu Demo
• WebFX - DHTML Menu 4 Demo
• HierMenusCentral Demo
• xmenu-xlayer

這是一個簡單好用一維條碼產生器，使用 Flash 設計而成，程式使用的條碼格式是 "EAN-13" ，前三碼為國碼 (台灣為471) + 四碼廠商碼 + 五碼資料碼 + 一碼檢查碼，只要在設計網頁時，將 "Code" 參數傳給 "FBC10.swf" 就可以了。
Read more

網頁上的 WYSIWYG 編輯器算是以後設計網頁的趨勢...

比較推薦的有:

• FCKeditor Demo
• TinyMCE Demo
• Xinha Demo

還不錯的有:

• HTMLArea Demo ImageManager (HTMLArea 的程式已經很久沒更新了，目前 HTMLArea 的 UnDo/ReDo 功能有問題，這裡附上: 修正版的 HTMLArea)。
• eWebEditor Demo (簡體中文，另有商業版本)
• XStandard XHTML (Strict or 1.1) WYSIWYG Editor (另有商業版本)
• aynHTML :: wysiwyg editor Demo
• Microsoft XML Editing: A WYSIWYG XML Document Editor
• contentEditable
• Easy Web Editor Demo

功能較陽春的:

• tGedit Demo (另有商業版本)
• widgEditor
• Cross-Browser Rich Text Editor
• OSCOM Kupu - Kupu WYSIWYG XHTML Editor Demo

很不錯，但要錢的有:

• InnovaStudio WYSIWYG Editor Demo
• Interspire DevEdit Demo

參考網頁

• Genii Software | WebEditors
• Neo』s Blog: WYSIWYG 網頁線上編輯器比較表
• Web Software Components

轉載自: 中文 PHP 資訊站

首先讓我們看兩個特殊的符號: ^ 和 $。他們的作用是分別指出一個字串的開始和結束。例子如下：

• ^The：表示所有以「The」開始的字串（「There」、「The cat」等）；
• of despair$：表示所有以「of despair」結尾的字串；
• ^abc$：表示開始和結尾都是「abc」的字串--呵呵，只有「abc」自己了；
• notice：表示任何包含「notice」的字串。

像最後那個例子，如果你不使用兩個特殊字元，你就在表示要查找的串在被查找串的任意部分--你並不把它定位在某一個頂端。

Read more

轉載自: 愛德華日誌

這不是一篇教你如何在網頁中應用 JavaScript 的教材。這是一篇讓你明瞭看似簡單的 JavaScript，其實其核心語法功能強大。我將在這篇文章中說明 JavaScript 物件導向的特性，並說明如何透過這些特性，達到傳統程式語言 (C++/Java) 所難以完成的功能。

Everything is Object in JavaScript

開宗明義：在 JavaScript 中任何東西都是物件：變數是物件、函式是物件，常數也是物件。證明方式：

alert (typeof('abc'));
alert (typeof(123));
var ary = [123, "abc"];
alert (typeof(ary));

上面的 typeof 會顯示物件資料型態。得到結果分別是 string, number, object。

Create Objects in JavaScript

既然任何東西都是物件，那建立物件的方法就多了。直接看個例子：

var main = new Object;     // 建立新物件
main.x = 123; // 設定物件成員變數(屬性)之一
main["y"] = "XYZ"; // 設定物件成員變數(屬性)之二
alert(main["x"]); // 取得物件屬性並輸出
alert(main.y);

可以看到在 JavaScript 中，main.x 與 main["x"] 這兩種語法是通用的。其實在其他語言中，這兩種表示法的語意並不相同。我稍後再作說明。

List All Members in an Object

這是 JavaScript 的必殺技，使用 JavaScript 的人務必要學會這個技巧。底下函式可以傳回一個物件的所有成員的字串表達式，包括物件中的屬性及方法。在物件導向程式設計中，這種技術叫 reflection。

function listMember(main) {
  var s = "";
  for( key in main )  // 使用 in 運運算元列舉所有成員
  s += key + ": " + main[key] + "\n";
  return s;
}

範例碼中的 key 會對應到物件中的屬性名稱，如 「x」 或 「y」，而 main[key] 則對應到屬性值。

說這項技巧是必殺技的原因是，你可以透過這項技巧，將物件封裝的黑箱打開來，看看裡面藏有什麼東西。我常用這項技巧來看看 IE 與 Mozilla 的 Dom 物件模型有何不同。試試看下面呼叫範例，就可以知道這項技巧的強大了：

var ary = [123, "abc"];
alert (listMember(ary));
alert (listMember(document.location));

Construct Object with Initial Value

要在建立物件的同時指定物件初始值，必須先透過 function 建立一個「原型物件」(或稱為 constructor)，再透過 new 運運算元建立新物件。例如以下程式碼會建立一個二維陣列的原型，再產生一個新的二維物件。

function Array2DVar(x,y) {  // 定義二維陣列原型
  this.length = x;
  this.x = x;  // x 維度長度
  this.y = y;  // y 維度長度
  for(var i = 0; i < this.length; i++)  // 初始各元素值為 null
  this[i] = new Array(y);  // this 代表物件本身
}

var a2dv = new Array2DVar(10, 10);  // 建立新的 10*10 的二維陣列
a2dv[1][3] = "ABC";  // 設定二維陣列元素值
a2dv[2][6] = "XYZ";
a2dv[9][9] = 1000;

alert( a2dv[1][3]);  // 取得二維陣列元素值，並顯示出來
alert( a2dv[2][6]);
alert( a2dv[9][9]);

Initial Array Object

在 JavaScript 中陣列也是物件 (其實近代多數語言中陣列也都是物件，只有像 C 或 Assembly 這類古老的語言才不把陣列看成物件)，因此也可以用 constructor 的語法來建構。當然 JavaScript 還提供了 [] 語法，以更方便建構陣列，範例如下：

a = new Array("abc", "xyz", 1000); // constructor 語法，或
a = ["abc", "xyz", 1000]; // 陣列標準語法

陣列的元素可以是簡單的資料、其他物件，或是函數。舉個例子來在陣列裡面放函式：

b = [ // 使用函式作為陣列元素
  function () { alert("這個好玩!") },
  function () { alert("再按一次離開!") },
  function () { alert("再來一次!") },
  function () { alert("最後一次!") }
];

for (var i = 0; i < b.length ; i++)
b[i]();

最後一個 for 迴圈是個有趣的應用。由於 b 陣列中現在存放的所有元素都是函式，因此我們可以對 b 的每個元素進行呼叫。

Object as Association Array

關聯陣列 (Assocation Array) 又稱作 Map 或 Dictionary，是一種物件容器，其中可以放置許多的 key-value pair，以存取子物件。在JavaScript 中，物件本身就可以作為關連陣列。以關聯陣列的方式初始化物件的範例如下：

obj1 = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"};
alert(obj1["a"]);  // 顯示 Athens
obj2 = {
  name: "Edward",
  showName: function() { alert(this.name); }  // 使用函式作為物件屬性
}
obj2.showName();  // 顯示 Edward
obj2.age = 23;  // 屬性可以動態加入

其 中 obj1 儲存了三個子元素，其鍵 (key) 為 「a」, 「b」 與 「c」，而值 (value) 為 「Athens」, 「Belgrade」 與 「Cairo」。obj2 中 showName 鍵所對應的值為 function，因此 obj2.showName() 即為函式呼叫。

Object as Return Value

雖然 Javascript 的函式只能傳回一個變數，但您卻可以將傳回值設定為物件，達到傳回 1個以上變數值的效果

function a () {
  return [32, 17];
}
b = a();
alert( b ); // 或
alert(a());
function pixel () {
  return {"x": 32, "y":17};
}
point = pixel ();
alert (point.x + "\n" + point.y);  // 或
alert (pixel().x + "\n" + pixel().y);

Delegation Function Object

函式也是物件，只是其中包含的是程式的邏輯。這項特性可拿來作為委任式的程式設計，亦即使用委任函式當作另一函式的參數：

function doloop(begin, end, func) {  // 這個函式是個 iterator
  for (var i = begin; i < end; i++) {
    func(i);
  }
}
function func1(i) {  // 印出 ** n **
  document.writeln("** " + i + " **<br>");
}
doloop(1, 10, func1);  // 印出 10 行 ** n **
doloop(20, 29,
  function(i) {  // 印出 10 行 ## n ##
    document.writeln("## " + i + " ##<br>");
  }
);

Object = Properties + Behaviors

古有明訓：程式 = 資料結構 + 演演算法。而物件是建構程式的基本單位，自然的具有相同的性質。物件除了有屬性 (property)，也可具有操作 (behavior)，也就是函式。

假如我們要使用一維陣列來模擬二維陣列，那麼就無法使用 ary[x][y] 這種表示法來設定或取得陣列成員。不過我可以定義一個 set 方法來設定成員變數，而以 get 方法來取得成員變數值。原型函式定義如下：

function Array2D(x,y){  // 以一維陣列模擬二維陣列的原型物件
  this.length = x * y;  // 陣列總長
  this.x = x;  // x 維度長度
  this.y = y;  // y 維度長度
  for(var i = 0; i < this.length; i++)  // 初始各元素值為 null
    this[i] = null;
  this.get = function(x,y){  // 成員函式：取得陣列第 [x,y]個元素值
    return this[x*this.x + y];
  }
  this.set = function(x,y,value){  // 成員函式：設定陣列第 [x,y] 個元素值
    this[x*this.x + y] = value;
  }
}

我們接著來使用它：

var a2d = new Array2D(10, 10);  // 建立新的「二維」陣列

a2d.set(1, 3, "ABC");  // 設定「二維」陣列元素值
a2d.set(2, 6, "XYZ");
a2d.set(9, 9, 1000);

alert( a2d.get(1,3) );  // 取得「二維」陣列元素值，並顯示出來
alert( a2d.get(2,6) );
alert( a2d.get(9,9) );

Member Function Outside of Constructor

我們也可以將物件成員函式寫於原型物件之外。以下的 Array2D 物件與上一個範例中的 Array2D 物件有相同的作用，只不過這次是寫在原型物件之外。

function Array2D(x,y){  // 以一維陣列模擬二維陣列的原型物件
  this.length = x * y;  // 陣列總長
  this.x = x;  // x 維度長度
  this.y = y;  // y 維度長度
  for(var i = 0; i < this.length; i++)  // 初始各元素值為 null
    this[i] = null;
  this.get = Array2DGet;  // 用這種方式把成員函式掛進來
  this.set = Array2DSet;
}

function Array2DGet(x,y){  // 成員函式：取得陣列第 [x,y] 個元素值
  return this[x*this.x + y];
}

function Array2DSet(x,y,value){  // 成員函式：設定陣列第 [x,y] 個元素值
  this[x*this.x + y] = value;
}

Dynamic Object Function

這裡說明如何為一個已定義物件，動態的加上其他操作的方法。

如果一物件已定義完成，而您也使用它來建立了新的物件，這時候您想為原型物件增加新的操作 (而不修改原型物件的原始碼)，讓所有該物件的複本都能使用該操作，該如何達成呢？方法是使用物件的 prototype 屬性。以下這個例子，為 Array 這類 Object 在執行期加入一個 max 方法，以取得陣列元素之最大值 (修改自微軟 jscript.chm之範例)：

function array_max(){  // 定義求取 Array 最大值之函式
  var i, max = this[0];
  for (i = 1; i < this.length; i++){
  if (max < this[i])
    max = this[i];
  }
  return max;
}
Array.prototype.max = array_max;  // 在 Array 原型中加入 max 函式

上面的程式碼，首先建立一個 array_max 方法，以求取陣列之最大元素。接著將這個方法設定給 Array 原型物件。

var x = new Array(1, 2, 3, 4, 5, 6);  // 透過 Array 建構子建立一陣列，想求取 x 中某一元素之最大值
var y = x.max( );  // 取得 x 之最大元素

Dynamic Mix in

假如物件 dynamic 有 method1, method2 兩個函式；而另一物件 main 有 methodA 及 methodB 兩個函式。現在我想把 dynamic 的所有特性 (feature) 匯入到 main 中，我們可以在 main 中加上一個 imports 函式：

function main(){  // main 之建構子
  // ...
  this.imports =
    function (object) {
      if( typeof object == "object")
        for( value in object )
          this[value] = object[value];
    }
  // ...
}
obj = new main();
main.imports(new dynamic());  // 匯入 dynamic 物件之所有功能

這個 imports 函式可以動態的為 main 加上另一物件的所有操作。這種 Mix in 的功能可是 C++/Java 的 static type 語言所望塵莫及的。

轉載自: IT Inside

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
<script language=javascript>
<!--
function StringToUniCode(source) {
  sret = "";
  // Unicode 跳脫序列之格式為 \u00ff
  for(var i=0; i < source.length; i++) {
   var num = new Number( source.charCodeAt(i));
   sret += "\\u" + num.toString(16);
  }
  return sret;
}
function convert(){
  document.forms.content.result.value = StringToUniCode(document.forms.content.source.value);
}
//-->
</script>
將文字轉成 Unicode 跳脫序列
<form name=content>
來源：<input type=TEXT name=source size=40 value="常用連絡人"><br />
結果：<input type=TEXT name=result size=40><br />
<input type=button value=轉換 onclick="convert()">
</form>

很多網站在你瀏覽網頁之後，會在你的瀏覽器中留下一些小小的資料，這就是所謂的「Cookie」。當你再次瀏覽這些網站時，系統便會去讀取這些 Cookie，找回與你曾經有過的片刻記憶。

「Cookie」不是餅乾，Cookie 是伺服器暫存在你電腦上的一筆資料，好讓伺服器用來辨認你的電腦。就好比是格林童話故事中，沿途撒下麵包屑避免在森林中迷路的小孩。

為什麼需要 Cookie?

HTTP 的協議本身是「無記憶狀態 (Stateless) 」的，無論是用戶端還是網頁伺服器，每一個頁面都沒有關聯，每一次的請求都是單獨的請求。伺服器藉由 Cookie 來讓同一個用戶的各項操作都可以產生關聯。

當你在瀏覽網站的時候，伺服器會先送一些小小的資料放在你的瀏覽器上，Cookie 會幫你在網站上所打的文字或是一些選擇都紀錄下來。當下次你再光臨同一個網站，網頁伺服器會先查看有沒有上次留下的 Cookie，有的話，就會依據 Cookie 裡的內容來判斷用戶，送出特定的網頁內容給你。

Cookie 的使用很普遍，許多有提供個人化服務的網站，都是利用 Cookie 來識別用戶，以方便送出為用戶量身而做的內容，像是 Web 介面的免費 email 網站，都有用到 Cookie。

Cookie 會不會有危險？其實 Cookie 中記載的資料有限，Cookie 是安全的。網站不可能經由 Cookie 獲得你的 email 地址或是其他私人資料，更沒有辦法透過 Cookie 來存取你的電腦。

但是如果你實在不喜歡網頁伺服器亂丟 Cookie 到你家，當然可以讓瀏覽器拒絕網站存放 Cookie 到你的瀏覽器。

IE 瀏覽器從「工具」選單 → Intertnet 選項 → 安全性，按「自訂層級」，到 Cookie 的部分，全都設為「關閉」，再重新啟動瀏覽器即可。

當你關閉 Cookie 之後，很多網站的個人化服務功能很可能就不能再使用了。

IE 的 Cookie 預設存放位置是在: C:\WINDOWS\Temporary Internet Files

你可以直接刪掉這裡面的東西或是利用「Internet 選項」裡的清除檔案按鈕來清除。

Cookie 的內容

大家想不想知道哪個網站有設 Cookie？你的 Cookie 資料又為何？其實，用一行簡單的 JavaScript 指令就可以一清二楚了。

首先，開啟一個網站，例如 http://www.google.com ，一旦網站開啟後，在瀏覽器的位址列中輸入以下的 JavaScript 指令:

javascript:alert("Cookie:"+document.cookie)

或

javascript:document.write(document.cookie)

按下 Enter 後，你會見到跳出一個小警告視窗，上面便會標明你的 Cookie 資料，試試看吧!

比較新的瀏覽器，如 Chrome 與 Firefox 都有內建「開發人員工具」，只要按 F12 開啟「開發人員工具」，可以在「Application」或「儲存空間」頁籤看到網站所儲存的 Cookie 內容。

什麼是 Session?

講到 Cookie 就會有人提到 Session。

Session 的資料是存放在 Web 伺服器端。用解釋的不好解釋，我們先來舉個例子...

有一家咖啡店要舉辦咖啡買三送一的活動，若以「Cookie」或「Session」的作法來看:

• Cookie:
  相當於是店家發給你一張「小卡片」，每次你來買一杯咖啡就在卡片上蓋個印章，集滿三個印章，那咖啡店就會送你一杯免費的咖啡。
  其中，購買咖啡的記錄是留在你攜帶的卡片上，如果卡片遺失你的記錄就不存在了。
• Session:
  相當於是店家請你加入他們的會員，然後發給你一張「會員卡」(Session ID)。每次你拿會員卡來買咖啡都會在店家的電腦裡留下記錄，買了三杯咖啡就會送你一杯免費的咖啡。
  其中，購買咖啡的記錄是儲存在店家的電腦裡，如果會員卡遺失了可以透過核對會員的資料來重新取得會員卡，未來這張會員卡甚至可能在它的連鎖店使用。

可以說，Cookie 只做一件事，就是存取伺服器暫存在客戶端的資料。而 Session 則是一個涵蓋範圍比較廣、比較完整的保存機制。並且 Session 仍需藉由 Cookie、網址或表單...等三種方式來識別用戶的 Session ID，才能接續之後伺服器要做的事情。

只要「網站是將任何用戶的資料儲存在伺服器，並且用 Cookie、網址或表單來識別單一用戶」，這樣就已經是在實作 Session 了。由於「識別用戶」是很普遍的功能，你所使用的程式框架 (Framework) 有可能在無聲無息之中就已經幫你完成整個機制了，你只要把心思用在程式的其它部份即可。

參考網頁

• HTTP Session 攻擊與防護 | DEVCORE 戴夫寇爾
• 淺談 Session 與 Cookie：一起來讀 RFC | TechBridge 技術共筆部落格