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編碼轉換練習。

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

範例：

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類別的型態來建立方法，讓程式更清楚有條理。

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>

範例：
'kind' => "plus#person" 'id' => "109023257393424023484" 'displayName' => "QQBoxy Taiwan" 'tagline' => "QQBoxy" 'gender' => "male" 'aboutMe' => "I'm QQBoxy" 'url' => "https://plus.google.com/109023257393424023484" 'image' ... 'url' => "https://lh4.googleusercontent.com/-iT0CCYC2C1g/AAAAAAAAAAI/AAAAAAAADPM/GCp3tL39A5M/photo.jpg" 'urls' ... '0' ... 'value' => "http://qqboxy.blogspot.com/p/chat.html" '1' ... 'value' => "http://qqboxy.blogspot.com/" '2' ... 'value' => "http://toolboxy.blogspot.com/" '3' ... 'value' => "http://codeboxy.blogspot.com/" '4' ... 'value' => "http://www.plurk.com/QQBoxy" '5' ... 'value' => "http://picasaweb.google.com/gs1458" '6' ... 'value' => "https://plus.google.com/109023257393424023484" 'type' => "profile" '7' ... 'value' => "https://www.googleapis.com/plus/v1/people/109023257393424023484" 'type' => "json" 'placesLived' ... '0' ... 'value' => "台灣新北市"

說明：
請先取得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

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/