Tag: javascript

Javascript: 檢查生日是否成年

Posted by – August 17, 2015

接到一個開發需求,讓使用者填寫生日,然後用 Javascript 判斷是否滿二十歲。但是需要檢查到月和日... 總覺得有點懶。

Coding 發懶的時候,問 Stack Overflow 就對了....

function getAge(DOB) {
    var today = new Date();
    var birthDate = new Date(DOB);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }    
    return age;
}

總之先修改一下,寫了一個草稿試試。結果如下: More

Bookmark: amCharts, an advanced javascript charting library

Posted by – June 27, 2014

朋友提供的 JavaScript 圖表套件,還沒試過,先筆記一下。

我之前都是用 HighCharts 製作動態圖表。

http://www.amcharts.com/

Screen Shot 2014-06-27 at 2.16.57 PM

Regex Golf:挑戰自己對 Regex 的自信

Posted by – January 6, 2014

在網路上逛到一個有趣的挑戰網頁,內容是各式各樣的 Regex (正規表達式) 考題,看看你能得到多高的分數。

如下圖,左邊的字串是要符合的,右邊的字是要排除的。用越短的表達式答題可以得到更高的分數。按 Enter 就進入下一題。

Regex Golf

照順序玩下來,第四題 Backrefs 就覺得困難了啊... Orz

http://regex.alf.nu/

Bookmark: CSS Text Filling With Water

Posted by – November 13, 2013

用 CSS 與 Javascript 模擬出液體填充的效果,附上實際的效果。

See the Pen CSS Text filling with water by Lucas Bebber (@lbebber) on CodePen

CSS Text filling with water - CodePen

Bookmark: CSS Number Scroll

Posted by – November 13, 2013

用 CSS 和 Javascript 製作數字轉動的效果,還沒用過,先留個書籤。

css_number_scroll

CSS Number Scroll

Bookmark: Hashids, Generate short hashes from numbers

Posted by – October 30, 2013

以前寫過自己的短網址服務,不過那時候很多計算,尤其是網址的編碼都是亂寫一通。跟朋友討論的時候才曉得用 base36 之類的方法編碼。

最近又碰到一個需求,需要將幾組參數編成較短的字串,在 StackOverflow 上亂逛找到了 Hashids 這個好東西。支援多種語言、可自訂 salt,可編多組參數,最重要是這是雙向的,可以解回來。完全符合需求。

Hashids website

ps. 其中 PHP 版的範例有用到 namespace,把源碼的 namespace 註解掉就可以在 PHP 5.3 以下使用。

Javascript: Repeat Character N Times

Posted by – September 13, 2013

開發過中常碰到一種情況是希望某字串能重複出現數次。

以前端開發來說,希望用 JavaScript 來重複產生 HTML elements 的時候,覺得用 for 迴圈寫這個也太囉嗦。

有個比較簡單的 "語法" 來處理這個情況。

Array(11).join("a");

這樣就可以得到 11 - 1 個 a,aaaaaaaaaa。

產生重複 elements 就如法炮製,

$('ul').html(Array(5).join('<li class="whatever">list</li>'));

Bookmark: Knockout.js

Posted by – December 11, 2012

忘了是什麼時候知道有 Knockout.js 這玩意兒,當時沒用到,玩了一下 knockout.js 網站上的互動教學後只覺得很強大,然後就沒理它了。

前些時候在某個專案的後期有個需要整合許多資料的動態表單頁面。表單內容之多,又有許多互相連動的 <input> 元素,即使有 jQuery 加持也備感吃力,靈光一閃,好像有個 MVVM 的 js 實作.... 所以又回頭開始看起了 Knockout.js,不過這次有比較認真了解怎麼用 (笑)。

在專案 Git 上開了分支,導入 knockout.js。基本的使用蠻簡單的,實際開始寫撰寫相關的 MVVM 函式大概一天半就把主要的功能都完成了。之後再微調、增加次要功能等等,前後五天就把這個超難搞的表單頁面收拾乾淨,往結案邁進一大步。

IE9 JavaScript 註解之謎

Posted by – October 31, 2012

最近接手了一個不大的系統升級案,雖然是不大的案子,但客戶的 PM 對需求的描述有點不夠清晰,而我也不是原開發者,因此溝通的過程拖延了不少時間。不好容易完成了程式碼,在測試主機上持續修正調整了數週,客戶最終點頭 OK,佈署到正式主機的時候就爆炸了...

扣除一些交接時人為疏失所造成的錯誤外,處理到最後還是有一個奇妙的問題。在某個表單頁面上,客戶反應 IE 無法送出表單。不過因為公司主要開發機都是 Mac,僅有少數電腦是 Windows 平台,而且還被裝了剛出的 Windows 8,用 win8 內建的 IE10 切換相容性測試,7, 8 , 9 模式全部都沒有出現問題。

最後才又找了一台裝 Win7 的筆電,用純正血統的 IE9 做測試才重現了客戶反應的問題,看來是 JavaScript 出包了。出包點在這一段程式...

function CheckForm1(inForm){
	if(
		CheckA() && 
		CheckB() &&
		//CheckC() &&
		CheckD()
	){
		return true;
	}else{
		return false;
	}
}

這是前人留下的程式,其中 CheckC() 因為不再用到而被我很直覺地加了兩條斜線註解。這個寫法在 Chrome, Firefox 以及 IE 的相容模式都正常執行,所以沒想到 IE9 無法處理 If() 中的註解而掛了 XD

最終將 CheckC 那行刪除就正常了。

File type validation with Javascript

Posted by – October 1, 2012

前些時候寫的簡單版測試程式,在表單送出前用 JavaScript 檢查檔案副檔名。當然這只是第一步驗證,在 PHP 端還是要對 Content Type 做一次檢查。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>File Type Validation in JavaScript. ver 0.1</title>
    </head>
<body>

<form method="post" enctype="multipart/form-data" onsubmit="return checkAllFile();";>
    <input class="file-selector" type="file" name="userfile1" size="20"/></br>
    <input class="file-selector" type="file" name="userfile2" size="20"/></br>
    <input class="file-selector" type="file" name="userfile3" size="20"/></br>
    <input class="file-selector" type="file" name="userfile4" size="20"/></br>
    <input class="file-selector" type="file" name="userfile5" size="20"/></br>
    <input type="submit" value="upload"/>
</form>

<script type="text/javascript">
function checkAllFile(){
    var node_list = document.getElementsByTagName('input');
    var num_of_not_allowed_files = 0;

    for (var i = 0; i < node_list.length; i++){
        var node = node_list[i];
        if(node.getAttribute('type') == 'file'){
            var type = node.value;
            console.log(type);
            switch(type.substring(type.lastIndexOf('.') + 1).toLowerCase()){
                case 'gif': case 'jpg': case 'png':
                    //alert("an image");
                    // Do Nothing.
                    break;
                default:
                    num_of_not_allowed_files++;
                    break;
            }
        }
    }
    console.log('num_of_not_allowed_files: ' + num_of_not_allowed_files);
    if(num_of_not_allowed_files > 0){
        alert('檔案格式錯誤,只能上傳圖片哦');
        return false;
    } else return true;
}
</script>

</body>
</html>

ps. 這並不是一份最佳化過的程式碼,僅供參考。