小殘的程式光廊

在前面的文章提到了使用Node.js進行單元測試和計算程式覆蓋率，以及在GitHub上使用Travis CI進行整合，這篇文章延續前幾篇文章內容，進一步利用Coveralls整合程式覆蓋率統計至Github上。

請先參考下列文章：

在之前的文章 使用mocha在Node.js和瀏覽器環境中單元測試 提到如何進行測試，而我們還可以利用工具去進一步計算測試所涵蓋的範圍。

由於之前採用mocha作為測試的Framework，所以這篇文章選擇可以和mocha搭配使用的jscoverage。

Travis CI是一個提供GitHub專案持續整合的服務平台，支援各種程式語言，本篇介紹JavaScript(Node.js)專案如何結合此服務。

藉由整合Travis CI，之後只要更新專案到GitHub就會自動進行測試，並通知你測試結果。

Mocha是一套JavaScript的測試框架(Test Framework)，有Node.js和瀏覽器版本，可分別測試不同環境。

假設我們開發了一個JavaScript套件，我們希望可以在Node.js和不同瀏覽器上測試，可以用以下方法來達成。

在較新的瀏覽器中已經有提供btoa和atob兩個全域函式，可以用來做base64的encode和decode，

瀏覽器支援參考這裡，基本上就是IE9以下不支援，使用方法如下：

1. 核心(Core)

1.1 $(something)

介紹JavaScript中的運算子(Operators)的用法，包含邏輯運算子(Logical Operator)、字串運算子(String Operator)和特殊運算子(Special Operator)。

介紹JavaScript中的運算子(Operators)的用法，包含種類、優先順序、算術運算子(Arithmetic Operator)、指派運算子(Assignment Operator)、位元運算子(Bitwise Operator)和比較運算子(Comparison Operator)。

本文將透過圖解的方式說明CSSOM View Model中HTMLElement定義的屬性，包含offsetLeft、offsetTop、offsetWidth、offsetHeight和offsetParent。

JavaScript中可以由Element的DOM物件中使用offsetLeft、offsetTop、offsetWidth和offsetHeight的屬性，其中offsetWidth和offsetHeight的意義可以用下面這張圖說明：

本文將透過圖解的方式說明CSSOM View Model中Element定義的屬性，包含scrollLeft、scrollTop、scrollWidth、scrollHeight和scrollIntoView。

JavaScript中可以由Element的DOM物件中使用scrollLeft、scrollTop、scrollWidth和scrollHeight的屬性，這些屬性的意義可以用下面這張圖說明：

本文將透過圖解的方式說明CSSOM View Model中Element定義的屬性，包含clientLeft、clientTop、clientWidth和clientHeight。

JavaScript中可以由Element的DOM物件中使用clientLeft、clientTop、clientWidth和clientHeight的屬性，這些屬性的意義可以用下面這張圖說明：

介紹JavaScript中的變數(Variables)的用法，包含宣告(Declare)、指派(Assign)與變數範圍(Scope)，以及識別子(Identifier)的格式。

介紹JavaScript中的資料型態(型別)，包含物件(Object)、陣列(Array)、未定義(undefined)空值(null)、和函式(Function)。

介紹JavaScript中的資料型態(型別)，包含布林(Boolean)、數值(Number)和字串(String)，以及轉型的方法。

開發人員工具

之前的文章提到，早期開發JavaScript要進行Debug並不容易，不過現在的瀏覽器大多都已經有內建的開發人員工具，能夠讓我們方便的進行觀察DOM元素和CSS屬性等不同的功能。

介紹JavaScript中的基本語法與使用方式，包含執行JavaScript、在HTML中嵌入JavaScript、註解與其他特性。

說明

本文針對一些JavaScript效能相關的文章之理論進行實際的測試與驗證，結果有些符合預期，有些則意料之外。測試環境瀏覽器如下：