CodeBoxy - 程式方盒子: 10月 2011

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

範例：

訂閱：文章 (Atom)

大於取代為『>』小於取代為『<』 Tab字元取代為『』換行字元取代為『』雙引號取代為『\"』 &取代為『&』
高亮程式：『<pre class="brush:js;first-line:1;highlight:[0];">』+字串+『</pre>』 (含HTML架構『html-script:true;』)
多行複製：『<textarea style="width:100%;overflow:visible" onclick="select()" rows="">』+字串+『</textarea>』
彈出框架：『<a href="javascript:;" onclick="window.open('"』+網址+『"', 'images', 'catalogmode, scrollbars, width=, height=')">Open</a>』
不作改變
<a href="http://codeboxy.blogspot.com/"> Hello CodeBoxy!! </a>

2011年10月31日星期一

PHP Fluent Interface

2011年10月30日星期日

JavaScript insertBefore insertAfter cloneNode

2011年10月28日星期五

JavaScript Dom or innerHTML delete text

2011年10月27日星期四

jQuery example：floating frame

2011年10月12日星期三

Python Practice ex2

Python Practice ex1

2011年10月3日星期一

JavaScript Calendar

QQBoxy - 酷酷方盒子 | 編譯環境相關軟體

搜尋此網誌

協作成員

網誌存檔

標籤

總網頁瀏覽量

團隊宗旨

2011年10月31日 星期一

PHP Fluent Interface

2011年10月30日 星期日

JavaScript insertBefore insertAfter cloneNode

2011年10月28日 星期五

JavaScript Dom or innerHTML delete text

2011年10月27日 星期四

jQuery example：floating frame

2011年10月12日 星期三

Python Practice ex2

Python Practice ex1

2011年10月3日 星期一

JavaScript Calendar

搜尋此網誌

協作成員

網誌存檔

標籤

總網頁瀏覽量

2011年10月31日星期一

2011年10月30日星期日

2011年10月28日星期五

2011年10月27日星期四

2011年10月12日星期三

2011年10月3日星期一