熱血漢誌 - 技術新鮮人到技術經理人，必懂的事

JavaScript Array 前言 今天要討論 Array，在 Array 是個很重要的物件型態，在 JavaScript 裡面有許多 Array 好用的方式，這次將會為大家介紹 Array 優秀之處。 內文 陣列也是屬於 JavaScript 的原生物件之一，在實際開發會有許多時候需要使用 Array 的方法，先來介紹一下陣列要怎麼宣告。 陣列宣告 宣告方式， var a=['a', 'b', 'c']; var a=new Array('a', 'b', 'c'); 以上這兩種方式都可以宣告成陣列，接著我們將 a 這個變數印出來看一下， console.log(a); //print: [0, 1, 2] Array 的排列指標從 0 開始，像上面的例子來說， a 的指標就有三個，0, 1, 2，如果要印出特定的某個陣列數值，使用方法， console.log(a[1]); //print: b 如果要判斷一個變數是不是 Array 最簡單的方式就是直接使用 Array 的原生方法， var a=['a', 'b', 'c']; console.log(Array.isArray(a)); //print: true var b='a'; console.log(Array.isArray(b)); //print: false 如果要取得陣列變數的長度可以直接使用， console.log(a.length); length 為一個常數，型態為 Number，會列出目前陣列的長度。 pop, shift 以前面所宣告的陣列為範例， var a=['a', 'b', 'c']; 使用 pop 可以從最後面取出陣列的最後一個值。 console.log(a.pop()); //print: c console.log(a.length); //print: 2 同時也可以注意到，使用 pop 這個方法之後，陣列的長度內容也會被輸出。 另外一個跟 pop 很像的方式就是 shift， cons...

Null & undefined 型態差異 空無是一種很奇妙的狀態，在 JavaScript 裡面，null, undefined 是一種奇妙的東西。今天來探討什麼是 null ，什麼是 undefined. null 變數要經過宣告，賦予 null ，才會形成 null 型態。 var a=null; null 在 JavaScript 中表示一個空值。 undefined 從字面上就表示目前未定義，只要一個變數在初始的時候未給予任何值的時候，就會產生 undefined var a; console.log(a); // print : undefined 這個時候 a 就是屬於 undefined 的狀態。 另外一種狀況就是當 Object 被刪除的時候。 var a = {}; delete a; console.log(a); //print: undefined. Object 在之後會介紹，先記住有這個東西。而使用 delete 的時候，就可以讓這個 Object 被刪除，就會得到結果為 undefined. 兩者比較 null, undefined 在本質上差異並不大，不過實質上兩者並不同，如果硬是要比較，建議使用 === 來做為判斷標準，避免 null, undefined 這兩者被強制轉型。 var a=null, b; if (a === b) { console.log('same'); } else { console.log('different'); } //print: different 從 typeof 也可以看到兩者本質上的差異， typeof null; //print: 'object' typeof undefined; //print: 'undefined' null 本質上是屬於 object, 而 undefined 本質上屬於 undefined ，意味著在 undefined 的狀態下，都是屬於未定義。 如果用判斷式來決定，會發現另外一種狀態 Boolean(null); // false Boolean(undefi...

JS 基本解說，變數型別，宣告 前言 前面已經有建立基本的 Node.js ，以及第一個基本範例，在開發 Node.js 之前，讓我們先建立 JavaScript 應該要知道的一些基本觀念。 本文開始 在進入 node.js 開發之前，還是必須要說， node.js 雖然稱為 node.js ，不過本質在開發上還是在寫 JavaScript。對於 JavaScript 的基本認知還是要有。 基本型態 JavaScript 有以下幾種基本型態。 Boolean Number String null undefined 變數宣告的方式，就是使用 var，結尾使用『;』，如果需要連續宣告變數，可以使用 『,』 做為連結符號。 // 宣告 x 為 123, 數字型態 var x=123; // 宣告 a 為456, b 為 'abc' 字串型態 var a=456, b='abc'; 布林值 布林，就只有兩種數值, true, false var a=true, b=false; 數字型別 Number 數字型別，可以分為整數，浮點數兩種， var a=123, b=123.456; 字串型別 字串，可以是一個字，或者是一連串的字，可以使用 ‘’ 或 “” 做為字串的值。 var a="a", a='abc'; 運算子 基本介紹就是 +, -, *, / 邏輯運算就是 && (and), || (or), ^ (xor), 比較式就是 >, <, !=, !==, ==, ===, >=, <= 判斷式 這邊突然離題，加入判斷式來插花，判斷就是 if，整個架構就是， if (判斷a) { // 判斷a 成立的話，執行此區域指令 } else if (判斷b) { // 判斷a 不成立，但是 判斷b 成立，執行此區域指令 } else { // 其餘的事情在這邊處理 } 整體架構就如上面描述，非 a 即 b的狀態，會掉進去任何一個區域裡面。 整體的判斷能夠成立，只要判斷轉型成 Boolean 之後為 true，就會成立。 大家可...

Node.js 執行程式 & 環境介紹 前言 環境目前已經都建置完成，也對於基本的架構有個認識，在這邊還是要花個章節，跟大家介紹怎麼樣執行 node.js 程式，凡事總是要有個 hello world. 執行程式 所有的 Node.js 程式都必須要在『終端機』模式底下進行執行（沒錯，就是那個黑色的畫面，請慢慢習慣跟黑色畫面的鍵盤輸入對話框當好朋友。） 而我們從 node.js 偷來第一個簡單的 Web 簡易程式。 var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/'); 上面這串程式，儲存成 server.js，接著執行 node server.js 就可以開啟瀏覽器，連結 url: http://127.0.0.1:1337/ ，可以看到畫面顯示， Hello World 恭喜完成第一個 node module Node.js 程式說明 Node.js 的程式架構中，採用了 CommonJS 為規範，所以我們可以看到許多和其前端開發有所差異的用法。 require require 這個關鍵字，主要是用於某個模組載入，例如上面的程式，就是直接讀取 http 模組，而 Node module 分為三種，原生，和之後透過 npm 安裝，還有另外一種自己寫的。 var http = require('http'); 上面的程式就是直接載入 Node.js 原生的 http 模組，至於要怎麼知道這個模組是不是原生，可以在 nodejs.org 上面找 API 就可以找到答案。 var express = require('express'); 上面...

NPM 介紹 導讀 npm 在 Node.js v0.6.x 版本之後，就變成內建的系統之一，npm 全名為 node.js package management，主要用於套件管理， 至於 npm 有什麼強大之處，接下來慢慢介紹。 開始 Node.js 其中好用的一個部份就是因為有 npm，擁有完整管理的架構，讓套件可以被妥善管理，每個專案間的 dependecy 也可以妥當的被使用，目前在 npm 上也已經有 8000 多個模組，提供開發者使用。 基於開發者不要重複自己造輪子，從 npm 上面找到適合自己的模組，就是開發者應該做的工作。 npm 基本使用方法 npm 資料網站 https://npmjs.org/ 可以從上面的網站找到許多套件，使用方法也非常簡單 內容詳細的項目，可以參考 npm 的說明，在終端機輸入 npm ，會得到如下的訊息， where is one of: add-user, adduser, apihelp, author, bin, bugs, c, cache, completion, config, ddp, dedupe, deprecate, docs, edit, explore, faq, find, find-dupes, get, help, help-search, home, i, info, init, install, la, link, list, ll, ln, login, ls, outdated, owner, pack, prefix, prune, publish, r, rb, rebuild, remove, restart, rm, root, run-script, s, se, search, set, show, shrinkwrap, star, start, stop, submodule, tag, test, tst, un, uninstall, unlink, unpublish, unstar, up, update, version, view, whoami npm -h quick help on npm -l display fu...

NVM, 安裝管理你的 node.js 前言 Node.js 需要管理不同版本的問題，在 unix 底下有個優良的安裝是， NVM 是大家在 unix 開發，最佳選擇。 如果你的環境是 windows 請跳過這個章節。 nvm，全名稱呼為 Node.js Version Management，為何會有這種東西，是因為 Node.js 在不同時期， API 的部份有些改版，經歷最大的改版歷程是 v0.4 - v0.6 - v0.7 - v0.8 ，到近期內，幾乎每一個大改版都有某個部分重要的 API 會進行重新調整。 應印不同的版本，所以需要有個完善的版本控制來做為需求，因此建議各位只要是在 *unix 的環境中，可以采用 NVM 作為 Node.js 的環境安裝，這邊我也建議大家這麼做。 準備工具 python 2.6 + GCC / G++ compiler Git 1.6 + wegt 以上幾個工具需要事先準備好，至於怎麼安裝，大家可以針對自已的 OS 搜尋一下，如何安裝。 NVM 安裝 進入 Terminal 之後輸入以下指令， git clone git://github.com/creationix/nvm.git ~/nvm . ~/nvm/nvm.sh 為了之後重新載入 unix 環境都可以正常執行，因此建議將 nvm.sh 檔案內容載入 bashrc （這邊設定大家使用預設的 bash 為 shell)。 echo ". ~/.nvm/nvm.sh" >> ~/.bashrc 測試看看 nvm 是否安裝完成， nvm 應該會看到說明畫面如下， Usage: nvm help Show this message nvm install Download and install a nvm uninstall Uninstall a version nvm use Modify PATH to use nvm run [ ] Run with as arguments nvm ls ...

安裝 Node.js 前言 一開始先從 Node.js 的安裝講起，之後會開始講基本的 JS 原則，不過為了讓大家環境統一，所以先從環境建置開始講起，如何安裝 node.js 開始講起。 Node.js 下載安裝檔案頁面。 Windows Windows 的安裝方法十分簡單，node.js 對於 windows 環境也有做特別的調教，進入下載點，將檔案下載之後， 接著持續按下， next ，就可以完成 node.js 的安裝。 迫不及待需要直接測試 node.js ，進入 『命令提示字元』，看到黑色的輸入對話框，輸入 node -v ## get node version Mac Mac 基本上也是跟 Windows 安裝方式大同小異，只要到下載頁面，點選 Mac 版本，開啟 pkg 檔案，點擊兩下，開始進入安裝畫面，一樣都是『下一步』動作就可以完成。 如果要進行測試，可以開啟『終端機』之類的服務，輸入， node -v ## get node version Linux linux 的安裝，推薦采用 NVM ，至於安裝方法，在明天會跟各位介紹，請大家期待。

鐵人賽 Node 30 day 在 Node.js 台灣社群一起合作寫了一本 Node.js 開發手冊，當初主要是希望能夠藉由蒐集，將中文資料集中，讓更多人可以學習如何使用 Node.js，而這次鐵人賽，希望透過這三十天，將內容做個濃縮，讓大家對於 Node.js 有個重新的學習，同時也將這兩年來開發 Node.js 的經驗導入於本書中。 這次資料預計分成四個章節，為編排。 環境建置 雖然 JS 可以在瀏覽器的環境中執行，不過為了流程順暢，初探的部份會先從環境建置開始講起，從 Node.js 在各個不同平台如何安裝。因應 Node.js 版本更新迅速，也會順便提到 NVM (Node.js Version Management) 的安裝方式，以及使用方法。 當然你也需要找個環境，讓你的程式可以進行佈署，因此這邊也會推薦幾個免費的環境給各位使用。 JavaScript 介紹 (接下來 JavaScript 一詞，將會縮減為 JS) 在閱讀此章節之前，請先拋開以往在瀏覽器編輯 JavaScript 的經驗，從現在起將討論是的 JavaScript 本質部份，會從 JavaScript 的變數、陣列、迴圈、函式、類別開始介紹，當中會使用到許多方法，只有在 Node.js 才會看到的方法，所以請記住我先前所說的，拋開以往對於瀏覽器的觀念，在這裡已經沒有瀏覽器的存在。 畢竟在 Node.js 的程式開發中，目前還是使用 JavaScript ，就算全面改用 CoffeeScript, TypeScript，本質上還是回到 JavaSCript 身為一個技術書籍來說，就是教大家最基本的東西，從中體驗 Node.js 開發，請好好的重新體會 JS 的好。 首先會先從 JS 的基本型態開始講起，從 JS 擁有哪些型態，用什麼方式宣告，一開始該怎麼寫，繼續講到 Array 怎麼宣告，其中有哪些方法，可以讓陣列 iterateor 完成自的使命。 Closure ，在大陸名詞翻譯為閉包，這在 JS 裡面是個有趣的議題，關係到 js 變數生命週期，當然這也是個很重要的概念釐清。 接著開始講解 Class, 什麼是類別，什麼是 function ，一個 function 怎麼生成 Class。當然談到這邊就會同時提到 JS Class 最特別東西，...

stylus & nib express on node.js CSS 架構上也許有點難寫，難看，stylus 就是用來簡化 CSS 的架構，stylus 可以讓 css 自定變數，自定 mixin ， nib 就可以視為將 stylus 強化的 framework.