Posts Tagged ‘ javascript

[JavaScript]一些好用的 JavaScript 的網址列指令

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

  • 變更視窗大小:
    javascript:window.resizeTo(800,600)
  • 檢視 Cookies:
    javascript:alert("Cookie:"+document.cookie)
  • 列印網頁:
    javascript:print()
  • 幾種網頁轉址與「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 編輯器算是以後設計網頁的趨勢...

    比較推薦的有:

    還不錯的有:

    功能較陽春的:

    很不錯,但要錢的有:

    參考網頁

    [轉載][PHP]正規表示式基本語法

    轉載自: 中文 PHP 資訊站


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

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

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

    Read more

    [轉載][JavaScript]你所想像不到的 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 是伺服器暫存在你電腦上的一筆資料,好讓伺服器用來辨認你的電腦。就好比是格林童話故事中,沿途撒下麵包屑避免在森林中迷路的小孩。

    為什麼需要 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 資料。試試看吧! 當然,如果你的瀏覽器的 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) 有可能在無聲無息之中就已經幫你完成整個機制了,你只要把心思用在程式的其它部份即可。

    參考網頁

    return top