安全使用 JavaScript Global Variables

剛開始學習 JavaScript 時候,一定會大量使用 Global Variables。但是使用 Global Variables 的同時,請務必使用 var 宣告,而不是直接使用阿,否則會常常遇到 ReferenceError 的錯誤。

function addToBlockList (item) {
  block_List.push(item);
}

addToBlockList (“add 127.0.0.1”);

執行後你可以發現 console 噴出 Uncaught ReferenceError: block_List is not defined,加上一個判斷試試看。程式碼改成底下

function addToBlockList (item) {
  if (block_list) {
    block_List.push(item);
  }
}

addToBlockList (“add 127.0.0.1”);

[Read More]

認識現今 Google 搜尋引擎

感謝 @Ly Cheng 針對第三點補充

new-google-logo-knockoff

1995 年 JavaScript 第1版出現,到了 1998 年 Google 推出第一代搜尋引擎,當時的 Google 根本不用在乎網頁如何使用 CSS 或 JavaScript,而當時的網頁也顯少使用 JavaScript 及 CSS。轉眼間到現在 2014 年,如今現在的 Web,已經離不開 JavaScript 及 CSS 了,而目前 SPA (Single Page Application) 的流行,也造成 Google 搜尋引擎讀取資料的困擾,所以 Google 團隊目前也正在朝這方向努力邁進。

[Read More]

Backbone.js 1.1.1 Release 釋出 AMD 版本

backbone

Backbone.js 在 2014.02.13 推出 1.1.1 版本,此次改版沒有推出重大功能,距離上次 1.1.0 版本只有經過四個月,時間也沒有很長。之前版本尚未支援 AMD,所以都是使用 amdjs/backbone 版本,但是這次 Backbone 官方直接釋出 AMD 版本,那之後就照官方版本走就可以了,底下是這次改版 Release note

  • 釋出 AMD (require.js) 版本
  • 新增 execute hook 讓開發者可以處理特定 route arguments
  • Backbone Event 效能改善
  • 處理相容舊瀏覽器 URL Unicode

近幾年 Javascript Framework 串起,似乎現在大家瘋狂的跟 Angularjs,所以 Backbone 似乎進度也沒有很快了,就像 PHP Framework 一樣,Laravel 的出現,讓其他 Framework 變得比較少討論了

Javscript 18 歲生日歷史演進

resin.io 看到這篇 Happy 18th Birthday JavaScript! A look at an unlikely past and bright future. 裡面有些 Javascript 發展史,蠻有趣的,分享給大家看看。18 年前由 Netscape 和 Sun 共同 Release Javscript,在當年18天後,Ruby 也同時發佈了,底下來看看 Javscript 歷史演進。

[Read More]

Youtube IFrame API Unable to post message Issue

Solid_color_You_Tube_logo

YouTube IFrame Player API 提供了簡單的介面及方法,讓網站可以快速整合 Youtube 影片,但是不得不說 Google 針對 Youtube API 時常改版,所以就會常常碰道友時候可以動,有時後不可以動。Youtube 在 2011 公告開始支援 https protocol,所以現在很多網站存取 Youtube API 時,都會使用底下寫法

[Read More]

JavaScript 的 if 條件判斷式

網路上看到這篇 Two Things About Conditionals in JavaScript,比較另我訝異的是第一點 One: There is no else if,該作者提到在 JavaScript 的寫法裡面沒有 else if,底下直接看例子:

function saySomething( msg ) {
  if ( msg === 'Hello' ) {
    console.log('Hello there');
  } else if ( msg === 'Yo' ) {
    console.log('Yo dawg');
  }
}

上面是我們一般在寫 JS 會用到的條件子句,但是實際上 JS 寫的就是

function saySomething( msg ) {
  if ( msg === 'Hello' ) {
    console.log('Hello there');
  } else {
    if ( msg === 'Yo' ) {
      console.log('Yo dawg');
    }
  }
}
[Read More]

如何使用 Apache Module mod_mime

apache_software_foundation_logo_3074

Apache 可以透過 mod_mime 模組且根據使用者定義的副檔名來 response data 給 Client 端,此功能可以應用在前台搭配 Template Library,例如 Mustache Logic-less templates,透過此 Apache 模組 可以在 html 檔案將定義好全部 Template,一次讀取進來,底下舉個例子:

我們希望 apache 能夠讀取 assets/templates/test1.mustache,並且將檔案內容放到 script 裡面,這時候就必須在 apache httpd.conf 定義

text/x-mustache-template


    AddType text/x-mustache-template .mustache
    AddOutputFilter INCLUDES .mustache

[Read More]

Node.js Version Management 多版本管理

nodejs-light
相信大家對於

Node.js 版本 Release 太快而感到困擾,每次新版出來,就要開始升級原本的版本,加上測試及修改,一定會浪費不少時間在上面,不管是任何語言我都希望能有一套 Version Management 來管理各版本之間的差異,以及讓使用者可以隨時切換版本來使用測試。那今天來介紹一套 Node.js Version Management,這隻程式是用 shell script 下去撰寫,可以安裝多版本在 Linux 本機上面,隨時都可以切換不同版本測試。此作者也是 expressjs Framework 發起者。

[Read More]

Front End Engineer 前端設計師必備工具 Live.js

Livejs
在不久之前介紹一篇:

LiveReload 網頁程式設計師必備工具,該篇適合用在寫後端+前端的開發者,對於剛開始摸網頁的初學者可能不是很容易就上手,加上在 Windows 或 Linux 上面需要一點安裝步驟。不久之前在 IRC 頻道 #codeigniter.tw 有網友熱心提供一套好用工具 Live.js,這一套幫助您開發前端設計的部份,也就是 Javascript Html 跟 CSS,一樣讓您不用在切換視窗 Alt+TAB,只要您任何時間修改了 HTML + CSS + Javascript,視窗就會自動重新 reload,底下整理該工具特性

  • 只有支援 Html JavaScript CSS 三種格式
  • 只有支援網站 Local 檔案,也就是必須是同網域
  • 並不支援 File:// 協定,換句話說必須有 Web Server (Apache or Lighttpd or Nginx)
[Read More]

HTML5 placeholder attribute 在 IE 上顯示

程式設計師在網頁表單上通常會設計很多提示的功能,而在 Html5 提供了 placeholder attribute 這功能,目前 FireFox Safari Google Chrome 都沒有顯示上的問題,唯獨 IE8(含以下)都沒辦法顯示這功能,所以必須透過 javascript 來解決這部份問題了,網路上找到這篇解決方式,底下是原始碼 解決原理其實很簡單,那就先將 placeholder 寫入到 input value 裡面,在 focus event 當下比對 input value 是否等於 placeholder 的值,如果是就清空,反之透過 onblur event 來寫回原先的 placeholder 值,缺點就是如果當 input type = password 的時候會很麻煩。底下提供轉成 CoffeeScript 的程式碼: add_placeholder = (id, placeholder) -> el = document.getElementById(id) el.placeholder = placeholder el.onfocus = () -> if(this.value == this.placeholder) this.value = '' el.style.cssText = '' el.onblur = () -> if(this.value.length == 0) this. [Read More]