Show toolbar

2011年12月13日 星期二

JavaScript Countdown

標題:JS Countdown
HTML (index.html):
<span id='clock'></span>
<script type="text/javascript">
var reciprocalboxy = new function() {
    return {
        endDay : new Date("2030/1/1 00:00:00"),
        show : function() {
            var today = new Date();
            var timeRemain = this.endDay - today;
            var D = parseInt(timeRemain/1000/60/60/24);
            var h = parseInt((timeRemain/1000/60/60)%24);
            var m = parseInt((timeRemain/1000/60)%60);
            var s = parseInt((timeRemain/1000)%60);
            document.getElementById('clock').innerHTML = 
            D + "日" + h + "點" + m + "分" + s + "秒";
        },
        init : function() {
            this.show();
            window.setInterval(function() {
                reciprocalboxy.show();
            }, 1000);
        }
    };
};
reciprocalboxy.init();
</script>
範例:


說明:
簡易倒數計時器範例。

2011年12月11日 星期日

JavaScript dollar sign

標題:自定義錢字號函式
HTML (index.html):
<div id="btn">
    <button>Click1</button>
    <button>Click2</button>
    <button>Click3</button>
</div>
<script type="text/javascript">
    function $(id) {return document.getElementById(id);}
    $('btn').onclick = function(e) {
        e.target.innerHTML = "Clicked";
    };
</script>
範例:

說明:
自定義一個錢字號指向id之函式,讓程式更精簡。

2011年11月16日 星期三

Python Class

標題:Python Class 類別範例
Python (main.py):
# -*- coding: utf-8 -*-
class codeboxy:
    b = 2
    def power(self, a):
        ans = a ** self.b #計算次方
        return ans

boxy = codeboxy()
a = 3
print("%d ^ %d = %d"%(a, boxy.b, boxy.power(a)))
範例結果:
說明:
使用Class類別的方式計算整數a的b次方為多少。

Python String

標題:Python3常用字串語法
Python (main.py):
# -*- coding: utf-8 -*-
english = "-*-QQBoxy Say Hello CodeBoxy-*-"
print(english[:3]) #由最前面印到第3個字
print(english[3:-3]) #由第3個字印到倒數第3個字
print(english[-3:]) #由倒數第3個字印到最後
print(english.strip("-*")) #清除字串前後字元
print(english.strip("-*").lower()) #轉成小寫
print(english.strip("-*").upper()) #轉成大寫
print(english.strip("-*").replace("Boxy", "Box", 1)) #取代1次字串
print(english.strip("-*").split(" ")) #陣列切割
print(len(english)) #字串長度
print(english.find("Boxy", 3, 27)) #位置3到位置27字串第一次出現的位置
print(english.count("Boxy", 0, 27)) #位置0到位置27字串出現的次數
範例結果: 說明:
Python3常用字串語法整理。

2011年11月6日 星期日

ChatBoxy

標題:閒聊方盒子 v2.3
HTML (index.html):
<!--[if !IE]><!-->
<style>
/*播放按鈕圖示*/
button.btn {
    margin-bottom: -4px;
    margin-right: 3px;
    background-color: white;
    width: 20px !important;
    padding: 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
span.play {
    border-color: transparent transparent transparent black;
    border-style: solid;
    border-width: 4px 0 4px 8px;
    float: left;
    height: 0px;
    width: 0px;
    text-indent: -999px;
}
</style>
<!--<![endif]-->
<h2>ChatBoxy v2.3</h2>
<span id="nameboxy" style="font-weight: bold;" onClick="chatboxy.name.change()">Ghost</span>
<input type="text" id="c_msg" style="padding-left:16px; width:400px;" onkeypress="chatboxy.submit.enter(event)" />
<button id="sendboxy" onClick="chatboxy.submit.send()">Send</button>
Color: <span id="colorboxy"></span>
FPS: <input type="text" id="fpsboxy" style="width:40px" value="1000" onclick="select()" onchange="chatboxy.cookie();" />(ms)
<hr style="border: thin dotted lightgrey;" />
<div id="chatboxy"></div>

<script type="text/javascript">
var chatboxy = new function() {
    var nameboxy = null; //暱稱暫存器
    var colorboxy = null; //暱稱顏色暫存器
    var fpsboxy = null; //刷新速度暫存器
    var lastmsg = null; //尾筆資料暫存器
    var lastimer = null; //刷新計時器
    //最近一筆Json資料連結
    var lastJUrl = "YourLink1";
    //最近20筆Json資料連結
    var nowJUrl = "YourLink2";
    //訊息發送連結
    //https://docs.google.com/spreadsheet/viewform?formkey=YourKey
    var postUrl = "https://docs.google.com/spreadsheet/formResponse?formkey=YourKey&ifq";
    //訊息發送等待圖片
    var imgwait = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTVA-utxy-xqQ3jVRVnd1kBgpibrm3GMwNIlJiN3oMX8exC1RRyio6MAO-eS98i4qsh9keJVH1yzLM7X-uN0a4uJqtJgMYtSVABZqul62N5paZtLk6W6PliF_u2W7PATLU4wDiRXbqaAOQ/";
    //訊息完成待命圖片
    var imgdone = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjdGBbw46KLNdYV9OC4PCkiJ3k2T8uNeoC50NjNo0qZ_GH2yEMYdaGtjBMJkW6CxR3_6HwotrumjT47QoZFB-KU96qpZCXN08mTZKHl4t0HBi1bTQOcSdhbceApFRpG91JTV2k27pb_4hV/";
    //影像Error圖片
    var imgerror = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01-qF-M5pyNPJHFlhuUkO6ZnqL_W92ClTH7kMQ5NNw-7NyzTOpZYZjyyxYtrtWrJrvDmuWqxykkzl4DqlzSU8usktT-GsdX7XKVbE1w8LT0iOu1-vNM6wtL2xl-5Ry_z4zFwx4YN4FMkU/s64/blocked_login.png";
    //定義正規表示
    var picture = /^((((ht|f)tps?:\/\/)|(www.))[-a-zA-Z0-9@:%_\+.~#?&//=]+)\.(jpg|jpeg|gif|png|bmp)/i
    var youtube = /^http:\/\/w{0,3}\.youtube[^' '\n\r]+/
    var hyperlink = /^(((ht|f)tps?:\/\/)|(www.))[a-zA-Z0-9_\-.:#/~}?]+/i
    //定義函式類別
    return {
        getJsonp : function(url, func) { //Jsonp呼叫函式
            var cp = url.indexOf("callback=?"); //尋找CallBack字串位置
            var today = new Date(); //建立日期物件
            var rnd = today.getFullYear() + '' +
                 today.getMonth() + '' +
                today.getDate() + '' +
                today.getDay() + '' +
                today.getHours() + '' +
                today.getMinutes() + '' +
                today.getSeconds() + '' +
                Math.round(Math.random()*99); //定義隨機數值
            var rm = document.getElementById('scriptBoxy');
            if(rm) rm.parentNode.removeChild(rm); //刪除舊腳本
            var script = document.createElement('script'); //建立新腳本
            script.type = 'text/javascript';
            script.id = 'scriptBoxy';
            //加入rnd以避免瀏覽器取到舊資訊
            script.src = url.substring(0, cp)+"callback="+func+url.substring(cp+10, url.length)+"&rnd="+rnd;
            document.getElementsByTagName('head')[0].appendChild(script); //產生腳本
        },
        lastscan : function(json) { //尾筆資料掃描器
            try { //合併標題(暱稱)與內容(日期+時間+訊息)
                var msg = json.feed.entry[0].title.$t+''+json.feed.entry[0].content.$t;
            } catch(e) {
                var msg = "";
            }
            if(json && lastmsg != msg) {
                lastmsg = msg; //刷新尾筆資料
                this.getJsonp(nowJUrl, 'chatboxy.refresh'); //呼叫Jsonp函式(刷新資料)
            } else {
                this.getJsonp(lastJUrl,'chatboxy.delay'); //呼叫Jsonp函式(掃描尾筆資料)
            }
        },
        delay : function(json) { //延遲查詢函式
                if(lastimer) { //清除記憶
                    window.clearInterval(lastimer); //清除計時器
                    lastimer = null; //清除計時器內容
                }
                lastimer = window.setTimeout(function() { //啟動計時器
                    chatboxy.lastscan(json);
                }, fpsboxy);
        },
        refresh : function(json) { //留言刷新器
            var title = ""; //暱稱
            var content = ""; //內容(日期+時間+訊息)
            var name = ""; //暱稱
            var color = ""; //暱稱顏色
            var date = ""; //日期
            var time = ""; //時間
            var chat = ""; //訊息
            var output = ""; //輸出暫存器
            for (var i = 0; i < json.feed.entry.length; ++i) {
                title = json.feed.entry[i].title.$t; //取得標題(暱稱)
                content = json.feed.entry[i].content.$t; //取得內容(日期+時間+訊息)
                date = content.substring(3, content.indexOf(" ",3)); //取得日期
                time = content.substring(content.indexOf(" ",3), content.indexOf(", c: @")); //取得時間
                chat = content.substring(content.indexOf(", c: @")+6, content.length); //取得訊息
                name = title.substring(title.indexOf("@")+1, title.length); //取得暱稱
                color = title.substring(0, title.indexOf("@")); //取得暱稱顏色
                output += time + "<span style=\"color:orange;\"> ‹ </span><span style=\"color:" + color + ";font-weight: bold;\">" +
                            name + "</span><span style=\"color:orange;\"> › </span> " + this.msgFilter(chat) + "<br />";
            }
            document.getElementById("chatboxy").innerHTML = output; //刷新資料
            this.lastscan();
        },
        msgFilter : function(msg) { //媽媽訊息過濾器
            var pos = 0; //空白位置首
            var nextpos = 0; //空白位置尾
            var output = ""; //輸出暫存器
            for(var i=0;nextpos!=-1;i++) {
                nextpos = msg.indexOf(" ",pos+1); //取得尾端空白位置
                str = msg.substring(pos, nextpos!=-1?nextpos:nextpos.length); //取得各段字串
                if(picture.test(str)) { //圖片類型
                    var reviseIE = "";
                    if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                        reviseIE = "style=\"display:none;\"";
                    output += "<img src=\""+str+"\"" +
                                "onerror=\"chatboxy.image.error(this)\"" +
                                "onload=\"chatboxy.image.resize(this);\"" + reviseIE + " />";
                } else if(youtube.test(str)) { //水管類型
                    var vp = str.indexOf("v=") + 2; //v的get值開始位置
                    //取得v的get值,當字串『v=』後有『&』字元則取到該字元位置,否則取到字串尾
                    var v = str.substring(vp, str.indexOf("&", vp)!=-1?str.indexOf("&", vp):str.length);
                    output += " <button class=\"btn\" onclick=\"window.open('http://www.youtube.com/embed/" +
                                v + "?autoplay=1&loop=1&playlist=" + v +
                                "', 'images', 'catalogmode, scrollbars, width=480, height=390')\" />" +
                                "<span class=\"play\">Play</span></button>" +
                                "<a target=\"_blank\" href=\"http://youtu.be/" + v + "\">Youtu.be/" + v + "</a>";
                } else if(hyperlink.test(str)) { //超連結類型
                    output += " <a target=\"_blank\" href=\"" + str + "\">" + str + "</a>";
                } else { //一般訊息
                    output += " " + str;
                }
                pos = nextpos + 1; //尾端成為新首端
            }
            return output;
        },
        image : new function() { //暱稱類別
            return {
                resize : function(image) {
                    if(typeof image.width != 'undefined') {
                        var w = image.width;
                        var h = image.height;
                        image.removeAttribute('onload'); //移除onload事件
                        if(w > 0 && h>0 && w <= 200 && h <=200) { //圖示模式
                            image.title = "("+w+" x "+h+")";
                            if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                                image.style.display = "inline";
                        } else if(w > 200 && w < 800 && h > 200 && h < 600) { //一般模式
                            image.title = "(Size: "+w+" x "+h+")";
                            image.parentNode.insertBefore(document.createElement('br'), image);
                            var p = image.parentNode;
                            if(p.lastChild == image) {
                                p.appendChild(document.createElement('br'));
                            } else {
                                p.insertBefore(document.createElement('br'), image.nextSibling);
                            }
                            if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                                image.style.display = "inline";
                        } else { //大圖模式
                                image.title = "(Size: "+w+" x "+h+") Open in New Window";
                                image.parentNode.insertBefore(document.createElement('br'), image);
                                var alink = document.createElement('a'); //建立超連結物件
                                alink.target = "_blank"; //加入新視窗屬性
                                alink.href = image.src; //加入連結屬性
                                if(h > w) { //圖片為直圖
                                    w = w/h*600;
                                    h = 600;
                                } else { //圖片為橫圖
                                    h = h/w*800;
                                    w = 800;
                                }
                                image.width = w;
                                image.height = h;
                                if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                                    image.style.display = "inline";
                                alink.appendChild(image.cloneNode(true)); //克隆自己
                                image.parentNode.replaceChild(alink, image); //取代舊物件
                        }
                    }
                },
                error : function(image) {
                    image.removeAttribute('onload'); //移除onload事件
                    image.removeAttribute('onerror'); //移除onerror事件
                    var alink = document.createElement('a'); //建立超連結物件
                    alink.target = "_blank"; //加入新視窗屬性
                    alink.href = image.src; //加入連結屬性
                    image.src = imgerror;
                    if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                        image.style.display = "inline";
                    alink.appendChild(image.cloneNode(true)); //克隆自己
                    image.parentNode.replaceChild(alink, image); //取代舊物件
                }
            };
        },
        name : new function() { //暱稱類別
            return {
                change : function() { //變更暱稱
                    var name = document.getElementById('nameboxy');
                    name.onclick = function(){};
                    name.innerHTML = "<input type='text' style='text-align:center;width:80px;' " +
                                    "onmouseover='focus()' onfocus='select()' " + //選擇文字事件
                                    "onblur='chatboxy.name.mouse(this)' " + //滑鼠離開事件
                                    "onkeyup='chatboxy.name.keyboard(event,this)'" + //鍵盤ENTER事件
                                    "value='" + name.innerHTML + "'>";
                },
                mouse : function(me) { //滑鼠事件
                    var name = document.getElementById('nameboxy');
                    name.onclick = chatboxy.name.change;
                    name.innerHTML = me.value;
                    nameboxy = me.value;
                    chatboxy.cookie();
                },
                keyboard : function(e, me) { //鍵盤事件
                    e = e||window.event;
                    var key = e.charCode||e.keyCode;
                    if(key==13) {
                        this.mouse(me); //借用滑鼠事件
                    }
                }
            };
        },
        color : new function() { //顏色類別
            return {
                create : function() { //建立顏色Button
                    var bb = "";
                    var thecolor = document.getElementById('colorboxy');
                    var colors = new Array("Black", "Hotpink", "Tomato", "Darkorange", "Gold", //暱稱色碼
                                            "Lime", "Greenyellow", "Green", "Skyblue", "Royalblue", 
                                            "Blue", "Darkslateblue", "Purple", "Mediumorchid");
                    for(var i=0;i<colors.length;i++) {
                        bb = colors[i] != colorboxy?"0px solid":"3px solid"; //標記已選中之顏色
                        thecolor.innerHTML += "<div style='border-bottom: " + bb + "; color: " + //建立顏色按鈕
                            colors[i] + "; display: inline; cursor: pointer;' onClick='chatboxy.color.change(this)' title='" + colors[i] +"'>■</div> ";
                    }
                },
                change : function(me) { //變更顏色
                    this.clear();
                    me.style.borderBottom = "3px solid"; //標記已選中之顏色
                    colorboxy = me.title;
                    document.getElementById('nameboxy').style.color = colorboxy; //刷新畫面數值
                    chatboxy.cookie();
                },
                clear : function() { //清除重置
                    var thecolor = document.getElementById('colorboxy');
                    var colors = thecolor.getElementsByTagName('div');
                    for(var i=0;i<colors.length;i++) {
                        colors[i].style.borderBottom = "0px solid";
                    }
                }
            };
        },
        submit : new function() {
            return {
                send : function() { //發送事件
                    var msg = document.getElementById('c_msg').value;
                    var params = {'entry.0.single':colorboxy +'@'+nameboxy, 'entry.1.single':'@'+msg}; //欲發送項目
                    this.wait(); //顯示等待送出處理
                    this.post(params); //發送POST
                },
                enter : function(e) { //鍵盤事件
                    e = e||window.event;
                    var key = e.charCode||e.keyCode;
                    if(key==13) {
                        this.send(); //借用發送事件
                    }
                },
                post : function(params) { //虛擬表單送出POST
                    var rm = document.getElementById('formBoxy');
                    if(rm) rm.parentNode.removeChild(rm); //刪除舊虛擬表單
                    var form = document.createElement('form'); //建立新虛擬表單
                    form.target = 'iframeboxy'; //指向隱藏框架
                    form.id = 'formBoxy';
                    form.method = 'post';
                    form.action = postUrl;
                    for(var key in params) { //加入表單子項目
                        var input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = key;
                        input.value = params[key];
                        form.appendChild(input);
                    }
                    document.getElementsByTagName('body')[0].appendChild(form); //產生虛擬表單
                    form.submit(); //送出表單
                },
                wait : function() { //等待狀態函式
                    var msg = document.getElementById('c_msg');
                    msg.style.background = "url(" + imgwait + ")"; //等待圖片
                    msg.style.backgroundRepeat = "no-repeat"; //圖片不重複
                    msg.disabled = true; //禁用輸入框
                    var btn = document.getElementById('sendboxy');
                    btn.disabled = true; //禁用送出鈕
                },
                done : function() { //完成狀態函式
                    var msg = document.getElementById('c_msg');
                    msg.style.background = "url(" + imgdone + ")"; //訊息圖片
                    msg.style.backgroundRepeat = "no-repeat"; //圖片不重複
                    msg.value = ""; //清除訊息
                    msg.disabled = false; //解開輸入框
                    var btn = document.getElementById('sendboxy');
                    btn.disabled = false; //解開送出鈕
                    msg.select();
                    window.clearInterval(lastimer); //中斷計時器
                    lastimer = null; //清除計時器內容
                    chatboxy.getJsonp(lastJUrl,'chatboxy.lastscan'); //繼續掃描
                }
            };
        },
        fps : function() { //重新啟動掃瞄器
            window.clearInterval(lastimer); //中斷計時器
            lastimer = null; //清除計時器內容
            this.lastscan(); //繼續掃描
        },
        cookie : function() { //Cookie設定
            var c_name = this.getCookie("nameboxy"); //暱稱值
            var c_color = this.getCookie("colorboxy"); //顏色值
            var c_fps = this.getCookie("fpsboxy"); //刷新數值
            /* 刷新Cookie紀錄 - Cookie有舊值,將舊值刷新成新值。 *
             * 繼承Cookie紀錄 - Cookie有舊值,將空值以舊值繼承。 *
             * 建立Cookie紀錄 - Cookie無 值,建立預設值於空值。 */
            if(c_name && nameboxy) { //刷新Cookie紀錄
                document.cookie = "nameboxy=" + escape(nameboxy); //刷新Cookie
            } else if(c_name && !nameboxy) { //繼承Cookie紀錄
                nameboxy = c_name;
                document.getElementById('nameboxy').innerHTML = nameboxy; //刷新顯示
            } else { //建立Cookie紀錄
                nameboxy = "Ghost";
                document.cookie = "nameboxy=" + escape(nameboxy);
            }
            if(c_color && colorboxy) { //刷新Cookie紀錄
                document.cookie = "colorboxy=" + escape(colorboxy); //刷新Cookie
            } else if(c_color && !colorboxy) { //繼承Cookie紀錄
                colorboxy = c_color;
                document.getElementById('nameboxy').style.color = colorboxy; //刷新顯示
            } else { //建立Cookie紀錄
                colorboxy = "Black"; //初始化預設值
                document.cookie = "colorboxy=" + escape(colorboxy); //存入Cookie
            }
            if(c_fps && fpsboxy) { //刷新Cookie紀錄
                fpsboxy = document.getElementById('fpsboxy').value;
                document.cookie = "fpsboxy=" + escape(fpsboxy); //刷新Cookie
                this.fps(); //重新啟動掃瞄器
            } else if(c_fps && !fpsboxy) { //繼承Cookie紀錄
                fpsboxy = c_fps;
                document.getElementById('fpsboxy').value = Number(fpsboxy); //刷新顯示
            } else { //建立Cookie紀錄
                fpsboxy = "1000";
                document.cookie = "fpsboxy=" + escape(fpsboxy);
            }
        },
        getCookie : function(name) { //取Cookie函式
            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;
        },
        init : function() { //系統初始化
            this.cookie();
            this.color.create();
            document.getElementsByTagName('body')[0].innerHTML +=
            "<iframe name=\"iframeboxy\" onload=\"chatboxy.submit.done()\" style=\"display:none;\"></iframe>"; //產生腳本
        }
    };
};
chatboxy.init(); //啟動
</script>
說明:
原始碼由QQBoxy釋出, 轉載請遵守創用CC授權條款,謝謝。

2011年11月4日 星期五

JavaScript Checkbox Clean

標題:(必填)
JavaScript (index.html):
<script type="text/javascript">
function create() {
    var box = document.getElementById("codeboxy");
    var boxs = document.createElement("input");
    boxs.type = "checkbox";
    boxs.name = "addBox";
    boxs.setAttribute('defaultChecked', true); //針對IE6進行勾選
    boxs.checked = true; //進行勾選
    box.appendChild(boxs);
}
function clean() {
    //掃描div內的input物件
    var list = document.getElementById("codeboxy").getElementsByTagName("input");
    for(var i=0;i<list.length;i++)
        if(list[i].name == "addBox") //過濾名為addBox之項目
            list[i].checked = false; //清除點選狀態
}
</script>
<button onclick="create();">Dynamic Create</button><br />
<button onclick="clean();">Clean Checkbox</button><br />
<div id="codeboxy"></div>
說明:
相容於IE6、IE7、IE8、FireFox、Chrome瀏覽器之Checkbox生成及清除範例。

範例:

2011年10月31日 星期一

PHP Fluent Interface

標題:Fluent Interface 連串執行 function
PHP (index.php):
<?php
class codeboxy {
    protected $str;
    protected $num = 0;
    public function a() {
        $this->str .= 'a';
        $this->num += 1;
        return $this;
    }
    public function b() {
        $this->str .= 'b';
        $this->num += 2;
        return $this;
    }
    public function display() {
        return $this->str . $this->num;
    }
}
$test = new codeboxy();
$test->a()->b()->a()->b(); // "a  b  a  b" . (1 + 2 + 1 + 2)
echo $test->display(); // abab6
?>
結果:
說明:
使用PHP連貫的執行Function並Return回物件。

2011年10月30日 星期日

JavaScript insertBefore insertAfter cloneNode

標題:使用JavaScript在目標前後插入或包覆標籤
JavaScript (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image</title>
<script type="text/javascript">
function before() { //在img前插入
    var image = document.getElementById('myimg');
    var alink = document.createElement('a');
    alink.appendChild(document.createTextNode('Google'));
    alink.href = "http://www.google.com/";
    image.parentNode.insertBefore(alink, image); //在目標前插入
}
function wrap() { //包覆img
    var image = document.getElementById('myimg');
    var alink = document.createElement('a');
    alink.href = "http://www.google.com/";
    alink.appendChild(image.cloneNode(true)); //克隆一目標
    image.parentNode.replaceChild(alink, image); //取代舊有目標
}
function after() { //在img後插入
    var image = document.getElementById('myimg');
    var alink = document.createElement('a');
    alink.appendChild(document.createTextNode('Google'));
    alink.href = "http://www.google.com/";
    if(image.parentNode.lastChild == image) { //當目標為最後一個
        image.parentNode.appendChild(alink);
    } else { //當目標在中間
        image.parentNode.insertBefore(alink, image.nextSibling);
    }
}
</script>
</head>
<body>
<button onClick="before()">Before</button>
<button onClick="wrap()">Warp</button>
<button onClick="after()">After</button>
<img id="myimg" src="example.jpg" />
</body>
</html>
範例:




說明:
使用insertBefore、insertAfter、cloneNode不同方式插入新標籤, 針對上一篇文章建立範例程式, 並增加after及wrap之範例供學習。

2011年10月28日 星期五

JavaScript Dom or innerHTML delete text

標題:使用Dom方法或innerHTML方法刪除td標籤內容文字
方法一:
JavaScript (index.html):
<table id="codeboxy">
    <tr>
        <td>Hello</td>
        <td colspan="2">world</td>
    </tr>
    <tr>
        <td>How</td>
        <td>are</td>
        <td>you</td>
    </tr>
</table>
<script type="text/javascript">
    var a = document.getElementById('codeboxy').getElementsByTagName('tr')[1].getElementsByTagName('td')[1];
    var n = document.createElement('td');
    a.parentNode.insertBefore(n, a); //在目標前插入新td
    a.parentNode.removeChild(a); //刪除目標td標籤
</script>

方法二:
JavaScript (index.html):
<table id="codeboxy">
    <tr>
        <td>Hello</td>
        <td colspan="2">world</td>
    </tr>
    <tr>
        <td>How</td>
        <td>are</td>
        <td>you</td>
    </tr>
</table>
<script type="text/javascript">
    document.getElementById('codeboxy').getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML = ""; //直接讓目標內容為空
</script>
說明:
方法一使用Dom先以parentNode為立足點在目標前建立新的空td,同樣再以parentNode為立足點刪除目標。
方法二則使用innerHTML語法直接以空值取代目標內容。

比較:
方法一速度較快,但程式較長不易理解,
方法二速度較慢,但程式精簡容易理解。

2011年10月27日 星期四

jQuery example:floating frame

標題:jQuery範例練習
<script type="text/javascript">
    // 當網頁載入完
    $(window).load(function(){
        var $win = $(window),
            $ad = $('#player').css('opacity', 0).show(),    // 讓廣告區塊變透明且顯示出來
            _width = $ad.width(),
            _height = $ad.height(),
            _diffY = 20, _diffX = 20,    // 距離右及下方邊距
            _moveSpeed = 800;    // 移動的速度
         
        // 先把 #player 移動到定點
        $ad.css({
            top: $(document).height(),
            left: $win.width() - _width - _diffX,
            opacity: 1
        });
 
        // 幫網頁加上 scroll 及 resize 事件
        $win.bind('scroll resize', function(){
            var $this = $(this);
             
            // 控制 #player 的移動
            $ad.stop().animate({
                top: $this.scrollTop() + $this.height() - _height - _diffY,
                left: $this.scrollLeft() + $this.width() - _width - _diffX
            }, _moveSpeed);
        }).scroll();    // 觸發一次 scroll()
    });
</script>

說明:
jQuery做出浮動效果。
點此觀看完整例子

2011年10月12日 星期三

Python Practice ex2

標題:Python ex2 練習
Python (main.py):
# -*- coding: utf-8 -*-
def ex2():
    name = input("Please enter a character string: ")
    print("The string capitalized is ", end="")
    for i in range(0,len(name)):
        dec = int(ord(name[i]))
        if(dec>=97 and dec<=122):
            newstr = chr(dec-32)
        elif(dec>=65 and dec<=90):
            newstr = chr(dec)
        else:
            newstr = "?"
        print(newstr,end="")
    print("\n")

ex2()
說明:
使用Python3進行基礎輸入輸出大小寫轉換練習。

Python Practice ex1

標題:Python ex1 練習
Python (main.py):
# -*- coding: utf-8 -*-
def ex1():
    name = input("Please enter your name: ")
    for i in range(0,len(name)):
        print(name[i],"ASCII value is",str(ord(name[i])))
ex1()
說明:
使用Python3進行基礎輸入輸出ASCII編碼轉換練習。

2011年10月3日 星期一

JavaScript Calendar

標題:JavaScript年曆範例
JavaScript (index.html):
<script type="text/javascript">
var codeboxy = new function() {
    var year = new Date().getFullYear();
    return {
        refresh : function() { //刷新年曆
            year = document.getElementById("getyear").value;
            document.getElementById("show").innerHTML = "";
            this.init();
        },
        showmonth : function(s, m) { //列印月份
            var output = "";
            var day=1;
            output += " SUN MON TUE WED THU FRI SAT\n";
            for(var i=1;i<=m+s;i++) {
                if(i<=s) {
                    output += "    ";
                } else {
                    output += "  " + this.zero(day);
                    if((i%7)==0) 
                        output += "\n";
                    day++;
                }
            }
            output += "\n";
            return output;
        },
        zero : function(num) { //空格補償
            if(num<10)
                num = " " + num;
            return num;
        },
        init : function() { //初始年曆參數
            space = ((year-1)+parseInt((year-1)/4)-parseInt((year-1)/100)+parseInt((year-1)/400)+1)%7;
            for(m=1;m<=12;m++) {
                if(m==4||m==6||m==9||m==11)
                    month=30;
                else if(m==2&&(year-1980)%4==0)
                    month=29;
                else if(m==2)
                    month=28;
                else
                    month=31;
                document.getElementById("show").innerHTML += "\nMonth: " + m + "\n" + this.showmonth(space,month);
                space=(space+month)%7;
            }
        }
    };
};
window.onload = function () {
    codeboxy.init();
};
</script>
Year: <input type="text" id="getyear" />
<button onclick="codeboxy.refresh();">Get</button>
<pre id="show"></pre>
說明:
以JavaScript採Class方式撰寫年曆範例程式。

範例:

2011年9月30日 星期五

JavaScript Function Class

標題:以Class型態建立方法
JavaScript (index.html):
<script type="text/javascript">
var codeboxy = new function() {
    var a = 5;
    return {
        init : function() {
            var b = 7;
            var sum = a + b;
            return sum;
        },
        open : function() {
            var num = this.init();
            document.write(num);
        }
    };
};
window.onload = codeboxy.open();
</script>
說明:
以Class類別的型態來建立方法,讓程式更清楚有條理。

2011年9月19日 星期一

Google Plus jsonp dump

標題:使用dump顯示Google Plus的個人資料
HTML (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jsonp dynamic</title>
<script type="text/javascript">
function googleplus(json) {
    document.getElementById("gplus").innerHTML = dump(json);
}
function getGplus() {
    var removeScript = document.getElementById('jsonScript');
    if(removeScript)
        removeScript.parentNode.removeChild(removeScript);
    var uid = document.getElementById('uid').value;
    var key = "Your key"; //Get your Google Plus API KEY
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.id = 'jsonScript';
    script.src = "https://www.googleapis.com/plus/v1/people/"+uid+"?key="+key+"&callback=googleplus";
    //script.src = "https://www.googleapis.com/plus/v1/people/"+uid+"/activities/public?key="+key+"&callback=googleplus";
    document.getElementsByTagName('head')[0].appendChild(script);
}
function dump(arr,level) {
    var dumped_text = "";
    if(!level) level = 0;
    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding += "    ";
    if(typeof(arr) == 'object') {
        for(var item in arr) {
            var value = arr[item];
            if(typeof(value) == 'object') {
                dumped_text += level_padding + "'" + item + "' ...\n";
                dumped_text += dump(value,level+1);
            } else {
                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
            }
        }
    } else {
        dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
    }
    return dumped_text;
}
</script>
</head>
<body>
<input type="text" id="uid" value="109023257393424023484" />
<input type="button" onClick="getGplus()" value="Get" />
<pre id="gplus"></pre>
</body>
</html>

範例:


說明:
請先取得Google Plus API Key並填入Your key,
使用dump讓JavaScript也有PHP print_r的功能,並使用jsonp取得Google Plus的個人資料。

參考:
http://www.openjs.com/scripts/others/dump_function_php_print_r.php

2011年9月7日 星期三

CSS Play button

標題:簡易CSS播放功能鍵
HTML (index.html):
<style>
button {
    background-color: white;
    width: 30px;
    padding: 5px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
span.play {
    border-color: transparent transparent transparent black;
    border-style: solid;
    border-width: 8px 0 8px 16px;
    float: left;
    height: 0;
    text-indent: -999px;
    width: 0;
}
span.pause {
    border-color: transparent black;
    border-style: solid;
    border-width: 0 4px 0;
    float: left;
    height: 16px;
    text-indent: -999px;
    width: 8px;
}
span.stop {
    border: 8px solid black;
    float: left;
    height: 0;
    text-indent: -999px;
    width: 0;
}
</style>
<button title="Play"><span class="play">Play</span></button>
<button title="Pause"><span class="pause">Pause</span></button>
<button title="Stop"><span class="stop">Stop</span></button>
範例:

說明:
純粹使用CSS建立播放功能鍵。

參考:
http://mediamilan.com/create-playback-buttons-with-just-css/

2011年8月14日 星期日

Python Calendar

標題:Python月曆
#import sys
#路徑為安裝時的預設路徑,版號可能不同
#sys.path.append('C:\tcc_gnuplot_lite\data\SciTE\Lib')
import calendar
#month(年, 月, 寬度, 高度)
print (calendar.month(2011, 12, 6, 2))
範例結果:


說明:
直接執行於Python interpreter。
使用python內建library迅速寫出月曆。

2011年8月4日 星期四

jsonp dynamic

標題:使用jsonp動態取得資料
HTML (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jsonp dynamic</title>
<script type="text/javascript">
function codeboxy(json) {
    document.getElementById("youtubeTitle").innerHTML = json.entry.title.$t;
}
function getYoutubeTitle() {
    var removeScript = document.getElementById('jsonScript');
    if(removeScript)
        removeScript.parentNode.removeChild(removeScript);
    var yid = document.getElementById('yid').value;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.id = 'jsonScript';
    script.src = "http://gdata.youtube.com/feeds/api/videos/" + yid + "?alt=json-in-script&callback=codeboxy";
    document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
</head>
<body>
<input type="text" id="yid" value="Sr3hyvjNp94" />
<input type="button" onClick="getYoutubeTitle()" value="Get" />
<div id="youtubeTitle"></div>
</body>
</html>
範例:



說明:
使用純JavaScript動態在Head產生jsonp script後,呼叫函式更新Youtube之Title資料。
支援IE6、FireFox、Chrome。

2011年8月2日 星期二

JCreator library

標題:JCreator加入外部library
說明:

首先新增一個project,決定名稱之後在「project classpath」中,切換到「Required Libraries」,按「New」

跳出下面這個視窗,按「Add」選擇「Add Archive」,之後便可加入想加入的外部Library了。


如果建立project之後還需要再加入新的library,就點選功能表的「project」→「project settings」,再切換到「Required Libraries」即可加入

HTML CSS JavaScript

標題:HTML CSS JavaScript使用
HTML (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Hello JavaScript</title>
        <style>
        a:hover {
            background: yellow;
        }
        </style>
        <script type="text/javascript">
        function hello() {
            document.getElementById("codeboxy").innerHTML += "Hello JavaScript<br />";
        }
        </script>
    </head>
    <body>
        <a href="javascript:hello();">Click me</a>
        <div id="codeboxy"></div>
    </body>
</html>
說明:
簡單展示HTML架構下如何使用CSS、JavaScript,
CSS展示當滑鼠移動到標籤a上則將文字背景顏色更換,
JavaScript展示當點擊超連結則在id為codeboxy的div標籤內增加字串。

Hello JavaScript

標題:Hello JavaScript
<script type="text/javascript">
    alert("Hello JavaScript"); //彈出訊息框
</script>
說明:
使用JavaScript語法alert彈出訊息框。

Hello PHP

標題:Hello PHP
<?php
echo "Hello PHP"; //印出Hello PHP文字
phpinfo(); //顯示伺服器資訊
?>
說明:
基礎的PHP架構,以及展示伺服器環境的phpinfo語法。

2011年8月1日 星期一

getIframe

標題:自定義getIframe函式

HTML (index.html):
<script type="text/javascript">
function getIframe(name) {
    var ifr;
    if (document.all)
        ifr = document.frames[name].document; //IE
    else
        ifr = document.getElementById(name).contentDocument; //FF
    return ifr;
}
function test() {
    alert(getIframe("childiframe").getElementById("codeboxy").innerHTML);
}
</script>
<iframe id="childiframe" name="childiframe" src="child.html"></iframe><br />
<a href="javascript:test();">Click me</a>
HTML (child.html):
<div id="codeboxy">Hello Codeboxy</div>
說明:
由父框架取得子框架id的內容,
因隱私權規範僅適用於相同網域。

2011年7月31日 星期日

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內容。

2011年7月22日 星期五

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 CodeBoxyText :
Password :
Hidden :
Button :
File :
Checkbox : QQBoxyCodeBoxy
Radio : QQBoxyCodeBoxy
Select :
Textarea :

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

2011年7月21日 星期四

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將更加簡單方便。

getElementsByClassName

標題:自定義getElementsByClassName函式
<script type="text/javascript">
function getElementsByClassName(className, parentElement){
    if (typeof parentElement == 'string'){
        parentElement = document.getElementById(parentElement);
    } else if (typeof parentElement != 'object' || typeof parentElement.tagName != 'string'){
        parentElement = document.body;
    }
    var elems = parentElement.getElementsByTagName("*");
    var result=[];
    for (i=0; j=elems[i]; i++) {
        if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1) {
            result.push(j);
        }
    }
    return result;
}
function test() {
    var divs1 = getElementsByClassName('myclass');
    var divs2 = getElementsByClassName('myclass','parent');
    var divs3 = getElementsByClassName('myclass',document.getElementById('parent'));
    alert(divs1[0].innerText);
    alert(divs2[1].innerText);
    alert(divs3[2].innerText);
}
</script>
<a href="javascript:test();">Click me</a>
<div id="parent">
    <div class="myclass">1</div>
    <div class="myclass">2</div>
    <div class="myclass">3</div>
</div>
說明:
自定義getElementsByClassName函式,
可掃描指定id內之所有class名稱並以陣列儲存。

PDO SQLite Class

標題:採Class寫法之PDO連接SQLite

PHP (index.php):
<?php
$test = new sql;
echo $test->connectsql();
class sql {
    public $dsn = "sqlite:hello.sqlite3";
    public $user = null;
    public $password = null;
    //建立資料庫
    function connectsql() {
        try {
            //連結資料庫
            $dbq = new PDO($this->dsn, $this->user, $this->password);
            echo "PDO Connection ok<br />";
            //建立資料表db_math
            //新增INTEGER屬性PRIMARY KEY特性的id欄位
            //新增INT屬性的project欄位
            //新增TEXT屬性的function欄位
            $dbq->exec("CREATE TABLE db_math(id INTEGER PRIMARY KEY, project INT, function TEXT)");
            echo "Create Table ok<br />";
            //建立索引db_math_id並指定為資料表db_math的id欄位
            $dbq->exec("CREATE INDEX db_math_id ON db_math(id)");
            echo "Create Index ok<br />";
            //寫入資料3筆
            $dbq->exec("INSERT INTO db_math(project,function) VALUES (1,'2+3')");
            $dbq->exec("INSERT INTO db_math(project,function) VALUES (1,'4+5')");
            $dbq->exec("INSERT INTO db_math(project,function) VALUES (2,'6+7')");
            echo "Insert Data ok<br />";
            //檢查若未成功則還原
            $dbq->beginTransaction();
            //搜尋全部資料
            $stq = $dbq->prepare('SELECT *FROM db_math');
            $stq->execute();
            $result = $stq->fetchAll();
            //印出資料內容
            foreach($result as $arr) {
                print_r($arr);
                echo "<br />";
            }
            //搜尋project欄位值為1的資料
            $stq = $dbq->prepare("SELECT * FROM db_math WHERE project = '1'");
            $stq->execute();
            $result = $stq->fetchAll();
            //印出資料內容
            foreach($result as $arr)
                echo $arr['id'].", ".$arr['project'].", ".$arr['function']."<br />";
            
            $this->dsn = null;
        } catch (PDOException $e) {
            //印出錯誤訊息
            echo "Connection failed: ".$e->getMessage()."<br />";
            $this->dsn = null;
        }
    }
}
?>
輸出結果:

說明:
採類別的寫法撰寫基本PDO連結資料庫,以及建立SQLite3資料表並進行Select搜尋之範例,
使用PDO請記得將相關之PHP extension打開。

2011年7月20日 星期三

PHP exec C

標題:PHP與C相互傳遞與接收
程式:
PHP (index.php):
<?php
//傳遞變數給exe執行檔
$text = exec("chello\\chello.exe Hello PHPBoxy", $arr);
 
//印出陣列大小
echo count($arr)."<br /><br />";
 
//印出陣列結果
foreach($arr as $value)
    echo $value."<br />";
 
//僅印出最後一行
echo "<br />".$text;
?>

C (chello\chello.exe):
#include <stdio.h>
#include <stdlib.h>
#include <string.h>

int main(int argc, char** argv) {
    char str1[1024], str2[1024], str3[1024];
    if(argc > 1) {
        strncpy(str1,argv[0],sizeof(str1)-1);
        strncpy(str2,argv[1],sizeof(str2)-1);
        strncpy(str3,argv[2],sizeof(str3)-1);
        printf("%s\n%s\n%s", str1, str2, str3);
    } else {
        printf("%d\n", argc);
    }
    return (EXIT_SUCCESS);
}

輸出結果:


說明:
利用PHP傳遞『Hello』與『PHPBoxy』兩個字串給執行檔接收,
再經由C/CPP程式printf回傳給PHP三行字串內容,
注意當argv需要做字串的處理時必須要重新複製一份來進行修改,
若直接使用argv來做修改可能會導致資料錯誤的發生。

Edit rule

標題:編輯規則

說明:
  • 圖片插入格式說明:
    點一下圖片即會顯示調整Bar,這時候請選擇適當的格式,若格式還是跑掉,請參考動態教學