2012年8月30日 星期四

image button 在使用者點選之後,效用等同於 submit

收到 UI 的 html 如下:


貼心的我, 想說他忘記在 onclick 和 onkeypress 寫事件, 我幫他加上:
onclick='javascript: this.form.submit();'
onkeypress='javascript:  this.form.submit();'

結果, 造成在 onsubmit 裡的函數檢查完後, 固定 submit 出去,

結論: image button 在使用者點選之後,效用等同於 submit ,也會觸發 onsubmit, 不要在 input type='image' tag 裡增加  onclick 和 onkeypress 事件.

2012年8月23日 星期四

固定長度字型, 建議使用Lucida Console

固定長度字型的選擇, 我建議使用Lucida Console, chrome 預設是使用 Curier New, 我們來看看這2個字型的差異.


字型1: Lucida Console.
心得: 文字比 Courier New 粗一點, 比較容易閱讀.


字型2: Courier New


結論: 我的 google chrome 瀏覽器的固定長度字型, 建議使用 Lucida Console.

在 Blogger 文章裡貼貼 source code 程式碼的方法

許多人常會需要在blog 文章貼程式碼, 如果把 source code 直接貼上去, 不容易對齊, 不容易讀. 如果用一個框框將程式碼包起來,既美觀又易讀.

最後產生的畫面如下:


要做出上面的效果, 步驟如下:
step 1. 開啟你的 Notepad++, 找到你的 source code, 並全部選取(反白):
說明: 這些 tag 直接貼到 blogger 裡, 會完全看不到字, 或著是會沒有斷行, 字全部擠在一行裡.


step 2: 使用 Notepad++ [TextFX] 外掛, 選擇 [TextFX Convert], 再選 Encode HTML.
說明: 新的 Notepad++ 沒有內建這一個 TextFX plugin (NppTextFX.dll), 需要另外下載到 Notepad++ 的 \Program Files\Notepad++\plugins\ 資料夾下.


step 3: HTML encode 後的畫面如下:

step 4: 把 encode 後的貼到 blogger 的 HTML, 還要在最前面加
 的 tag, 在最後面, 再加上 
即可完成.

附上 pre 完整的 tag:

<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace, Courier New; font-size: 13px; line-height: 15px; overflow: auto; padding: 8px; width: 100%;">

xsl 副程式分享, 產生N個符號或圖片

這次要實作一個功能, 畫面如下:

要做出小星星, 每家旅館的星星數都不同, 第1個想到的之前做的副程式:
http://maxtellyou.blogspot.tw/2012/07/xsl-ntab.html

實際套用後發現, xsl 的變數內容(variable) 似乎沒有辦法直接使用 tag 在裡面, 所以多增加了一個副程式 outputSymbolsImage 專門來輸出圖片.


呼叫的 xsl 範例如下:
<xsl:call-template name="outputSymbolsImage">
    <xsl:with-param name="maxNum"><xsl:value-of select="$hotel_star"/></xsl:with-param>
    <xsl:with-param name="symbol"><xsl:value-of select="$hotel_icon"/></xsl:with-param>
    <xsl:with-param name="symbolAlt"><xsl:value-of select="$hotel_star"/></xsl:with-param>
</xsl:call-template>


xsl 副程式如下:
<xsl:template name="outputSymbols">
    <xsl:param name="currentNum">1</xsl:param>
    <xsl:param name="symbol"><![CDATA[*]]></xsl:param>
    <xsl:param name="maxNum"/>
<xsl:if test="$maxNum!=''"><xsl:if test="$currentNum &lt;= $maxNum"><xsl:value-of select="$symbol" /></xsl:if><xsl:if test="$currentNum &lt; $maxNum"><xsl:call-template name="outputSymbols">
        <xsl:with-param name="currentNum"><xsl:value-of select="$currentNum + 1" /></xsl:with-param>
        <xsl:with-param name="symbol"><xsl:value-of select="$symbol" /></xsl:with-param>
        <xsl:with-param name="maxNum"><xsl:value-of select="$maxNum" /></xsl:with-param>
</xsl:call-template></xsl:if></xsl:if>
</xsl:template>

<xsl:template name="outputSymbolsImage">
    <xsl:param name="currentNum">1</xsl:param>
    <xsl:param name="symbol"><![CDATA[*]]></xsl:param>
    <xsl:param name="symbolAlt"><![CDATA[icon]]></xsl:param>
    <xsl:param name="maxNum"/>
<xsl:if test="$maxNum!=''"><xsl:if test="$currentNum &lt;= $maxNum"><img><xsl:attribute name="src"><xsl:value-of select="$symbol" /></xsl:attribute></img></xsl:if><xsl:if test="$currentNum &lt; $maxNum"><xsl:call-template name="outputSymbolsImage">
        <xsl:with-param name="currentNum"><xsl:value-of select="$currentNum + 1" /></xsl:with-param>
        <xsl:with-param name="symbol"><xsl:value-of select="$symbol" /></xsl:with-param>
        <xsl:with-param name="symbolAlt"><xsl:value-of select="$symbolAlt" /></xsl:with-param>
        <xsl:with-param name="maxNum"><xsl:value-of select="$maxNum" /></xsl:with-param>
</xsl:call-template></xsl:if></xsl:if>
</xsl:template>

2012年8月17日 星期五

Javascript sort select options 的方法

比較快又簡單的方式是透過 jQuery, 這幾行就搞定:

var my_options = $("#my_select option");

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    else return 0
})

$("#my_select").empty().append( my_options );


也可以透過簡單的 Javascript 例如:


function sortSelect(selElem) {
        var tmpAry = new Array();
        for (var i=0;i<selElem.options.length;i++) {
            tmpAry[i] = new Array();
            tmpAry[i][0] = selElem.options[i].text;
            tmpAry[i][1] = selElem.options[i].value;
        }
        tmpAry.sort();
        while (selElem.options.length > 0) {
            selElem.options[0] = null;
        }
        for (var i=0;i<tmpAry.length;i++) {
            var op = new Option(tmpAry[i][0], tmpAry[i][1]);
            selElem.options[i] = op;
        }
        return;
    }

附註: 這個 script 沒有考慮到已經 selected 的項目的問題.


function sortSelect(selectToSort) {
    var arrOptions = [];

    for (var i = 0; i < selectToSort.options.length; i++)  {
        arrOptions[i] = [];
        arrOptions[i][0] = selectToSort.options[i].value;
        arrOptions[i][1] = selectToSort.options[i].text;
        arrOptions[i][2] = selectToSort.options[i].selected;
    }

    arrOptions.sort();

    for (var i = 0; i < selectToSort.options.length; i++)  {
        selectToSort.options[i].value = arrOptions[i][0];
        selectToSort.options[i].text = arrOptions[i][1];
        selectToSort.options[i].selected = arrOptions[i][2];
    }
}


資料來源:
What is the most efficient way to sort an Html Select's Options by value, while preserving the currently selected item?
http://stackoverflow.com/questions/45888/what-is-the-most-efficient-way-to-sort-an-html-selects-options-by-value-while

Javascript to sort contents of select element
http://stackoverflow.com/questions/278089/javascript-to-sort-contents-of-select-element

Javascript 的 left() , right(), leftField(), rightField() 函數


var str="Hello world!"
document.write("<br/>"+left(str,3));
document.write("<br/>"+right(str,4));
document.write("<br/>"+leftField(str,"e"));
document.write("<br/>"+rightField(str,"e"));

Output:
-----------------------------
Hel
rld!
H
llo world!   


函數 source code 如下:
-----------------------------
function trim(stringToTrim)
{
    if(stringToTrim.length>0){
        return stringToTrim.replace(/^\s+|\s+$/g,"");
    }
}

function left(str, num)
{
    return str.substring(0,num)
}

function right(str, num)
{
    return str.substring(str.length-num,str.length)
}

function leftField(str,delimit)
{
    var returnValue=str;
    var indexNumber=str.indexOf(delimit);
    if(indexNumber>=0){
        returnValue = str.substring(0,str.indexOf(delimit))
    }
    return returnValue;
}

function rightField(str,delimit)
{
    var returnValue=str;
    var indexNumber=str.indexOf(delimit);
    if(indexNumber>=0){
        returnValue = str.substring(indexNumber+delimit.length,str.length)
    }
    return returnValue;
}


說明:
leftField + rightField, 取文字裡特定分隔符號的左邊, 和右邊.

Javascript 的 instr 函數

var myString = new String("http://maxtellyou.blogspot.tw");
document.writeln(myString.indexOf("max"));
document.writeln("<br>" + myString.indexOf("h"));
document.writeln("<br>" + myString.indexOf("tw"));
document.writeln("<br>" + myString.indexOf("Tw"));




Output:
-----------------------------

7
0
27
-1


說明:

-----------------------------

因為 max 前面的 http:// 用掉7個字元, 所以傳回 7
h 因為在第1個字元, 前完沒有任何字元, 所以傳回 0
tw 小寫有找到所以, 有值
Tw 大寫, 找不到所以傳回 -1

javascript 的 trim( ) 函數


function trim(stringToTrim)
{
    if(stringToTrim.length>0){
        return stringToTrim.replace(/^\s+|\s+$/g,"");
    }
}



ex:
var A = trim(B); 

2012年8月16日 星期四

Javascript split 用法

  var datastr="2,2,3,5,6,6";
  var str= new Array();
  str=datastr.split(","); 
  for (i=0;i<str.length ;i++ )
  {
    document.write(str[i]+"<br/>");
  } 

學習 MySQL 常用指令

最近工作內容之一是寫 php + mySQL, 因為客戶的即有系統是這個環境, 跟承辦聊天幾次, 發現他在開發這個系統時是完全是門外漢, 之前也只寫過 c語言, 而且還是半路出家去資策會上課學的, 所以很多地方都是以 c語言的楖念來寫, 我發現他的系統和程式有這幾個問題:

1. Table 完全沒使用 index, 我使用 MySQL 指令:
SHOW INDEXES FROM account;

查詢帳號 table 裡, 沒有 index, 於是透過下面指令手動幫他加上,
CREATE INDEX account_id ON account (id desc, password desc);
(其他 Table 依此類推...)

2. 程式碼裡看不到多個 table 的join, 完全純手工把第1 table 裡的資料放到陣列裡處理, 再開啟第2個 table, 再處理陣列裡的值.

3. 完全沒有使用到聚合函數, 例如 sum(...), count(...) 等, 也是純手工, 把欄位們一一放到陣列裡, 再透過 php 一個個讀出來加總.

----------------------------------

MySQL 要看欄位 schema 的指令為, 同 MS T-SQL 的 sp_columns:
DESCRIBE table_name;

----------------------------------

MySQL 的只列出前幾筆, 是 Limit , 類似 MS T-SQL 的 Top N

Microsoft SQL Server:
SELECT TOP 10 column FROM table

PostgreSQL and MySQL
SELECT column FROM table LIMIT 10

MySQL 有一個 OFFSET 的指令, 如下指令如下的話會傳回第 21~30筆資料.
SELECT column FROM table LIMIT 10 OFFSET 20

----------------------------------

MySQL 在 select 句裡的欄位合併, 要使用 concat 指令, 直接使用 + (加號) 會變成數字運算.
例如, 欄位 Col_A 和 Col_B 型別都是 char(9)
Col_A 內容是 305152033
Col_A 內容是 305152971

SELECT Col_A + '-' + Col_B;
答案是 --> 610305004

SELECT CONCAT(Col_A, '-', Col_B);
答案是 --> 305152033-305152971


附註: CONCAT() 會傳回  NULL 如果有任何一個被合併的值是 NULL.


SELECT CONCAT('My', NULL, 'QL');

答案是 --> NULL


----------------------------------





相關文章:
Show indexes for a table with MySQL
http://www.electrictoolbox.com/mysql-show-indexes-table/

Get a MySQL table structure with DESCRIBE
http://www.electrictoolbox.com/mysql-table-structure-describe/

MySQL CREATE INDEX Syntax
http://dev.mysql.com/doc/refman/5.0/en/create-index.html

2012年8月15日 星期三

chrome/Mac https problem

最近遇到一個問題, 民眾反應在 Mac 電腦上使用 chrome (最新的  ver 21.0.xxxx 版本) 連到客戶的網站, 會出現錯誤訊息, 而且如果允許 chrome 繼續瀏覽網站, 並填寫表單按下送出時, 會造成表單中的驗證碼欄位內容值驗證錯誤.

奇怪的是在相同的網址之下(相同的憑證), Windows 平台的 chrome 是通過驗證的, 但 Mac 平台卻顯示 憑證不受信任.


Mac 平台的畫面如下, 由於不知道怎麼抓畫面, 就用手機拍.


google 了一下, 是有一相關文章:
HTTPS/Certificate websites always have "Invalid Server Certificate" Error
http://code.google.com/p/chromium/issues/detail?id=118706

但這篇裡的Chrome Version 版本編號是: 19.0.1068.1
理論上都使用到 21.0.xxxx 應該不會遇到. 但還是遇到了.


目前程式面暫時無解, 改請民眾使用 http (無加密) 情況下來操作.
可能要請 MIS 出馬來看看.

結論是: 公司一定要買一台 Mac 來當測試環境, 因為有可能 Mac 平台會有相容性的問題.

2012年8月9日 星期四

[Asp].中文網域 doamain name (Punycode)

客戶反應一個問題, 要提供一個 URL在網頁裡, 由於包含中文字, 所以中文字被被編碼了.

要連到 URL:

https://law.全國法規.tw/

編修存檔後,透過 IE 瀏覽器, URL 點下去後變成(無法顯示網頁), 神奇的 google  chrome 可以連!

全國法規, UTF-8 編碼做 URLEncode 如下, IE 不能連.
https://law.%E5%85%A8%E5%9C%8B%E6%B3%95%E8%A6%8F.tw/

全國法規, Big5 編碼做 URLEncode 如下, IE 不能連.
https://law.%A5%FE%B0%EA%AAk%B3W.tw/

https://law.%A5%FE%B0%EA%AA%6B%B3%57.tw/


查了一下, 原來中文網域名要轉成 punycode 才行,
隨手下載了一個 ASP 版的轉換程式.
Punycode / IDN conversion code for classic ASP
http://www.simpledns.com/outbox/idn-convert-asp.zip

剛好遇到 "規" 這個字在使用 ASCW( ) 函數是會變成負數. 會出問題, trace 一下程式碼, 改改修修, 弄不出來, 正確解答應該轉換成:
https://law.xn--15q40leqvqi0a.tw/

可是我跑出來的結果有出入, 15q40l 變成 15q50l 實是在很無言, 又看不懂程式在做什麼. 於是改用 .net 來解決. 隨手寫了一個 .net 的 COM+. 最後當然是 Encode 轉換成功, 測試用的程式碼如下:



如果您的 IE 想讓 URL 從 Punycode 的符號變成中文字的話, 需要這樣子設定.





相關文章:
如何利用 IE 或 Firefox 查詢中文域名轉碼(Punycode)
http://blog.miniasp.com/post/2011/07/07/How-to-use-IE-and-Firefox-query-Punycode.aspx

Punycode
http://anferneehardaway.pixnet.net/blog/post/4946513-punycode

[Asp] Server.URLEncode 和 encodeURIComponent 的差別
http://maxtellyou.blogspot.tw/2012/07/asp-serverurlencode-encodeuricomponent.html


使用ASP呼叫C#寫的COM元件
http://maxtellyou.blogspot.tw/2012/03/aspccom.html

如何用 C# 開發的 DLL 讓 VB6 可以使用
http://smilelight-tw.blogspot.tw/2011/06/c-dll-vb6.html

網頁針對 googleBot (spider) 做判斷, 增加 site search 準確度

使用者反應, 輸入關鍵字查詢客戶的網站, 理論上應該只需要查出 25筆, 可是 google 查出了 14900 筆, 因為該關鍵字出現在 "共用區塊" 或 "左邊選單" 中, 這次是在程式裡增加 bot(spider) 的判斷副程式, 新的規則如下.

1. 首頁 不丟出 Menu.
2. Sitemap + 內容頁 + 條列頁 + 查詢頁 + AP 頁面不丟 Menu + 共用區塊.

當然遇到 bot 來其實不需要丟的東西還有很多, 也不需要加總流覽人次, 或是部份會員管理功能... etc, 修改後的畫面如下:


說明: 左邊是一般民眾看到的畫面, 右邊是 bot (spider) 看到的畫面.

2012年8月6日 星期一

[Asp].透過javascript暫時騙過 codeSecure 白箱檢測的方法

直接從 request 取得值, 再做簡單的單引號處理, 再串成一組的SQL Command 是不能透過白箱檢測. 目前他還沒檢測的出來 asp 的 vbscript + javascript 同時存在的code, 例如:
<%
Function ezPkAssign(byref op, byval val)
    call maxInputSwitch(val)
    '// ... vbscript code here
%><script language="javascript" type="text/javascript" runat="server">
  function maxInputSwitch(assignValue){
    try{
      //... javascripe code where
    } catch(e){
    }
  }
</script><%
End Function
%>


我猜, javascript 的部份應該暫時被誤判為 client side 所以沒檢查出來, 也許下一個版本就不能這樣子用.

針對"舊的程式" 暫時...就這樣子先擋一下吧, 之後"新開發的程式" 應該還是要用 parameter 的方式來組合SQL cmd 即可輕鬆過白箱檢測.

Facebook 留言板