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
朋友提供的 JavaScript 圖表套件，還沒試過，先筆記一下。 我之前都是用 HighCharts 製作動態圖表。 http://www.amcharts.com/
-
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
用 CSS 和 Javascript 製作數字轉動的效果，還沒用過，先留個書籤。 CSS Number Scroll
-
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
忘了是什麼時候知道有 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: {// 定義規則 …