跳到主要內容

發表文章

目前顯示的是 4月, 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開發,也建議從版面最簡單的行動版本開始,逐步拓展到較複雜的介面