Tag: javascript

  • Javascript: 檢查生日是否成年

    接到一個開發需求,讓使用者填寫生日,然後用 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; } 總之先修改一下,寫了一個草稿試試。結果如下:

  • Bookmark: amCharts, an advanced javascript charting library

    Bookmark: amCharts, an advanced javascript charting library

    朋友提供的 JavaScript 圖表套件,還沒試過,先筆記一下。 我之前都是用 HighCharts 製作動態圖表。 http://www.amcharts.com/

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

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

    在網路上逛到一個有趣的挑戰網頁,內容是各式各樣的 Regex (正規表達式) 考題,看看你能得到多高的分數。 如下圖,左邊的字串是要符合的,右邊的字是要排除的。用越短的表達式答題可以得到更高的分數。按 Enter 就進入下一題。 照順序玩下來,第四題 Backrefs 就覺得困難了啊… Orz http://regex.alf.nu/

  • Bookmark: CSS Text Filling With Water

    用 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

    Bookmark: CSS Number Scroll

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

  • Bookmark: Hashids, Generate short hashes from numbers

    Bookmark: Hashids, Generate short hashes from numbers

    以前寫過自己的短網址服務,不過那時候很多計算,尤其是網址的編碼都是亂寫一通。跟朋友討論的時候才曉得用 base36 之類的方法編碼。 最近又碰到一個需求,需要將幾組參數編成較短的字串,在 StackOverflow 上亂逛找到了 Hashids 這個好東西。支援多種語言、可自訂 salt,可編多組參數,最重要是這是雙向的,可以解回來。完全符合需求。 ps. 其中 PHP 版的範例有用到 namespace,把源碼的 namespace 註解掉就可以在 PHP 5.3 以下使用。

  • Javascript: Repeat Character N Times

    開發過中常碰到一種情況是希望某字串能重複出現數次。 以前端開發來說,希望用 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

    Bookmark: Knockout.js

    忘了是什麼時候知道有 Knockout.js 這玩意兒,當時沒用到,玩了一下 knockout.js 網站上的互動教學後只覺得很強大,然後就沒理它了。 前些時候在某個專案的後期有個需要整合許多資料的動態表單頁面。表單內容之多,又有許多互相連動的 <input> 元素,即使有 jQuery 加持也備感吃力,靈光一閃,好像有個 MVVM 的 js 實作…. 所以又回頭開始看起了 Knockout.js,不過這次有比較認真了解怎麼用 (笑)。 在專案 Git 上開了分支,導入 knockout.js。基本的使用蠻簡單的,實際開始寫撰寫相關的 MVVM 函式大概一天半就把主要的功能都完成了。之後再微調、增加次要功能等等,前後五天就把這個超難搞的表單頁面收拾乾淨,往結案邁進一大步。

  • IE9 JavaScript 註解之謎

    最近接手了一個不大的系統升級案,雖然是不大的案子,但客戶的 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 無法處理…

  • File type validation with Javascript

    前些時候寫的簡單版測試程式,在表單送出前用 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…

  • Regular expression which matches a pattern, or is an empty string

    之前介紹過在 jQuery Validation Plugin 使用正規表達式 (Regular Expression) 的方法。 在某個專案中如常地用這個方法做表單欄位檢查,不過客戶提了一個需求,希望該欄位不是必填,但使用者有填資料時要驗證其內容。 原本的驗證條件是這樣的… regex : “[0-9]{4}-[0-9]{6}” 也就是使用者一定要輸入正確的手機號碼,如 0919-123456。要變成選填的話… 想了一下,改成下面這樣就可以了。 regex : “([0-9]{4}-[0-9]{6})?” 前後加上括號,然後用最未端的 問號 來表示 前面這串括號裡的文字可以不出現或出現一次。

  • 傳說中的 JavaScript parseInt('08')

    跟大部份的公司一樣,我服務的公司上下班也要打卡,但是身為軟體與網路服務公司,上下班時間是相對自由的,打卡只是計算週工時的依據,沒有遲到早退的罰則,每個月上交卡片的時候要先把週工時算好再給老闆過目。身為懶惰的工程師,自己寫了一個週工時計算程式也是理所當然的。(笑)

  • Bookmark: Pixastic, a JavaScript Image Processing Library

    Pixastic 是一款 JavaScript 影像處理函式庫,藉由 HTML5 對 Canvas 的像素操作能力來達到影像處理的機制。相當適合拿來做轉場特效,例如這個 HTML5 Canvas Slideshow 範例。 http://www.pixastic.com/lib/

  • Bookmark: MathJax

    MathJax 是 OPEN SOURCE 的 JavaScript 顯示引擎,可以將 LaTeX 與 MathML 語法轉換成數學公式。 http://www.mathjax.org/

  • How to Convert String to Slug

    在這個 SEO 當道的年代,簡單易懂的現代網址已經是基本常識了。根據 W3C 的網址規定,合法字元僅有 A – Z, a – z, 0 – 9, -, ., _, ~, :, /, ?, #, [, ], @, !, $, &, ‘, (, ), *, +, ,, ;  = ,而且橫線 ( – ) 之後都是有特別意義的保留字,所以過去常看到亂七八糟的亂碼網址,像是本文的標題不處理的話就變…. How%20to%40%20Convert%20String%20to%20Slug 雖然對電腦來說沒什麼差別,但是對人類來說卻是難以理解、難以記憶的無意義片段。

  • JavaScript: Convert Size In Bytes To Human Readable Format

    在程式中處理檔案的時候,時常碰到的就是檔案大小的顯示。在資料庫裡通常是以 bytes 為單位做紀錄,但是顯示到畫面上,看到 479247294213 bytes 這種天文數字任誰都很難理解它到底有多大。 將天文數字轉換成普通人能夠輕易閱讀的型式很重要,所以 bytes 在畫面上要轉成 MB 或 GB 這類的型式。KB、MB、GB 之間都是 2^10 = 1024 為一個級數,所以轉換原理只要用遞迴一直除以 1024,直到小於 1024 就轉換完了。 以下這個寫法稍微特殊一點,不過原理並沒有差太多,是在找資料的時候看到的,在此留個筆記。 <script> $(function(){ $(‘span’).html(bytesToSize(479247294213)); }); function bytesToSize (bytes) { var sizes = [‘Bytes’, ‘KB’, ‘MB’, ‘GB’, ‘TB’, ‘PB’, ‘EB’, ‘ZB’, ‘YB’]; if (bytes == 0) return ‘n/a’; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return…

  • jQuery Validation plugin: How to Use Regex as Rule?

    在網頁程式中,表單的處理一直是很繁瑣的一環,client 端要用 Javascript 先對使用者的輸入進行初步過濾,資料送到了 server 端還是要再過濾一次。「永遠不要信任使用者輸入的資料」是表單程式的準則。 為了網站的安全不可少的 SOP,結果便是程式設計師要為此付出許多時間撰寫過濾程式。為了減緩程式設計師的腦細胞死亡速度,借助第三方程式的功能也是很重要的課題。在網頁前端常會用 jQuery Validation plugin 來對使用者輸入的資料進行前處理,這個套件內建一些基本規則,像是必填 (required)、電子郵件 (email)、網址 (url)、數字 (digits) 等等,但偶爾還是需要自訂特殊規則。 還好 jQuery 這個套件提供開放的接口可以自訂功能,透過簡單的幾行程式就能用正規表達式 (regular expression, regex) 來指定規則。 // 建立名為 ‘regex’ 的自訂規則 $.validator.addMethod(“regex”, function(value, element, param) { // 強制加上 ^ 與 $ 符號限制整串文字都要符合      return value.match(new RegExp(“^” + param + “$”)); }); $(“#myForm”).validate({     rules: {// 定義規則       …