進階技術(一)

XML

XML(Extendable Markup Language)最主要的功能是用來「資料傳遞」用，例如A網站可將要分享出來的資料(如最新訊息或產品資訊…等)，轉成XML格式讓B網站可以直接讀取及引用，因此使用者可自行定義標籤(tags)名稱及結構，以利引用者辦識結構及資料內容。

XML 範例

<article>

   <title>Simple XML</title>

   <date>September 19, 2001</date>

   <author>
      <firstName>Tem</firstName>
      <lastName>Nieto</lastName>
   </author>

   <summary>XML is pretty easy.</summary>

   <content>Once you have mastered XHTML, XML is easily
      learned. You must remember that XML is not for
      displaying information but for managing information.
   </content>

</article>

XML 運作規則

所有標籤必須有結尾
元件有大小寫之分
屬性值都要用引號標示
元件的多層排列必須適當
name 屬性用 id 屬性替換

資料型式特殊的XML

XHTML(Extendable HTML)
MathML
VoiceXML
CML(Chemical ML)
XBRL 財務資秈交換之用

XML Parser

The XML DOM (Document Object Model) defines the properties and methods for accessing and editing XML. However, before an XML document can be accessed, it must be loaded into an XML DOM object. All modern browsers have a built-in XML parser that can convert text into an XML DOM object.

Parsing a Text String

This example parses a text string into an XML DOM object, and extracts the info from it with JavaScript:

例題

<html>
<body>

<p id="demo"></p>

<script>
var text, parser, xmlDoc;

text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

例:

參考資料

XHTML

XHTML(Extendable HTML)

XHTML 規則

所有標籤必須有結尾

    <br />
    <img src="fn.gif" />

元件有大小寫之分

<script language="JavaScript">
    var x=1;
</script>

屬性值都要用引號標示

    <img src="fn.gif" width="100" height="100" />
    <input type="text" name="yourname" size="25" />
    <input type="checkbox" name="cb1" value="yes" checked="checked" />

元件的多層排列必須適當

name 屬性用 id 屬性替換

    <form name="f1" id="f1">
    <input type="text" name="yourname" id="yourname" size="25" />
    </form>

參考資料

正規運算式

正規表達式是被用來匹配字串中字元組合的模式。 JavaScript 的正規式（Regular expressions）是一個內建的物件。

建立正規運算式

var tomatch=/our/;

正規運算式的測試

    var tomatch=/our/;
    tomatch.test("pour");

<script language="JavaScript">
<!--
    var thename=window.prompt("Enter your name", "");
    var tomatch=/John/;
    if ( tomatch.test(thename) )
        window.alert("Wow, we have the same name!");
    else
        window.alert("Not my name, but it will work!");
//-->
</script>

加入旗標

正規式（Regular expressions）的建構函式為 RegExp，典型用法如下： re = new RegExp("pattern", "flag") 上述用法也可以寫成： re = /pattern/flag 其中，pattern 代表以正規表示法來顯示的字串，flag 則是比對的方式。flag 的值有三種：

g：全域比對（Global match）
i：忽略大小寫（Ignore case）
gi：全域比對並忽略大小寫

例如:

<script language="JavaScript">
<!--
    var thename=window.prompt("Enter your name", "");
    var tomatch=/John/i;
    if ( tomatch.test(thename) )
        window.alert("Wow, we have the same name!");
    else
        window.alert("Not my name, but it will work!");
    //-->
</script>
看效果

建立有威力的形式

<html>
<head>
<script language="JavaScript">
<!--
function check_it()
{
    var tomatch=/[A-Za-z0-9]\w{2,0}@[A-Za-z0-9-]{3,0}\.\[A-Za-z]{3}/;
    var emadd=document.f1.t1.value;
    if ( tomatch.test(emadd) )
    {
        window.alert("E-mail Address Ok");
        return true;
    }
    else
    {
        window.alert("E-mail Address invalid. Please try again.");
        return false;
    }
}
//-->
</script>
</head>
<body>
<form name="f1" id="f1" action="/servlets/FormServletc"
    onSubmit="return check_it();">
Your name:
<input type="text" name="yourname" size="25">
<p>
Enter your E-mail address:<br />
<input type="text" name="t1" id="t1" /><br />
<input type="submit" />
</form>

</body>

參考:

Cookie

設定Cookie

    document.cookie="name=tasty1";
    document.cookie="name:tasty1";
    document.cookie="name=tasty1&fav=Sugar";
    document.cookie="name:tasty1|fav:Sugar";

escape()方法

    document.cookie="name=tasty1&fav=Chocolate Chip";

    document.cookie=escape("name=tasty1&fav=Chocolate Chip");

允許使用者輸入

    function set_it()
    {
        var thefav=window.prompt("Enter your favorite type of cookie", "");
        var thetext="name=tasty1&fav=" + thefav;
        var newtext=escape(thetext);
        document.cookie=newtext;
    }

設定期滿資料

    function set_it()
    {
        var thetext="quote=I have a quote&";
        var toexpire=new Date("June 15, 2003");
        var expdate="expire="+toGMTstring(toexpire);
        thetext+=expdate;
        var newtext=escape(thetext);
        document.cookie=newtext;
    }

讀Cookie

分成 name/value 對

    function read_it()
    {
        var mycookie=document.cookie;
        var fixed_cookie=unescape(mycookie);
        var thepairs=fixed_cookie.split(&);
    }

再將每對 name/value 分成 name 和 value:

    function read_it()
    {
        var mycookie=document.cookie;
        var fixed_cookie=unescape(mycookie);
        var thepairs=fixed_cookie.split("&");
        var pair1=thepairs[0];
        var pair2=thepairs[1];
        var namevalue1=pair1.split("=");
        var namevalue2=pair2.split("=");
    }

呈現出來:

    function read_it()
    {
        var mycookie=document.cookie;
        var fixed_cookie=unescape(mycookie);
        var thepairs=fixed_cookie.split("&");
        var pair1=thepairs[0];
        var pair2=thepairs[1];
        var namevalue1=pair1.split("=");
        var namevalue2=pair2.split("=");
        window.alert("The cookie's " + namevalue1[0] + " is" + namevalue1[1]);
        window.alert("The cookie's " + namevalue2[0] + " is" + namevalue2[1]);
    }

確定Cookie是否存在:

    function read_it()
    {
        if (document.cookie)
        {
            var mycookie=document.cookie;
            var fixed_cookie=unescape(mycookie);
            var thepairs=fixed_cookie.split("&");
            var pair1=thepairs[0];
            var pair2=thepairs[1];
            var namevalue1=pair1.split("=");
            var namevalue2=pair2.split("=");
            window.alert("The cookie's " + namevalue1[0] + " is" + namevalue1[1]);
            window.alert("The cookie's " + namevalue2[0] + " is" + namevalue2[1]);
        }
        else
        {
            set_it();
        }
    }