# handle JSON 先了解 Object & JSON JavaScript 物件導向的寫法 你不可不知的 JSON 基本介紹
// data can get from AJAX or self var data; // init from self // Object Literal data = { "data_01": { "title": "title 01", "num": 01, "con": { "con_01": { "name": "news", "desc": "about news" } "con_02": { "name": "sport", "desc": "sport like NBA" } "con_03": { "name": "tech", "desc": "3C info" } } }, "data_02": { "title": "title 02", "num": 02, "con": { "con_01": { "name": "life", "desc": "people's life" } "con_02": { "name": "movie", "desc": "Iron man .
...
# javascript - file upload ## Introduction 利用 javascript 達到檔案上傳的功能
顯示上傳進度 多檔上傳 取消上傳 拖拉上傳 斷點續傳?? chrome 上傳資料夾 盡可能跨 browser(for IE8) 不依攋任一 javascript library 自幹上傳 iframe upload in IE ## Skill files API AJAX iframe FormData … ## Develop 單純用 javascript 利用 AJAX 上傳 處理 AJAX 上傳在 IE 的問題(利用 iframe 也許可解, Refer) 處理拖拉 處理拖拉資料夾 處理預設樣式 ## Issue FormData AJAX 上傳(IE10 以上) IE 利用 iframe 實作 ## Dseign flow ### Attribute inputFileNode(input type file element) fileName(name="") server(the file upload to server url) dropArea(set the drop area) ### Method upload cancel ### Event Use CustomEvent (IE 9 up) Refer - How to Create Custom Events in JavaScript
...
# Use CSS3 Animation In Compass Compass default dosen’t have mixin in CSS3 animation We can use this method in scss
/* define */ $animation-support: webkit, moz, o, ms, not khtml; /* use */ .animation { @include experimental('animation-name', move, $animation-support); @include experimental('animation-duration', 5s, $animation-support); @include experimental('animation-iteration-count', 1, $animation-support); } and add keyframes
/* define */ $animation-support: webkit, moz, o, ms, not khtml; @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } } /* use */ .
...
# file upload show progress bar If you want show upload progress, you must use AJAX method. And you upload files use FormData object. XMLHttpRequest object has upload properties XMLHttpRequest nsIXMLHttpRequestEventTarget
sample code
xmlHttpRequest.upload.onprogress = function (e) { console.log('onprogress', e); console.log(e.loaded); // progress console.log(Math.ceil((e.loaded/e.total) * 100) + '%'); }; Refer
...
# AJAX - XMLHttpRequest Use XMLHttpRequest object handle AJAX
client -> server Front-end - request -> back-end client <- server Front-end <- response - back-end
## build XMLHttpRequest(old method) JavaScript
var httpRequest; if (window.XMLHttpRequest) { //IE7,Mozila,Safari... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE5,IE6 //找出最新版MSXML剖析器 var msxmls = ["MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Mircosoft.XMLHttp"]; for (i = 0; i < msxmls.length; i++) { try { //建立XMLHttpRequest物件 httpRequest = new ActiveXObject(msxmls[i]); break; } catch (e) { // do something } } } New browser have XMLHttpRequest object now.
...
# File upload using ajax Use FormData objects Using FormData Objects
FormData object only IE 10 up if IE use ajax upload, only use iframe method.
## sample HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload_AJAX</title> </head> <body> <form action="upload_one.php" method="post" enctype="multipart/form-data"> <label for="file">File:</label> <input type="file" name="Upfile" id="select"><br> <input type="submit"> </form> <a href="javascript:upload()">AJAX_upload</a> </body> </html> JavaScript
function upload () { // init FormData object var formData = new FormData(); // use append method append upload file formData.
...
# KBtalking pure pro programming ## Reset Fn + R 這時右邊 Fn LED 會亮一下 再按 Fn + R 不放 這時右邊 Fn LED 會一直閃直到它停止 放開 Fn + R 重設完畢
## programming 錄製巨集 按 Fn + right Ctrl 表示進入錄製巨集的模式(Pn 開始閃) 按一個要用的巨集鍵(按完 Pn 不閃) 開始錄巨集 按 Pn(按完 Pn 開始閃, 表示可以開始設定其他巨集) 按 Fn + right Ctrl 結束錄製巨集的模式
使用巨集模式 Fn + right Shift 此時 right Fn LED 亮起來, 表示可以使用錄製的巨集鍵
Win & Alt 互換(for Mac) 按 Fn + right Ctrl 表示進入錄製巨集的模式 Pn 開始閃 表示要設定跑巨集的按鍵 按 Alt Pn 不閃 表示要開始錄巨集 按 Win 按 Pn 表示結束此次的錄製 按 Win Pn 不閃 按 Alt 按 Pn 表示結束此次的錄製 按 Fn + right Ctrl 結束錄製巨集的模式 這樣就達到 Win & Alt 互換
...
# Git - command git status # 查看修改哪些檔案 git diff # 比對修改了的地方與上一個 commit 有何不同 git diff <file> # 比對修改的檔案與上一個 commit 有何不同 git diff <old commit id>..<new commit id> # 比對不同 commit id 的檔案差異 git coheckout -- <file> # 把檔案回復到修改前的樣子 git add <file> # 加入要 commit 的檔案 git rm <file> # 移除檔案(有 commit 過的檔案要移除, rm <file> 之後要執行的指令) git reset HEAD <file> # 把 git add 之後的檔案回復到 git add 前 git commit -m '註解' # or git commit # commit 檔案進入版本控管系統 git commit --no-verify # 不驗證 commit git log # git commit log 紀錄 git log -p # 詳細的log紀錄(修改哪些部分) git blame <file> # 查看修改的紀錄 git clone <repository> # 拉 repository 下來到 local 端 git branch <branch name> # 建立一個 local 端的 branch git checkout <branch> # 切換到該 branch git branch # 查看本地端的 branch git branch -r # 查看 remote 端的 branch git stash # 檔案 不commit 跳 branch (暫存) git stash pop # 回復檔案不 commit 狀態(讀回) git branch -d <local branch> # 刪除本地端的 branch git branch -r -d <remote branch> # 刪除 remote 端的 branch git checkout --track -b <local branch> origin/<remote branch> # 將遠端的 branch 並在 local 建立 branch Refer Refer
...
# Git - 使用別人的 repository in GitHub
sample use javascript-htmlspecialchars use SSH
git clone git@github.com:tedshd/javascript-htmlspecialchars.git
// use SSH 單純的 clone 別人的 repository 只是只能使用它 如 commit 之後是無法 push 上去, 因為不是這 repository 的擁有者 只要進去該 repository 的 .git/config 只要看見
[remote "origin"]
url = git@github.com:tedshd/javascript-htmlspecialchars.git url 中 git@github.com: 之後不是自己的 GitHub 帳號就代表是無法 push 的 就算在這改成自己的 GitHub 帳號也是無用的 因為沒有該 repository 在自己的 repositories 中
## 把別人的 repository 改成自己用的 fork 一份到自己的 GitHub 從自己的 repositories git clone fork 來的 repository 之後 commit 就可以 push 到自己 fork 的 repository
...
# Adobe Flash Player 11.8.800.168 upload file issue 筆記一下 在 IE 中 當 Flash Player 更新到 11.8.800.168 時, 發現一個問題 就是用 flash 上傳檔案時, 中文的檔名會用 Big5 去解, 所以就造成亂碼 測試的 OS Windows 7 繁體中文語系
在網路上有人也提出這問題了
## Update Adobe Flash Player 已更新到 11.8.800.174 修正這問題了
...