在 Github 上使用 Coveralls 顯示程式覆蓋率 - Node.js
前面的文章提到了使用 mocha 在 Node.js 和瀏覽器環境中單元測試和使用 jscoverage 計算 Node.js 程式覆蓋率，以及在 Github 上使用 Travis CI 進行持續整合 - Node.js，這篇文章延續前幾篇文章內容，進一步利用 Coveralls 整合程式覆蓋率統計至 Github上。 Github 專案啓用 Coveralls 功能和 Travis CI 一樣，Coveralls 可以直接使用 GitHub 帳號登入，登入後點擊 REPOS 下的 ADD REPOS 看到自己有的專案 點擊左邊的開關即可啓用 修改 package.json 檔案在 scripts 的設定下增加一個 coveralls 專用的指令如下： 1234"scripts": { "test": "mocha tests/node-test.js -r jscoverage", "coveralls": "mocha tests/node-test.js -R mocha-l ...
使用 jscoverage 計算 Node.js 程式覆蓋率
在之前的文章使用 mocha 在 Node.js 和瀏覽器環境中單元測試提到如何進行測試，而我們還可以利用工具去進一步計算測試所涵蓋的範圍。 由於之前採用 mocha 作為測試的 Framework，所以這篇文章選擇可以和 mocha 搭配使用的 jscoverage。 在開始之前請先參考之前的文章轉寫好單元測試。 加入jscoverage套件1npm install jscoverage --save-dev (註：安裝到全域會把別人的函式庫也計算進去，所以採用每個專案都安裝) 設定忽略清單有些檔案或資料夾我們不想列入計算，我們可以將清單加入忽略，在專案底下建立 .covignore 檔案，寫入： 12/tests/node_modules/ 這個範例將測試程式放在 tests 而我們不想將它列入計算，所以將該目錄排除，請依據實際情況設定 執行測試之後我們就可以透過以下指令進行測試並計算覆蓋率 1mocha tests/node-test.js -r jscoverage 可以發現就是之前的測試指令多加上 -r jscoverage 的參數。 同樣的我們也可以把它寫到 pack ...
在 Github 上使用 Travis CI 進行持續整合 - Node.js
Travis CI 是一個提供 GitHub 專案持續整合的服務平台，支援各種程式語言，本篇介紹 JavaScript(Node.js) 專案如何結合此服務。 藉由整合 Travis CI，之後只要更新專案到 GitHub 就會自動進行測試，並通知你測試結果。 GitHub 專案啟用 Travis 功能Travis CI 可以直接使用 GitHub 帳號登入，登入後可以點自己的帳號看到自己有的專案 點擊右邊的開關即可啟用。 加入 .travis.yml 檔案在專案中加入 .travis.yml 的檔案，描述專案如何進行 CI 流程，以及測試的環境等資訊，依據不同的程式語言會有不同的選項可以設定。 Travis CI 的流程如下： 從 GitHub 下載專案 (clone)。 進入資料夾。 Checkout 到特定的版本。 執行 before_install。 執行 install。 執行 before_script。 執行 script。 執行 after_success 或 after_failure。 執行 after_script。 其中 install 階段，node.js ...
使用 mocha 在 Node.js 和瀏覽器環境中單元測試
Mocha 是一套 JavaScript 的測試框架 (Test Framework)，有 Node.js 和瀏覽器版本，可分別測試不同環境。 假設我們開發了一個 JavaScript 套件，我們希望可以在 Node.js 和不同瀏覽器上測試，可以用以下方法來達成。 輸出至 module 或是 window在自己開發的 JavaScript 中，最後將程式依據環境輸出 module 或是全域變數，以下皆以 js-md5 為範例 12345678;(function (root, undefined) { // ... if (typeof(module) !== 'undefined') { module.exports = md5; } else if(root) { root.md5 = md5; }}(this)); 建立測試網頁建立測試網頁，例如 tests/index.html，內容需包含以下項目(要注意順序)： 12345678910111213141516171 ...
在 JavaScript 中使用 Base64 Encode / Decode
在較新的瀏覽器中已經有提供 btoa 和 atob 兩個全域函式，可以用來做 base64 的 encode 和 decode，瀏覽器支援參考這裡，基本上就是 IE9 以下不支援，使用方法如下： 12btoa('Hello, world'); // "SGVsbG8sIHdvcmxk"atob('SGVsbG8sIHdvcmxk'); // "Hello, world" 但是內建的函式不支援 UTF8 的編碼： 1btoa('中文'); // DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. 而另外在 Node.js 中則可使用內建的 buffer 模組，它也可以支援 UTF8： 12345var Buffer = require('b ...
jQuery 教學 - 常用函式
核心 (Core)$(something)依據參數產生或取得 jQuery 物件 $(selector)依據 selector 規則取得 Elements，例如 1$('#my-element') $(element)將原生的 DOM 物件轉為 jQuery 物件，例如 12var element = document.getElementById('my-element');element = $(element); $(html)建立 Element，例如 1$('<div>Test</div>'); 選擇器 (Selectors)jQuery 除了可以利用 CSS 選擇器的規則找到網頁元素，還可以用其他特別的規則選取，這邊只介紹最常用的標準 CSS 選擇器規則。 ID選擇器 (ID Selector)使用井號 (#) 開頭。 1$('#my-id') 對應到 HTML 1<div id="my-id">This is id selecto ...
JavaScript 教學 - 運算子 (Operators) - 下
介紹JavaScript中的運算子 (Operators) 的用法，包含邏輯運算子 (Logical Operator)、字串運算子 (String Operator) 和特殊運算子 (Special Operator)。 邏輯運算子邏輯運算子 (Logical Operator) 在程式語言中一般用來做布林代數使用，進行複數的條件判斷，例如： 1n >= 0 && n <= 100 包含以下運算子 範例 說明 a && b 邏輯 AND，a 為 true 且 b 為 true，則回傳 true a || b 邏輯 OR，a 為 true 或 b 為 true，則回傳 true !a 邏輯NOT，a 為 false，則回傳 true 然而 JavaScript 和其它語言在 && 和 || 邏輯運算子的行為上有些不同之處。 邏輯 AND(&&)JavaScript 中的 && 回傳的結果並不一定是布林值，實際上他會依據以下規則回傳運算結果： 如果運算式轉為布林值為 f ...
JavaScript 教學 - 運算子 (Operators) - 上
介紹 JavaScript 中的運算子 (Operators) 的用法，包含種類、優先順序、算術運算子 (Arithmetic Operator)、指派運算子 (Assignment Operator)、位元運算子 (Bitwise Operator) 和比較運算子 (Comparison Operator)。 簡介運算式運算式 (Expression) 或稱表達式，能夠讓直譯器理解並執行的程式片段都可以稱作運算式， 例如任何的實字或變數名稱，以下為一些運算式： 1234123i123 + ix = 123 + i 以下不是運算式： 12123 +x = 123 + 種類運算式中可透過提供一些數值給運算子 (Operator，或運算符) 進行運算，進而得到一個運算結果，可以想成類似函式的回傳。另外被運算的數值稱為運算元 (Operand)。 依據運算元的個數，運算子可以分為三種： 一元運算子，只有一個運算元，例如：!, ++ 等。 二元運算子，包含兩個運算元，大部分都屬於這類。 三元運算子，包含三個運算元，只有 ? : 運算子屬於此類。 而依據性質，可以分為： 算術運算子 ( ...
圖解 offsetLeft、offsetTop、offsetWidth 和 offsetHeight
本文將透過圖解的方式說明 CSSOM View Model 中 HTMLElement 定義的屬性，包含 offsetLeft、offsetTop、offsetWidth、offsetHeight 和 offsetParent。 JavaScript 中可以由 Element 的 DOM 物件中使用 offsetLeft、offsetTop、offsetWidth 和 offsetHeight 的屬性，其中 offsetWidth 和 offsetHeight 的意義可以用下面這張圖說明： offsetWidth唯讀。表示 Element 佔用的寬度除去 magin 的部分。也可以用數學表示： 1offsetWidth = width + padding + border offsetHeight唯讀。表示 Element 佔用的高度除去 magin 的部分。也可以用數學表示： 1offsetHeight= height+ padding + border offsetLeft唯讀。表示 Element 左邊距離與 offsetParent 左邊界距離，有以下四種情況： offse ...
圖解 scrollLeft、scrollTop、scrollWidth、scrollHeight 和 scrollIntoView
本文將透過圖解的方式說明 CSSOM View Model 中 Element 定義的屬性，包含 scrollLeft、scrollTop、scrollWidth、scrollHeight 和 scrollIntoView。 JavaScript 中可以由 Element 的 DOM 物件中使用 scrollLeft、scrollTop、scrollWidth 和 scrollHeight 的屬性，這些屬性的意義可以用下面這張圖說明： scrollWidth唯讀。表示 Element 內容物實際上的寬度，scrollWidth 大於等於 clientWidth。 scrollHeight唯讀。表示 Element 內容物實際上的高度，scrollHeight 大於等於 clientHeight。 scrollLeft表示內容物捲動到的水平位置，由上圖可知表示可視區左邊界與內容物左邊界的距離；當捲軸在左邊時 (由右至左書寫)，則為可視區右邊界與內容物右邊界的距離。可透過修改此屬性來捲動。 scrollTop表示內容物捲動到的垂直位置，由上圖可知表示可視區上邊界與內容物上邊界的距離。可透過 ...
