getCookie

標題：自定義getCookie函式

<script type="text/javascript">
function getCookie(name) {
    var n = name + "=";
    var nlen = n.length;
    var clen = document.cookie.length;
    var i = 0;
    while(i < clen) {
        var j = i + nlen;
        if(document.cookie.substring(i, j) == n) {
            var endstr = document.cookie.indexOf(";", j);
            if(endstr == -1)
                endstr = clen;
            return unescape(document.cookie.substring(j, endstr));
        }
        i = document.cookie.indexOf(" ", i) + 1;
        if(i == 0) break;
    }
    return null;
}
function test(insert) {
    document.cookie = "nickname=" + escape(insert); //寫入Cookie
    document.getElementById("codeboxy").innerHTML = getCookie("nickname"); //輸出Cookie
}
</script>
<a href="javascript:test('程式方盒子');">Click me</a>
<div id="codeboxy"></div>

說明：
自定義getCookie函式，
可掃描cookie內指定之name的中文cookie內容。

HTML Form

標題：HTML Form to PHP常用語法範例

HTML (index.html)：

<form action="test.php" name="test" id="test" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Hello CodeBoxy</legend>
    Text : <input type="text" name="t1" id="t1" value="TEXT" /><br />
    Password : <input type="password" name="p1" id="p1" value="password" /><br />
    Hidden : <input type="hidden" name="h1" id="h1" value="hidden" /><br />
    Button :
    <input type="button" name="b1" id="b1" value="Enable" />
    <input type="button" name="b2" id="b2" value="Disabled" disabled="disabled" /><br />
    File : <input type="file" name="f1" id="f1" /><br />
    Checkbox :
    <input type="checkbox" name="c1" id="c1" checked="checked" />QQBoxy
    <input type="checkbox" name="c2" id="c2" />CodeBoxy<br />
    Radio :
    <input name="r1" id="r1" type="radio" checked="checked" />QQBoxy
    <input name="r1" id="r2" type="radio" />CodeBoxy<br />
    Select :
    <select name="s1" id="s1">
        <optgroup label="QQBoxy">
        <option value="1-1">1-1</option>
        </optgroup>
        <optgroup label="CodeBoxy">
            <option value="2-1" selected="selected">2-1</option>
            <option value="2-2">2-2</option>
        </optgroup>
    </select><br />
    Textarea :<br />
    <textarea name="a1" id="a1" cols="40" rows="2">Hello&#13;&#10;CodeBoxy</textarea><br />
    <input type="image" src="qqboxy.gif" /><input type="submit" /><input type="reset" />
</fieldset>
</form>

補充：PHP GET POST

$test = !empty($_GET['test']) ? $_GET['test'] : null;

$test = !empty($_POST['test']) ? $_POST['test'] : null;

範例：

Hello CodeBoxy

Text :
Password :
Hidden :
Button :
File :
Checkbox : QQBoxyCodeBoxy
Radio : QQBoxyCodeBoxy
Select : 1-12-12-2
Textarea :
Hello CodeBoxy

說明：
簡單展示常用HTML Form語法，補充PHP為GET與POST接收語法。

JS LaTeX

標題：使用JavaScript 顯示 LaTeX 方程式範例
來源：http://latex.codecogs.com/

HTML (index.html)：

<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
<div lang="latex">\frac{1+sin(x)}{y}</div>

範例：

\frac{1+sin(x)}{y}

說明：
很簡單的只要導入js腳本，
然後在標籤內加上 lang="latex" 就能夠將LaTeX顯示成圖片格式，
非常適合在沒有個人虛擬空間的部落格中使用。

jQuery Load POST

標題：jQuery Load傳值即時顯示

HTML (index.html)：

<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#myCount").click(function(){
        $("#myText").load("addaction.php", {"num1":$("#number1").val(), "num2":$("#number2").val()});
    });
});
</script>
<textarea id="number1" cols="20" rows="3">1</textarea><br />
<input type="text" id="number2" value="2" /><br />
<input type="button" id="myCount" value="Send" />
<div id="myText"></div>

PHP (addaction.php)：

<?php
$num1 = !empty($_POST['num1']) ? $_POST['num1'] : null;
$num2 = !empty($_POST['num2']) ? $_POST['num2'] : null;
$total = $num1 + $num2;
echo $num1."+".$num2."=".$total;
?>

說明：
採input text以及texterea進行範例演示，
使用jQuery Load傳遞POST給PHP進行運算並即時顯示結果。

JSON Itinerary

標題：Javascript簡單取用JOSN資料範例應用

<script type="text/javascript">
function itinerary() {
    today = new Date();
    var div = document.getElementById("div");
    var jsondata = {
        "weeks":[
            {"week":"星期日"}, //0
            {"week":"星期一"}, //1
            {"week":"星期二"}, //2
            {"week":"星期三"}, //3
            {"week":"星期四"}, //4
            {"week":"星期五"}, //5
            {"week":"星期六"}, //6
        ],
        "schedule":[
            //{"week":"星期幾", "from":"幾點", "to":"到幾點", "html":"事件內容"},
            {"week":"-1", "from":"23", "to":"24", "html":"每日事件"},
            {"week":"-1", "from":"0", "to":"1", "html":"每日事件"},
            {"week":"0", "from":"0", "to":"24", "html":"星期日事件"},
            {"week":"1", "from":"0", "to":"24", "html":"星期一事件"},
            {"week":"2", "from":"0", "to":"24", "html":"星期二事件"},
            {"week":"3", "from":"0", "to":"24", "html":"星期三事件"},
            {"week":"4", "from":"0", "to":"24", "html":"星期四事件"},
            {"week":"5", "from":"9", "to":"24", "html":"星期五事件"},
            {"week":"6", "from":"8", "to":"12", "html":"星期六事件"},
        ]
    };
    for(i=0;i<jsondata.schedule.length;i++)
        if(today.getDay() == jsondata.schedule[i].week || jsondata.schedule[i].week == -1)
            if(today.getHours()>=jsondata.schedule[i].from && today.getHours()<jsondata.schedule[i].to)
                div.innerHTML += jsondata.schedule[i].html + "<br />";
}
window.onload = itinerary;
</script>
<div id="div" align="center">--- List of itineraries ---<br /></div>

說明：
簡單利用JavsScript讀取JSON格式之星期及行程表內容，
比起採用陣列方式來紀錄更加清楚明瞭，
若搭配Google spreadsheet將更加簡單方便。