CoffeeScript 基礎學習

前言

由於可能專案使用上的需求將會撰寫 CoffeeScript，所以這邊就來稍微摸一下 CoffeeScript 是什麼鬼，又可以用什麼方式來撰寫

CoffeeScript 小字典

CoffeeScript 並不是一個新的語言，很多人看到名子 CoffeeScript 就會想說 「哇!又要學新的東西了」，但是其實 CoffeeScript 是 JavaScript 的另一種語言，又稱轉譯語言，轉譯語言的意思簡單來講就是會轉換編譯成另一種語言也就是 JavaScript。

而 CoffeeScript 這個語言主要是受到了 Haskell， JavaScript， Perl， Python， Ruby， YAML 這幾個語言啟發而出現，但主要是 JavaScript，所以在撰寫過程中，如果你是學過 Python， Ruby，可能會覺得有點熟悉。

想要更清楚瞭解可以看看 Wiki

起手式

前面有講到 CoffeeScript 會轉譯成 JavaScript，所以勢必是要透過特殊的工具來做轉譯，所以我們可以 Google 一下 “CoffeeScript 教學”，可以看到這幾篇文章

在第一篇 “[JavaScript] CoffeeScript 基本介紹” 裡面就有介紹如何把 CoffeeScript 轉譯成 JavaScript，但是這邊我覺得可以改用另一種方式，Gulp，所以我試著找了這個關鍵字 “CoffeeScript Gulp” (畢竟不太想再全域安裝太多東西，所以想找看看 Gulp 可不可以做到)

看到第一篇搜尋結果有 gulp-coffee，那就可以直接開始撰寫看看哩，前面這邊就直接略過很多起手式，如果對於 Gulp 撰寫不清楚，可以看看這一系列文章學習 這是在講 Gulp 不是飲料是任務自動化工具這件事，這邊也附上 Gulp 系列文章的 repos sample

所以這邊就快速安裝 gulp-coffee 以及建立資料夾等等動作吧~

由於 CoffeeScript 撰寫方式稍微不同，所以這邊紀錄一下撰寫模式吧

基礎撰寫，變數宣告與註解

# 這是單行註解
###
這是多行註解
###

# 這是變數宣告方式，不需要再 var
sayhi = 'Coffee';
name = 'Hello World';

hello = name + sayhi;

接下來是函式撰寫

# 函示撰寫
a = sayHi2 ->
  return sayhi + hello;

# 物件寫法

family = 
  name: '小明'
  age: 16
  kids:
    borther:
      name: "Max"
      age: 11
  mom:
    name: 'Lise'
    age: 45

# 陣列寫法

[1..10] # 聽說這是從 Ruby 借來的 Range

arr = ['大明','小王']

# 最常 Deboug 神器

console.log hello
console.log(hello)

# 判斷式 + 字串
if true
  console.log "good #{sayhi}" # 如果要使用字串組合就要改用雙引號
else 
  console.log "No!"

# 多元運算子
green = true
console.log "Hello #{
  if green
    sayhi
  else
    name
}"

if green
  console.log 'A'
else if green
  console.log 'B'
else
  console.log 'C'

# 迴圈
leng = 10
for i in leng
  console.log i
for i of leng
  console.log i