Show toolbar

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方式撰寫年曆範例程式。

範例: