顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章

8.23.2014

[JS][jQ] How to detect the Smart Device??

之前我們提過:在HTTP Request Header中,有一項叫User Agent的欄位,它可以用來呈現使用者的作業系統和瀏灠器的一些相關資訊

現在,我們的JavaScript或是jQuery除了可以判斷OS或是Browser之外,還能夠判斷使用者是用何種智慧型裝置 (Smart Device)連上該網頁;而這些裝置包括:智慧型手機 (Smart Phone / Mobile)或是平板電腦 (Tablet PC)等等。

在展現程式碼之前,我們要引用一個JavaScript的Framework:http://detectmobilebrowsers.com/,這個網站提供了許多程式語言判別使用者是用何種行動裝置瀏灠器的範例。在這裡我們要引用的是jQuery而不是JavaScript;因為jQuery裡有現成的$.browser.mobile可用,但這也僅能判斷到使用者是否為行動裝置上網。若要判別使用者是用何種裝置,例如:iPhoneiPad或是Android,我們還是必須另外再寫。
<!DOCUMENT HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to detect the Smart Device by jQuery?? </title>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./jquery-detectmobilebrowser.js"></script>
<script language="JavaScript" type="text/javascript">
var smtDev = (function() {
    var _userAgent = window.navigator.userAgent.toLowerCase();
    return {
        iPod: function() { return _userAgent.search("ipod"); }(),
        iPhone: function() { return _userAgent.search("iphone"); }(),
        iPad: function() { return _userAgent.search("ipad"); }(),
        Android: function() { return _userAgent.search("android"); }(),
        BlackBerry: function() { return _userAgent.search("blackberry"); }(),
        WebOS: function() { return _userAgent.search("webos"); }(),
        WindowsPhone: function() { return _userAgent.search("windowsphohe"); }()
    };
}());
</script>
</head>
<body>

</body>
<script language="JavaScript" type="text/javascript">
    (function($) {
        $(window.document).ready(function() {
            if ($.browser.mobile === true) {
                if (smtDev.iPhone != -1)
                    window.location.href = "./iphone.html";
                else if (smtDev.Android != -1)
                    window.location.href = "./andmobile.html";
                else if (smtDev.WindowsPhone != -1)
                    window.location.href = "./wmp.html";
                else
                    alert("You used other Smart Mobile Phone !! \n");
            }
            else {
                if (smtDev.iPad != -1)
                    window.location.href = "./ipad.html";
                else if (smtDev.Android != -1)
                    window.location.href = "./andtablet.html";
                else if (smtDev.WindowsPhone != -1)
                    window.location.href != "./wintablet.html";
                else
                    alert("You used other Smart Tablet or Desktop Computer!! \n");
            }
            return;
        });
        return;
    })(jQuery);
</script>
</html>
最後,要特別一提的是:$.browser.mobile只能判斷出手機的裝置;如果遇到像是iPad或是Android Tablet,還需另外再寫一個if-else。

8.05.2014

jQuery AJAX HTTP POST Request (GoAhead)

AJAX這個技術從JavaScript學習到jQuery,自己摸著良心講,只懂了一點點─最啟碼已經知道它是如何運作的、也知道如何利用一些工具例如像Mozilla FireFox的瀏灠器主控台,或是WireShark來追蹤HTTP GET and POST Request Response的行為模式。

jQuery這個JavaScript的Framework對於AJAX的支援非常地多。$.ajax()只是其中最通用的一項。當然還有許多其它的函式,這個網頁:jQuery 参考手冊 - Ajax,都有詳盡的介紹。

這一次,一樣是用jQuery來實現AJAX的技術,但不再用$.ajax()函式,而改用其它函式來搭配組合;後端的Web Server改成另一套Embedded Linux的GoAhead

在程式碼的主體上,就不再重寫,直接把差異的部份給呈現出來。

首先,我在<body>主體前面,增加一個JavaScript函式,它能夠呈現當時的時間,格式如下:20140804 (MON) 15:09:36
var objCurrentTime = function() {
    var Ret = new Date();
    var obj = {
        year: Ret.getFullYear(),
        month: function() {
            var tmp = Ret.getMonth() + 1;
            return (tmp < 10)? ("0" + tmp): tmp;
        },
        date: function() {
            var tmp = Ret.getDate();
            return (tmp < 10)? ("0" + tmp): tmp;
        },
        hour: function() {
            var tmp = Ret.getHours();
            return (tmp < 10)? ("0" + tmp): tmp;
        },
        minute: function() {
            var tmp = Ret.getMinutes();
            return (tmp < 10)? ("0" + tmp): tmp;
        },
        sec: function() {
            var tmp = Ret.getSeconds();
            return (tmp < 10)? ("0" + tmp): tmp;
        },
        day: function() {
            var tmp = Ret.getDay();
            var week = "";

            switch (tmp) {
                case 0: week = "SUN"; break;
                case 1: week = "MON"; break;
                case 2: week = "TUE"; break;
                case 3: week = "WED"; break;
                case 4: week = "THUR"; break;
                case 5: week = "FRI"; break;
                case 6: week = "SAT"; break;
                default: break;
            }
            return week;
        },
        Result: function() {
            return (this.year + this.month() + this.date() + " (" + this.day() + ") " + this.hour() + ":" + this.minute() + ":" + obj.sec());
        }
    }
    return obj.Result();
}
再來,我再加一個Delay Time的Function (但事後證明,這個Function實在是沒啥用....>"<),目的是為了瞭解AJAX各個階段的先後順序:
function Delay()
{
    var i = -1, j = -1, k = -1;

    for (i = 0; i ++; i < 10000)
        for (j = 0; j++; j < 10000)
            for (k = 0; k++; k < 10000)

    return;
}
在網頁的主體部份,從原本的 <div id="ajax-ServerBack"></div> 置換成以下程式碼,其餘不變:
<div id="ajax-send"></div>
<div id="ajax-start"></div>
<div id="ajax-complete"></div>
<div id="ajax-stop"></div>
<div id="ajax-success"></div>
<div id="ajax-error"></div>
最後,則是jQuery的程序碼:
$(window.document).ready(function() {
    $("#AjaxTest").click(function() {
        $.ajaxSetup({
            cache: true,
          //context: ,
            timeout: 10000,
            global: true,
            contentType: "application/x-www-form-urlencoded",
            async: true,
            processData: true,
            ifModified: false,
          //jsonp: ,
          //username: "admin",
          //password: "admin",
            scriptCharset: "utf-8",
            traditional: true
        });

        $.post(g_strUri() + "/goform/formAjaxTesting", $("#jQueryAjax").serialize(),
            function(data, status, xhr) {
                alert(xhr.responseText);
                return;
            }, "text");

        $("#ajax-send").ajaxSend(function(event, xhr, ajaxOptions) {
            $(this).text(objCurrentTime() + "AJAX request SEND. ");
            Delay();
            return;
        });

        $("#ajax-start").ajaxStart(function() {
            $(this).text(objCurrentTime() + "AJAX request START. ");
            Delay();
            return;
        });

        $("#ajax-complete").ajaxComplete(function(event, xhr, ajaxOptions) {
            $(this).text(objCurrentTime() + "AJAX request COMPLETE. ");
            Delay();
            return;
            });

        $("#ajax-stop").ajaxStop(function() {
            $(this).text(objCurrentTime() + "AJAX request STOP. ");
            Delay();
            return;
        });

        $("#ajax-success").ajaxSuccess(function(event, xhr, ajaxOptions) {
          //$(this).text(objCurrentTime() + " " + xhr.responseText);
            $(this).text(objCurrentTime() + "AJAX request SUCCESS. ");
            Delay();
            return;
        });

        $("#ajax-error").ajaxError(function(event, xhr, ajaxOptions, thrownError) {
            $(this).text(objCurrentTime() + " " + xhr.status + ": An error has occured making the request!! \n");
            Delay();
            return;
        });
        return;
    });
    return;
});
在這個範例裡,我把之前用的$.ajax()置換成$.ajaxSetup()$.post()。前者用來設定一些AJAX的預設值;後者則是用HTTP POST方法來傳遞。

除此之外,jQuery在AJAX部份還提供了許多有用的函式;在這個範例中用上了ajaxSend()ajaxStart()ajaxComplete()ajaxStop()ajaxSuccess()ajaxError()。原本的期望值是能夠在相對應的<DIV>區塊中顯示出來,但實際執行的結果則是----時間都是一樣地!!


但這不打緊,我們還是可以從書中得知AJAX的執行順序

1. ajaxStart();
2. ajaxSend();
3. ajaxSuccess() / ajaxError();
4. ajaxComplete();
5. ajaxStop();

最後,再附上GoAhead Web Server端的程式碼:
int
formAjaxTesting(webs_t wp, char_t *path, char_t *query)
{
    int nBytesSent = 0;
    char_t *pStrVal = NULL;

    pStrVal = websGetVar(wp, T("nmUsername"), T(""));
    if (pStrVal != NULL)
        printf("%s (%d): %s \n", __FUNCTION__, __LINE__, pStrVal);

    pStrVal = websGetVar(wp, T("nmPassword"), T(""));
    if (pStrVal != NULL)
        printf("%s (%d): %s \n", __FUNCTION__, __LINE__, pStrVal);

    websResponse(wp, 200, "Hello!! World!! ", NULL);

    return nBytesSent;
}
在Google資料的過程中,也察覺許多不足之處,像是DTDJSONJSONPXMLSOAP等等,都是將來值得花時間研究的方向。

School Teach Yourself

這個對岸做的教學網頁有非常豐富的資源;除此之外,也找到一些不錯的心得部落格,但這些畢竟是別人的文章,也不可能轉PO到這邊。

這篇文章只是個註記自己的學習概要....其餘不足之處,工作上有遇到的話再記下來吧!!

7.28.2014

jQuery AJAX HTTP POST Request (boa)

AJAX GET and POST HTTP request這一系列的文章中,我們已經瞭解到如何用JavaScript來創建一個AJAX的網頁。

現在,我們要改用jQuery來實現;在用過jQuery之後,會發現在AJAX的運作上,它比JavaScript更為簡潔有力。

再來,既然要呈現,就要搭配一個Web Server,所以我要用的是Embedded Linux上常用的一款網頁伺服器─boa

可以直接看前後端的程式碼:jQueryAjax_boa.html
<!DOCUMENT HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryAjax.html</title>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script language="JavaScript" type="text/javascript">
var g_strUri = function() {
    var strTemp = window.location.protocol + "//" + window.location.host;

    if (window.location.port)
        strTemp += ":" + window.location.port;

    return strTemp;
};
</script>
</head>
<body>
<center>
<form  action="" method="" id="jQueryAjax">
<h2>Hello, AJAX!!</h2><hr width="30%">
<table width="30%" border="0">
    <tr>
        <td align="right">Username:</td>
        <td align="left">
            <input type="text" name="nmUsername">
        </td>
    </tr>
    <tr>
        <td align="right">Password:</td>
        <td align="left">
            <input type="password" name="nmPassword">
        </td>
    </tr>
    <tr><td colspan="2">
        <center><br/>
            <input type="button" value="POST" id="AjaxTest"/>
        </center>
    </td></tr>
</table>
<center><br/>
    <div id="ajax-ServerBack"></div>
</center>
</form>
</center>
</body>
<script language="JavaScript" type="text/javascript">
    (function($) {
        $(window.document).ready(function() {
            $("#AjaxTest").click(function() {
                $.ajax({
                    url: g_strUri() + "/boafrm/formAjaxTesting",
                    type: "POST",
                    data: $("#jQueryAjax").serialize(),
                    dataType: "text",
                    cache: true,
                  //context: ,
                    timeout: 10000,
                    global: true,
                    contentType: "application/x-www-form-urlencoded",
                    success: function(msg) {
                        document.getElementById("ajax-ServerBack").innerHTML = msg;
                        return true;
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                      /*alert("xhr.status: " + xhr.status + "\n" +
                            "ajaxOptions: " + ajaxOptions + "\n" +
                            "thrownError: " + thrownError + "\n");
                      */alert(" An error has occured making the request");
                        return false;
                    },
                    /*
                    complete: function(xhr, status) {
                      //alert("The XMLHTTPRequest Send Complete!! ");
                        return;
                    },
                    beforeSend: function(xhr) {
                        alert("The XMLHTTPRequest will be Send!! ");
                        return;
                    },
                    */
                    async: true,
                    processData: true,
                  //dataFilter: function() { return; },
                    ifModified: false,
                  //jsonp: ,
                  //username: "admin",
                  //password: "admin",
                    scriptCharset: "utf-8",
                  //xhr: function() { return; },
                    traditional: true
                });
                return;
            });
            return;
        });
    })(jQuery);
</script>
</html>
應該不會很難懂吧!! 像有一些暫時用不太到,或是自己還不清楚該怎麼用的,就先暫時把它們註解掉;講一個簡單一點的,data: $("#jQueryAjax").serialize(), 就是把id為jQueryAjax的Form表單資料序列化,這裡的序列化,就是把表單的資料直接變成:nmUsername=PabloPicasso.G&nmPassword=0123456789。這比JavaScript用字串來串接方便多了!!

假如不是很清楚$.ajax()的一些參數設定,這個網站─jQuery ajax - ajax() 方法有非常詳細地介紹,可以參考一下!!

最後,再附上boa Server端的程式碼:/ boa / src / fmajax.c
void formAjaxTesting(request *wp, char *path, char *query)
{
    char *strVal = NULL;

    strVal = req_get_cstream_var(wp, ("nmUsername"), "");
    printf("0. %s (%d): %s \n", __FUNCTION__, __LINE__, strVal);

    strVal = req_get_cstream_var(wp, ("nmPassword"), "");
    printf("1. %s (%d): %s \n", __FUNCTION__, __LINE__, strVal);

    strVal = req_get_cstream_var(wp, ("submit-url"), "");
    printf("2. %s (%d): %s \n", __FUNCTION__, __LINE__, strVal);

    req_format_write(wp, ("Hello!! AJAX by jQuery!! "), "");

    return;
}
printf()是用來在RS-232下Debug用的,可以確認自己所輸入的資料,有確實地跑到後端。

7.13.2014

How to detect the browser by jQuery??

這一篇部落格要記錄的是:如何利用jQuery來辨別使用者的瀏灠器??

寫到這裡,讓我回想起在N年前我也曾經寫過如何利用JavaScript來判斷使用者的瀏灠器??

1. [JavaScript] 如何抓取瀏灠器的版本 (How to auto select browser version by JavaScript) Part I??
2. [JavaScript] 如何抓取瀏灠器的版本 (How to auto select browser version by JavaScript) Part II??

等到自己學了jQuery之後,發現當年寫的JavaScript實在是一個蠢到不行的設計方式。

就瀏灠器的底層kernel而言,就主要分成三個陣營:Microsoft Internet ExplorerNetscape NavigatorOpera

MSIE的使用者最多,佔了全部使用者的80%以上;但偏偏MSIE是最不遵循W3C規範的瀏灠器,相信許多網頁程式設計師都對IE恨得牙癢癢的。但是,IE上的BUG還是要解,因為這是客戶要的。

Netscape Navigator早在'99、2000年的時後,也是一款瀏灠器,跟當時微軟的IE 3.0相容性非常地差,許多HTML語法在MSIE 3.0上可以,在NN就不行....不過到後來Navigator式微,卻也衍生出以Navigator為核心的瀏灠器,如:Mozilla FireFoxGoogle ChromeApple Safari等等。

Opera是一家挪威的軟體公司Opera Software ASA所開發的瀏灠器。原本也不曉得它的底層kernel不同於MSIE和NN;直到自己寫了之前的JavaScript偵測瀏灠器程式之後,才發現它的Application Name不同於MSIE和Navigator。

在當時只要判斷Browser的appName就可以了,像許多MSIE like的瀏灠器如:MyIE、KKMAN等,去判斷這些瀏灠器的名稱,本身並沒有太大的意義,因為它們都是以IE為核心而發展出來的 (這就是自己覺得很蠢的原因....@@)

至於為何還要判斷到MSIE的版本?? 因為之前有發生過客戶反應「MSIE 7.0可以;但到了MSIE 8.0不行」的狀況,所以還必須判斷微軟IE瀏灠器的版本。

換個角度想,假如是以「使用者常用的瀏灠器」來思考的話,是否就比較實際一些?? 非常慶興地,jQuery這個JavaScript的Framework已經幫我們解決了這個問題,可以看一下範例:
<!DOCUMENT html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Auto detect browser by jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var objBrowserInfo = {
    Language: function() {
        if (window.navigator.userLanguage === undefined)
            return window.navigator.language;
        return window.navigator.userLanguage;
    },
    PlatForm: window.navigator.platform,
    UserAgent: window.navigator.userAgent,
    AppName: window.navigator.appName,
    AppVersion: window.navigator.appVersion
};

function DBG()
{
    alert("1. Your Browser Languagr: " + objBrowserInfo.Language() + "\n\n" +
        "2. Your Platform: " + objBrowserInfo.PlatForm + "\n\n" +
        "3. Your User Agent:\n" + objBrowserInfo.UserAgent + "\n\n" +
        "4. Your Application Name: " + objBrowserInfo.AppName + "\n\n" +
        "5. Your Application Version:\n" + objBrowserInfo.AppVersion + "\n");

    return;
}
</script>
</head>
<body>

</body>
<script type="text/javascript">
    (function($) {
        $(window.document).ready(function() {
            DBG();
            if ($.browser.msie === true)
                alert("Microsoft Internet Explorer: " + $.browser.version + " \n");
            else if ($.browser.mozilla === true)
                alert("Mozilla FireFox: " + $.browser.version + "\n");
            else if ($.browser.chrome === true)
                alert("Google Chrome: " + $.browser.version + "\n");
            else if ($.browser.safari === true)
                alert("Apple Safari: " + $.browser.version + "\n");
            else if ($.browser.opera === true)
                alert("Opera: " + $.browser.version + "\n");
            else if ($.browser.webkit === true)
                alert("Webkit: " + $.browser.version + "\n");
            else
                alert("This is Unknown browser!! \n");
            return;
        });
        return;
    })(jQuery);
</script>
</html>
連名稱都取得很直覺!! objBrowserInfo物件只為了記錄瀏灠器的一些相關資訊,然後再用DBG()函式把它們呈現出來。

3.27.2014

Form data collect (GET) by jQuery

之前有提過,我們可以透過jQuery來取得表單 (Form)的資料來傳送給後端的伺服器;那,從服務器回傳給我們的資料,又該如何設定??
var strText = "Pablo Picasso G.";
var strPassword = "028879576";

<input type="text" id="idText" />
<input type="password" id="idPassword" />

$("#idText").val(strText);
$("#idPassword").val(strPassword);
Input類型為TextPassword非常地簡單,用val()函式就能設定它們的值。
var strSex = 1;

<input type="radio" name="nmSex" value="1" />Male
<input type="radio" name="nmSex" value="0" />Female

$("input[name='nmSex']")[strSex].checked = true;
這邊要注意一下,出來的結果會是:$("input[name='nmSex']")[1],指的是「類型為Input,名字為nmSex的陣列裡的第1個元素」會被選取,所以是Female被選取;而不是值為1 (value="1")的Male被選取。這兩者差異很大,一個指的是陣列裡的元素順序,另一個則是每一個元素裡的值
這種排列組合的變化很多,端看程序員如何設計。以此為例,我希望strSex = 1;時為Male,strSex = 0;時為Female。我會改寫成:
var strSex = (1? 0: 1);
var nWeek = 90;

var LeftPadZero = function(NUM, BIT) {
 return (Array(BIT).join(0) + NUM).slice(-BIT);
};

var CheckBox_Selected = function(VAL) {
 var nRet = VAL.toString(2);
 nRet = LeftPadZero(nRet, 7);
 $("input[type=checkbox]").each(function(index, context) {
  if (nRet[index] === "0")
   $(this).prop("checked", false);
  else
   $(this).prop("checked", true);
  return;
 });
 return;
}

<input type="checkbox" name="nmWd0" value="0">SUN.
<input type="checkbox" name="nmWd1" value="1">MON.
<input type="checkbox" name="nmWd2" value="2">TUE.
<input type="checkbox" name="nmWd3" value="3">WED.
<input type="checkbox" name="nmWd4" value="4">THUR
<input type="checkbox" name="nmWd5" value="5">FRI.
<input type="checkbox" name="nmWd6" value="6">SAT.

CheckBox_Selected(nWeek);
Input類型為CheckBox (複選鈕)的,比較特別;例如一個星期有7天,我要選那幾天,假如我把每一個nmWd都當成一個值來存,對後端的服務器而言並不是很經濟。

所以我會把整個星期都當成一個值,值的規則為:(NULL), SUN, MON, TUE, WED, THUR, FRI, SAT,為什麼最前面要多一個(NULL),因為我要讓它湊滿8個bit;假如我選擇SUN, TUE, WED, FRI這4天,出來的結果應該會是:0101 1010。1代表有勾選,0代表沒勾選;把這8個bit當成一個2進制的值來看,再轉換成10進制,就是90

那服務器傳回"90"這個值給前端的網頁,該如何解讀?? 把90這個值,透過toString(2)轉成2進位的字串;但2進位的字串有可能長得像這樣:1111,0會被省略,所以我再透過LeftPadZero(NUM, BIT)函式,讓它前面補0。為什麼只補滿7個bit,因為一個星期只有7天。

如此,結果就出來了,bit為0的表沒勾選,1的才有勾。
var strBlood = 4;

<select id="idBlood">
    <option value="0" />BLOOD
    <option value="1" />A
    <option value="2" />B
    <option value="3" />AB
    <option value="4" />O
</select>

$("select").val(strBlood);
以上則是下拉式選單 (Select-Option)的設值方式。

參考資料:
Form data collect (POST) by jQuery

12.12.2013

Good Websites....

N個月前,在學習jQuery的同時,也順便在復習JavaScript;剛好在網路上找到一些不錯的資料,就此記錄一下 (因為這一篇文章已經在我的筆記本裡放很久了....@@)

1. DHTML物件模型

2. JavaScript物件模型

3. Window.location的屬性和方法

4. JavaScript Window Object (JavaScript視窗物件)

第5和第6個,是可以讓jQuery (或是JavaScript)的初學者練習的網頁;不過應該只能做一些簡單的練習或測試,大型的專案恐怕就不太適合....

5. Darkthread Mini jQuery Lab Ver 1.3 Beta

6. http://jsfiddle.net/

7. AJAX物件模型,屬性和方法

8.12.2013

Form data collect (POST) by jQuery

我們在設計網頁的時後,假如要和後端的Web Server服務器互動,最常見的行為模式之一,就是建立一個Form,然後裡面有許許多多的Input標籤,當使用者按下Submit之後,就可以把資料傳送過去。

那麼,這些資料又該如何透過jQuery來取得呢?? 這裡就只記錄下簡單的範例,不呈現完整的程式碼了....
<input type="text" id="idText" />
<input type="password" id="idPassword" />

var strText = $("#idText").val();
var strPassword = $("#idPassword").val();
Input類型為TextPassword非常地簡單,用val()函式就能取得它們的值。
<input type="radio" name="nmSex" value="1" />Male
<input type="radio" name="nmSex" value="0" />Female

var strSex = $("input[name=nmSex]:checked").val();
Radio (單選鈕)要注意的地方是,要有設定Name的屬性,且用Name來取值。
<input type="checkbox" value="0" id="idLang" />Python
<input type="checkbox" value="1" id="idLang" />Perl
<input type="checkbox" value="2" id="idLang" />Ruby
<input type="checkbox" value="3" id="idLang" />HTML5
<input type="checkbox" value="4" id="idLang" />jQuery

var aryLang = new Array(5);
// 1st種方法:
$("input[type=checkbox]:checked").map(function() {
    return $(this).val();
}).toArray();
// 2nd種方法:
$("input[id=idLang]:checked").each(function(i) {
    aryLang[i] = $(this).val();
    return;
});
CheckBox (複選鈕),要取值的方式有兩種,可以用map();或者是用each()。前提是都必須要先宣告一個陣列。
<select id="idBlood">
    <option value="0" />BLOOD
    <option value="1" />A
    <option value="2" />B
    <option value="3" />AB
    <option value="4" />O
</select>

var strBlood = $("select#idBlood option:selected").val();
以上,是下拉式選單 (Select-Option)的取值方式。

先記到這邊,以後想到什麼再補充吧!!

8.01.2013

jQuery Flot Chart

為了工作上的需求,要用jQuery來呈現一些圖表,就上網找找看看,是否有現成的範例模組,於是就找到了這個網站:http://www.jqueryflottutorial.com/tw/.

它提供了非常多地圖表範例─近16種左右。而且程式碼也不會很難懂;當然,如果只看過一個範例的程式碼,很難一窺全貌它到底在表達什麼,甚至是它的一些簡單架構。倘若閒暇之餘,每種圖檔都拿來練習一下,就不難發現它的一些潛規則。

Flot Chart總共需要用到以下的JavaScript Library (Framework):

01. jquery-1.8.3.min.js - 一定要用它們所建議的1.8.3的版本;自己之前用2.0.0的版本,結果在MSIE下完全不行。
02. excanvas.min.js - Canvas的Library建議也要包含;因為在某些MSIE8,或是MSIE9的版本會有問題。
03. jquery.flot.min.js
04. jquery.flot.symbol.js
05. jquery.flot.axislabels.js
06. jquery.flot.time.js
07. jshashtable-2.1.js
08. jquery.numberformatter-1.2.3.min.js
09. jquery.flot.stack.js - 如果是堆疊圖系列 (堆疊直條圖、堆疊橫條圖),要用到這一個Library (因為資料的數值是累加上去的)。
10. jquery.flot.pie.js - 如果是圓餅圖傾斜圓餅圖甜甜圈圖,記得要包含這一個Library。

再來它的程式架構不外乎就是:
var dataX = [[a, b], [c, d], [e, f], ....];
使用者所要呈現的資料,都用二維陣列來表示。
var dataset = [
    {
        lable:
        data:
        color:
        bars: { // 條狀圖 (直條圖、橫條圖)需要用到此一系列的參數
            show:
            align:
            barWidth:
            lineWidth:
        },
        // 折線圖系列需要用到points和lines這兩個參數
        points: {
            symbol:
            fillColor:
            show: true
        },
        lines: {
            show:
        }
        ....
    }
];
dataset故名思義,就是關於資料所要呈現的方式。
options = {
    seiers: { },
    bars: { },
    xaxis: { },
    yaxis: { },
    legend: {},
    grid: {}
};
options選項則是指關於圖表選項的相關設定。

再來就是程式碼的部份:
<script type="text/javascript" language="JavaScript">
// To do something....
</script>
<body>
    <div id="...."></div>
</body>
<script type="text/javascript" language="JavaScript">
    $(window.document).ready(function () {
        // To do something....
        return;
    });
</script>
ready()函式記得一定要放在<body>標籤結束之後,因為ready()函式指的是「當網頁上所有的DOM元素都載入後所要做的動作」;如果放在<body>之前,DOM尚未載入完成就執行ready()在MSIE上會有問題。

再來,就是$.fn.UseTooltip()showTooltip()這兩個function,指的是當滑鼠游標移至該筆資料節點 (或是區域)時,所要呈現小標籤的樣式和資料。

最後,以自己的經驗而言,盡可能地使用它們所提供的範例來使用 (它們提供的範例算蠻多的);倘若要自己生一個非範例所提供的樣式,除非很懂得他們的Library在寫些什麼,要不然會很不易Debug。

7.17.2013

How to declare a Two-Dimensional Array with the jQuery (III)

在之前的文章介紹中,我們已經知道了如何使用jQuery的$.each()來宣告和讀取陣列;這一篇的議題,其實是自己工作上所遭遇到的。

假設,我們所需要的二維陣列長得像這個樣子:
var tempArray = {{"HTML5", "90", "A+"}, {"jQuery", "60", "C-"}, {"Ruby", "72", "B-"}, {"Perl", "83", "B"}};
其實,遇到這種實務上的情形,我們該如何宣告?? 這種4 * 3的二維陣列,我們可以用3個一維陣列來分別宣告
// 三個原始資料的一維陣列
var data1 = new Array("HTML5", "jQuery", "Ruby", "Perl");
var data2 = new Array(90, 60, 72, 83);
var data3 = new Array("A+", "C-", "B-", "B");

var tempArray = function(ROW, COL) {
    var virArray = new Array(ROW);
    $.each(virArray, function(index, context) {
        virArray[index] = new Array(COL);
        virArray[index][0] = data1[index];
        virArray[index][1] = data2[index];
        virArray[index][2] = data3[index];
        return;
    });
    return virArray;
};
執行結果如下:


相關文章:
How to declare a Two-Dimensional Array with the jQuery (I)
How to declare a Two-Dimensional Array with the jQuery (II)

How to declare a Two-Dimensional Array with the jQuery (II)

哼,不想再寫那些龞腳的英文了!! 前兩篇文章不知道自己發了什麼瘋,居然想要用英文來表達,表達到最後發現自己又沒那個能力....>"<

這一篇文章延續上一篇,在講如何使用jQuery來宣告一個二維陣列;前一篇已經知道一維陣列是如何產生的,接下來我們就可以產生出二維陣列了:
var tempArray = function(ROW, COL) {

    var virArray = new Array(ROW);
    $.each(virArray, function(index1, context1) {
        virArray[index1] = new Array(COL);
        $.each(virArray[index1], function(index2, context2) {
            virArray[index1][index2] = "Hello!! jQuery!! \n";
            return;
        });
        return;
    });
    return virArray;
};
當然,我們能夠產生二維陣列,也要能夠讀取;以下的範例,我們要產生一個4 * 2大小的二維陣列,陣列的內容均為一個字串:"Hello!! jQuery!! \n",並且將它們顯示在網頁上:
<!DOCUMENT html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="./js/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="JavaScript">
// 宣告使用jQuery來初始化一個二維陣列
var tempArray = function(ROW, COL) {
    var virArray = new Array(ROW);
    $.each(virArray, function(index1, context1) {
        virArray[index1] = new Array(COL);
        $.each(virArray[index1], function(index2, context2) {
            virArray[index1][index2] = "Hello!! jQuery!! \n";
            return;
        });
        return;
    });
    return virArray;
};
</script>
</head>
<body>
    <div id="DebugConsole"></div>
</body>
<script type="text/javascript">
    (function($) {
        $(window.document).ready(function() {
            var strTemp = null;
            // 將二維陣列裡的資料內容一一地讀出來
            $.each(tempArray(4, 2), function(index1, context1) {
                $.each(context1, function(index2, context2) {
                    strTemp = "tempArray(4, 2)[" + index1 + "][" + index2 + "]: " + context2 + "<br/>";
                    $("#DebugConsole").append(strTemp);
                    return;
                });
                $("#DebugConsole").append("<br/>");
                return;
            });
            return;
        });
        return;
    })(jQuery);
</script>
</html>
執行結果:


相關文章:
How to declare a Two-Dimensional Array with the jQuery (I)

7.15.2013

How to declare a Two-Dimensional Array with the jQuery (I)

Today, this article will introduce that how to declare a Two-Dimensional Array with the jQuery.

I always think that if the JavaScript could do this, how can we do with the jQuery??

At first, we must understand how to declare a One-Dimensional Array with the jQuery:
var tempArray = function() {

    var virArray = new Array(3);
    $.each(virArray, function(index, context) {
        virArray[index] = "Hello!! World!! \n";
        return;
    });
    return virArray;
};
And, we could read the array contents by $.each() function, too:
$.each(tempArray(), function(index, context) {
    var strTemp = null;
    strTemp = "tempArray[" + index + "]: " + context + "\n";
    return;
});
The total solution as below:
<!DOCUMENT html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="./js/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="JavaScript">
var tempArray = function() {

    var virArray = new Array(3);
    $.each(virArray, function(index, context) {
        virArray[index] = "Hello!! World!! \n";
        return;
    });
    return virArray;
};
</script>
</head>
<body>
    <div id="DebugConsole"></div>
</body>
<script type="text/javascript">
    (function($) {
        $(window.document).ready(function() {
            var strTemp = null;
            $.each(tempArray(), function(index, context) {
                strTemp = "tempArray[" + index + "]: " + context + "<br/>";
                $("#DebugConsole").append(strTemp);
                return;
            });
            return;
        });
        return;
    })(jQuery);
</script>
</html>

(To be continue....)

6.10.2012

Compress / Decompress JavaScript source code (to one line)

這一次要提到的是─介紹一個網頁工具─它可以把網頁的JavaScript / jQuery源代碼,壓縮成一行,可以避免使用者透過瀏灠器的「檢視原始碼」功能,窺探網頁開發者的設計模式。

一個最典型的範例,就是Google的首頁,我們在Google的首頁按下檢視原始碼的功能,可以看到如下圖的源代碼樣式,整個程式碼就只有7行而已;其中第7行還寫得落落長長....:



但因為自己本身工作上的需求,必須尋找這樣的工具,於是剛好找到以下這兩個網址工具,它們可以幫網頁開發者把JavaScript / jQuery的Source Code壓縮成一行:

1. http://dean.edwards.name/packer/



2. http://javascriptcompressor.com/


其實這所謂的壓縮原理也很簡單:就是把程式碼中的空格 (Space)<TAB>鍵通通都把它踢除掉,讓他人不易閱讀。

既然會有人開發出這種壓縮工具,也一定會有人開發反壓縮工具:

3. http://www.css88.com/tool/js_beautify/



點選左下方的格式化按鈕之後,就可以把壓縮成一行的程式碼還原成原本的樣式:

1.07.2012

jQuery初體驗

這一篇文章沒什麼重點....只因為最近在學習jQuery,先從一個比較簡單的範例開始,把它當作筆記,先記下來....目前為止對jQuery的概念就是:1. 比JavaScript更簡潔有力;2. jQuery有自己的Library
<html>
<head><title>A Simple jQuery example!!</title></head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.js"></script>
<script>
    $(function() {
        var local = 1;
        window.setInterval(function() {
            $("#display").append("<div>At " + new Date() + " local = " + local + "</div>");
            local++;
        }, 3000);
    });
</script>
<body>
    <center><div id="display"></div></center>
<body>
</html>
執行結果:



參考資料:
1. http://www.jquery.com/
2. http://www.jquery.org/
3. http://www.json.org/
4. http://plugins.jquery.com/