在 JavaScript 裡，知道 === 與 == 的區別嗎？

印象中，以前有遇過這問題，但當下認為他們是一樣的，所以也就沒有很認真去區分他們間的差別。但今天在看 jQuery 的原始碼時，發現這些老外都喜歡用 ===  而不用 ==，難到，真的只是因為老外比較長這原因而已嗎？

而我在 devguru 找到老外比較長的原因了。

一般在寫 JavaScript 時，我們「等號運算子(==)」的左右兩邊，你可能偶而會發現，如果有一個變數，他的值是整數，但如果在等號運算子的另一邊用字串來比較，有可能會通過。舉個例子來說：

var v=5;
if ( v=="5")
  alert('the same');
else
  alert('not the same');

這程式執行的結果，會跑出 「the same」出來。原因是你使用 == 運算子時，他會試圖自動去幫你作轉型的動作，以符合懶人的期望。但這一懶，卻也跑出了些潛在的問題。

第一，雖然程式幫你作了自動轉型來比較，但你可能已經誤用或誤會了這個變數他原本所宣告的變數型態，現在他包容了你，但不保證當你的程式變肥之後，日後在型態處理上吃了一記悶棍。

第二，是效能問題。如果要讓程式去幫你作自動轉型的動作，則他必須要多花一些額外的時間將所有型態一一去跟你目前的變數比較，這動作會比你一開始就直接講明兩邊都是要同樣型態會來得花時間。

所以，如果要讓自己程式寫得嚴謹，使用嚴格的等號運算子(===)是比較建議的。而他的雙胞胎兄弟，則是 !==，就請大家自個兒舉一反三了。

個人在 stackoverflow 論壇看到一篇很詳盡的介紹，很推薦去看他那篇說明，或找關鍵字 strict equal operator 搜尋更多其他文章。

參考：
01:http://www.devguru.com/Technologies/ecmascript/quickref/comparison_operators.html
02:http://stackoverflow.com/questions/359494/javascript-vs-does-it-matter-which-equal-operator-i-use
03:http://www.webreference.com/js/column26/stricteq.html

ImageButton 似乎跟 Repeater、DataList、GridView 不合

最近為了讓網頁變得花俏，所以每個按鈕都有專屬的一張圖使用，不過是按鈕放張圖而已嘛～
但跑出的結果，卻讓人噴飯 >_<

「無效的回傳或回呼引數」，這就是美麗的代價嗎？

我本來是要做上圖的功能，透過 Repeater ，並在每一個資料列中放「刪除」按鈕，執行刪除後就會重新更新一次資料。

所以在 Page_Load( ) 事件，就沒有將繫結 Repeater 的動作包在 if(!IsPostBack) 的判斷式中。我曾經試著用錯誤畫面裡的建議，將 <%@ Page 裡的  EnableEventValidation 屬性設為 false 。雖然這動作可以避免產生「無效的回傳或回呼引數」錯誤訊息，但是原先針對「刪除」按鈕的事件動作卻變成不會被觸發，真是折磨人啊！

我決定，要去抓個墊背來試試...

我就棄 ImageButton 改用 Button 試試。發現他一樣有這種現象。

接著測試  LinkButton ，成功了！這三個Button 兄弟，總算有一個有出息，沒有全軍覆沒。

可是，使用 LinkButton，有沒有辦法放圖呢？於是，把腦筋動到他的 Text 屬性，把 <img src=btn_delete2.jpg border=0 /> 寫到 Text 屬性裡，發現竟然可以哩~

今天發生的這種現象，並非只存在於 Repeater ，DataList 、 GridView 也是都這樣。為何以前自己沒注意到有這現象發生，這就在於繫結資料的動作，以前我都習慣將他放到 if(!IsPostBack) 判斷式裡，還有另一種可能，就是 ... 程式寫太少啦，你這懶鬼 ！！！

測試檔案下載

網路上相同受害者

使用 jqPlot 畫圓餅圖

在網頁上想要製作圓餅圖，免費且好看的，推薦一家：jqPlot。

實際使用後，發現 jqPlot 操作上並沒有很複雜，程式碼也相當簡潔。

看看這次實作的步驟：

首先是一堆引用的語法。

//針對 IE 瀏覽器而另外處理 （excanvas）
<!--[if IE]><script language="javascript" type="text/javascript" src="../js/excanvas.min.js"></script><![endif]--> 

<link rel="stylesheet" type="text/css" href="../css/jquery.jqplot.css" /> 

<!-- BEGIN: load jquery --> 
<script language="javascript" type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> 
<!-- END: load jquery --> 

<!-- BEGIN: load jqplot --> 
<script language="javascript" type="text/javascript" src="../js/jquery.jqplot.min.js"></script> 
<script language="javascript" type="text/javascript" src="../js/jqplot.pieRenderer.min.js"></script> 
<script language="javascript" type="text/javascript" src="../js/jqplot.trendline.min.js"></script> 

<!-- END: load jqplot --> 

接著，在頁面上放置要呈現圖形的範圍：

<div id="pie" style="margin-top:20px; margin-left:20px; width:500px; height:500px;"></div>

最後，設定圖形資料的內容：

<script>$(document).ready(function(){   
  $.jqplot.config.enablePlugins = true; 
   plot1 = $.jqplot(
     'pie',
     [[['paladin(30)',30],['polly(28)',28],['hugo(35)',35],['keen(25)',25]]],
     { 
       seriesDefaults:{renderer:$.jqplot.PieRenderer, trendline:{show:true},rendererOptions:{sliceMargin:8},rendererOptions:{sliceMargin:8} },legend:{show:true} 
     }); 
 }); 
</script>

而完成後的作品如下：

觀看完成的作品後，如果你進一步希望將右上角的詳細資訊能有個連結的功能，則可以進一步去改寫圖形資料內容。譬如說，「paladin 」的資料，是由：['paladin(30)',30] 而來，而可以改寫成['<a href="#" onclick=DoLink("paladin")>paladin(30)</a>',30]，如此，詳細資料裡面的 paladin 就可以支援點選功能了。此外只需要加上自行定義 的 DoLink。

<script>function DoLink(strName){alert(strName);}</script>  

官網：http://www.jqplot.com/index.php

線上編輯照片( pixlr )

如果 windows 的小畫家不能滿足你，但又不想裝其他影像編輯軟體，可以試試這線上編輯軟體 http://pixlr.com/editor/ 。

點進去後，可以在 Language 切換語系，包含繁體中文。您可以上傳想要編輯的相片，並透過 pixlr 所提供的影像編輯功能盡情的揮灑一番，至於最後要儲存結果，也是沒問題，他可以讓你把自己的作品下載回去。

自己不用額外安裝軟體就可以直接編輯相片，真的蠻方便的。

參考 :

01. 用雲端影像軟體幹掉Photoshop、ACDSee
02. http://pixlr.com/editor/

IE 不支援 array.indexOf

今天在一篇介紹 JavaScript: array.indexOf 的文章，將他的程式碼下載執行一下，發現奇怪的問題，在 Chreom & FireFox 都可以正常執行，唯獨 IE 不可以。後來拜讀了 Colin Pear 的文章後，順利找到解法。

日後如果要使用 array.indexOf ，要在呼叫前，先引用一段來處理支援各家瀏覽器的方法：

if(!Array.indexOf){
  Array.prototype.indexOf = function(obj){
   for(var i=0; i<this.length; i++){
 if(this[i]==obj){
  return i;
 }
   }
   return -1;
  }
}

完整範例：

<html>
    <head><h1>JavaScript Array indexof </h1>
        <title>JavaScript array indexof </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script language="javascript" type="text/javascript">
            var array=new Array();
            array[0]="Rose";
            array[1]="India";
            array[2]=".net";
            array[3]="Rohini";
            document.write("<b>"+"Element in the array are "+"</b>"+ "<br />");
            document.write("================="+ "<br />");
            for(var i=0;i<array.length;i++){
                document.write(array[i]+"<br>")
            }
            document.write("================="+ "<br />");


   if(!Array.indexOf){
     Array.prototype.indexOf = function(obj){
      for(var i=0; i<this.length; i++){
    if(this[i]==obj){
     return i;
    }
      }
      return -1;
     }
   }


            var index = array.indexOf("India");
            document.write("<b>"+"Index of India on the array is: "+"</b>"+index);
        </script> 
    </body>
</html>

參考：
http://www.roseindia.net/java/javascript-array/javascript-array-index-of.shtml
http://www.pearweb.com/javascript/array-index-of.html

Google Docs Demo 真正即時的多人線上編輯功能

不知道大家對於多人編輯的環境需求機會多不多？如果你需要與許多人同時編輯一份文件時，在乎的應該是所謂的「即時性」，希望能夠越快看到別人所回應的訊息越方便。而 Google 也提供了一個簡單的共同文件「即時」編輯功能。

可以連結到 http://docs.google.com/demo

然後 Google Docs 會自動在網址後面加上他定義的編號，用來識別你目前正在編輯的這份文件。如果你希望你的朋友也可以一同編輯這份文件，那只需要將「Invite others to try this with you just by sharing this link」下方的 URL 分享給你的朋友，那大家就可以共同編輯了。

有一個需要注意的，就是這份共同編輯文件，存活時間只有 24 小時，時間到了之後，就會自動消失，所以你有保存的需求，則自己要另外去儲存這份文件就是了。

Session 遺失的狀況之一：ShowModalDialog之後，不能用window.open來開窗

在美麗的 selene 同事部落格，看到一篇有關於 session 遺失的探討，其中引用了 「javascript 的showModalDialog與window.open造成session遺失的問題」文章，進行了 showModalDialog 與 window.open 混搭使用的測試，自己覺得蠻有趣的。並非這兩者不能並存使用，但要記得，ShowModalDialog之後如果再用window.open來開窗，你的 session 值就會不見，這真不知是什麼怪邏輯，但自己還真的傻傻全部演練一遍，但都有準哩。日後如有使用 session 在存東西，這點可能就要好好注意一下了。

參考：
01. Session Issues from selene
02. javascript 的showModalDialog與window.open造成session遺失的問題