Bootstrap

https://speakerdeck.com/u/evenwu/p/twitter-bootstrap-hao-yong-de-wang-ye-she-ji-kuang-jia-1

(http://bootswatch.com/)
(https://wrapbootstrap.com/)
(http://ckrack.github.com/fbootstrapp/)
(http://addyosmani.github.com/jquery-ui-bootstrap/)

Javascript MVC

http://javascriptmvc.com

(http://javascriptmvc.com/docs.html#!jQuery.fixture)

Node.js

［什麽是 Node.js］

# 如果你熟悉 Linux 與程式開發，我想我應該可以這樣子解釋 Node.js

shell$ python hello.py
shell$ perl hello.py
shell$ ruby hello.rb
shell$ php hello.php

shell$ alias javascript='node'
shell$ javascript hello.js

Node.js 把 javascript 從瀏覽器中釋放出來了！

［使用 nvm 安裝 Node.js］

git clone http://github.com/creationix/nvm.git ~/nvm
source ~/nvm/nvm.sh
nvm install v0.6.10
nvm use v0.6.10
nvm alias default 0.6

node --help

which node
which npm

使用 nvm 安裝 nodejs 後，它會自動安裝相應版本的 npm（Nodejs Package Manager）。
使用 npm 可以安裝各種 nodejs 模組。

但是每次要使用好像都要 source nvm.sh 一次，而且 nodejs 也沒有加到系統路徑中。

［使用 apt-get 安裝 Node.js］

sudo apt-get install python
sudo apt-get install openssh-server libssl-dev
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

［自行編譯安裝 Node.js］

sudo apt-get install python
sudo apt-get install openssh-server libssl-dev
git clone --depth 1 git://github.com/joyent/node.git
cd node
git checkout v0.4.12
./configure
make -j2    # -j sets the number of jobs to run
sudo make install

［安裝 Node.js 的套件管理程式 NPM］

# Node Packages Manager

sudo su -
curl http://npmjs.org/install.sh | sh

強力推薦的電子書：
http://contpub.org/read/nodejs-wiki-book

Framework：
https://github.com/dreamerslab/coke

http://nodejs.tw
http://wiki.nodejs.tw
https://github.com/dreamerslab/nodejs.basics

Reference：
http://nodejs.org
http://npmjs.org
https://github.com/joyent/node/wiki/Installation
https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
https://github.com/nodejs-tw/nodejs-community-book
https://www.facebook.com/NodeJS.tw
http://jsdc.tw

CRUD

https://github.com/Fredi/simpleCRUD
https://github.com/kawanoshinobu/SenchaTouch2-simple-CRUD-sample

呼叫自定義的 Javascript 函式

最近碰到一個有趣的事情，不過說不定其實只是很基礎的問題。
（我基礎沒打好，所以說不定這問題根本不是問題 ...）

果然是很基礎的問題：
Javascript 的 eval 行為與 function pointer

在 http://html5boilerplate.com 的環境下，我寫了這段 javascript 在 script.js 檔：
Test 1

(function($){
$(document).ready(function(){

  function sayHi()
  {
    console.log('hello');
  }

  $(function()
  {
    setInterval( "sayHi()", 2000 );
  });

}); // end of $(document).ready
}(jQuery)); // end of all

在執行的時候，Firefox 說：sayHi is not defined

Test 2

(function($){
$(document).ready(function(){

  $(function(){

    function sayHi()
    {
      console.log('hello');
    }

    setInterval( "sayHi()", 2000 );
  });

}); // end of $(document).ready
}(jQuery)); // end of all

一樣是 sayHi is not defined.

因為 sayHi() 是在：
(function($){ 底下的 ...
$(document).ready(function(){ 底下的 ...
$(function(){ 底下的 scope 內，
而使用雙引號 "sayHi()" 呼叫時，Javascript 會尋找全域環境下的 sayHi()，當然找不到。

Test 3

(function($){
$(document).ready(function(){

  $(function(){

    function sayHi()
    {
      console.log('hello');
    }

    setInterval( sayHi(), 2000 );
  });

}); // end of $(document).ready
}(jQuery)); // end of all

可以執行，但是只執行一次。

因為呼叫時加了 () 等於是執行這個 function，而不是 refer 到這個 function 而不執行。
function 在 Javascript 是類似 object（打類比成 Linux 把所有東西看成檔案一樣）。

Test 4

(function($){
$(document).ready(function(){

  $(function(){

    function sayHi()
    {
      console.log('hello');
    }

    setInterval( sayHi, 2000 );
  });

}); // end of $(document).ready
}(jQuery)); // end of all

it works.

sayHi function 的 scope 在：
(function($){ 底下的 ...
$(document).ready(function(){ 底下的 ...
$(function(){ 底下。

setInterval 內的 sayHi refer 到同一層的 sayHi function（object？）

Test 5

(function($){
$(document).ready(function(){

  $(function()
  {
    setInterval( function(){ console.log('hello'); }, 2000 );
  });

}); // end of $(document).ready
}(jQuery)); // end of all

it works.
直接綁定一個匿名函式，沒有問題。

Test 6

(function($){
$(document).ready(function(){

  function sayHi()
  {
    console.log('hello');
  }

  $(function()
  {
    setInterval( sayHi, 2000 );
  });

}); // end of $(document).ready
}(jQuery)); // end of all

it works!?

Test 7

function sayHi()
{
  console.log('hello');
}

$(function()
{
  setInterval( "sayHi()", 2000 );
});

it works.

(function($){ 與 $(document).ready(function(){ 都要拿掉，留下任何一個也不行。
如此一來，宣告的 sayHi function 才是在全域範圍下，"sayHi()" 才 refer 得到。

最後，如果要宣告一個全域的 Javascript function，
或是說“假裝”成 Class 那樣用（Javascript 是 classless 的！），
可以這樣做：

var ClassName = window.ClassName = function()
{
    // your code
};
    
ClassName.prototype.method_of_class = function()
{
    // your code
};

function pointer
function scope

Reference：
http://stackoverflow.com/questions/1191833/how-to-run-a-function-in-jquery
http://jquery-howto.blogspot.com/2008/12/what-heck-is-function-jquery.html
http://jibbering.com/faq/notes/closures/
http://www.javascriptkit.com/javatutors/closures.shtml
http://www.robertsosinski.com/2009/04/28/binding-scope-in-javascript/
http://audi.tw/Blog/JavaScript/javascript.eval.asp
http://24ways.org/2005/dont-be-eval
http://docs.jquery.com/How_jQuery_Works
http://jquery-howto.blogspot.com/2008/12/what-heck-is-function-jquery.html

CoffeeScript

CoffeeScript is just JavaScript!

CoffeeScript 有自己獨特的語法（類似 Python 混搭 Ruby），
編寫好的 CoffeeScript 檔，透過 CoffeeScript Compiler 可以編譯成通用的 Javascript

［使用 apt-get 安裝 CoffeeScript Compiler］

sudo apt-get install python
sudo apt-get install openssh-server libssl-dev
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo add-apt-repository ppa:gias-kay-lee/coffeescript
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install coffeescript

［使用 NPM 安裝 CoffeeScript Compiler］

要使用 NPM 需要先安裝好 Node.js 環境，請參考：
http://zx-1986.blogspot.com/2011/10/nodejs.html

然後執行：

sudo npm install -g coffee-script

［編譯安裝 CoffeeScript Compiler］

git clone https://github.com/jashkenas/coffee-script.git
cd coffee-script
sudo bin/cake install

［編譯 .coffee 檔產生 .js 檔］

# Compile a directory tree of .coffee files into a parallel tree of .js, in lib:
coffee -o lib/ -c src/

# Watch a file for changes, and recompile it every time the file is saved:
coffee --watch --compile experimental.coffee

# Concatenate a list of files into a single script:
coffee --join project.js --compile src/*.coffee

# Print out the compiled JS from a one-liner:
coffee -bpe "alert i for i in [0..10]"

# Start the CoffeeScript REPL（read-eval-print loop）:
coffee

Reference：
http://upgrade2rails31.com/coffee-script
http://jashkenas.github.com/coffee-script

Javascript Frameworks

【jQuery】

jQuery 雖然稱爲 Javascript 的「Framework」，但它其實更像一套「Toolkit」。
而且是一套非常強的 Javascript Toolkit，族繁不及備載的外掛、五花八門的特效等等。

jQuery 包好了許多函式，叫用這些函式，可以很快速地完成從前需要花許多功夫的效果。
在 jQuery 這個自成體系的工具包裡，DOM 的操作變得簡單、易用、快速。
除了這些，jQuery 也提供了它自成一系的 Ajax 操作，還有各種動畫特效等。

撰寫 Javascript 很多時候都是在處理或控制 DOM 元素。
修改某個 div 裡的內容、刪除某列 tr、爲某個 id 的元素加上指定的 class ...
許多想得到的 DOM 操作，使用 jQuery 的話，可以省下不少程式碼數量。

引入 jQuery：

在 HTML 文件中引入 jQuery 函式庫之後，就可以透過「jQuery」或其別名「$」使用它。
例如很多時候，我們希望使用者在整個 DOM 文件建構好之後，再來執行 Javascript 的直譯動作，
傳統的 Javascript 會這樣控制：

window.onReady = function()
{
    // your codes
}

在 jQuery 裡，則是這樣作：

jQuery(document).ready(function()
{
    // your codes
});

或是

$(document).ready(function()
{
    // your codes
});

另一種比較嚴謹的做法是：

(function($){
    $(document).ready(function(){
        // your codes
    });
}(jQuery));

最後一種寫法直接定義並執行一個匿名函式 function($)，
function($) 中的 $ 指的是要傳入這個匿名函式的參數，
而這個傳入的參數，寫在最後一行的掛號裡，即 (jQuery)。
這樣的作法可以避免跟其他也使用 $ 作爲名稱空間 prefix 的框架衝突，
如此一來，在這個匿名函式 function($) 的範圍內，$ 確定僅是 jQuery。

如果有用 Javascript 做過 DOM 元素控制（寫過 Javascript 幾乎都做過），
那麼改用 jQuery 來作同樣事情時，一定會驚豔於 jQuery 的簡便、易用。
例如選擇 DOM 裡面某個 id 的元素，單純的 Javascript 寫法是：

var a = document.getElementById("some_id");

使用 jQuery 則可以這樣寫：

var a = $("#some_id");

＊

【Mootools】

MooTools 是一個用 JavaScript 原本應有的方式來寫 JavaScript 的框架（Framework）。
其立意是實作一個跟 JavaScript 非常相似的 API 並且針對各個部分加以強化。

引入 Mootools：

＊

【YUI】

YUI 使用：

＊

【ExtJS】

ExtJS 使用：

＊

【RightJS】

RightJS 使用：

＊

Roadmap

http://docs.jquery.com/JQuery_1.5_Roadmap
http://www.sencha.com/products/js/roadmap.php
http://yuilibrary.com/projects/yui3/roadmap
http://rightjs.org/blog

＊

Reference：
01. http://www.ibm.com/developerworks/cn/web/wa-jsframeworks
02. http://www.ibm.com/developerworks/web/library/wa-aj-extjs
03. http://clay0529.blogspot.com/2010/02/yui-3.html
04. http://yufei34514.blog.163.com/blog/static/407836552009114154340
05. http://www.ajaxray.com/blog/2009/04/05/extjs-quick-start-guide-for-jquery-developers-javascript-howto
06. http://jqueryvsmootools.com

Javascript

初次接觸 Javascript 時，沒有認真把它當成一門程式語言來對待。
我想，這應該也是許多人的通病。

它的名字真的害人不淺，如果本身有以貌取人的毛病，那慘了：
「輕量級的 Java 語言嘛，Java 式的 Script 嘛，對吧？」

千　萬　別　這　麼　想　！

Javascript 跟 Java 沒有關係！
Javascript 絕對不只是 Script 那麼單純！

最近要做一份 Javascript Frameworks 的文件。
我發現，如果要寫一份關於 Javascript Frameworks 的文件，
沒有先弄清楚 Javascript，似乎不大對。

但是要全部記錄在同一篇，也太自不量力了。
Javascript Frameworks 每一套幾乎都可以各自出一本書了。
Javascript 當然更不用說了，市面上 Javascript 的書成百上千。

我寫這篇文章，記錄跟整理我對 Javascript 的瞭解，幫自己作個備忘。
內容會持續更新與修正，希望大家指正與教導！


＊

資訊技術的世界，一個十年大概就像社會中一個世紀那麼遙遠。
Javascript 的出現，對 2010 的我們來說，就像是曾祖輩的事情。
雖然 Javascript 第一次出現只不過是在 1995 年而已。

有些古老的歷史對現在新接觸 Javascript 的人來說，似乎不是那麼重要了。
因爲瀏覽器大戰實在太遙遠了，就像是第一次世界大戰那樣。
但 Javascript 的由來、爲何而存在、是怎麼樣的一個存在，我想都應該值得搞清楚。

＊

故事的開始，要從網際網路（Internet）說起。

Internet 的出現，最初是美國在學術與軍事應用上的考量。
從學術方面簡單說，就是爲了讓各地學術單位、研究人員可以交流分享成果。

那該怎麼樣來呈現 Internet 上的資訊呢？
又該用什麼樣的工具來瀏覽 Internet 上的資訊呢？
於是，HTML 和瀏覽器粉末登場。

從學術分享的目的出發，HTML 最初設計出來就是爲了呈現文字。
因爲科學研究報告的許多內容就是文字，或者再加上些圖片。

HTML 完整的稱呼是 HyperText Markup Language。

Markup Language 是標記語言，就是用規定的格式將某些內容標記起來。
例如，買手搖式飲料的時候，老闆會在杯子上面寫好哪杯是珍奶，哪杯是綠茶。
老闆「寫上去」那個動作就是「標記」的意思。

Hyper 在英文中則有過度的、超過的等意思。
爲什麼叫它過度的文字，或者說它是超越文字的文字？
因爲 HTML 除了可以標記出內容的結構：哪邊是段落、哪邊是標題、哪些又是表格；
HTML 還可以標記出「連結」：從這裡可以連結到哪個文件、哪個位置。