跳到主要內容

發表文章

目前顯示的是 四月, 2013的文章

HTML 元素的 tabindex 屬性

在網頁上填寫資料時,常用 Tab 鍵來切換要輸入的欄位
而如果填寫資料有特定的順序,或切換欄位的順序需要調整
可以設定元素的 tabindex 屬性來滿足需求

<input type="text" tabindex="1">
<input type="text" tabindex="3">
<input type="text" tabindex="2">

大家可以試試上面的程式碼(線上範例)
按Tab鍵切換輸入的欄位會依照 tabindex 的大小順序變化
而一份HTML文件中每個 tabindex 都只能有一個元素擁有
如果有複數的元素指定了相同的 tabindex ,則只有最後指定的元素的 tabindex 會成立
在JavaScript中要設定此屬性使用 element.tabIndex

JavaScript 解析網址列字串取得location物件參數

參考文章:Parsing URLs with the DOM!

Javascript中的全域物件 location 中帶有許多方便的參數,讓我們能方便取用
例如:
location.pathname 可以取得當前URL的路徑字串
location.hostname 可以取得當前URL的主網域路徑字串
另外location物件還解析了更多URL的特性

如果要讓網址列字串一樣可以解析出這些參數,需要一點小技巧,透過 <a> 元素來實現

var a = document.createElement('a');
a.href = "http://www.google.com.tw/reader/view/#overview-page";

a.protocol     //"http:"
a.hash           //"#overview-page"
a.hostname    //"www.google.com.tw"
a.pathname   //"/reader/view/"

偵測瀏覽器版本

JavaScript的全域變數 navigator.userAgent 是現在判斷瀏覽器版本的依據
它最一開始是被瀏覽器用來標示支援的標準
隨著瀏覽器的演化,同個支系的瀏覽器很可能已經跟祖先支援的標準沒什麼關係了
但是基於相容性的考量,以前的userAgent的內容也往往會被繼承,並添上新的標準的標示
以Chrome的userAgent為例
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31"

"KHTML"是最早期的瀏覽器標準之一,已經跟現代瀏覽器的標準沒什麼關係了
"Safari"也是Chrome剛推出時,為了標明相容Safari的標準規格而加上去的
其餘的標示依此類推,可以知道userAgent並不是那麼明確
特別是行動版本的瀏覽器因實作廠商眾多,userAgent更是混亂
要判斷行動瀏覽器版本可參考之前的文章

雖然userAgent並不是完全符合瀏覽器的狀況,但要判斷瀏覽器版本也只能靠它了
以下實作簡單的判斷瀏覽器的版本

JavaScript DOMContentLoaded 事件使用

這個事件很接近JQuery的 ready() function,是HTML5規格的新事件
事件的執行時間可參考下圖


一般常見到將要在文件載入時就立刻執行的程式碼寫在onload事件裡
但onload事件的發生時機是在整份HTML文件載入完成,包含圖片等額外資源
如果那些資源很龐大,則會延遲事件的執行時間,並會讓使用者看到未處理過的頁面

DOMContentLoaded事件則是在 DOM載入完成後發生
在過去要做到相同的效果,常見作法是將script寫在HTML文件的最下方
另外也有一些要繞點遠路的做法,或是乾脆使用framework
隨著HTML逐步地擴展規格,倚賴framework的需求也逐漸下降
實際的使用方式如下,並附上相容舊瀏覽器的作法

Java 物件容器筆記

在Java裡,對於物件的收集、處理有兩種不同的概念
1.Collection -
   收集物件並形成一個具有相同處理規範的物件集合
   List 在收集物件時會記錄其索引順序,所以可藉由索引取回物件
   Set 會過濾掉已經收集過的物件,形成一組不重複的物件集合
   Queue 以佇列的形式收集物件,對於佇列兩端的物件有較方便的操作

2.Map -
   Map是一群成對的key-value物件,讓使用者可以透過另外一個物件查詢目標值
   對於物件集合,提供了搜尋的方便性

Responsive Web Design

Responsive Web Design,簡稱RWD
這是這幾年行動裝置興起後,才變的熱門的設計方式
讓網站能依照裝置的解析度而呈現不同的排版、外觀
好處是寫一份HTML就能對應各種瀏覽平台,比起開發Native App的成本來的低
如果要轉換成原生App也有PhoneGap等框架可以選擇

但是不管怎樣的設計方式,如何帶給使用者最好的瀏覽體驗
RWD比起一般設計有更多的考量,例如:
1.在mobile平台上不會有 hover 的行為存在
2.mobile平台上的操作多以點擊(click)的方式進行
  也要思考如何提供一個簡化的操作流程,增進使用者在行動平台的易用性

也因為開發出一份符合各種平台的使用習慣的設計並不簡單
所以不是一昧的在開發上選擇RWD就好了,須依需求選擇開發方式
如果選擇RWD開發,也建議從版面最簡單的行動版本開始,逐步拓展到較複雜的介面