【Ubuntu】設定開機後啟動服務

用 forever 監控 nodejs 服務
但是當 ubuntu 重啟後
forever 並不會重啟原本監控中的服務
導致監控中的 nodejs 服務中斷
因此編輯 shell script 設定 ubuntu 重啟後
forever 重新監控 nodejs 服務

在 ubuntu 路徑 /etc/init.d 下，
增加 run_forever.sh
************檔案內容開始************

forever start /var/nodejs/app.js

************檔案內容結束************

編輯完 shell script 後
還需要執行以下兩個指令

1. sudo update-rc.d run_forever.sh defaults 99 1
2. sudo chmod +x /etc/init.d/run_forever.sh*

最後重開機做測試，重開機指令
sudo reboot
重啟 ubuntu 之後，可用 forever list 指令觀察 nodejs 是否有執行服務

【Apache2 in Ubuntu】Host a node.js site through apache

目的：在單一 ip 上的相同 port 運行 apache 與 nodejs 服務
之所以會那麼麻煩，是因為 Apache2 in Ubuntu 所在的 ip 位置
對外服務只開放 80 port
所以才想要在單一 port 上 run apache2 與 node.js
步驟如下：

1. install mod_proxy and mod_proxy_http
2. update apache2 conf
3. run node.js app
4. restart apache2 service

• install mod_proxy
1. sudo apt-get install libapache2-mod-proxy-html
2. apt-get install libxml2-dev
3. a2enmod proxy proxy_http


• update apache2 conf
1. vi /etc/apache2/site-available/000-default.conf
2. 編輯 conf 檔案，加入以下數行 code

<Virtual *:80>
    ProxyRequests off
 
    <Proxy *>
        Order deny,allow
        Allow from all
    </Proxy*>
 
    ProxyPass /api http://localhost:2368
    ProxyPassReverse /api http://localhost:2368
</Virtual>



• run node.js app
1. app.js 程式碼如下：

var express = require('express');
var app = express();
app.get('/', function(req, res) {
    res.send("Welcome nodejs and express app api");    
});
app.listen(2368);

2. forever start app.js(須先安裝 forever 套件)


• restart apache2 service
1. service apache2 reload
2. service apache2 restart

重啟 apache 服務後
這樣連線 www.servername.com.tw 就會連到 apache index.html
而連線 www.servername.com.tw/api 則 apache 會將 request 導向 nodejs 服務
這個方法可以保持 80 port 對外，但 /api 則可以送出 request 至 node.js 監聽的 port

【jQuery】Remove item from json array

var jsonArray = [
    {name: 'Alice', id: 001},
    {name: 'Bob', id: 002},
    {name: 'Namei', id: 003}
];

假設想刪除 jsonArray 其中一個 json 物件， 該如何實作？

function findAndRemove(array, property, value) {
    for (var key in array) {
        if (array[key][property] == value) {
            array.splice(key, 1);
        }
    }
}
/* remove a json object with property of 'name' whose value is 'Namei' */
findAndRemove(jsonArray, 'name', 'Namei');

splice 為 JavaScript Array 的一個 Method
定義為： The splice() method adds/removes items to/from an array, and returns the removed item(s).
Add's Parameter: array.splice(index, howmany, item1, ....., itemX)
index 指定插入元素於陣列的位置； howmany 插入多少元素； item 為插入元素
Remove's Parameter: array.splice(index, howmany)
index 若為負值，則表示距離陣列尾端的位置； howmany: If set to 0, no items will be removed.

【CSS】:nth-child v.s. jQuery:eq

之前沒研究清楚，
誤以為 CSS's :nth-child  跟 jQuery's :eq ，
兩者的 selector 是相同效果，
但其實這兩者之間定義不完全相同。

先來看看 jQuery's :eq( index ) 的定義，
Reduce the set of matched elements to the one at the specified index.
如果 index 為正值，則是以 0 對映到首個element；
　　 index 為負值，則從最後一個element計數。

再來看看 CSS's :nth-child( n ) 的定義，

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

n can be a number, a keyword, or a formula.

差異在於 CSS 會先找其parent的所有child element，再判斷是否符合條件。

舉例而言：

<div>
    <p>This is a heading</p>
    <div id="one" class="foo"></div>
    <div id="two" class="foo"></div>
    <div id="three" class="foo"></div>
</div>

以CSS Syntax來講， .foo:nth-child(2) 會找到 div#one ，
因為 #one 是容器內第二個元素，類別也符合條件。
但若 .foo:nth-child(1) 則找不到符合的元素，
因為容器內第一個元素是 p tag ，但卻不符合類別的條件。
補充 jQuery's :nth-child 定義，
Selects all elements that are the nth-child of their parent.
另外 jQuery's implementation of :nth- selectors is strictly derived from the CSS specification
所以 jQuery's :eq 只回傳第一個符合條件的元素；
而 jQuery's :nth-child 則會回傳所有符合條件的元素。

【Javascript】Array sort() Method

1. 內建 Array sort

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
// output is Apple,Banana,Mango,Orange

2. 內建 reverse

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
// output is Orange,Mango,Banana,Apple

3. Sort numbers (numerically and ascending)

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
// output is 1,5,10,25,40,100

4. Sort numbers (alphabetically and descending)

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
// output is 100,40,25,10,5,1

##### 上述例子為 w3shools Example #####
##### 以下是 object sort method #####


5. object sort numbers

var student = [{name: "Tom", score: 80}
, {name: "Mary", score: 70}
, {name: "Cathy", score: 90}];
student.sort(function(a,b){return a.score-b.score});
// output is [{name: "Mary", score: 70}, 
// {name: "Tom", score: 80}, 
// {name: "Cathy", score: 90}]

6. object sort alphabetically

var student = [{name: "Tom", score: 80}
, {name: "Mary", score: 70}
, {name: "Cathy", score: 90}];
student.sort(function(a,b){return a.name > b.name});
// output is [{name: "Cathy", score: 90}, 
// {name: "Mary", score: 70},
// {name: "Tom", score: 80}]

【jQuery】keyup event v.s. keypress event

目的：檔案命名時，限制某些字元無法輸入！

限制字元： \ / | ? :

在此種情況下，使用 keypress 事件較為合適
keydown event 會判斷是鍵盤上哪個鍵被按下，
而 keypress event 則會判斷是哪個字元被輸入
舉例來說，輸入小寫字元 "a"，
keypress 事件會回傳 97
keydown 事件回傳 65
輸入大寫字元 "A"，
keypress 事件回傳 65
keydown 事件回傳 65
由上例可知， keypress 可以準確分辨大寫 "A" 與小寫 "a"，
而 keydwon 則因為回傳皆為 65，無法辨識輸入字元為大寫 "A" 或是 小寫 "a"
但 keydown event 能夠偵測某些特殊按鍵，像是 Shift 或是 方向鍵

在本例中，因為希望限制 : 輸入，而 ; 則可以正常輸入
使用 keydown event，則 event.which 值皆為 186
使用 keypress event， ; reported as 59， : reported as 58
所以 keypress event 會較符合此次限制檔案命名需求！

【jQuery】Trigger keyup event

需求：刪除檔案可以點擊"刪除"圖示或是按下鍵盤上"DEL"按鍵

實作：因為兩個方式都是實作刪除檔案，所以可以先寫好其中一個 function，
另一個就直接觸發該 function 即可。

想法：先實作出使用"DEL"鍵刪除；點擊 Icon 則模擬鍵盤事件即可。

$('item').keyup(function(event) {
    if (event.which == 46) {
        // to do delete file
    }
});

$('.icon').click({
    var e = $.Event('keyup');
    e.which = 46; // Delete
    $('item').trigger(e);
});

另外要注意的是，一般 html tag (ex:div) 需要加上 tabindex 屬性才可以觸發鍵盤事件
而　input tag　則不需要額外加上 tabindex 屬性