pCloud Partner Program

[Javascript]實作表單送出後的換頁提醒

程式技術/Javascript 2018/05/23 10:28
views: 88173 times
一般在表單送出後, 若非本頁更新的方式, 而是走 AJAX 方式送出時, 需要一定處理時間等待 server 回應的作業, 若是使用者未能完成執行完成, 而進行更換頁面時, 造成之前表單送出異常或失敗, 此時可以考慮使用這個功能來防止使用者不小心重載(reload), 或是離開頁面. 另一個狀況則是目前表單還未送出時, 但已修改, 如部落格文章編輯時, 已進行修改但未送出, 也是可以使用這個功能來達成.

這個功能是對 window 綁定一個 beforeunload 的事件(其實也就是 addEventListener 或是使用 onbeforeunload 皆可), 不過實測因各家瀏覽器工作方式不同, 無法成功設定自定訊息, 只能由瀏覽器的預設訊息提醒, 在一般狀況使用下, 沒太大問題. 使用方式如下:


其中的訊息請忽略, 因為實際上會出現的訊息與各瀏覽器有關, 但特別要注意的地方是若是已知可以 reload 或送出成功後, 記得要取消, 才不會因為真的成功後, 要重導頁面時, 又出現需要使用者確認的訊息.

以下為在 codepen 的範例:
https://codepen.io/timhuang/pen/YLgvXJ

測試方式為, 先點 bind 後, 成功綁定事件, 再點下方 codepen 連結離開, 此時會出現確認訊息, 來防止或確認離開, unbind 則是在 bind 之後, 再 unbind 就不會觸發這個 beforeunload 確認.

繼續閱讀:
https://sinaad.github.io/xfe/2016/06/29/beforeunlod-vs-unload/
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload


top

[FUN]知道720p, 1080p, 1080i, 4k有什麼不同嗎?

程式技術/Javascript 2018/03/23 12:16
views: 79567 times
這張梗圖很有趣:




但利用 javascript 如何實作呢? 是個實用的小題目, 來看看程式吧:


執行結果:
https://codepen.io/timhuang/pen/MVoOdK
top

javascript跨瀏覽器解析日期時間字串問題

程式技術/Javascript 2017/03/01 16:25
views: 167113 times
在前端使用 javascript 解析日期時間字串時, 在不同瀏覽器有不同的解讀, 我們來看一下:

2017-03-01T16:00:00

這個字串若是以 Firefox 與 IE 來解讀, 是 localtime, 若是以 Chrome 來解讀則是 GMT, 測試網址如下: https://jsfiddle.net/timhuang/8paLsfyr/2/

若是希望都是以 GMT 來解讀, 可以多加一個 Z 在字串的最後, 如: 2017-03-01T16:00:00Z 就會讓各瀏覽器取得一樣的 GMT 結果, 測試網址一下在上面.

所以若是在前端, 使用 javascript 處理日期時間字串時, 一定要理解與清楚這個狀況, 否則可能會有跨瀏覽器不一致的狀況.

參考資料: http://stackoverflow.com/questions/15109894/new-date-works-differently-in-chrome-and-firefox


top

querySelector - javascript的查詢選擇器

程式技術/Javascript 2016/01/08 11:35
views: 121662 times
在有 jQuery 環境下, 操作選擇器很直覺, 不過沒有 jQuery 時, 如何進行相關的作業呢? 以下幾組為可能會用到的指令:

1. document.getElementById 指定 id 來取得該物件 (唯一)
2. document.getElementsByTagName 指定 html tag 來取得該物件陣列 (通常為多個)
3. document.getElementsByClassName 指定 class name (可多組 class name 一起) 來取得該物件陣列 (通常為多個)
4. document.querySelector 使用 css selector 來取得該物件 (注意, 僅傳回符合條件的第一筆)
5. document.querySelectorAll 使用 css selector 來取得該物件陣列 (符合條件的多筆)

當物件被選擇出來後, 就可以進行操作了, 操作的方式可以再參考這裡:

http://www.w3schools.com/jsref/dom_obj_all.asp

在沒有 jQuery 的狀況下, 也能順利選擇物件, 並進行操作了.

top

有趣的trackingjs javascript framework

程式技術/Javascript 2015/11/27 14:11
views: 84689 times
這個利用 javascript 寫的 tracking js 用來做許多視訊與圖形辨識上的應用, 官方介紹在這裡:

http://trackingjs.com/

來看看他的應用有哪些:

1. 相片裡的人臉辨識 http://trackingjs.com/examples/face_tag_friends.html 像 facebook 裡的標記朋友那樣的功能.
2. 人臉的眼、口辨識: http://trackingjs.com/examples/face_hello_world.html
3. 動態的人臉追蹤, 這是從 webcam 動態追蹤人臉: http://trackingjs.com/examples/face_camera.html
4. 相片的顏色辨識: http://trackingjs.com/examples/color_hello_world.html
5. 從 webcam 的影像做顏色辨識: http://trackingjs.com/examples/color_camera.html
6. 從 video 中的影像做顏色辨識: http://trackingjs.com/examples/color_video.html

還有很多其他型式的應用, 簡單來說, 這個 framework 把原本是在應用程式中才能做的特殊影像辨識技術應用在 browser 裡的 javascript 來達來, 目前比較會有問題的是在效率的問題, 不過若是未來 browser 強化與隨著 cpu 等級提升, 相對這些也就都不會是問題了.

快來玩看看吧.
top

[json]如何讀取含有減號的json key

程式技術/Javascript 2014/10/29 00:38
views: 228433 times
剛在撰寫程式碼時, 發現要取回 aws cloudsearch 中的搜尋使用時間, 其傳回的 json 參數中, 使用了減號, 該鍵值為 time-ms , 其實很直覺地要使用, 但又覺得怪怪的, 一執行馬上就有問題.

因為原來的 jsonObj.time-ms 會被視為 jsonObj.time - ms , 所以必須調整寫法, 正確寫法如下:

jsonObj["time-ms"]

這樣就可以了, 當然, 該回應的 json 中, 該鍵值(key)也必須是使用引號包起來的, 否則該 json 物件也會有問題.

測試程式碼如下:



會回應 value2 這樣就對了.

參考資料:
http://stackoverflow.com/questions/13869627/unable-to-access-json-property-with-dash

top

在nodejs中發起json post的字元長度問題

程式技術/Javascript 2014/09/22 23:24
views: 186354 times
在 nodejs 專案中, 若是需要對外發起使用 application/json 的 http post , 若有中文字, 需要注意計算字串長度的問題. 一般發起的程式碼請參考:

http://tech.pro/tutorial/1091/posting-json-data-with-nodejs

不過該範例是使用英文字, 所以沒有問題, 若是要發起中文字的 json http post, 需要調整計算 Content-Length 的方式, 使用 new Buffer(str).length, 如下:


參考資料: http://cnodejs.org/topic/50616f5301d0b801482695cf
top

.net WebBrowser的script error抑制

程式技術/.NET 2014/02/14 09:57
views: 486161 times
在 window form中使用 webbrowser 時, 有時會遇到 javscript error 的訊息, 此時會出現需要使用者介入的操作, 程式才能繼續執行下去.

這樣對於一些自動化操作的程式會有停止無法執行的問題, 所以可以利用一個 webbrowser 的屬性 "ScriptErrorsSuppressed" 設為 True 即可抑制這個會出現的人機介面.

不過記得使用這個屬性, 後續的程式也得注意網頁程式的異常後, 如何做良好的控制, 才不會因為這個屬性設定後, 雖然程式可以繼續往下執行, 但 webbrowser 中的程式錯誤而產生非預期結果的狀況, 就不好了.

參考資料: http://stackoverflow.com/questions/8009575/c-sharp-webbrowser-how-to-get-rid-of-javascript-error-prompt
top

反向排序內容(倒排)

程式技術/Javascript 2013/03/09 22:47
views: 185717 times
今天在整理 http://sample.diary.tw/ 時, 發現 sample 愈來愈多了, 而且內容是由舊往新排, 想說把它反過來排, 新的放在上面, 舊的在下面.

由於內容不多, 把 <li> 手動一筆筆排一下應該不會花太多時間, 不過又想到應該是要用指令來才有效率才對, 於是想說用 sort 指令來操作, 發現 sort 功能強大, 要用來做倒排反而不是很快速方便.

乾脆又來動手寫個小程式好了(又是一個 sample): http://sample.diary.tw/31/1.htm 只利用了 javascript 的 array 功能, 馬上就寫好了一個反向排序功能(倒排功能), 用法很簡單, 就是把文字內容貼進去, 按下[反向排序]按鈕, 就會倒排完成.

程式如下:


前三行可以簡化為最後一行, 簡單說明, 就是把 textarea 內容取出, 用換行 split分割為陣列, 再用 reverse 倒排後, 再利用 join 用換行合併, 塞回去原本的 textarea 完成.

所以現在的 http://sample.diary.tw/ 是由新到舊排了!
top

強大的HTML5離線作業

程式技術/Javascript 2012/10/25 16:58
views: 127153 times
HTML5裡令人驚豔的一項特性就是可以離線瀏覽功能.

利用這項功能, 可以很容易地讓網頁在沒有網路的環境下, 也能順利讓使用者閱讀及使用, 而且實作上也相當單純, 只需要注意寫好更新網頁的邏輯及時間點即可.

一般來說, 只需要把 manifest 設定好, 基本的離線瀏覽功能就差不多完成了, manifest 的設定容易, 就是把"要"在離線瀏覽的網頁及內容, 寫在 manifest 裡, 例如網頁是

http://test.com/mypage.htm

內容有一個 js/myjs.js
另外還有兩張圖為 imgs/1.jpg 及 imgs/2.jpg

則在 mypage.htm 中的 html tag 裡, 多加上 manifest="mypage.manifest" 而且在 mypage.manifest 中, 加上以下內容(純文字):

CACHE MANIFEST
mypage.htm
js/myjs.js
imgs/1.jpg
imgs/2.jpg


這樣就完成了. 有意思的地方是即使用 mypage.php 這樣的動態內容, 一樣可以利用這樣的方式將內容存在客戶端中.

如此一來, 即使在沒有網路的狀況下, 也可以順利瀏覽這個網頁內容 http://test.com/mypage.htm

接下來要說明的是更新方式, 一旦寫入到客戶端的內容, 即使原本的 mypage.htm 更新, 就算是有連線時, 該內容也不會更新(而且即使是動態的 aspx, php 等也都是一樣的), 簡單地說, 在 manifest 中的內容, 就是完全使用客戶端的內容, 不管 server 上的內容, 更新的方式就是更新 manifest 的檔案, 瀏覽器會檢視 manifest 內容來進行更新, 而且會自動更新(在線上時的第一次讀到 manifest 更新時, window.applicationCache.status 會變成狀態 4 (window.applicationCache.UPDATEREADY), 此時可以手動更新, 使用 window.applicationCache.update(); 即可做手動更新, 即使在這次的訪問不更新, 在下一次的訪問時, 瀏覽器也會自動更新.

利用這點, 就可以很容易地實作出離線瀏覽內容的網頁.

若希望只更新這些快取內容, 最簡單的作法是在 mypage.manifest 中, 多加個時間或版本號, 如下:

CACHE MANIFEST
#VER 000151

mypage.htm
js/myjs.js
imgs/1.jpg
imgs/2.jpg

其中的 # 代表著這行為註解, 所以可以自由寫入內容, 上例是寫個版本號 000151, 若要強迫客戶端更新時, 可以將這個 manifest 檔的版本號改為 000151 (若其他內容都可以), 這樣就可以方便容易地來維護在客戶端離線的內容更新.

這裡有一篇很清楚的介紹文, 可以參考
http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

另外, 配合良好的設計結構, 可以將離線/在線的功能都實作出來, 方便在無法連線時, 也能使用的網頁, HTML5 的這個功能, 的確非常強大!

在實作測試時, 發現若是有設定 manifest 的網頁, 有些瀏覽器對有些 server request 即使沒有設定在 manifest 中, 也會有快取或存取的異常狀況, 建議在 manifest 的最後, 再多加上

NETWORK:
*

這兩行, 可以讓不正常工作的 server request 正常運作.

相關資料:
http://diveintohtml5.info/offline.html

w3c 的資料:
http://www.w3.org/TR/html5/offline.html

Apple Safari的資料:
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

top




DJI Tello 小米萬能遙控器 手機App操控
Microsoft Office 365 中文家用版PKC (無光碟) ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U
美國 VORNADO 533 渦流空氣循環機 (黑色) 御茶園 每朝健康綠茶(650mlx24入)
每朝健康 雙纖綠茶(650mlx24入)


 Waiting...