# AngularJS - routing 這裡不探究 AngularJS 是如何辦到的 基本上就是用 hash #, 也可用 HTML5 的 history API 這裡只有說有哪些用法
## 基本 sample 這寫法是 1.2.16 的寫法, 不保證以後會變(因為在舊版的 AngularJS 寫法不一樣, 差點搞死我, 當升版本後以前的 code run 不出來時最好去官方看文件)
load AngularJS & angular-route AngularJS v1.2.16 angular-route backup
HTML index.html
<!DOCTYPE html> <html ng-app="route"> <head> <meta charset="utf-8"> <title>routing</title> <script src="http://tedshd.lionfree.net/lib/angular_v1.2.16.js"></script> <script src="http://tedshd.lionfree.net/lib/angular-route.js"></script> </head> <body> <h1>A-Mail</h1> <div ng-view></div> </body> <script src="controllers.js"></script> </html> list.html
<table ng-controller="ListController"> <tr> <td><strong>Sender</strong></td> <td><strong>Subject</strong></td> <td><strong>Date</string></td> </tr> <tr ng-repeat="message in messages"> <td>{{message.
...
Category: JavaScript
# JavaScript - custom facebook share button Before use facebook API, must create facebook app on facebook's [developer website](https://developers.facebook.com/) to get a app id
Facebook support share API to people and it is easy to use. But sometimes we need customize share button style in our web. We can use 2 way.
# 1. Link share api link Simple way
## HTML <a href="http://www.facebook.com/share.php" class="custom">Share</a> and then you can use CSS custom a style.
...
# JavaScript - Random Array Sort function randOrd(){ return (Math.round(Math.random())-0.5); } anyArray = [1, 's', 3, 'arr', 4]; anyArray.sort( randOrd ); alert(anyArray); Refer - Random Array Sort
...
# HTML5 - Full Screen Mode It can control full screen the browser IE if it is to be more than IE11
## Code function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.
...
# Node.js - install ## Mac 利用 homebrew 安裝
brew install node node.js Refer - Install Node.js and npm using Homebrew on OS X
## Ubuntu sudo apt-get install nodejs-legacy sudo apt-get install npm Refer - Can not install packages using node package manager in Ubuntu
## Update Now node merge iojs and version update to v4
But now homebrew not updgrade to v4
So i use nvm
Refer - Node.
...
# JavaScript - delete element I use this way.
var dom = document.querySelectorAll('.dom'); for (var i = 0; i < dom.length; i++) { dom[i].outerHTML = ''; delete dom[i]; }; // or var dom = document.querySelector('#dom'); var dom = document.querySelector('h1'); dom.outerHTML = ''; delete dom; If use IE document.querySelector only use IE8 up
Refer - JavaScript: remove element by id
...
# Clean Code(無暇的程式碼) - Note 最近跟同事借了這本書, 主要是因為以前沒寫過大專案, 在寫大專案被主管指出有不少的地方邏輯有問題, 變數的命名也有許多問題, 剛好有同事有這本書, 便借來閱讀, 以增進自己的功力, 書中作者是以 Java 為例, 但寫一個 Clean Code 是不分程式語言的.
以下算是閱讀筆記
劣質的程式碼導致了這家公司的倒閉 無暇的程式碼 P.3
我喜歡我程式優雅又有效率. 邏輯直接了當, 使得錯誤無處可躲. 儘量降低程式的相依性, 以減輕維護上的工夫. 根據清楚的策略, 完備處理錯誤的程式碼. 盡可能的最佳化程式效能, 以避免引起他人, 因對於程式進行無章法的最佳化, 而把程式弄得一團亂. Clean Code 只做好一件事. 無暇的程式碼 P.8
Clean Code 是可被原作者以外的開發者閱讀與增強的. …… 無暇的程式碼 P.10
當每個你看到的程式, 執行結果都與你想的差不多, 你會察覺到你正工作在 Clean Code 之上. …… 無暇的程式碼 P.11
……所以讓程式碼更容易閱讀, 也會讓程式碼變得更容易撰寫. 無暇的程式碼 P.16
有意義的命名
使名稱代表意圖 避免編碼 函數
簡短 避免形成巢狀 只做一件事 形成由上往下閱讀的程式碼 減少需要參數量 不要重複 函式應該只做一件事. 它們應該把這件事做好.
...
# JavaScript - time seconds to hh:mm:ss function toHHMMSS(sec_num) { var hours = Math.floor(sec_num / 3600); var minutes = Math.floor((sec_num - (hours * 3600)) / 60); var seconds = Math.floor(sec_num - (hours * 3600) - (minutes * 60)); if (hours < 10) {hours = "0"+hours;} if (minutes < 10) {minutes = "0"+minutes;} if (seconds < 10) {seconds = "0"+seconds;} var time = hours+':'+minutes+':'+seconds; return time; } alert(toHHMMSS(1234)); Refer - JavaScript seconds to time with format hh:mm:ss
...
# JavaScript - Scroll Progress Show a progress bar about page scroll position.
This used scroll event Progress bar must handle scroll position and scroll total height, and show it for percent View MDN document can find it can’t use scrollHeight, because when scroll bar scroll to bottom, scrollTop not equal scrollHeight
dom = document.querySelector("body"); percent = (dom.scrollTop / (dom.scrollHeight - document.documentElement.clientHeight)) * 100 + "%"; Then find scrollTop didn’t work in firefox
...
# JavaScript - jQuery index() in JavaScript ## JavaScript function indexInParent(node) { var children = node.parentNode.childNodes; var num = 0; for (var i=0; i<children.length; i++) { if (children[i]==node) return num; if (children[i].nodeType==1) num++; } return -1; } ## Example <ul> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul> jQuery alert($('#bar').index()); javaScript var el = document.getElementById("bar"); function indexInParent(node) { var children = node.parentNode.childNodes; var num = 0; for (var i=0; i<children.length; i++) { if (children[i]==node) return num; if (children[i].
...