JavaScript String Replace All

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

繼續閱讀 JavaScript String Replace All

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 事件來解決。

繼續閱讀 JavaScript 操作瀏覽器歷史紀錄、修改網址與上一頁事件(SPA 必備)

湊整數實作思路與方法

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

繼續閱讀 湊整數實作思路與方法

JavaScript Page Load、Focus、UnFocus、Exit Event

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

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

繼續閱讀 JavaScript Page Load、Focus、UnFocus、Exit Event

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

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

繼續閱讀 使用 JavaScript 操作剪貼簿複製文字

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

當你用 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 才行。 繼續閱讀 Enable Cross-Origin Resource Sharing (CORS) for Phaser.js

【jQuery】Lazyload – 延遲圖片載入

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

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

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