此 Blog 停止更新, 將轉移.

此 Blog 停止更新, 將轉移. 轉移至: http://yehchge.wordpress.com/

Javascript 淺析註冊事件

原文：http://www.wowbox.com.tw/blog/article.asp?id=3004
首先是最常規的方法：
程式碼:

<p id="para" title="cssrain demo!" onclick="test()" >test</p>
<script>
function test(){
  alert("test");
}
</script>

當某一天，我們知道JavaScript要跟HTML結構實現分離後，就會改了一種寫法：

程式碼:

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}
window.onload = function(){
    document.getElementById("para").onclick = test;
}
</script>

當我們工作越來越久後，有時候我們需要對某個元素綁定多個相同的事件類型：

程式碼:

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}

function pig(){
  alert("pig");
}

window.onload = function(){
     document.getElementById("para").onclick = test;
     document.getElementById("para").onclick = pig;
}
</script>

如果按照上面的寫法，我們只能輸出第二個函數。
這時候我們需要用到attachEvent方法：

程式碼:

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}

function pig(){
  alert("pig");
}

window.onload = function(){
     document.getElementById("para").attachEvent("onclick",test);
     document.getElementById("para").attachEvent("onclick",pig);
}
</script>

在一段時間內，你並沒發現這段代碼有任何錯誤。
某一天，一個名叫firefox的瀏覽器 闖入你的視野，當我們把這段代碼放到firefox中執行後，
發現並不能正常運行。 問題就這樣，越來越多，然而作為一名JS程式設計師，這些都是必須面對的。

為了解決這段代碼的平台兼容性問題，我翻翻手冊，知道了firefox跟ie的區別：
firefox中註冊事件使用：addEventListener方法，同時為了兼容ie，我們必須用到if ... else...

程式碼:

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}

function pig(){
  alert("pig");
}

window.onload = function(){
         var element =  document.getElementById("para");
         if(element.addEventListener){  // firefox  , w3c
                element.addEventListener("click",test,false);
    element.addEventListener("click",pig,false);
         } else {   // ie 
    element.attachEvent("onclick",test);
    element.attachEvent("onclick",pig);
         }
}
</script>

此時，代碼就可以在多個平台上工作了。

但隨著水平的進步，你不滿足每次都去判斷，你想把這個判斷封裝起來，以後可以直接調用：

程式碼:

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}

function pig(){
  alert("pig");
}

function addListener(element,e,fn){
     if(element.addEventListener){
          element.addEventListener(e,fn,false);
     } else {
          element.attachEvent("on" + e,fn);
     }
}

window.onload = function(){
         var element =  document.getElementById("para");
         addListener(element,"click",test);
         addListener(element,"click",pig);
}
</script>

至此，作為一個程式設計師的工作就完了。
中間我們從一個最傳統，最基本的寫法，然後實現Js和HTML的分離，然後又實現對同一個元素註冊多個事件，期間，
我們發現註冊事件的兼容性問題。最後我們對註冊事件的方法進行封裝，方便以後使用。

PHP 使用 TCPDF 顯示中文的關鍵

$pdf = new TCPDF(PDF_PAFE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

// set font (PHP TCPDF 顯示中文字型)
$pdf->SetFont('cid0jp', '', 18); // 可以顯示中文(繁、簡)、日文、韓文。
//$pdf->SetFont('msungstdlight', '', 18, '', true); //　繁中, 但是效果不好,字會偏移
//$pdf->SetFont('stsongstdlight', '', 20); // 可以顯示中文, 但是效果不好,字會偏移
//$pdf->SetFont('dejavusans', '', 14, '', true); //　預設 utf8

安裝 C++ Compiler 編譯環境

G++ Compiler windows 安裝環境:

1. 至 MinGW 網站, 選擇 Download -> Installer -> mingw-get-inst -> mingw-get-inst-20120421
2. 下載 mingw-get-inst-20120421.exe
3. 執行 mingw-get-inst-20120421.exe, 選擇 Download latest repository catalogues
4. Select Components 選項中, 加選 C++ Compiler
5. 安裝完後, 新增 hello.cpp 檔案, 輸入以下程式:

// hello.cpp

#include <iostream> // Basic input and output library

int main() {
    std::cout << "Hello World\n";
    return 0; // Return to the operating system
}

6. 執行 C:\MinGW\bin\g++.exe hello.cpp -o hello
   出現: cc1plus.exe - 找不到元件, 這個應用程式無法啟動，因為找不到 libgmp-10.dll，
   重新安裝應用程式可能可以解決這個問題。

7. 如果出現步驟 6 的狀況, 請再到 MinGW 網站, 下載 mingw-get-inst-20111118.exe 檔案.
   下載完後, 重新安裝, 應該就會發現 C:\MinGW\bin 下面有 libgmp-10.dll 的檔案.

8. 設定環境變數 path, 我的電腦 -> 按滑鼠右鍵 -> 內容 -> 進階 -> 環境變數 -> 系統變數 -> Path -> 編輯
   -> 在最後分號處, 加入 C:\MinGW\bin;

9. 如果要編譯 Windows 的程式, 可以執行如下指令:
   C:\MinGW\bin\g++.exe sample01.cpp -o sample01 -mwindows -Wall

VIM Tips

: 1,2 co 3        複製 1,2 行到第 3 行之後
: 4,5 m 6        移動 4,5 行到第 6 行之後

2012年4月, 程式設計排行榜

2012年4月，程式設計排行榜

可參考以下網址: TIOBE

Ajax Poll 投票範例

這是一個 AJAX Poll 投票的範例

1. HTML Code(ajax_poll.htm):

<html>
  <head>
    <meta charset="utf-8" />
    <title>AJAX Poll</title>
    <script src="ajax_poll.js"></script> 
  </head>
  <body>
    <h3><a href="http://www.w3schools.com/php/php_ajax_poll.asp">AJAX Poll</a></h3>
    <div id="poll">
      <h2>Do you like PHP and AJAX so far?</h2>
      <form>
        Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"><br />
        No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)">
      </form>
    </div>
    <a href="index.htm">Home</a>
  </body>
</html>

2. Javascript Code(ajax_poll.js):

var xmlHttp;

function getVote(int) {
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null) {
    alert("Browser does not support HTTP Request");
    return;
  }
  var url="ajax_poll.php";
  url=url+"?vote="+int;
  url=url+"&sid="+Math.random();
  xmlHttp.onreadystatechange=stateChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

function stateChanged() {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
    document.getElementById("poll").innerHTML=xmlHttp.responseText;
  }
}

function GetXmlHttpObject() {
  var objXMLHttp=null;
  if (window.XMLHttpRequest) {
    objXMLHttp=new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return objXMLHttp;
}

3. PHP Code(ajax_poll.php):

<?php

$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "ajax_poll.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0) $yes = $yes + 1;
if ($vote == 1) $no = $no + 1;

//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);

?>

<h2>Result:</h2>
<table>
  <tr>
    <td>Yes:</td>
    <td>
      <img src="images\\poll.gif" width='<?php echo(100*round($yes/($no+$yes),2)); ?>' height='20'>
      <?php echo(100*round($yes/($no+$yes),2)); ?>%
    </td>
  </tr>
  <tr>
    <td>No:</td>
    <td>
      <img src="images\\poll.gif" width='<?php echo(100*round($no/($no+$yes),2)); ?>' height='20'>
      <?php echo(100*round($no/($no+$yes),2)); ?>%
    </td>
  </tr>
</table>

4. TXT Code(ajax_poll.txt):

0||0

5. 下載 poll.gif 檔案, 放到 images 資料夾下.

6. 寫好後, 執行 ajax_poll.htm, 完成!