[JavaScript] input type='text' 取值比大小

　　今天在開發 javascript 的時候，發現從 HTML 取得的 input type='text' 值在進行「比大小」的時候會發生奇怪的錯誤。我們來看看下面範例：

<script type='text/javascript'>
    function form_check(){
        var a = example.input_value.value;
        var b = example.compare_value.value;

        if (a > b){alert("a is greater than b.");}
    }
</script>

<form name='example' ... onsubmit='return form_check();'>
    <input type='text' name='input_value' />
    <input type='text' name='compare_value' />
    <input type='submit' ... value='Submit' />

　　如果今天在瀏覽器上輸入 a 跟 b 的值之後並點選 submit，此時 javascript function 會進行 a, b 值的比較；如果 a 大於 b，會跳出 a 大於 b 的訊息。

只不過，神奇的錯誤發生了！！！

1 ) 若輸入 a = 80, b = 50，則順利跳出 a 大於 b 的訊息

2 ) 若輸入 a = 100, b = 50，則不會跳出 a 大於 b 的訊息

　　經過谷哥大神的開示，我發現，每次輸入 text 的直接為 string，並非我們所想像的 integer。因此， 函式 form_check 進行的比較是字串大小的比較，而非「數值」大小的比較。如果要進行數值大小的比較，必須進行下列的修正：


<script type='text/javascript'>
    function form_check(){
        var a = example.input_value.value;
        var b = example.compare_value.value;

        if (parseInt(a) > parseInt(b)){ alert("a is greater than b."); }
    }
</script>

如此一來，我們將順利比較輸入值的大小！

P.S. 如進行一般數值大小的比較，可使用 parseFloat( )。

[JavaScript] 燈箱效果 ── Lytebox

　　先前開發公司專案時，被要求使用類似「燈箱特效」顯示相關聯結的內容。藉由「燈箱」作為關鍵字搜尋，發現已有強者寫好的 JS 可利用，且大多數使用者推薦 lightbox2。使用 lightbox2 相當簡單，藉由下載官方網站整包檔案，解壓縮並加入專案，即可立即使用！只不過， lightbox2 僅可嵌入圖檔，無法嵌入網頁，所以不符合需求。

國父革命十一次才成功，一次的失敗不算什麼！在努力不懈搜尋之下，發現另一套 JS ── Lytebox 可嵌入網頁內容，這不就是符合我們所要的需求嗎？！在這兒，我將記錄如何安裝與使用 Lytebox，達到「燈箱」效果並嵌入靜態網頁。

[JavaScript] location.href 用法

最近在開發 Web 介面時發現，

實作點擊按鍵後進行頁面轉換 ex: demo.html --> temp.html

使用先前所學 onclick="location.href('temp.html')" 技術，

在 IE 瀏覽器中可執行。

但， Google Chrom & Firefox 卻無效果 ( 攤手 )

經「估狗」大神指導，發現將程式寫法改成 onclick="location.href='temp.html'"

一切問題就解決啦！！！ ( 灑花 )




實際體驗區：

下面按鍵使用 Google Chrom 跟 Firefox 無效果！



下面按鍵使用 IE, Chrom & Firefox 皆可！