Adrian Liaw
A secondary school coder from Taiwan
Adrian Liaw
CoffeeScript 是什麼??
CoffeeScript is a little language that compiles into JavaScript.
CoffeeScript 是一個可以轉換成JavaScript的小型語言
認識CoffeeScript的作者
Jeremy Ashkenas
Jeremy Ashkenas
It's just JavaScript
Why CoffeeScript
實務上來看
myNumber = 10
myBool = true
myString = "Hello World"
var myBool, myNumber, myString;
myNumber = 10;
myBool = true;
myString = "Hello World";
console.log "Hello"
Math.pow 2, 3
myDiv = $ "#my-div"
var myDiv;
console.log("Hello");
Math.pow(2, 3);
myDiv = $("#my-div");
square = (x) -> x * x
double_double = (x, y) -> (x + y) * 2
helloWorld = ->
message = "Hello World"
console.log message
var double_double, helloWorld, square;
square = function(x) {
return x * x;
};
double_double = function(x, y) {
return (x + y) * 2;
};
helloWorld = function() {
var message;
message = "Hello World";
return console.log(message);
};
if a < b
unless c is b
if c isnt d
console.log "FOO"
else
console.log "BAR"
if (a < b) {
if (c !== b) {
if (c !== d) {
console.log("FOO");
} else {
console.log("BAR");
}
}
}
# This is a "line comment"
###
This is a "block comment"
###
/*
This is a "block comment"
*/
小練習1: 費式數列的第n項
[1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ...]
結果應該要長這樣
coffee> fib 5
8
coffee> fib 10
89
coffee> fib 0
1
coffee> fib 16
1597
n = 11
m = 3
console.log "#{n} powered by #{m} is #{Math.pow n, m}"
var m, n;
n = 11;
m = 3;
console.log(n + " powered by " + m + " is " + (Math.pow(n, m)));
agileManifesto =
"""
Individuals and interactions over processes and tools
Working software over comprehensive documentation
Customer collaboration over contract negotiation
Responding to change over following a plan
"""
var agileManifesto;
agileManifesto = "Individuals and interactions over processes and tools\nWorking software over comprehensive documentation\nCustomer collaboration over contract negotiation\nResponding to change over following a plan";
myList = [1, 2, 3, 4]
coders = [
"Adrian Liaw"
"Michael Pan"
"Jeffrey Lee"
]
var coders, myList;
myList = [1, 2, 3, 4];
coders = ["Adrian Liaw", "Michael Pan", "Jeffrey Lee"];
numbers = [1..10]
start = numbers[..2]
middle = numbers[3...-2]
end = numbers[-2..]
copy = numbers[..]
var copy, end, middle, numbers, start;
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
start = numbers.slice(0, 3);
middle = numbers.slice(3, -2);
end = numbers.slice(-2);
copy = numbers.slice(0);
adrianliaw =
name: "Adrian Liaw"
age: 14
sex: "Male"
var adrianliaw;
adrianliaw = {
name: "Adrian Liaw",
age: 14,
sex: "Male"
};
while true
console.log "Infinity Loop!"
until false
console.log "Infinity Loop!"
buy thing while supply > demand
eat food until full
while (true) {
console.log("Infinity Loop!");
}
while (!false) {
console.log("Infinity Loop!");
}
while (supply > demand) {
buy(thing);
}
while (!full) {
eat(food);
}
lunch = ["beef", "pasta", "apple"]
for food in lunch
eat food
console.log "Finished #{food}"
myObj =
one: 1
two: 2
three: 3
for num, i of myObj
console.log num, i
var food, i, lunch, myObj, num, _i, _len;
lunch = ["beef", "pasta", "apple"];
for (_i = 0, _len = lunch.length; _i < _len; _i++) {
food = lunch[_i];
eat(food);
console.log("Finished " + food);
}
myObj = {
one: 1,
two: 2,
three: 3
};
for (num in myObj) {
i = myObj[num];
console.log(num, i);
}
CoffeeScript | JavaScript |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
CoffeeScript | JavaScript |
---|---|
|
|
|
|
|
No JS equivalent |
|
|
|
|
|
|
在Python裡面,我們如果要反覆一個字串,可以這樣:
>>> "string" * 3
但在JavaScript裡做這樣的動作只會回傳NaN
用CoffeeScript寫一個吧!
定義一個function,有兩個參數,第一個是字串s,第二個是數字n,回傳s重覆n次的字串
coffee> repeat "hello", 3
'hellohellohello'
coffee> repeat "Kids Coding Studio!", 2
'Kids Coding Studio!Kids Coding Studio!'
coffee> repeat "Michael", 1
'Michael'
coffee> repeat "FooBarBaz", 0
''
印出x層的金字塔!
coffee> pyramid 5
*
***
*****
*******
*********
coffee> pyramid 8
*
***
*****
*******
*********
***********
*************
***************
什麼是Array Comprehension??
在Python裡叫"List Comprehension"
它來自數學的"Set Comprehension"
映射輸出值
變數
輸入值集合
條件
其實就等於
inputSet = [0..10]
outputSet = []
for x in inputSet
if x ** 2 > 3
ouputSet.push 2 * x
output = (2 * x for x in [0..10] when x ** 2 > 3)
output = (
2 * x \ # 映射值
for x in [0..10] \ # 輸入值集合
when x ** 2 > 3 # 條件
)
output = (2 * x for x in [0..10] when x ** 2 > 3)
var output, x;
output = (function() {
var i, results;
results = [];
for (x = i = 0; i <= 10; x = ++i) {
if (Math.pow(x, 2) > 3) {
results.push(2 * x);
}
}
return results;
})();
squares = (i ** 2 for i in [0..10])
[0, 1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
squares = (i ** 2 for i in [0..10] by 2)
[0, 4, 16, 36, 64, 100]
multipleOfThree = (i for i in [0..20] when i % 3 is 0)
[0, 3, 6, 9, 12, 15, 18]
(j for j in [0..30] when j % 3 is 0 or j % 5 is 0)
[0, 3, 5, 6, 9, 10, 12, 15, 18, 20, 21, 24, 25, 27, 30]
(p for p in [0..30] when p % 3 is 0 and p % 5 isnt 0)
[3, 6, 9, 12, 18, 21, 24, 27]
在0~n之間有哪些質數?
coffee> primes 10
[2, 3, 5, 7]
coffee> primes 50
[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47]
檢查從2~n中每一個數字能不能被任何數字(不包括1和該數)整除
2: no
3: no
4: 2
5: no
6: 2
7: no
8: 2
9: 3
Example:
primes 10
[2, 3, 5, 7]
篩法(sieve),原始陣列為2~n,先用2過濾,把2的倍數去掉,再用3過濾,把3的倍數去掉,再用5過濾,把5的倍數去掉......
最後剩下的數字就是質數
sieve of Eratosthenes
By Adrian Liaw