分類
程式技術

[HTML5]data attributes大小寫問題

今天在實作 data-attributes 時, 發現僅能用小寫存取. 一般我們對於較長的變數名, 會使用駝峰命名法 (camel naming), 不過在 data-attributes 會發生問題.

因為在 data-attributes 這樣的結構下, 都是以小寫方式來進行存取, 所以即使是使用 data-numberOfData 也會使用 data(“numberofdata”) 的方式來存取, 否則會 undefined.

若希望能用駝峰式名稱來存取, 則需要使用 data-number-of-data 的方式來寫 tag, 就可以使用 data(“numberOfData”) 來存取.

可以參考以下程式:

<a id="linka" data-string="a">link a</a><br>
<a id="linkb" data-stringOfData="b">link b</a><br>
<a id="linkc" data-string-of-data="c">link c</a><br>

// jQuery javascript
document.write("#linka.data(\"string\") = " + $("#linka").data("string")+ "<br>");
document.write("#linkb.data(\"stringOfData\") = " +$("#linkb").data("stringOfData")+ "<br>");
document.write("#linkb.data(\"stringofdata\") = " +$("#linkb").data("stringofdata")+ "<br>");
document.write("#linkc.data(\"stringOfData\") = " +$("#linkc").data("stringOfData")+ "<br>");

上面的執行結果, 第二組會是 undefined, 其他可以正常輸出 data-attributes 內容.

可以參考 codepen 上的執行結果:
https://codepen.io/timhuang/pen/ZRYzOR

繼續閱讀:
https://stackoverflow.com/questions/20985204/does-jquery-internally-convert-html5-data-attribute-keys-to-lowercase

分類
Javascript

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

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

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

// 有引用 jQuery 的狀況下
// 註冊
$(window).bind('beforeunload',function(){
  return '您確定離開此頁面嗎？請記得存檔！';
});

// 解除
$(window).unbind('beforeunload');

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

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

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

繼續閱讀:

 

分類
Python

階乘從1乘到99999的位數

階乘(Factorial)是從1 x 2 x 3 x …. x n 記作 n!

其中比較特別的是 0! = 1, 原因為 n! = n x (n-1)! 而 1! = 1 = 1 x 0! 所以定義了 0! = 1

不過今天不是要談這個, 而是要用程式計算 n! 的確實值, 用什麼程式語言可以做到呢? Python3

來看看程式吧:

p = 1
for i in range(1,100000):
  p *= i
print(p)
print(len(str(p)))

根據 Python 算出來的結果為 28242294079603478742934…….
共有 456569 位數.

厲害的地方是 Python 3 沒有位數的限制, 可以算出這麼多位, 真的太強了呢. 有興趣的朋友可以線上執行:

https://colab.research.google.com/drive/1ayDGtmAiWYRzhPXOUc_uefvQD8RXvIp_

以上為使用 Google colaboratory 服務執行. 記得要使用 Python 3 就沒有位數上限(有的話是在記憶體上限, Python 2則有位數的上限)

[2018/5/18 12:12]
補充一下, 使用 python 內建數學函數庫的方式:

import math  
p = math.factorial(99999)  
print(p)  
print(len(str(p)))  
type(p)

線上執行:

https://colab.research.google.com/drive/1_n9r6gq-p-7qoT6wjeiTVsnntwktaj8q

當然, 結果還是一樣的.

分類
數學

數學題-簡單絕對值不等式

絕對值是指數至 0的距離, 所以在一維數線上, 正數不變, 負數變號就是絕對值.

考慮以下數學式:

的最小值為何, 其實從數線上來看, 該式最小值應為 a 落在 -3 ~ 5 之間, 計算出來的結果為 8, 也就是最小值為 8. 若使用數學式來證明, 可以用三角形兩邊之和大於第三邊, 剛好是直線(也就是不能成為三角形時, 為相等), 如下:




若是使用 wolfram 線上數學計算, 可得:

http://www.wolframalpha.com/input/?i=y%3Dabs(x%2B3)%2Babs(x-5)

也可以很清楚地看到在 -3 ~ 5 之間的值為 8, 也是這個數學式的最小值.

 

分類
FreeBSD/Linux PHP

解決停用TLS1.0加密協議更新CURL問題

今天在解一個已停用 TLS 1.0 加密通訊協定問題時, 發現舊的 web server 上的 php curl 無法正常連線, 在 command line 下使用 curl https://xxx.xxx 時, 也會出現:

curl: (35) TCP connection reset by peer

研判為 curl 的原因造成, 由於需要使用 php 中的 curl_xxxx 系列指令與其他 server 的 api 溝通, 所以必須更新對應的模組來解決, 指令如下:

yum update nss curl openssl

更新完成後, 重起 apache 即完成正常呼叫其他 server api 停用 TLS1.0 的加密通訊協議問題.

參考資料:
https://stackoverflow.com/questions/30145089/tls-1-2-not-working-in-curl

分類
WebTrend

.app的頂級域名開放註冊

從這裡看來的: https://blog.google/topics/developers/introducing-app-more-secure-home-apps-web/ , 看起來未來這個域名下的所有通訊都要走 https, 這個頂級域名申請可以到這裡先預註冊: https://get.app/, 有需要的朋友可以搶先去登記.

.app 域名基本上就是給 app 用的, 當然, 用在網域與 app 都很適合, 快點去註冊自己喜歡的域名.

繼續閱讀:

分類
WebTrend

Flickr被Smugmug併購了

Flickr 老牌相片服務網站, 由 Yahoo 易主至 Smugmug 另一個老牌相片儲存服務商, 這樣的合併是否能帶來更多活力呢?

Flickr 一直以來就是很棒的相片網站, 尤其對於相片的銳化與處理更是有獨到的功能, 不過好多年來, 許多的新興照片服務網站也一直出現, 並有許多特別的濾鏡功能與社群功能等, Flickr 也一直能維持在線上. 雖然被 Yahoo 併購後, 也沒有很積極地有很多強化, 但是本質一直是維持住的, 也堅守著照片服務的功能.

不過無論如何, 也很希望 Flickr 服務能繼續維持, 並與新東家合併後, 能有更多的火花, 相關新聞:

https://newtalk.tw/news/view/2018-04-21/121752
https://udn.com/news/story/7088/3100604

Wiki 上的 Flickr:

https://zh.wikipedia.org/wiki/Flickr

分類
Javascript

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

一般在操作與檢查瀏覽器畫面上的元件, 是否可以看得到, 使用 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’) 檢查是否部分可見, 十分方便好用.

分類
好用軟體

好記又好用的DNS服務IP

繼 Google DNS 服務 8.8.8.8, 8.8.4.4 兩組好記的 IP 之後(https://zh.wikipedia.org/wiki/Google_Public_DNS), 又有好記的 DNS Service IP 囉.

IBM 的 Quad9 服務, DNS Service IP 為 9.9.9.9, 除了提供 DNS 服務外, 還多了檢查安全性的功能呢. (https://www.techbang.com/posts/55177-ibm-announces-free-dns-referral-service-quad9-as-long-as-the-dns-server-is-set-to-9999-to-block-malicious-web-sites)

另外是知名快取服務供應商 Cloudflare 提供的 1.1.1.1, 提供了最快速的 DNS 服務.(https://www.ithome.com.tw/news/122215)

有這麼好記又好用的 DNS 服務真是太棒.

分類
Javascript

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

這張梗圖很有趣:

(source: https://www.facebook.com/bitmovin/photos/a.454938237852624/1884408724905561/)

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

html:

<h2>720p</h2>
<div class="result"></div>

<h2>1080p</h2>
<div class="result"></div>

<h2>1080i</h2>
<div class="result"></div>

<h2>4k</h2>
<div class="result"></div>


javascript:

 var els = document.getElementsByClassName("result");

 for (var i = 0; i < els.length; i++) {
     var arr = els[i].previousElementSibling.innerHTML.match(/(\d+)(\w+)/i);

     els[i].innerHTML = arr[2].repeat(arr[1]);
 }

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