Category: 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: highlight.js, Syntax highlighting for the Web
最近在寫專案的技術文件，很不愛用 Word 的我理所當然地選用 HTML 格式來寫，對我來說這樣比較容易調整格式。再強調一次，用 Word 撰寫的技術文件超級難以閱讀，請大家唾棄這種作法。 雖然 Markdown 也不錯，但處理 <table> 或是 <iframe> 總是沒那麼順手，所以我還是慣用 HTML 編寫。 文件中包含了幾段程式碼範例，雖然不是必要，但總覺得沒弄個語法上色的效果，一點都不好閱讀… 所以搜尋了一下有沒有輕量級的 syntax highlight 套件。 我之前都是用 SyntaxHighlighter 套件，但總覺得語法和速度都太笨重了些，想換別的套件試試。結果找到這款 highlight.js。 功能比 SyntaxHighligter 要少，例如…. 沒有行號 (line number) 的功能。不過有多種 theme 可以選，支援的語言種類也非常豐富。就決定採用了 !
-
Bookmark: amCharts, an advanced javascript charting library
朋友提供的 JavaScript 圖表套件，還沒試過，先筆記一下。 我之前都是用 HighCharts 製作動態圖表。 http://www.amcharts.com/
-
Get the markup of an element, including itself using jQuery
接手同事的 code，需要接續 AJAX 的資料對前端頁面進行更動。 假設一段 html code 如下： <div id=”container” class=”wrapper”> <div id=”one”>test 1 </div> <div id=”two”>test 2 </div> <div id=”three”>test 3 </div> <div id=”four”>test 4 </div> </div> 以下 jQuery 語法可以其得其中的 html 元素： $(‘#container’).html(); 不過卻不包含 <div id=”container”> 本身，如果要取得包含自身的 html，應改為如下： $(‘#container’).get(0).outerHTML; 注意不論是取 $(‘.wrapper’) 還是 $(‘#container’) 都要用 get(0) 指定 DOM 元素。
-
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
-
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>’));
-
Knockout JS: Filter an Array
雖然只在兩個小型專案中使用過 Knockout JS，儘管語法稍嫌囉嗦了點，但能大幅減少前端頁面互動功能開發的難度。 最近碰到一個功能是頁面載入後，透過 AJAX 向 Server 端取回 JSON 資料，接著用 KO 顯示成列表。需求是能像 Mac OS 的 Spotlight 那樣，輸入文字即時顯示搜尋結果。 因為這串資料的變動頻率不高，所以從 KO 的 observableArray 過濾就可以了。
-
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/