JavaScript on Lin's Blog

Vue.js Render Object as Table in Beautiful Way

Fri, 17 Mar 2017 01:39:34 +0000

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?

How to Prevent JS Input onFocus Event Fire After Page onFocus

Thu, 16 Feb 2017 11:27:59 +0000

最近的工作是在網站中置入 Google Analytics 的使用者事件追蹤程式碼，我透過 HTML Event 的做法將程式碼掛在 Input 上面，只要使用者點擊特定的欄位、按鈕就會發送一筆記錄到 Google Analytics，這樣的做法沒有什麼問題，但我發現當使用者點擊 Input 欄位後如果切換到其他網頁（Chrome Tabs），當使用者在切換回我的頁面（Page onFocus）時，Input onFocus 事件卻被自動觸發了！

JavaScript 判斷變數是否等於 NaN

Tue, 14 Feb 2017 22:44:05 +0000

在 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 自動加上提醒文字或禁用複製！

Sun, 12 Feb 2017 23:43:41 +0000

在許多內容網站，都會有所謂的「複製時自動加上原文網址」機制，例如魔境歌詞網、知乎等等，更有的網站直接禁止使用者複製文字，要達到這些功能不困難，只需要幾行簡單的 JavaScript 語法，但需要思考網站是否真的需要加入這樣的功能，當正常訪客複製並轉貼文字到 Facebook，對網站真的造成損害了嗎？此外如果真的要防止訪客複製文字，光憑著這些防君子不防小人的手法，到底是保護了利益還是讓網站變得更難使用？

JS 前端處理檔案上傳之預覽、大小、尺寸、格式

Thu, 09 Feb 2017 13:44:33 +0000

在上傳檔案時，最討厭的莫過於檔案上傳了 5 分鐘後才跟我說檔案過大或尺寸不正確！在檔案上傳的驗證我們往往交給後端處理，導致檔案需要上傳後才能確認是否符合規定，特別是圖檔還有長寬比例的問題需要檢查，這些事情如果完全交給後端，就可能導致用戶體驗不佳，之前在新頭殼研究大頭貼上傳時，發現原來完全可以將這些事情交給前端處理，透過 JS 和 HTML5 API 做到檔案上傳的格式、大小(20MB)、尺寸(100x100) 檢查，甚至還可以做到預覽、前端切圖轉檔等等！

JavaScript 計算函式執行時間

Tue, 24 Jan 2017 18:56:38 +0000

要在 JavaScript 計算函式的執行時間，可以用現在的 Timestamp 和函式執行後的 Timestamp 相減，即可獲得執行時間，大多數人都會用 new Date().getTime() 來取得時間戳，但如果你的函式執行時間小於 1 毫秒，就會因為 Timestamp 最小單位只到毫秒而無法計算執行時間，因此在這建議使用 Window.Performance API，它可以提供從網頁載入到現在的豪秒數，精確度到千分之一毫秒。

JavaScript String Replace All

Mon, 16 Jan 2017 01:20:29 +0000

在 JavaScript 使用 String.replace 時要注意它可能和你預期的行為不同，當你想取代某個字串時，你會發現 replace 只取代了第一個字串，例如 “AAA”.replace(“A”, “B”)，你預期會得到 “BBB” 但實際上你會得到的是 “BAA”，這是因為 JS replace 的第一個參數其實是 Regex 而非字串，如果你輸入字串，就只會取代第一個遇到的字串，導致和預期不同的問題。

JavaScript 操作瀏覽器歷史紀錄、修改網址與上一頁事件（SPA 必備）

Sat, 14 Jan 2017 12:59:02 +0000

在 JavaScript 當道的今日，使用 JS 進行網頁的操作如 Ajax、頁面切換、彈出視窗等等越來越常見，甚至進一步出現了 React JS、Vue JS 等可以幫助你開發 Single Page Application (SPA) 的 JS Framework；在使用 JS 進行網頁操作時最怕的問題莫過於網址的變化與歷史紀錄，例如透過 jQuery 進行頁面切換後，因為是 JS 的行為所以網址不會變化，而且當使用者按下瀏覽器左上角的上一頁時，會直接回到別的頁面，因為在歷史紀錄裡面不會紀錄 JS 的操作（事實上也無法紀錄），要解決這一系列問題，可以透過 HTML5 提供的 history.pushState、history.replaceState 以及 onpopstate 事件來解決。

湊整數實作思路與方法

Wed, 11 Jan 2017 23:30:33 +0000

前陣子在嘖嘖看到「湊整數」功能，比如結帳時 1359 元，按下湊整數按鈕後會變成 1400 元，這其實是個蠻有趣的功能，但實作時才發現湊整數並不好做，有很多非技術面的顧慮，這邊就紀錄我在實作所遇到的問題、過程以及最後的解法吧！

JavaScript Page Load、Focus、UnFocus、Exit Event

Tue, 03 Jan 2017 20:43:11 +0000

用 JavaScript 記錄使用者何時進入網頁我想大家都會，但你有想過如何判斷使用者「關閉」網頁嗎？甚至現在的瀏覽器都是用 Tab 的形式呈現多個網頁，有沒有可能使用者其實是在看別人的網頁，而你的頁面只是掛著呢？例如 Youtube 就常遇到這問題，使用者把頁面放著聽歌，但實際上卻是在看 Facebook…。

今天這邊簡單記錄用 JS 頁面的載入、關閉事件，以及進入頁面(focus)、離開頁面(unfocus)事件，透過這些事件，可以記錄使用者的操作狀況供分析，甚至是當使用者跳離網頁時停止播放音樂等行為都可以達成。

使用 JavaScript 操作剪貼簿複製文字

Sat, 10 Dec 2016 15:19:09 +0000

在過去想要用 JavaScript 操作剪貼簿進行複製、貼上的動作十分麻煩，之前在開發 NTUST.ME 臺科短網址時，為了方便大家複製縮短後的網址，特別研究了 JavaScript 對剪貼簿操作的 API，發現在較新版的瀏覽器，其實有一個 execCommand 可以進行許多方便的文字操作，例如複製、全選等等，以下就讓我來介紹一下吧！

Enable Cross-Origin Resource Sharing (CORS) for Phaser.js

Fri, 02 Dec 2016 14:01:31 +0000

當你用 Phaser JS 載入不同網域的資源、素材時，就會遇到瀏覽器同源政策的阻擋，並冒出一堆錯誤訊息，例如：

XMLHttpRequest cannot load http://s.ntustcoding.club/scroll-game-workshop/map.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

實際上，Phaser 本身是有支援跨來源資源共享 CORS 的，只要透過一行簡單的語法就可以解決囉，當然前提是你所使用的網路空間也有支援 CORS 才行。

【jQuery】Lazyload - 延遲圖片載入

Wed, 27 Apr 2011 19:15:30 +0000

在攝影類的網站通常會放很多的圖片，當訪客瀏覽這類網站時就要開啟蠻久的，因為要載入很多的照片，這對於網站主機的流量影響蠻大的，而且會造成訪客瀏覽時的CPU Time增加很多，在這裡要介紹一套叫做Lazyload的jQuery插件，它可以延遲圖片的載入，也就是說當你進入到一個網站時，並不會一次載入所有的圖片，而是只載入一部分的圖，當你拉動瀏覽器的捲軸時，它會載入「你正在看的區塊的圖片」，所以網頁的載入速度就會變得比較快

透過jQuery.qrcode直接在瀏覽器產生QR Code

Fri, 08 Apr 2011 15:42:44 +0000

要繪製QR-Code有很多種方法，可以自己寫函式去繪製，也可以使用別人提供的API來繪製，例如使用Google Chat API來產生QR Code就是用API的方法，而在這篇文章要講的jquery.qrcode則是使用別人撰寫好的函式來產生條碼，原本我搞不清楚jquery.qrcode與Google Chat API的差別，後來才知道Google Chat API是將資料送到Google的伺服器上產生，而jquery.qrcode則是直接由瀏覽器來進行匯製