getCookie

標題：自定義getCookie函式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<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)：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<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

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

1	$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)：

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

範例：

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

jQuery Load POST

標題：jQuery Load傳值即時顯示

HTML (index.html)：

1 2 3 4 5 6 7 8 9 10 11 12

<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)：

1 2 3 4 5 6

<?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資料範例應用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<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函式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<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)：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<?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 Connection ok Create Table ok Create Index ok Insert Data ok Array ( [id] => 1 [0] => 1 [project] => 1 [1] => 1 [function] => 2+3 [2] => 2+3 ) Array ( [id] => 2 [0] => 2 [project] => 1 [1] => 1 [function] => 4+5 [2] => 4+5 ) Array ( [id] => 3 [0] => 3 [project] => 2 [1] => 2 [function] => 6+7 [2] => 6+7 ) 1, 1, 2+3 2, 1, 4+5
說明：
採類別的寫法撰寫基本PDO連結資料庫，以及建立SQLite3資料表並進行Select搜尋之範例，
使用PDO請記得將相關之PHP extension打開。

PHP exec C

標題：PHP與C相互傳遞與接收
程式：
PHP (index.php)：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?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):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

#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); }

輸出結果：
3 cHello\chello.exe Hello PHPBoxy PHPBoxy

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

Edit rule

標題：編輯規則

說明：

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