Category: 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: highlight.js, Syntax highlighting for the Web

Posted by – July 17, 2014

最近在寫專案的技術文件,很不愛用 Word 的我理所當然地選用 HTML 格式來寫,對我來說這樣比較容易調整格式。再強調一次,用 Word 撰寫的技術文件超級難以閱讀,請大家唾棄這種作法。

雖然 Markdown 也不錯,但處理 <table> 或是 <iframe> 總是沒那麼順手,所以我還是慣用 HTML 編寫。

文件中包含了幾段程式碼範例,雖然不是必要,但總覺得沒弄個語法上色的效果,一點都不好閱讀... 所以搜尋了一下有沒有輕量級的 syntax highlight 套件。

我之前都是用 SyntaxHighlighter 套件,但總覺得語法和速度都太笨重了些,想換別的套件試試。結果找到這款 highlight.js

highlightjs_web

功能比 SyntaxHighligter 要少,例如.... 沒有行號 (line number) 的功能。不過有多種 theme 可以選,支援的語言種類也非常豐富。就決定採用了 !

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

Get the markup of an element, including itself using jQuery

Posted by – January 6, 2014

接手同事的 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

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

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>'));

Knockout JS: Filter an Array

Posted by – May 7, 2013

雖然只在兩個小型專案中使用過 Knockout JS,儘管語法稍嫌囉嗦了點,但能大幅減少前端頁面互動功能開發的難度。

最近碰到一個功能是頁面載入後,透過 AJAX 向 Server 端取回 JSON 資料,接著用 KO 顯示成列表。需求是能像 Mac OS 的 Spotlight 那樣,輸入文字即時顯示搜尋結果。

mac_os_x_spotlight

因為這串資料的變動頻率不高,所以從 KO 的 observableArray 過濾就可以了。

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 那行刪除就正常了。