JavaScript on G. T. Wang

PhotoSwipe 畫廊函式庫，網頁展示照片

Fri, 04 May 2018 16:20:06 +0800

本篇介紹如何使用 PhotoSwipe 畫廊函式庫，建立好用的網頁看圖介面，方便電腦與手機使用者在網頁上瀏覽圖片。

PhotoSwipe 是一套開放原始碼的 JavaScript 畫廊函式庫，可以讓我們在網頁中建立直覺的看圖介面，方便瀏覽大量的圖片，而且也支援手機的觸控操作，是一套很不錯的圖片展示工具函式庫。

Vim 設定 React JSX 程式碼顏色教學

Wed, 14 Mar 2018 12:04:54 +0800

這裡介紹如何在 Linux 中安裝 vim-jsx 這個 Vim 的 JSX 語法外掛，讓 React JSX 的程式碼可以呈現正常的色彩。

JSX 是 React 所新創的 JavaScript 擴充語言，比傳統的 JavaScript 多出許多新的語法，所以 Vim 編輯器遇到 JSX 的程式碼時，會無法顯示出正確的語法顏色。

JavaScript 實作簡易網頁表格資料搜尋與篩選功能

Wed, 14 Mar 2018 08:53:17 +0800

這裡介紹如何在網頁中加入簡單的 JavaScript 程式碼，讓表格擁有基本的資料搜尋與篩選功能。

在設計網頁時，若遇到表格資料比較多的情況，可以適時加入輕量化的 JavaScript 程式碼，讓表格具有簡易的資料搜尋與篩選功能，讓使用者更方便尋找資料，而這種做法不會使用到 jQuery 等大型函式庫，對於整個網頁的效能幾乎沒有影響。

Coinhive 網頁 JavaScript 挖礦程式使用教學

Tue, 19 Dec 2017 19:57:29 +0800

這裡介紹如何使用 Coinhive 建立一個挖礦網頁，以網頁瀏覽者的電腦 CPU 進行挖礦。

加密貨幣（Cryptocurrency）是現今非常熱門的話題，以往大家都是使用自己的 CPU 或 GPU 來挖礦賺錢（例如 MinerGate），而現在已經有使用 JavaScript 實作的挖礦程式出現，可以直接放在網頁上，使用網頁瀏覽者的 CPU 挖礦。

網頁 input 使用 accept 限制上傳檔案類型

Wed, 23 Aug 2017 15:36:27 +0800

這裡整理了一些網頁 <input> 上傳檔案時，使用 accept 限制上傳檔案類型的用法與範例。

網頁表單的 <input> 可以用來上傳檔案，如果想要限制使用者只能上傳某些特定的檔案類型，可以使用 accept 屬性來調整可接受的檔案類型。

AES-JS：JavaScript 的 AES 對稱式資料加密工具

Mon, 13 Mar 2017 13:14:18 +0800

這裡介紹如何使用 AES-JS 這個 JavaScript 的 AES 對稱式加密工具，讓有機密性的重要資料加上密碼保護。

AES 進階加密標準（Advanced Encryption Standard）是一種對稱式的加密演算法，此標準替代了原先的 DES 加密演算法，目前被各界廣泛使用。

Leaflet 互動式 JavaScript 地圖繪製工具，適用手機、平板與電腦

Thu, 04 Aug 2016 21:28:53 +0800

Leaflet 是一套適用於各種平台的 JavaScript 地圖繪製工具，可以呈現類似 Google 地圖的效果。

要在網頁上呈現地圖，除了大多數人所熟知的 Google 地圖之外，Leaflet 也是一套很不錯的工具，它是一套開放原始碼的輕量級 JavaScript 網頁地圖函式庫，其所呈現的效果與 Google 地圖非常相似，主要的特色是使用簡單、速度快，並且跨平台，許多知名網站（如 GitHub 與 Flickr 等）都是使用 Leaflet 來呈現地圖。

標準網址使用教學，讓 Google 搜尋呈現正確的網站

Wed, 27 Apr 2016 12:00:26 +0800

這裡介紹如何設定標準網址（canonical link），讓自己網站可以在 Google 搜尋結果上呈現正確的網址，達到搜尋引擎最佳化的效果。

在一個網站中使用不同的網址來呈現同一個頁面的內容是很常見的情況，舉例來說，有些網頁會有閱讀用與列印用兩種網址，這樣的設計可以讓使用者更便利，但是對於網路搜尋引擎（如 Google 等）而言，可能會無法判別那一個網址才是最正式的網址，如果在搜尋結果中顯示了列印用的版本就不是很恰當。

延遲載入 JavaScripts 的實務作法，加速網頁顯示速度

Tue, 19 Apr 2016 21:25:00 +0800

這裡介紹實務上延遲載入各種 JavaScript 的作法，包含 facebook、Google+ 與 twitter 等各類工具。

在網頁中我們可以使用 async 或 defer 的方式來引入外部的 JavaScript 檔案，這樣可以減輕外部 JavaScript 檔對 HTML 解析的效能影響，而這裡我們要介紹另一種在實務上延遲載入各種 JavaScript 程式碼的作法，包含常見的社群按鈕以及各種 JavaScript 工具，例如 facebook、Google+ 與 twitter 等。

WordPress 設定 JavaScript 使用 Async 與 Defer 載入，網站校調技巧教學

Thu, 14 Apr 2016 09:08:14 +0800

本篇介紹如何將 WordPress 網站的 JavaScript 改以 async 與 defer 的方式載入，改善網站的效能。

網站在建置的後期階段都會進行一些效能的校調，而 PageSpeed Insights 是 Google 所提供的網頁效能分析工具，輸入網址即可立即測試網站效能，並且還有列出各種問題以及解決方案。

JavaScript 操作瀏覽器 Cookie 範例教學與 API 工具

Fri, 11 Mar 2016 11:53:34 +0800

這裡介紹如何使用 JavaScript 管理瀏覽器的 cookie，並且提供範例教學以及簡單易上手的 API 工具。

瀏覽器的 cookie 可以讓網頁的 JavaScript 程式將少量的資料儲存起來，最常用於儲存網頁的設定值與一些程式 session 相關的資料。

Node.js 自動抓取網頁資料範例程式教學

Wed, 07 Oct 2015 12:06:20 +0800

這裡介紹如何使用 Node.js 撰寫自動抓取網頁資料的程式，從網路上自動擷取大量的數據或資料。

在網頁 API 尚未風行的年代裡，如果想要從網路上自動取得一些資料，通常都只能從一般的網頁中擷取（web scraping），縱使現在許多網路上的資料都會提供程式專用的 API，但若遇到沒有提供完整功能 API 的網站，還是只能靠這個最基本的方式處理。

Ext JS 使用 Ext.Ajax 與伺服器溝通

Wed, 09 Sep 2015 16:07:55 +0800

Ext.Ajax 是 Ext.data.Connection 的一個 singleton 實體，可以用來跟伺服器上面的程式溝通。

以下是一個簡單的範例：

Ext.Ajax.request({
  url: 'ajax_demo/sample.json',

  success: function(response, opts) {
    var obj = Ext.decode(response.responseText);
    console.dir(obj);
  },

  failure: function(response, opts) {
    console.log('server-side failure with status code ' + response.status);
  }
});

Ext.Ajax.request 在執行時會以非同步（asynchronous）的方式送出請求，然後馬上回傳（return），回傳值並不會包含與伺服器連線的任何資訊或結果，當成功連現取得資料時，Ext.Ajax.request 會執行 success 所指定的函數，若失敗則執行 failure 所指定的函數。另外也可以使用 requestcomplete 事件來處理完成請求時的動作。

Ext JS 的 Controller 使用教學

Tue, 08 Sep 2015 09:26:00 +0800

這裡介紹 Ext JS 架構中的 Controller 的使用方式。

在 MVC 架構中，Controller 是一個很重要的角色，以下是 Ext JS 的 Ext.app.Controller 使用教學。

建立基本 Controller

Controller 是 Ext JS 中連接各個應用程式組件的媒介，它主要的作用是傾聽事件（events）然後執行對應的動作，以下是 Controller 的建立方式：

樹莓派 Raspberry Pi 使用 Node.js 與 WebSocket 呈現即時性的 MPU-6050 感測器資料

Fri, 24 Jul 2015 16:17:30 +0800

這裡我們在樹莓派（Raspberry Pi）上使用 Node.js 與 WebSocket 技術，以網頁來呈現即時性的 MPU-6050 加速規感測器資料。

在之前的文章中，我們使用 MPU-6050 的 DMP 來擷取精準的運動感測資料，而接下來我打算在樹莓派上面用 Node.js 架設一個間單的網頁伺服器，將 MPU-6050 的資料即時轉送到網頁上，讓使用者只要打開瀏覽器就可以立即看到目前所收集到的資料。

Google Maps JavaScript API 入門使用教學與範例

Fri, 22 May 2015 16:37:36 +0800

這裡透過簡單的 Hello, World 範例，介紹 Google Maps JavaScript API 的基本使用方式。

Google Maps JavaScript API 是設計給網頁開發者所使使用的開發工具，您可以使用這個 API 將 Google 地圖安插在自己的網頁中，並且將自己的資料放在地圖上面呈現。

Timesheet.js：在網頁上繪製甘特圖（Gantt Plot）的 JavaScript 工具

Thu, 28 Aug 2014 18:33:55 +0800

這裡介紹一個可以在網頁上繪製甘特圖（Gantt Plot）的 JavaScript 工具，畫面簡潔，使用上也很簡單。

甘特圖是一種用來顯示專案進度或是其他時間相關資訊的條狀圖，一般的專案管理軟體（例如 Microsoft Project 或 Mr. Project）也都可以繪製這樣的圖形。

YUI Compressor： JavaScript 與 CSS 壓縮工具，產生最小化的網頁

Wed, 21 May 2014 21:06:14 +0800

YUI Compressor 是由 Yahoo 所發展的一套 JavaScript 與 CSS 壓縮工具，可以協助網頁開發者產生最小化的網頁。

網頁大小跟載入的速度有很大的關係，如果要降低網頁的大小，除了可以使用 Google Closure Compiler 編譯器將 JavaScript 最小化之外，也可以使用 Yahoo 所發展的 YUI Compressor，它除了可以處理 JavaScript 之外，也可以一併將 CSS 檔最小化。

加速 JavaScript 執行效率的 DOM 操作技巧（降低瀏覽器回流）

Thu, 08 May 2014 08:20:08 +0800

在開發 RIA 的過程中，會常常使用到 JavaScript 來變更網頁元素，甚至增加新的網頁元素，而不同的操作方式也會對執行效能有所影響。

瀏覽器在顯示網頁時，會需要計算每一個網頁元素應該放置在哪個位置，這個計算過程就稱為瀏覽器回流（browser reflow）。當我們對 DOM 進行操作（例如更改元素的 CSS 樣式、大小等）或是改變視窗大小時，也會造成瀏覽器的回流，由於瀏覽器的流回需要耗費時間，所以如果可以盡量減少回流，就可以增加整個網頁應用程式的效率。

JSHint：自動檢查 JavaScript 程式碼，偵測錯誤的線上工具

Sat, 12 Apr 2014 14:34:06 +0800

JSHint 是一個可以自動檢查 JavaScript 程式碼的工具，讓程式設計者在專案開發初期就可以即時修正潛在的錯誤。

由於 JavaScript 這個程式語言的語法與結構非常彈性，不像 Java 或 C 語言那樣嚴謹，對於程式設計者而言，一開始會感覺很方便，不管怎麼寫都可以執行，但是當整個程式發展到一定規模的大小之後，JavaScript 這樣鬆散的結構會讓程式很容易出現一些 bugs，而且除錯與修正的工作也會變得非常困難。

HTML5 的 Server-Sent Events 串流使用教學

Sat, 12 Apr 2014 14:28:57 +0800

Server-Sent Events 是一個已經被 W3C 納入 HTML5 標準的 API，它可以讓伺服器透過一般的 HTTP 協定主動更新瀏覽器的資料。

傳統的網頁架構下，如果瀏覽器要持續接收來自於伺服器端的新資料時，通常都是透過 Polling、Long-Polling 或 Streaming 等方式來達成，而後來出現的 WebSocket 徹底解決了這個問題，不過除此之外，在 HTML5 標準中還有一個 Server-Sent Events 也可以處理這類型的問題。

定義 JavaScript 函數（Functions）的各種方式

Thu, 03 Apr 2014 15:27:38 +0800

這裡介紹各種 JavaScript 函數的定義方式，有些方式很常見，但是有一些你可能沒看過。

以下是在 JavaScript 中四種建立函數的方式：

// 四種建立函數的方法
function declaration () {};
var funcExpression = function () {};
var namedFuncExpression = function named() {};
var fnConstructor = new Function ();

這些都是可以用來建立函數（Function）物件的方法，但是其中有些差異，以下我們將討論這些作法之間有什麼差別。

使用 Node.js 與 Socket.IO 建立即時性（Realtime）網頁應用程式 App

Thu, 06 Mar 2014 15:33:33 +0800

這裡介紹如何使用 Node.js 與 Socket.IO 建立一個即時性（realtime）的網頁應用程式 App，讓瀏覽器與伺服器之間具備雙向溝通的能力。

Socket.IO 是一個用於建立即時性通訊網頁應用程式（realtime web applications）的跨平台 JavaScript 函式庫，可以消除不同平台上傳輸方式的差異性，讓開發者更容易發展即時性的網頁應用程式。

Chrome V8 引擎使用 JavaScript 背景編譯技術大幅提升執行效能

Fri, 14 Feb 2014 07:25:42 +0800

Google 將 Chrome 的 JavaScript 編譯動作放在背景執行，改善瀏覽器的整體效能。

一直以來 Chrome 都不斷進行效能的改進，V8 引擎透過編譯 JavaScript 的方式，加速 JavaScript 的執行速度，在以前這個編譯動作是放在主要執行序（main thread）上來處理的，但是這樣的做法會對於 JavaScript 的執行效能有一些影響。

JavaScript 記憶體洩漏（Memory Leak）問題

Fri, 24 Jan 2014 07:59:11 +0800

這裡我們將解釋為什麼 JavaScript 會產生記憶體洩漏的問題，並示範會產生這個問題的程式寫法，讓大家知道該如何處理這類的問題。

JavaScript 是一種功能強大的語言，在現今許多的網頁中都扮演著重要的角色，雖然其語法簡單、撰寫容易，但是在某些瀏覽器上會產生記憶體洩漏（memory leak）的問題，卻很讓人頭痛。

CodeCombat：透過玩遊戲學習 JavaScript 程式設計

Tue, 07 Jan 2014 11:02:05 +0800

CodeCombat 是一個開放原始碼的線上戰略遊戲，可以讓你一邊玩遊戲一邊學習 JavaScript 的程式設計。

一般初學者在學習程式語言的時候，通常都要經過一段漫長的時間去習慣程式設計的思維與邏輯，尤其是完全沒有寫過程式的人，會需要更長的時間，而這段時期通常都很枯燥乏味。

Vim.js：一個使用 JavaScript 實作的 Vim 編輯器

Sat, 14 Dec 2013 06:37:53 +0800

Vim.js 是一個使用 JavaScript 實作的 Vim 編輯器，不過實用性不高，只適合學習與研究使用。

Vim.js 是把傳統 Linux 上的 Vim 編輯器以 JavaScript 實作在一般的瀏覽器中，不過目前還在發展當中，還不是很穩定，而且這種編輯器大概只適合比較資深的 UNIX/Linux 使用者作為「娛樂」使用。

asm.js 架構與 Emscripten 編譯器：Mozilla 在網頁上發展出接近原生（Native）程式效能的 JavaScript 程式（一）

Tue, 02 Jul 2013 11:14:10 +0800

Mozilla 為了讓 JavaScript 執行得更快，因此發展了 asm.js 這個架構，在這個架構下，可以讓 JavaScript 的程式執行的效率提升很多，甚至可以很接近原生（native）程式的執行效能！

asm.js 架構與 Emscripten 編譯器：Mozilla 在網頁上發展出接近原生（Native）程式效能的 JavaScript 程式（二）

Tue, 02 Jul 2013 11:10:01 +0800

上一篇我們介紹了 asm.js 架構的說明，這裡我們直接來看以實際的程式所測試出來的標竿分析（benchmarking）。

標竿分析（Benchmarking）

標竿分析（benchmarking）是一個棘手的問題，在實際的問題中有很多應用程式可以用來做標竿分析，但是因為我們的瀏覽器環境有許多限制，像是有限制的網路環境、儲存空間、顯示卡語音效裝置等等，所以我們這裡只選擇一些比較單純的程式來測試。

asm.js 架構與 Emscripten 編譯器：Mozilla 在網頁上發展出接近原生（Native）程式效能的 JavaScript 程式（三）

Tue, 02 Jul 2013 11:03:24 +0800

上一篇的測試報告中，我們分析過基本的 asm.js 程式執行效能，大致上還不錯，這裡我們繼續討論更進階的主題。

進階測試結果

但很不幸的，實際情況往往會比較複雜，在你要使用 asm.js 架構開始開發程式或是跟同事大力推銷 asm.js 之前，你必須先注意幾個問題。