Posts Tagged ‘ javascript

幾種網頁轉址與「301 永久搬移」的語法

轉址的方式分為:

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

Read more

doiMenu - 簡單好用的 DHTML 選單程式 *

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

相關網頁

Flash Bar Code 1.0 - Flash 條碼產生器 *

檔案下載

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

一些給網站使用的 WYSIWYG 的編輯器

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

比較推薦的有:

還不錯的有:

功能較陽春的:

很不錯,但要錢的有:

參考網頁

[轉載]你所想像不到的 JavaScript

轉載自: 愛德華日誌


這不是一篇教你如何在網頁中應用 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 語言所望塵莫及的。

[轉載]Unicode 脫逸序列轉換

轉載自: IT Inside


這裡提供一段程式碼,可以透過 JavaScript 將文字轉換為 Unicode 脫逸序列。這段程式碼,不論是對網頁開發人員,還是對 java resource bundle 的翻譯人員,都有很大的方便性。使用時只要將底下的程式碼複製起來,以 html 副檔名儲存,就可以用 browser 執行了。

<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就是伺服器暫存放在你電腦上的一筆資料,好讓伺服器用來辨認你的電腦。

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

Cookie 的使用很普遍,許多有提供個人化服務的網站,都是利用 Cookie 來辨認使用者,以方便送出使用者量身定做的內容,像是 Web 介面的免費 email 網站,都要用到 Cookie。

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

但是如果你實在不喜歡 Web 伺服器亂丟餅乾(Cookie)到你家,當然可以讓瀏覽器拒絕網站存放 Cookie 到你的電腦。

工具 -> Intertnet選項 -> 安全性,按「自訂層級」,到 Cookie 的部分,全都設為關閉,按確定,關閉瀏覽器,再重新啟動瀏覽器即可。

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

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

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

cookie 的內容

部份網友對 Cookie 的內容很有興趣,想到這個問題,知不知道如何得知哪個網站有設 Cookie?你的 Cookie 資料又為何?其實,用非常簡單的一行 JavaScript 指令就可以一清二楚了。

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

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

javascript:document.write(document.cookie)

按下Enter鍵後,你會見到跳出一個小警告視窗,上面便會標明出你的 Cookie 資料。試試看吧?!當然,如果你的瀏覽器的 Cookie 功能被關閉,那你當然就見不到囉。

return top