# Facebook api get UID & AccessToken Build App in facebook APP_ID is a facebook App id Must set facebook App’s web url and use code in it’s domain <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fb_oauth</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <div id="fb-root"></div> <p> <input id="FBLogin" type="button" value="登入臉書" /> </p> <p> <span id="uid"></span> <br> <span id="accessToken"></span> </p> </body> <script src="http://connect.facebook.net/zh_TW/all.js"></script> <script> FB.init({ appId: 'APP_ID', status: true, cookie: true, xfbml: true, oauth: true }); $('#FBLogin').
...
Category: JavaScript
# JavaScript - Event event type 事件名稱
event target 事件發生在哪一個目標上
event handler or listener 處理或回應的 function, 即監聽或註冊事件
event object 與事件關聯的物件
event propagation 氣泡(bubble)現象
default actions 觸發事件時的預設行為, 有時必須取消該行為
## GlobalEventHandlers HTML <button id="btn">Click</button> JavaScript var nodeBtn = document.getElementById('btn'); nodeBtn.onclick = function (e) { alert('ok'); }; ## event HTML <button id="btn">Click</button> Use addEventListener(only IE9 up) addEventListener
JavaScript var nodeBtn = document.getElementById('btn'); nodeBtn.addEventListener('click', function () { alert('ok'); }); ## delegate If use dynamic page the dom maybe not init in the page load So use delegate
...
# 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
...
# 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.
...
# Coding Style ## 條件判斷 在 PHP & JavaScript 中有許多邏輯判斷 當有許多條件要去檢查時, 一般來說就是用 if 一直寫下去 最後就造成下面的情況(以 PHP 為例)
if ($a === $b) { if ($c) { if ($c >= 10) { if ($d) { // do something // ... } return; } return; } } 這樣下去就沒完沒了, 而且縮排會越來越多, 要看 code 也很不方便 所以假如就已作條件檢查來說 可以用以下的做法
// check condition 1 if ($a !== $b) { return; } // check condition 2 if (!$c || $c === '') { return; } // check condition 3 if ($c < 9) { return; } // check condition 4 if (!
...
# Place on and embed code from internet We can use cdnjs or some library sites embed js or css. But How can we embed our code from internet? I have 2 ways.
## GitHub If you can use GitHub Push your code to GitHub Wtach code on GitHub Find Raw and click it. open code like
https://raw.github.com/tedshd/jQuery_scroll_to_top/master/javascripts/scroll_to_top.js and then delete . after raw like
https://rawgithub.com/tedshd/jQuery_scroll_to_top/master/javascripts/scroll_to_top.js Embed it finally.
...
# JavaScript - design pattern ## 避免與減少全域變數(global variable) 全域變數非常方遍使用, 但使用的不好會使 JavaScript 有問題 因為有可能重複使用且有可能別的 library 也有用到該名稱 在 JavaScript: 優良部分 書中提到可用物件的方式包起來
var GlobalObj = {}; // 開始定義 GlobalObj.var1 = 'string'; GlobalObj.arr = [1, 2, 3]; ... // or var GlobalObj = { var1: 'string', arr: [1, 2, 3] }; 使用 閉包(Closure) 也是一個避免全域變數的方法
...