2016年3月29日 星期二

使用node.js發出post

使用node.js發出post請求其實是個不太常見的用法,

因為一般用法,是使用網頁表單發出post請求向server請求資料

而使用node.js的server再去處理request

不過,總是會遇到需要使用node.js發出request的情況嘛~

首先,先使用request這個套件,網址如下

https://www.npmjs.com/package/request

官網的範例程式(少了一個分號)長這樣

var request = require('request');
request('http://www.google.com', function (error, response, body) {
    if (!error && response.statusCode == 200) {
        console.log(body) // Show the HTML for the Google homepage.
    }
});


不過我使用時,抓回來的response有中文 為了顯示上的好看,

我使用了adobe與google開發的思源黑體 


 在這邊選擇Noto Sans CJK TC,

是Chinese Japanese Korean Traditonal Chinese的縮寫

安裝好之後,編輯.atom/styles.less

font-family: Noto Sans CJK TC; 
 font-size:16px;

但是這邊連英文與數字都會套用成思源黑體,覺得好醜,因此改成

font-family: Consolas, 'Courier New', Courier, Noto Sans CJK TC; font-size:16px;

前面的字型是atom的預設字型(atom會隨著你安裝的OS不同改變預設字型)

若是想要更進階應用的話,可以參考@font-face之unicode-range


接下來進入正題啦,直接來看程式碼

request.post({
                      url:'這裡是你的URL', 
                      qs: '包含querystring的物件',
                      encoding: null}, 
                      function (error, response, body) { 
                          if (!error && response.statusCode == 200) {
                              console.log(body); 
                          }); 
                      } 
});


執行後出現亂碼啦

原因就出在編碼的問題上

因此去下載iconv-lite

https://www.npmjs.com/package/iconv-lite

並把程式碼修改成

var str = iconv.decode(new Buffer(body), "big5");
console.log(str);

就大功告成啦

2015年12月2日 星期三

quick sort in javascript

雖然javaScript有sort方法

但還是來練習寫一下演算法吧

function quickSort(q){
  var ql = q.length;
  var less = [];
  var greater = [];
  var pivotList = [];
  console.log(ql);
  if (ql <= 1){
    return q;
  } else {
    var pivot_pos = Math.floor(ql/2);
    var pivot = q[pivot_pos];
    for (var i = 0; i < ql; i++){
      if (i !== pivot_pos){
        if (q[i] <= pivot){
          less.push(q[i]);
        } else {
          greater.push(q[i]);
        }
      }
    }
    pivotList.push(pivot);
  }
  return (quickSort(less).concat(pivotList).concat(quickSort(greater)));
}
console.log(quickSort([8,5,2,9,6,3,7,4,1]));

2015年11月2日 星期一

Bootstrap Navbar

要下載Bootstrap,網路上已經有相當多教學,在此就不撰述了
官方網站的教學已經非常詳細,在這邊節錄一些重點跟心得
http://getbootstrap.com/
我用的版本是3.3.5

由於BS3加入的特性就是提供mobile良好的支持
Navbar一旦目前viewpoint的寬度小於breakpoint,便會collapsed(折疊)
另外,目前Jusified(定寬度)的特性尚未支援

在這邊分成幾個部份的class來介紹

navbar-default
首先先使用navbar class,navbar-default則是預設的樣式

navbar-brand
拿來放自己的首頁(品牌)圖片(LOGO)
這個padding與height是固定的,若是要放上不同大小的圖片,則需修改css

navbar-form
把表單放在這個class之內,在較窄的viewpoint之下能有效的對齊

navbar-button
放置在navbar中的button,對齊用

navbar-text
放置在navbar中的text,對齊用

navbar-link
想放除了navigation元件之外的連結,用這個

navbar-right / navbar-left
將nav元件對齊右邊或左邊

navbar-fixed-top
將navbar固定在頂端,但是會蓋掉頂端的內容,所以body的padding要設

navbar-fixed-bottom
跟上一個類似,將navbar固定在底端

navbar-static-top
固定在最上方,若頁面捲動就跟著消失。
navbar-fixed-top / navbar-fixed-bottom 則是頁面捲動後,還是會在原來的地方

navbar-inverse
跟navbar-default相對的另外一個樣式


要製作基本navbar的流程

首先先在nav element裡加上navbar,navbar-default的class
再來加上role="navigation",這是為了增加可讀性,有些人並不會用nav element來作navigation
然後加上一個div element,class為navbar-header,在這邊可以加上navbar-brand
裡面的選單則用ul element,class為nav,navbar-nav

若是要加上responsive的feature
則設計一個俗稱為hamburger button,加上navbar-toggle的class
這個button有幾個屬性要加,首先是data-toggle="button",告訴js要執行的動作
再來是data-target,選擇要折疊/切換的 element id
這個element id 裡面應該要有collapse,navbar-collapse的class,裡面包含隱藏的內容

最後附上一個網路的教學網站,內容相當豐富
http://www.tutorialspoint.com/bootstrap/


2015年10月27日 星期二

atom 環境建置

要在 atom上面run js code,必須要裝其他的package

script是其中一個好用的package

https://atom.io/packages/script

首先必須安裝node.js,有很多種方法可以進行安裝

我的OS: ubuntu 14.10 x64

首先下載tar檔,解壓縮之後把node/bin加進bashrc裡就可以了


接下來是安裝script

輸入 $apm install script

執行可以選擇檔案,或是選取一段code

執行快捷鍵是ctrl+shift+b


可以執行js之後,另外可以安裝一個package是html preview

https://atom.io/packages/atom-html-preview

這可以讓你一邊編輯一邊在atom裡看到你前端內容的變化

安裝好之後,到atom裡面的package按enable就可以了



2015年8月16日 星期日

COSCUP2015 DAY2


根據昨天決定的經驗,決定盡量在同一個會場才不會搶不到位子。早上都在R2。

How Redis Powers Your Web Service & Flurry analytics Intro
Gene Lian & Roger Lo

2015年8月15日 星期六

COSCUP2015 DAY1


第一次來COSCUP,記錄一下流水帳
上午聯播 BYOC: Build Your Own COSCUP BobChao

2013年11月28日 星期四

Git For Windows 使用筆記

之前是在Linux環境下使用git
現在則是要在windows下使用
參考了一下網路上的文章
其實大部分都說的滿多的
底下介紹我的使用流程