In Vue.js we can use v-for to render Array as HTML Table or List beautifully, but If we want render Object key and value as Table, for example, I use JS Object and Array to store many Contact info, each Contact have different key, I want display Contact 1 info in a table, It seems v-for not good at here?
標籤: JavaScript
How to Prevent JS Input onFocus Event Fire After Page onFocus
最近的工作是在網站中置入 Google Analytics 的使用者事件追蹤程式碼，我透過 HTML Event 的做法將程式碼掛在 Input 上面，只要使用者點擊特定的欄位、按鈕就會發送一筆記錄到 Google Analytics，這樣的做法沒有什麼問題，但我發現當使用者點擊 Input 欄位後如果切換到其他網頁（Chrome Tabs），當使用者在切換回我的頁面（Page onFocus）時，Input onFocus 事件卻被自動觸發了！
閱讀全文 How to Prevent JS Input onFocus Event Fire After Page onFocus
JavaScript 判斷變數是否等於 NaN
在 JavaScript 實在有太多奇怪的眉眉角角了，今天因為把字串轉數字用到 parseFloat，如果進去的參數無法轉成數字則會回應 NaN (Not a Number)，我就寫了如下語法來判斷：
var score = parseFloat(prompt("Score:"));
if(score === NaN) {
console.log("Not a Number");
} else {
console.log(score);
}
這段程式碼乍看之下理所當然，就像 undefined、null 一樣可以直接相等運算，誰知道完全不如預期。
怕訪客複製你的文章嗎？ 讓 JS 自動加上提醒文字或禁用複製！
在許多內容網站，都會有所謂的「複製時自動加上原文網址」機制，例如魔境歌詞網、知乎等等，更有的網站直接禁止使用者複製文字，要達到這些功能不困難，只需要幾行簡單的 JavaScript 語法，但需要思考網站是否真的需要加入這樣的功能，當正常訪客複製並轉貼文字到 Facebook，對網站真的造成損害了嗎？ 此外如果真的要防止訪客複製文字，光憑著這些防君子不防小人的手法，到底是保護了利益還是讓網站變得更難使用？
JS 前端處理檔案上傳之預覽、大小、尺寸、格式
在上傳檔案時，最討厭的莫過於檔案上傳了 5 分鐘後才跟我說檔案過大或尺寸不正確！ 在檔案上傳的驗證我們往往交給後端處理，導致檔案需要上傳後才能確認是否符合規定，特別是圖檔還有長寬比例的問題需要檢查，這些事情如果完全交給後端，就可能導致用戶體驗不佳，之前在新頭殼研究大頭貼上傳時，發現原來完全可以將這些事情交給前端處理，透過 JS 和 HTML5 API 做到檔案上傳的格式、大小(20MB)、尺寸(100×100) 檢查，甚至還可以做到預覽、前端切圖轉檔等等！
JavaScript 計算函式執行時間
要在 JavaScript 計算函式的執行時間，可以用現在的 Timestamp 和函式執行後的 Timestamp 相減，即可獲得執行時間，大多數人都會用 new Date().getTime() 來取得時間戳，但如果你的函式執行時間小於 1 毫秒，就會因為 Timestamp 最小單位只到毫秒而無法計算執行時間，因此在這建議使用 Window.Performance API，它可以提供從網頁載入到現在的豪秒數，精確度到千分之一毫秒。
JavaScript String Replace All
在 JavaScript 使用 String.replace 時要注意它可能和你預期的行為不同，當你想取代某個字串時，你會發現 replace 只取代了第一個字串，例如 “AAA”.replace(“A”, “B”)，你預期會得到 “BBB” 但實際上你會得到的是 “BAA”，這是因為 JS replace 的第一個參數其實是 Regex 而非字串，如果你輸入字串，就只會取代第一個遇到的字串，導致和預期不同的問題。
JavaScript 操作瀏覽器歷史紀錄、修改網址與上一頁事件（SPA 必備）
在 JavaScript 當道的今日，使用 JS 進行網頁的操作如 Ajax、頁面切換、彈出視窗等等越來越常見，甚至進一步出現了 React JS、Vue JS 等可以幫助你開發 Single Page Application (SPA) 的 JS Framework；在使用 JS 進行網頁操作時最怕的問題莫過於網址的變化與歷史紀錄，例如透過 jQuery 進行頁面切換後，因為是 JS 的行為所以網址不會變化，而且當使用者按下瀏覽器左上角的上一頁時，會直接回到別的頁面，因為在歷史紀錄裡面不會紀錄 JS 的操作（事實上也無法紀錄），要解決這一系列問題，可以透過 HTML5 提供的 history.pushState、history.replaceState 以及 onpopstate 事件來解決。
湊整數實作思路與方法
前陣子在嘖嘖看到「湊整數」功能，比如結帳時 1359 元，按下湊整數按鈕後會變成 1400 元，這其實是個蠻有趣的功能，但實作時才發現湊整數並不好做，有很多非技術面的顧慮，這邊就紀錄我在實作所遇到的問題、過程以及最後的解法吧！
JavaScript Page Load、Focus、UnFocus、Exit Event
用 JavaScript 記錄使用者何時進入網頁我想大家都會，但你有想過如何判斷使用者「關閉」網頁嗎？ 甚至現在的瀏覽器都是用 Tab 的形式呈現多個網頁，有沒有可能使用者其實是在看別人的網頁，而你的頁面只是掛著呢？ 例如 Youtube 就常遇到這問題，使用者把頁面放著聽歌，但實際上卻是在看 Facebook…。
今天這邊簡單記錄用 JS 頁面的載入、關閉事件，以及進入頁面(focus)、離開頁面(unfocus)事件，透過這些事件，可以記錄使用者的操作狀況供分析，甚至是當使用者跳離網頁時停止播放音樂等行為都可以達成。