Coffee script
description
Transcript of Coffee script
![Page 1: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/1.jpg)
![Page 2: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/2.jpg)
C'EST QUOI ?Une "surcouche" javascriptLangage jeune (déc 2009)
Une syntaxe inspiré de Python, Ruby et Haskell
![Page 3: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/3.jpg)
POURQUOI L'UTILISER ?Rendre le code plus lisible (donc plus maintenable)
Rapidité de développementEviter les nombreuses erreurs possible en JS
![Page 4: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/4.jpg)
EN PRATIQUE1. Ecrire son code2. Compiler en Javascript
3. Inclure son fichier js
coffee --compile file.coffee
coffee --watch --compile file.coffee
![Page 5: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/5.jpg)
VARIABLES
![Page 6: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/6.jpg)
DÉFINIR UNE VARIABLE
bla = "une variable"
var bla;
bla = "une variable";
![Page 7: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/7.jpg)
matrix = [ 1, 0, 1 0, 1, 0 1, 0, 1]
map = a: 1 b: 2 c: 3
var map, matrix;
matrix = [1, 0, 1, 0, 1, 0, 1, 0, 1];
map = { a: 1, b: 2, c: 3};
![Page 8: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/8.jpg)
TESTER UNE VARIABLE
if bla?
if (typeof bla !== "undefined" && bla !== null)
![Page 9: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/9.jpg)
AFFECTER PLUSIEURS VARIABLES
Output
[var1, var2..., var3] = [1, 2, 3, 4, 5]
var var1, var2, var3, _i, _ref, __slice = [].slice;
_ref = [1, 2, 3, 4, 5], var1 = _ref[0], var2 = 3 <= _ref.length ? __slice.call(_ref, 1, _i = _ref.length - 1) : (_i = 1, []), var3 = _ref[_i++];
var1 => 1var2 => [2, 3, 4]var3 => 5
![Page 10: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/10.jpg)
CONDITIONS
![Page 11: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/11.jpg)
MOT CLÉ
if / unless is / isnt
if var1 is var2 console.log var1
console.log var1 unless var1 isnt var2
if (var1 === var2) { console.log(var1);}
![Page 12: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/12.jpg)
CONDITIONS MULTIPLES
Les "classiques" && et || sont remplacés par 'and' et 'or'
if a and b or c
if (a && b || c)
if 200 < a < 300
if (200 < a && a < 300)
![Page 13: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/13.jpg)
CONDITIONS TERNAIRES
if var1 is var2 then console.log "=" else console.log "!="
var3 = if var1 is var2 then 3 else 4
var var3;
if (var1 === var2) { console.log("=");} else { console.log("!=");}
var3 = var1 === var2 ? 3 : 4;
![Page 14: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/14.jpg)
BOUCLES
![Page 15: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/15.jpg)
COLLECTIONLe mot clé in pour itérer sur les éléments d'une collection
for obj in collection console.log obj
console.log obj for obj in collection
var obj, _i, _len;
for (_i = 0, _len = collection.length; _i < _len; _i++) { obj = collection[_i]; console.log(obj);}
![Page 16: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/16.jpg)
FILTRESLe mot clé when pour mettre une condition à notre boucle
for obj in collection when obj isnt anotherObj console.log "object: #{obj}"
var obj, _i, _len;
for (_i = 0, _len = collection.length; _i < _len; _i++) { obj = collection[_i]; if (obj !== anotherObj) { console.log("object: " + obj); }}
![Page 17: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/17.jpg)
WHILE
i = 0while i < 10 i++
i = 0until i >= 10 i++
var i;
i = 0;
while (i < 10) { i++;}
i = 0;
while (!(i >= 10)) { i++;}
![Page 18: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/18.jpg)
FONCTIONS
![Page 19: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/19.jpg)
FONCTIONS ANONYMES
() -> console.log "fonction anonyme"
(function() { return console.log("fonction anonyme");});
$.ajax url: "/" success: (data, textStatus, jqXHR) -> console.log data
![Page 20: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/20.jpg)
FONCTIONS
sum = (collection=[]) -> res = 0 res += elem for elem in collection res
var sum;
sum = function(collection) { var elem, res, _i, _len; if (collection == null) { collection = []; } res = 0; for (_i = 0, _len = collection.length; _i < _len; _i++) { elem = collection[_i]; res += elem; } return res;};
![Page 21: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/21.jpg)
PORTÉ DES VARIABLES
a = -> var1 = 12 b = -> var2 = 23 var1 = 13 return
var a;
a = function() { var b, var1; var1 = 12; return b = function() { var var2; var2 = 23; var1 = 13; };};
![Page 22: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/22.jpg)
CLASSES
![Page 23: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/23.jpg)
DÉFINIR UNE CLASSE
class Ball constructor: (@x=0, @y=0) ->
move: (@x, @y) ->
var Ball;Ball = (function() {
function Ball(x, y) { this.x = x != null ? x : 0; this.y = y != null ? y : 0; }
Ball.prototype.move = function(x, y) { this.x = x; this.y = y; };
return Ball;})();
![Page 24: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/24.jpg)
HÉRITAGE
class Object constructor: (@x=0, @y=0) -> move: (@x, @y) ->
class Ball extends Object constructor: (@x, @y, @radius) -> super @x, @y
explode: -> # do stuff
ball = new Ball()ball.move 10, 10ball.explode()
![Page 25: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/25.jpg)
PROBLÈMES
![Page 26: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/26.jpg)
WRAP
Tous les fichiers compilés sont englobés dans une fonction anonyme (par fichier)
SOLUTION
Compiler avec l'option
Rendre accessible les variables dans window
Joindre les fichiers
--no-wrap
window.Ball = class Ball ...
window.Ball = Ball
--join
![Page 27: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/27.jpg)
CONTEXT
Quand une fonction est appelée par un context différent
SOLUTION
A la mano :'(
$("#ball").click -> @explode() # erreur car @ remplacé par "this" (le DOM cliqué) $(this).remove() # ok
$("#ball").click => @explode() # ok $(this).remove() # erreur car this est l'object Ball
_this = @ $("#ball").click -> _this.explode() $(this).remove()
![Page 28: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/28.jpg)
PAS DE MACROS :(
#> DEBUG = yes#> SWAP = (var1, var2) ->#> tmp = var1#> var1 = var2#> var2 = tmp
a = 2b = 3SWAP a, b#> if DEBUG is yes console.log a, b#> else $("output").html "a: #{a}, b: #{b}"
# Avec DEBUG is yesa = 2;b = 3;tmp = a;a = b;b = tmp;console.log(a, b);
# Avec DEBUG is noa = 2;b = 3;tmp = a;a = b;b = tmp;$("output").html("a: " + a + ", b:" + b);
![Page 29: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/29.jpg)
EQUIVALENT À COFFEESCRIPTTypeScript (Microsoft)Sweetjs (Mozilla)Dart (Google)
LIENS UTILEShttp://js2coffee.org/http://coffeescript.org/https://github.com/jashkenas/coffeescript
![Page 30: Coffee script](https://reader031.fdocuments.fr/reader031/viewer/2022020105/546c36a1af79596b708b4a14/html5/thumbnails/30.jpg)
ANTHONY ESTEBE
“DÉVELOPPEUR WEB FREELANCE
twitter: @antho1404skype: antho1404github: antho1404
site: ”
http://anthonyestebe.com