pCloud Partner Program

Google Analytics新舊語法對照

程式技術/Javascript 2018/07/02 14:08
views: 48841 times
舊版本的自訂 ga() 與新版的 gtag() 語法對照, 可以參考官方文件:

ga(): https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference#send

gtag(): https://developers.google.com/analytics/devguides/collection/gtagjs/events

舉例來說, 原本在 ga 中, 自訂事件, 原語法為:

ga:


換成 gtag 時, 如下:

其中, gtag 後第一個參數為 event (自訂事件), 第二參數為原來 ga 的 event_action, 之後的參數因為為 optional, 所以 event_category, event_label 都再用 json 包起來放在後面了.

請參考上面的官方文件說明.
top

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

程式技術/Javascript 2018/05/23 10:28
views: 71446 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

[jQuery]檢查HTML元素是否秀在畫面上

程式技術/Javascript 2018/04/03 17:40
views: 66878 times
一般在操作與檢查瀏覽器畫面上的元件, 是否可以看得到, 使用 css, display 等方法進行檢查, 不過實際上只是檢查是否能在瀏覽器上出現, 但因為瀏覽器只能出現目前可視的區域, 所以實際上元素是否有捲到可以出現的地方是無法透過原本的檢查方法進行檢查, 需要做一些運算.

這個 jQuery plugin: jquery-visible 就是用來檢查這樣的狀況:

https://github.com/customd/jquery-visible/

引用了這個 jQuery Plugin 後, 就能利用 visible() 方法來檢查是否目前的畫面是看得到這個元素. 另外也可以透過 'partial' 參數來檢查是否部分可以看到, 範例程式如:

https://codepen.io/timhuang/pen/rdKbyY

利用 $("#xxx").visible() 檢查是否全部可見或是使用 $("#xxx").visible('partial') 檢查是否部分可見, 十分方便好用.
top

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

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




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


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

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

程式技術/Javascript 2017/03/01 16:25
views: 161040 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

線上幸運抽獎-手機版

程式技術/Javascript 2016/11/11 11:38
views: 117181 times
之前一直要找時間做一個手機用的版本, 終於昨天花點時間寫好了, 有需要的朋友們歡迎多加利用, 網址如下:

http://sample.diary.tw/lucky-draw/m

功能與原來的版本相同, 只是介面用了 jQuery mobile 的方式呈現, 分別將說明、名單、獎項與抽獎放在4個分開的介面上, 利用下方的切換功能來進行切換, 一樣可以隨時加碼. 抽獎結果的部分, 考慮手機介面較小, 所以最後抽出的放在最上面, 而且上方會出現目前待抽的獎項與剩餘人數, 剩餘獎項與已得獎組數等資訊.

最後還是希望大家能多多利用, 也提供建議, 謝謝.

原來的電腦版介紹: http://diary.tw/tim/991
top

將瀏覽器進入全螢幕的方法(requestFullscreen)

程式技術/Javascript 2016/07/20 17:41
views: 64668 times
有時在一些網站看到可以將特定的內容進行全螢幕的檢視, 早期僅有 video 可以有這樣的功能, 現在也可以透過瀏覽器擴充方法來進行特定內容的全螢幕檢視.

程式碼如下:


其中 launchFullscreen 傳入指定的容器物件, 如 div 就可以利用擴充方法 requestFullscreen 來進行全螢幕檢視, 而 exitFullscreen 則不用傳入物件, 使用 document 的擴充方法 exitFullscreen 即可離開全螢幕檢視.

範例:
http://sample.diary.tw/40/index.htm

參考資料:
http://xuhong.github.io/2014/05/23/fullscreen/
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/device/fullscreen-api/
top

雙北Youbike租借站即時資訊地圖

程式技術/Javascript 2016/06/06 18:14
views: 70350 times
因為介紹 open data 與 google maps javascript sdk 的使用與實作 , 利用了台北市的 open data 與 新北市 的 open data 來進行雙北 Youbike 租借站即時資訊.

台北市的 Youbike 資料:
http://data.taipei/opendata/datalist/datasetMeta?oid=8ef1626a-892a-4218-8344-f7ac46e1aa48

新北市的 Youbike 資料:
http://data.ntpc.gov.tw/od/detail?oid=71CD1490-A2DF-4198-BEF1-318479775E8A

資料來源分別為(JSON type):
http://data.taipei/youbike
http://data.ntpc.gov.tw/od/data/api/54DDDC93-589C-4858-9C95-18B2046CC1FC?$format=json

其中台北市的資料 SERVER還有支援 CORS .

接下來就利用這些資料與 Google Maps Javascript SDK 來實作這個地圖了. 資料欄位都很容易理解, 其中使用不同顏色來表示租借站的狀態, 區分為可借可還 / 可借不可還 / 不可借可還 / 暫無營運, 而為能更容易借還, 目前可借為超過 2台, 可還也以超過 2個空位為基礎, 實際數字可點擊站點得知.

可以參考看看:
http://sample.diary.tw/youbike/
top

實做使用Google Maps API進行指定位置是否在指定區域內

程式技術/Javascript 2016/03/10 18:06
views: 44262 times
有個需求是要檢查某地址是否在某特定區域內, 於是思考使用 Google Maps API 來實做, 判斷的部分可以不需要 Google Maps 顯示, 但在測試或開發時, 若有可視的地圖會比較容易理解狀況, 也比較明白指定區域與指定位置的關係, 以下分為幾個部分來進行.

首先需要能繪製指定區域, 這個和程式沒有直接關係, 但透過 Google 的 MyMaps 比較好進行:
http://mymaps.google.com/

進入後, 建立新地圖, 出現 Google Maps 之後, 使用"畫一條線"的"新增內容或形狀"工具來進行區域的繪製:

用戶插入圖片

一點一點地把區域點好後, 點回起點, 就可以產生一個封閉區域了, 再給予命名, 如以下範例:
用戶插入圖片

這個部分可以隨時再進行區域的調整, 到自己滿意為止, 之後我們需要的其實是這個區域的多邊形座標點, 如何取得呢? 點擊新增圖層邊的三個點, 出現選單後, 選匯出成 KML:
用戶插入圖片

就可以取得對應的 KML 檔案了, 打開 KML 檔中, 最重要的是找到座標點, 內容會是這樣的文字:
<coordinates>121.5437222,25.0416515,0.0  ...... </coordinates>
這些座標點就是用來做這個指定區域的座標位置了, 接下來才真正要準備實作程式.

寫了一個小程式, 把這些座標點輸出成一串之後 Google Maps API Geometry 會用到的格式:
http://sample.diary.tw/36/tools.htm

我們將上面的 <coordinates> 中的字串, 填入上面小程式的 textarea 之後, 按下"產生區域多邊形座標", 就可以得到像是這樣的內容:
{lat: 25.0416515, lng:121.5437222},
{lat: 25.0333111, lng:121.543529},
.....

先準備好到這裡, 之後參考這個部分可以進行多邊形繪製:
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

可以看到其中會需要的陣列就由上面小程式產生的內容填入即可, 記得, 在參考 google maps 的範例程式時, 在 initMap 中, 有個 center 參數和 zoom 參數, 要填入實際上你地圖的位置附近, 不然不會出現在地圖上, 如 google maps 範例內, 是百幕達三角洲地帶, 而且 zoom 是 5, 若是以台北市來看, 大約 zomm 是在 15或16 左右.

如範例: http://sample.diary.tw/36/map1.htm

主要程式碼為:


接下來就是由指定的地址查找座標, 這個部分會用到 Google Maps API 中的 geocoder, 只需要將地址傳入, 就可以取得對應的座標了, 參考資料:
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingStatusCodes

程式碼不多, 參考範例:
http://sample.diary.tw/36/map2.htm
輸入地址就可以取得座標(經緯度)

主要程式碼如下(注意, geocoder 是用 callback 方式回傳):


最後就是利用一個很重要的判斷式來判斷某地址(已取得座標)是否在指定區域內, containsLocation() 參考: https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation

上面的範例是用點擊地圖的方式, 看點擊的位置是否在百幕達三角洲內, 是的話就是紅色 marker, 不是的話, 就用綠色 marker.

來改寫一下程式碼, 就可以達成判斷指定的地址是否在指定的區域內了, 如範例:
http://sample.diary.tw/36/map3.htm

主要程式碼:


總結一下:
1. 先製作指定區域座標陣列(多邊形用)
2. 使用 geocoder 取得指定的地址轉換為座標
3. 使用 google.maps.geometry.poly.containsLocation 來判斷2.是否在1.裡面

PS. 記得要先到 https://console.developers.google.com/ 建立一個可以使用 Google Maps API 的應用程式, 並建立對應的 browser key 放到上面的程式碼中, 以順利執行你的 web 應用程式.
top

像Firebase的雲端即時資料庫-deployd

程式技術/Javascript 2016/01/11 13:50
views: 62038 times
之前對於 Firebase 的時互動性有很強烈的應用想法, 主要是像類似線上聊天室的應用需求, 可以透過線上指令直接做控制客戶端的介面與功能操作, 接下來就想找一些類似的平台來做這件事.

其實背後應該都是走 socket.io 才能有這麼好的即時性與效果, 再加上同步性的資料庫, 哪個是最方便適合的呢? 有一些討論在這裡:

https://www.quora.com/Whats-the-closest-open-source-alternative-to-Firebase

接下來來看看這個好用的 deployd 服務, 他組合了 node.js / socket.io / mongodb 服務, 將這樣一個像 Firebase 的功能實作出來了, 並且也有很強大的管理介面功應用, 把資料庫操作, 即時性, 資料驗證與事件整理的十分簡捷方便, 要快速的建立出一組即時同步資料庫, 似乎就是這些最快了, 來看看他的影片介紹, 相信很快就能上手:


(影片引用自: https://www.youtube.com/watch?v=I_Jq1BVj6D0)

另外, 下面還有許多案例可供參考應用, 即時互動功能, 隨時建立, 隨時開發, 十分方便.

http://docs.deployd.com/examples/

以下為建立測試環境的方式:
1. windows, 直接下載安裝包: https://bintray.com/artifact/download/deployd/dpd-win-installer/deployd-win-0.8.0.exe
2. mac / 其他 linux 環境: https://github.com/deployd/deployd#install-from-npm 從 npm 開始

下面將要說明一個從頭開始的方式:

1. 準備一台主機, 這裡以 CentOS 為例, 可以利用 digital ocean 建立一台主機, 若還沒有帳號, 可以從這裡取得: http://diary.tw/tim/notice/1111

2. 建立完成後, 開始安裝 nodejs 與 npm, 指令如下: (其中 epel-release 是為了安裝 nodejs的前置作業, 將 epel-release 資料庫安裝進來)
yum install epel-release
yum install nodejs
yum install npm


3. 接下來安裝 mongodb-server :
yum install mongodb-server

4. 最後安裝 deployd (使用 npm 安裝即可)
npm install deployd -g


5. 起動 mongodb-server
service mongod start

若希望之後重新開機也可以啟動, 可以再下:
chkconfig mongod on


接下來建立一個 deployd 應用程式專案,
cd /home
mkdir dev
cd dev
dpd create hello
cd hello
dpd


就建立完成一個空的專案了, 訪問: http://[ip]:2403/dashboard 即可順利看到已啟動的專案.
top

PREV : [1] : [2] : [3] : [4] : [5] : ... [6] : NEXT



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


 Waiting...