[JavaScript] 檢測瀏覽器支援度小技巧

想要知道某個功能能不能在瀏覽器中使用, 除了在網路上到處搜尋以外, 另有一個很簡單的方法。如下所述

[ASP.NET] 讓游標停駐在文字框最後一字

最近遇到一個小需求。原本我為了讓使用者方便, 在不使用 TimePicker 的情況下, 讓他們可以手動方式輸入日期時間 (若使用 DateTimePicker 之類的工具, 效率會減少十倍)。然後我又幫他們自動加入當天的日期 (因為在大多數情況下, 他們需要輸入的日期都是當天, 但是都不是現在時間), 例如 "2014/9/29 "。接著, 我又下了 autofocus 屬性, 當網頁載入後, 讓這個文字框自動成為焦點, 因為這是第一個必須輸入的欄位。如此, 他們只要輸入時間的部份就行了。

問題是, 他們每次要輸入時間時, 都必須再按一下滑鼠游標或者 End 鍵, 才能讓文字游標指到日期的後面, 這樣才能開始輸入時間。雖然這只是一個小工夫, 但是總讓人覺得討厭! 難道不能讓游標自動跑到最後面嗎?

在 JSON.NET 中自動對應 JavaScript 時間

JSON.NET 可以讓我們很方便地讀寫 JSON 字串並對應到 C# 類別。在大部份的時候我們都可以直接使用 SerializeObject() 和 DeserializeObject() 方法進行轉換。但是一旦遇到 JavaScript 日期, 這招可能就行不通了。因為有些 JavaScript 開發人員會使用一種特殊的 JavaScript 日期表示法 (不是 Date 型別, 而是 Int64 型別) 來代表日期

[ASP.NET] 在網頁上執行靜態 JavaScript 的超級小技巧

我想, 凡是已經寫 ASP.NET 很久的程式設計師, 一定都知道如何透過 RegisterStartupScript(key, script) 和 RegisterClientScriptBlock(key, script) 這兩種指令在頁面中插入動態的 JavaScript 程式。但是只有這種方法嗎?

以下, 我要示範一個「超級小」的技巧, 以更簡單的方式達到相同或類似的功能。只不過, 這種方式比較適合「罐頭」式的 JavaScript 指令, 也就是比較偏向靜態、很少改變的 JavaScript 程式。我將使用 ASP.NET 的網頁的 PostBack 機制, 讓已經寫好的 JavaScript 程式在網頁 PostBack 之後自動執行

JavaScript 中的日期比較問題

在我們在處理 JSON 的日期轉換時, 總會遇到轉得過去, 卻轉不回來的問題。這時候, 我們必須另外把日期字串進行重新格式化的動作。這個問題可以在 Stack Overflow 網站上找到現成的解答,  就是使用一個 dateReviver 函數, 當作 JSON.parse 方法的第二個參數。

JavaScript 的繼承與實作

我差不多是在十幾年前開始接觸 JavaScript 的。和許多那時候的程式設計師一樣, 我並沒有很認真的把 JavaScript 當作「正常」的程式語言來對待。我寫的程式主要是以 ASP.NET 搭配 VB.NET 為主, 後來改為 C#; 可以說從一開始就戴著物件導向的眼鏡。而那個時候我們都被教導說 JavaScript 並非 OOP, 所以我也從來不認為 JavaScript 是一種物件導向語言, 也因此, JavaScript 從一開始就被我當作玩具, 是工作之餘的娛樂

在 jQuery 自訂函式中實作 Optional Parameters

jQuery 的自訂函式事實上就是 jQuery 的外掛 (Plugin), 宣告的方式很簡單, 如下範例所示:

jQuery.f2c = function(fahrenheit) 
{ 
 return (fahrenheit-32) * 5/9; 
}

如此, 我們就建立了一個名字叫做 f2c 的外掛, 而且馬上就可以使用 $.f2c 予以呼叫:

JavaScript 字串處理效能分析

作為一個前端語言, JavaScript 天生就註定要比其它任何一種語言要處理更多的字串。如何才能更有效地處理字串, 想必也是每個程式設計師最關心的問題。最近, 我看到有人很堅持地在程式中把個別的字串以陣列元素方式宣告, 然後把它們 join 起來, 說這樣才能達到最佳的效能, 其速度遠比使用字串的加號運算來得快! 起初我也半信半疑, 直到我寫了一個程式來仔細分析為止。

如果你沒有耐心的話, 我可以先把我的結論寫出來。如果你對我的分析過程有興趣, 可以再往下閱讀。

我的結論就是, 使用陣列的 join() 並不一定比使用字串的加號運算來得快; 二者的運算速度坦白說差異並沒有很大, 而且跟瀏覽器有絕對的關係。

JavaScript 中的 Delegation

在物件導向理論中, 關於 Delegation (委託) 的概念, 有人說是由麻省理工學院 Media Lab 的首席研究員 Henry Lieberman 於 1986 年在 OOPLSA '86 Conference 中發表的一篇文章 ("Using prototypical objects to implement shared behavior in object-oriented systems") 裡面提出來之後, 才逐漸發揚光大。其實在這篇文章中, Lieberman 不只談到了委託, 他也談到了繼承。他同時提出了這兩種方法, 主要還是為了解決同一種問題 (亦即處理 "Shared Behavior" 的問題)。

使用 Timeline 自製噗浪式河道

Timeline 是一個 JavaScript 程式庫, 它並不是 jQuery 套件, 所以無需另外載入 jQuery 主程式(不過我檢查它的程式碼, 發現它實際上有調用 jQuery 1.7.1)。要如何解釋 Timeline 的功用, 這實在有點難; 但如果你是噗浪的愛用者, 那麼你馬上就可以心領神會。因為它使用起來幾乎跟噗浪一模一樣(只差不能留言跟按讚而已)!

基本上, 這個套件可以做出一個可以由左而右捲動的捲軸(以噗浪的術語稱為「河道」, 我以下也將稱之為河道), 並在其中顯示從你所給定的資料來源。當你選取一個資料時, 河道上方就會顯示較詳細的資料。不過它的時間軸方向跟噗浪相反。

[CSS3] 使用 CSS3 製作 HTML 小時鐘

在 CSS3 中, 增加了一個 transform 功能, 使得我們可以對網頁元件進行放大、縮小、平移、旋轉、扭曲等等效果。我在本文中要介紹的是其中的 rotate 效果, 而且運用它來製作一個完全使用 HTML 標籤加上 CSS3, 不使用任何圖片的小時鐘。

在我開始介紹這個時鐘小工具之前, 你不妨往本網頁的右邊看一下, 在側邊欄的 jlClock 就是我的作品 (僅適用於 IE10、Chrome、FireFox、Opera 與 Safari 等瀏覽器; IE9 及以下版本不適用)。

[ASP.NET] 離開表單時向使用者確認

當我們在網頁上設計了表單, 讓使用者填寫資料, 使用者通常有很大的機率會因為各式各樣的原因而意外地跳出頁面。如果表單很簡單, 或者使用者根本還沒有填寫什麼資料, 那麼使用者就算不小心離開頁面, 也不會有什麼損失。但是如果使用者已經填寫了很多資料 (例如姓名、地址、電話等等), 但是在他按下確認按鈕之前, 卻不小心按到上一頁、下一頁、關閉分頁、關閉視窗等按鈕, 那麼不管他使用何種方式回到這一頁, 他曾經填寫的資料可能都無法救回來。

[入門文章][JavaScript][jQuery] jQuery 從頭學起

本來是不打算寫任何關於 jQuery 的入門文章了, 因為這種資訊在網路上俯拾皆是, 甚至都泛濫了。然而在實際使用時, 發現 jQuery 的精簡語法在彼此之間也實在太相像了, 如果不自己做個筆記以供隨時速查, 總是記不住。所以, 還是寫個一篇或是幾篇拿來放著, 想查閱的時候也方便。