forked from jashkenas/coffeescript
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
3142 lines (2692 loc) · 177 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>CoffeeScript</title>
<link rel="canonical" href="http://coffeescript.com.br" />
<link rel="stylesheet" type="text/css" href="documentation/css/docs.css" />
<link rel="stylesheet" type="text/css" href="documentation/css/idle.css" />
<link rel="shortcut icon" href="documentation/images/favicon.ico" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30127419-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style>
.l8p {
font-weight: bold;
}
.l8p a {
font-weight: normal;
}
</style>
</head>
<body>
<div id="fadeout"></div>
<div id="flybar">
<a id="logo" href="#top"> </a>
<div class="navigation toc">
<div class="button">
Índice
</div>
<div class="contents menu">
<a href="#overview">Visão Geral</a>
<a href="#installation">Instalação</a>
<a href="#usage">Uso</a>
<a href="#language">Referência da Linguagem</a>
<a href="#literals">Literais: Funções, Objetos e Arrays</a>
<a href="#lexical_scope">Escopo Léxico e Segurança de Variável</a>
<a href="#conditionals">If, Else, Unless, e Atribuição Condicional</a>
<a href="#splats">Splats...</a>
<a href="#loops">Laços e Compreensões de Listas</a>
<a href="#slices">Fatiamento e Substituição com Intervalos de Arrays</a>
<a href="#expressions">Tudo é uma Expressão</a>
<a href="#operators">Operadores e Aliases</a>
<a href="#classes">Classes, Herança, e Superclasses</a>
<a href="#destructuring">Atribuição de Troca</a>
<a href="#fat_arrow">Vinculação de Funções</a>
<a href="#embedded">JavaScript Incorporado</a>
<a href="#switch">Switch e Try/Catch</a>
<a href="#comparisons">Comparações em Cadeia</a>
<a href="#strings">Interpolação de String, Blocos de String e de Comentários</a>
<a href="#regexes">Blocos de Expressões Regulares</a>
<a href="#cake">Cake, e Cakefiles</a>
<a href="#scripts">Tags de Script "text/coffeescript"</a>
<a href="#resources">Livros, Screencasts, Exemplos e Fontes</a>
<a href="#changelog">Log de Mudanças</a>
</div>
</div>
<div class="navigation try">
<div class="button">
Experimente CoffeeScript
<div class="repl_bridge"></div>
</div>
<div class="contents repl_wrapper">
<div class="code">
<div class="screenshadow tl"></div>
<div class="screenshadow tr"></div>
<div class="screenshadow bl"></div>
<div class="screenshadow br"></div>
<div id="repl_source_wrap">
<textarea id="repl_source" rows="100" spellcheck="false">alert "Olá CoffeeScript BR!"</textarea>
</div>
<div id="repl_results_wrap"><pre id="repl_results"></pre></div>
<div class="minibutton dark run" title="Ctrl-Enter">Executar</div>
<a class="minibutton permalink" id="repl_permalink">Link</a>
<br class="clear" />
</div>
</div>
</div>
<div class="navigation annotated">
<div class="button">
Código Comentado
</div>
<div class="contents menu">
<a href="documentation/docs/grammar.html">Regras Gramaticais <b>(em inglês)</b></a>
<a href="documentation/docs/lexer.html">Tokens Léxicos <b>(em inglês)</b></a>
<a href="documentation/docs/rewriter.html">O Rewriter <b>(em inglês)</b></a>
<a href="documentation/docs/nodes.html">A Árvore de Sintaxe <b>(em inglês)</b></a>
<a href="documentation/docs/scope.html">Escopo Léxico <b>(em inglês)</b></a>
<a href="documentation/docs/helpers.html">Helpers & Funções Utilitárias <b>(em inglês)</b></a>
<a href="documentation/docs/coffee-script.html">O Módulo CoffeeScript <b>(em inglês)</b></a>
<a href="documentation/docs/cake.html">Cake & Cakefiles <b>(em inglês)</b></a>
<a href="documentation/docs/command.html">Utilitário de Linha de Comando "coffee" <b>(em inglês)</b></a>
<a href="documentation/docs/optparse.html">Parser de Opções <b>(em inglês)</b></a>
<a href="documentation/docs/repl.html">REPL Interativo <b>(em inglês)</b></a>
</div>
</div>
<div id="error" style="display:none;"></div>
</div>
<div class="container">
<span class="bookmark" id="top"></span>
<p>
<b>CoffeeScript é uma pequena linguagem que compila para JavaScript.</b>
Por baixo de todas essas chaves e ponto-e-vírgulas inconvenientes, JavaScript sempre teve
um lindo modelo de objeto em seu coração. CoffeeScript é uma tentativa de expor
as partes boas de JavaScript de uma maneira simples.
</p>
<p>
A regra de ouro do CoffeeScript é: "<i>É apenas JavaScript</i>". O código
compila para um JS equivalente, e não há uma interpretação em tempo de execução (runtime).
Você pode usar qualquer biblioteca JavaScript existente com CoffeeScript sem problemas (e vice-versa).
A saída compilada é legível e bem impressa, passa pelo <a href="http://www.javascriptlint.com/">JavaScript Lint</a>
sem advertências, funcionará em qualquer <em>runtime</em> JavaScript, e tende a
executar tão ou mais rápido que o JavaScript equivalente escrito a mão.
</p>
<p>
<b>Versão Mais Recente:</b>
<a href="http://github.com/jashkenas/coffee-script/tarball/1.3.3">1.3.3</a>
</p>
<p class="l8p">
Traduzido para o português por
<a href="http://loopinfinito.com.br" alt="Loop Infinito" title="Loop Infinito">Loop Infinito</a>
(<a href="http://twitter.com/loopinfinito" alt="Loop Infinito no Twitter" title="Loop Infinito no Twitter">@loopinfinito</a>).
</p>
<h2>
<span id="overview" class="bookmark"></span>
Visão Geral
</h2>
<p><i>CoffeeScript à esquerda, saída compilada de JavaScript à direita.</i></p>
<div class='code'><pre class="idle"><span class="Comment"><span class="Comment">#</span> Atribuições:</span>
number <span class="Keyword">=</span> <span class="Number">42</span>
opposite <span class="Keyword">=</span> <span class="BuiltInConstant">true</span>
<span class="Comment"><span class="Comment">#</span> Condições:</span>
number <span class="Keyword">=</span> <span class="Keyword">-</span><span class="Number">42</span> <span class="Keyword">if</span> opposite
<span class="Comment"><span class="Comment">#</span> Funções:</span>
<span class="FunctionName">square </span><span class="Keyword">=</span> <span class="FunctionArgument">(x)</span> <span class="Storage">-></span> x <span class="Keyword">*</span> x
<span class="Comment"><span class="Comment">#</span> Arrays:</span>
list <span class="Keyword">=</span> [<span class="Number">1</span>, <span class="Number">2</span>, <span class="Number">3</span>, <span class="Number">4</span>, <span class="Number">5</span>]
<span class="Comment"><span class="Comment">#</span> Objetos:</span>
math <span class="Keyword">=</span>
root: Math.sqrt
square: square
<span class="FunctionName">cube</span><span class="Keyword">:</span> <span class="FunctionArgument">(x)</span> <span class="Storage">-></span> x <span class="Keyword">*</span> square x
<span class="Comment"><span class="Comment">#</span> Splats:</span>
<span class="FunctionName">race </span><span class="Keyword">=</span> <span class="FunctionArgument">(winner, runners...)</span> <span class="Storage">-></span>
print winner, runners
<span class="Comment"><span class="Comment">#</span> Teste de existência:</span>
alert <span class="String"><span class="String">"</span>I knew it!<span class="String">"</span></span> <span class="Keyword">if</span> elvis<span class="Keyword">?</span>
<span class="Comment"><span class="Comment">#</span> Compreensões de Arrays:</span>
cubes <span class="Keyword">=</span> (math.cube num <span class="Keyword">for</span> num <span class="Keyword">in</span> list)
</pre><pre class="idle"><span class="Storage">var</span> cubes, list, math, num, number, opposite, race, square,
__slice <span class="Keyword">=</span> [].slice;
number <span class="Keyword">=</span> <span class="Number">42</span>;
opposite <span class="Keyword">=</span> <span class="BuiltInConstant">true</span>;
<span class="Keyword">if</span> (opposite) {
number <span class="Keyword">=</span> <span class="Keyword">-</span><span class="Number">42</span>;
}
<span class="FunctionName">square</span> = <span class="Storage">function</span>(<span class="FunctionArgument">x</span>) {
<span class="Keyword">return</span> x <span class="Keyword">*</span> x;
};
list <span class="Keyword">=</span> [<span class="Number">1</span>, <span class="Number">2</span>, <span class="Number">3</span>, <span class="Number">4</span>, <span class="Number">5</span>];
math <span class="Keyword">=</span> {
root: <span class="LibraryClassType">Math</span>.sqrt,
square: square,
<span class="FunctionName">cube</span>: <span class="Storage">function</span>(<span class="FunctionArgument">x</span>) {
<span class="Keyword">return</span> x <span class="Keyword">*</span> square(x);
}
};
<span class="FunctionName">race</span> = <span class="Storage">function</span>() {
<span class="Storage">var</span> runners, winner;
winner <span class="Keyword">=</span> arguments[<span class="Number">0</span>], runners <span class="Keyword">=</span> <span class="Number">2</span> <span class="Keyword"><=</span> arguments.<span class="LibraryConstant">length</span> ? __slice.<span class="LibraryFunction">call</span>(arguments, <span class="Number">1</span>) : [];
<span class="Keyword">return</span> <span class="LibraryFunction">print</span>(winner, runners);
};
<span class="Keyword">if</span> (<span class="Keyword">typeof</span> elvis <span class="Keyword">!</span><span class="Keyword">==</span> <span class="String"><span class="String">"</span>undefined<span class="String">"</span></span> <span class="Keyword">&</span><span class="Keyword">&</span> elvis <span class="Keyword">!</span><span class="Keyword">==</span> <span class="BuiltInConstant">null</span>) {
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>I knew it!<span class="String">"</span></span>);
}
cubes <span class="Keyword">=</span> (<span class="Storage">function</span>() {
<span class="Storage">var</span> _i, _len, _results;
_results <span class="Keyword">=</span> [];
<span class="Keyword">for</span> (_i <span class="Keyword">=</span> <span class="Number">0</span>, _len <span class="Keyword">=</span> list.<span class="LibraryConstant">length</span>; _i <span class="Keyword"><</span> _len; _i<span class="Keyword">++</span>) {
num <span class="Keyword">=</span> list[_i];
_results.<span class="LibraryFunction">push</span>(math.cube(num));
}
<span class="Keyword">return</span> _results;
})();
</pre><script>window.example1 = "# Atribuições:\nnumber = 42\nopposite = true\n\n# Condições:\nnumber = -42 if opposite\n\n# Funções:\nsquare = (x) -> x * x\n\n# Arrays:\nlist = [1, 2, 3, 4, 5]\n\n# Objetos:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n\n# Teste de existência:\nalert \"I knew it!\" if elvis?\n\n# Compreensões de Arrays:\ncubes = (math.cube num for num in list)\n\nalert cubes"</script><div class='minibutton ok' onclick='javascript: var cubes, list, math, num, number, opposite, race, square,
__slice = [].slice;
number = 42;
opposite = true;
if (opposite) {
number = -42;
}
square = function(x) {
return x * x;
};
list = [1, 2, 3, 4, 5];
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
race = function() {
var runners, winner;
winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return print(winner, runners);
};
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}
cubes = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = list.length; _i < _len; _i++) {
num = list[_i];
_results.push(math.cube(num));
}
return _results;
})();
;alert(cubes);'>executar: cubes</div><br class='clear' /></div>
<h2>
<span id="installation" class="bookmark"></span>
Instalação
</h2>
<p>
O próprio compilador CoffeeScript é
<a href="documentation/docs/grammar.html">escrito em CoffeeScript</a>,
usando o <a href="http://jison.org">gerador de analisador (<i>parser</i>) Jison</a>. A
versão linha de comando <tt>coffee</tt> está disponível como um
utilitário <a href="http://nodejs.org/">Node.js</a>. O
<a href="extras/coffee-script.js">compilador</a> entretanto, não
depende do Node, e pode ser executado em qualquer ambiente JavaScript, ou no
navegador (veja "Experimente CoffeeScript", acima).
</p>
<p>
Para instalar, primeiramente tenha certeza de que tem uma cópia da última
versão estável do <a href="http://nodejs.org/">Node.js</a>, e do <a href="http://npmjs.org">npm</a>
(o Gerenciador de Pacotes do Node – <em>Node Package Manager</em>). Você então
poderá instalar o CoffeeScript com o npm:
</p>
<pre>
npm install -g coffee-script</pre>
<p>
(Deixe de fora o <tt>-g</tt> caso não queira instalar globalmente.)
</p>
<p>
Se preferir instalar a versão mais recente do CoffeeScript, você pode clonar o
<a href="http://github.com/jashkenas/coffee-script">repositório do código fonte</a>
do CoffeeScript no GitHub, ou fazer o download do
<a href="http://github.com/jashkenas/coffee-script/tarball/master">código fonte</a> diretamente.
Para instalar o compilador CoffeeScript para todo o sistema
em <tt>/usr/local</tt>, abra o diretório e execute:
</p>
<pre>
sudo bin/cake install</pre>
<h2>
<span id="usage" class="bookmark"></span>
Uso
</h2>
<p>
Depois de instalado, você deverá ter acesso ao comando <tt>coffee</tt>,
que pode executar scripts, compilar arquivos <tt>.coffee</tt> para <tt>.js</tt>,
e fornecer um REPL (Read-Eval-Print-Loop) interativo. O comando <tt>coffee</tt>
aceita as seguintes opções:
</p>
<table>
<tr>
<td><code>-c, --compile</code></td>
<td>
Compila um script <tt>.coffee</tt> para um arquivo JavaScript <tt>.js</tt>
com o mesmo nome.
</td>
</tr>
<tr>
<td width="25%"><code>-i, --interactive</code></td>
<td>
Inicia uma sessão interativa de CoffeeScript para execução de pequenos trechos.
Idêntico ao chamar <tt>coffee</tt> sem argumentos.
</td>
</tr>
<tr>
<td><code>-o, --output [DIR]</code></td>
<td>
Escreve todos os aquivos JavaScript compilados no diretório especificado.
Use em conjunto com <tt>--compile</tt> ou <tt>--watch</tt>.
</td>
</tr>
<tr>
<td><code>-j, --join [FILE]</code></td>
<td>
Antes de compilar, concatena todos os scrips juntos na mesma ordem em que
forem passados, e os escreve no arquivo especificdo.
Útil na construção de grandes projetos.
</td>
</tr>
<tr>
<td><code>-w, --watch</code></td>
<td>
Observa os arquivos por modificações, reexecutando o comando especificdo
quando qualquer arquivo for atualizado.
</td>
</tr>
<tr>
<td><code>-p, --print</code></td>
<td>
Em vez de escrever o JavaScript como um arquivo, imprime
diretamente na <b>saída padrão</b> (stdout).
</td>
</tr>
<tr>
<td><code>-l, --lint</code></td>
<td>
Se o comando <tt>jsl</tt>
(<a href="http://www.javascriptlint.com/">JavaScript Lint</a>)
está instalado, use-o para verificar a compilação de um
arquivo CoffeeScript. (Conveniente em conjunto com <br /> <tt>--watch</tt>)
</td>
</tr>
<tr>
<td><code>-s, --stdio</code></td>
<td>
Passa o CoffeeScript para STDIN e recupera o JavaScript pela STDOUT.
Bom para uso com processos escritos em outras linguagens. Por exemplo:<br />
<tt>cat src/cake.coffee | coffee -sc</tt>
</td>
</tr>
<tr>
<td><code>-e, --eval</code></td>
<td>
Compila e imprime um pequeno fragmento de CoffeeScript diretamente da
linha de comando. Por exemplo:<br /><tt>coffee -e "console.log num for num in [10..1]"</tt>
</td>
</tr>
<tr>
<td><code>-r, --require</code></td>
<td>
Carrega uma biblioteca antes de compilar ou executar seu script. Pode ser
usado para ligar algo ao compilador (para adicionar notificações Growl, por exemplo).
</td>
</tr>
<tr>
<td><code>-b, --bare</code></td>
<td>
Compila o JavaScript sem a
<a href="#lexical_scope">função de segurança de alto nível</a>.
</td>
</tr>
<tr>
<td><code>-t, --tokens</code></td>
<td>
Em vez de realizar a análise sintática (parse) do CoffeeScript, apenas
realiza a analise léxica e imprime o fluxo de tokens:
<tt>[IDENTIFIER square] [ASSIGN =] [PARAM_START (]</tt> ...
</td>
</tr>
<tr>
<td><code>-n, --nodes</code></td>
<td>
Em vez de compilar o CoffeeScript, apenas realiza as análises léxica e sintática,
e imprime a árvore sintática:
<pre class="no_bar">
Expressions
Assign
Value "square"
Code "x"
Op *
Value "x"
Value "x"</pre>
</td>
</tr>
<tr>
<td><code>--nodejs</code></td>
<td>
O executável <tt>node</tt> tem algumas opções úteis que você pode especificar,
como <tt>--debug</tt>, <tt>--debug-brk</tt> e <tt>--max-stack-size</tt>. Use esta
<em>flag</em> para passar as opções diretamente ao Node.js.
</td>
</tr>
</table>
<p>
<b>Exemplos:</b>
</p>
<ul>
<li>
Compila uma árvore de diretório de arquivos <tt>.coffee</tt> em <tt>src</tt> em
uma árvore paralela dos arquivos <tt>.js</tt> em <tt>lib</tt>:<br />
<tt>coffee --compile --output lib/ src/</tt>
</li>
<li>
Observa um arquivo por alterações, e o recompila toda vez que o arquivo é salvo:<br />
<tt>coffee --watch --compile experimental.coffee</tt>
</li>
<li>
Concatena uma lista de arquivos em um único script:<br />
<tt>coffee --join project.js --compile src/*.coffee</tt>
</li>
<li>
Imprime o JS compilado de uma linha:<br />
<tt>coffee -bpe "alert i for i in [0..10]"</tt>
</li>
<li>
Tudo junto agora, observa e recompila um projeto inteiro enquanto você trabalha nele:<br />
<tt>coffee -o lib/ -cw src/</tt>
</li>
<li>
Inicial o CoffeeScript REPL (<tt>Ctrl-D</tt> para sair, <tt>Ctrl-V</tt> para multi-linha):<br />
<tt>coffee</tt>
</li>
</ul>
<h2>
<span id="language" class="bookmark"></span>
Referência da Linguagem
</h2>
<p>
<i>
Esta referência está estruturada de maneira que possa ser lida de cima para
baixo, se desejar. Ao decorrer do documento, as seções usam idéias e sintaxes anteriormente
introduzidas. É necessário ter familiaridade com JavaScript. Em todos os
exemplos seguintes, o código CoffeeScript é fornecido ao lado esquerdo,
e a compilação direta para JavaScript está ao lado direito.
</i>
</p>
<p>
<i>
Muitos dos exemplos podem ser executados (os que fazem sentido), pressionando
o botão <b>executar</b> à direita, e pode ser carregado no console "Experimente CoffeeScript"
pressionando o botão <b>carregar</b> do lado esquerdo.
</i>
<p>
Primeiramente, o básico: CoffeeScript usa espaços em branco para delimitar blocos de código.
Você não precisa usar ponto-e-vígulas <tt>;</tt> ao término de uma expressão,
terminar a linha terá o mesmo resultado (embora ainda seja possível utilizar ponto-e-vírgula
para delimitar várias expressões em uma mesma linha).
Em vez de usar chaves <tt>{ }</tt> para agrupar blocos de código em <a href="#literals">funções</a>,
<a href="#conditionals"><em>if</em></a>,
<a href="#switch"><em>switch</em></a>, e <a href="#try">try/catch</a>,
use indentação.
</p>
<p>
Você não precisa usar parênteses para invocar uma função se você estiver
passando argumentos. A chamada agrupa implicitamente até o fim da linha ou da expressão de bloco.<br />
<tt>console.log sys.inspect object</tt> → <tt>console.log(sys.inspect(object));</tt>
</p>
<p>
<span id="literals" class="bookmark"></span>
<b class="header">Funções</b>
Funções são definidas por uma lista de parâmetros opcionais entre parênteses,
uma seta, e o corpo da função. A função vazia parece assim: <tt>-></tt>
</p>
<div class='code'><pre class="idle"><span class="FunctionName">square </span><span class="Keyword">=</span> <span class="FunctionArgument">(x)</span> <span class="Storage">-></span> x <span class="Keyword">*</span> x
<span class="FunctionName">cube </span><span class="Keyword">=</span> <span class="FunctionArgument">(x)</span> <span class="Storage">-></span> square(x) <span class="Keyword">*</span> x
</pre><pre class="idle"><span class="Storage">var</span> cube, square;
<span class="FunctionName">square</span> = <span class="Storage">function</span>(<span class="FunctionArgument">x</span>) {
<span class="Keyword">return</span> x <span class="Keyword">*</span> x;
};
<span class="FunctionName">cube</span> = <span class="Storage">function</span>(<span class="FunctionArgument">x</span>) {
<span class="Keyword">return</span> square(x) <span class="Keyword">*</span> x;
};
</pre><script>window.example2 = "square = (x) -> x * x\ncube = (x) -> square(x) * x\n\nalert cube(5)"</script><div class='minibutton load' onclick='javascript: loadConsole(example2);'>carregar</div><div class='minibutton ok' onclick='javascript: var cube, square;
square = function(x) {
return x * x;
};
cube = function(x) {
return square(x) * x;
};
;alert(cube(5));'>executar: cube(5)</div><br class='clear' /></div>
<p>
Funções também podem ter valores padrão para argumentos. Sobrescreva o valor
padrão passando um argumento não nulo.
</p>
<div class='code'><pre class="idle"><span class="FunctionName">fill </span><span class="Keyword">=</span> <span class="FunctionArgument">(container, liquid = "coffee")</span> <span class="Storage">-></span>
<span class="String"><span class="String">"</span>Filling the <span class="String"><span class="String">#{</span>container<span class="String">}</span></span> with <span class="String"><span class="String">#{</span>liquid<span class="String">}</span></span>...<span class="String">"</span></span>
</pre><pre class="idle"><span class="Storage">var</span> fill;
<span class="FunctionName">fill</span> = <span class="Storage">function</span>(<span class="FunctionArgument">container, liquid</span>) {
<span class="Keyword">if</span> (liquid <span class="Keyword">==</span> <span class="BuiltInConstant">null</span>) {
liquid <span class="Keyword">=</span> <span class="String"><span class="String">"</span>coffee<span class="String">"</span></span>;
}
<span class="Keyword">return</span> <span class="String"><span class="String">"</span>Filling the <span class="String">"</span></span> <span class="Keyword">+</span> container <span class="Keyword">+</span> <span class="String"><span class="String">"</span> with <span class="String">"</span></span> <span class="Keyword">+</span> liquid <span class="Keyword">+</span> <span class="String"><span class="String">"</span>...<span class="String">"</span></span>;
};
</pre><script>window.example3 = "fill = (container, liquid = \"coffee\") ->\n \"Filling the #{container} with #{liquid}...\"\n\nalert fill(\"cup\")"</script><div class='minibutton load' onclick='javascript: loadConsole(example3);'>carregar</div><div class='minibutton ok' onclick='javascript: var fill;
fill = function(container, liquid) {
if (liquid == null) {
liquid = "coffee";
}
return "Filling the " + container + " with " + liquid + "...";
};
;alert(fill("cup"));'>executar: fill("cup")</div><br class='clear' /></div>
<p>
<span id="objects_and_arrays" class="bookmark"></span>
<b class="header">Objetos e Arrays</b>
Os literias de CoffeeScript para objetos e <em>arrays</em> se parecem bastante
com seus primos JavaScript. Quando cada propriedade é listada em sua própria
linha, as vírgulas são opcionais. Objetos devem ser criados usando indentação
em vez de chaves explícitas, similar ao <a href="http://yaml.org">YAML</a>.
</p>
<div class='code'><pre class="idle">song <span class="Keyword">=</span> [<span class="String"><span class="String">"</span>do<span class="String">"</span></span>, <span class="String"><span class="String">"</span>re<span class="String">"</span></span>, <span class="String"><span class="String">"</span>mi<span class="String">"</span></span>, <span class="String"><span class="String">"</span>fa<span class="String">"</span></span>, <span class="String"><span class="String">"</span>so<span class="String">"</span></span>]
singers <span class="Keyword">=</span> {Jagger: <span class="String"><span class="String">"</span>Rock<span class="String">"</span></span>, Elvis: <span class="String"><span class="String">"</span>Roll<span class="String">"</span></span>}
bitlist <span class="Keyword">=</span> [
<span class="Number">1</span>, <span class="Number">0</span>, <span class="Number">1</span>
<span class="Number">0</span>, <span class="Number">0</span>, <span class="Number">1</span>
<span class="Number">1</span>, <span class="Number">1</span>, <span class="Number">0</span>
]
kids <span class="Keyword">=</span>
brother:
name: <span class="String"><span class="String">"</span>Max<span class="String">"</span></span>
age: <span class="Number">11</span>
sister:
name: <span class="String"><span class="String">"</span>Ida<span class="String">"</span></span>
age: <span class="Number">9</span>
</pre><pre class="idle"><span class="Storage">var</span> bitlist, kids, singers, song;
song <span class="Keyword">=</span> [<span class="String"><span class="String">"</span>do<span class="String">"</span></span>, <span class="String"><span class="String">"</span>re<span class="String">"</span></span>, <span class="String"><span class="String">"</span>mi<span class="String">"</span></span>, <span class="String"><span class="String">"</span>fa<span class="String">"</span></span>, <span class="String"><span class="String">"</span>so<span class="String">"</span></span>];
singers <span class="Keyword">=</span> {
Jagger: <span class="String"><span class="String">"</span>Rock<span class="String">"</span></span>,
Elvis: <span class="String"><span class="String">"</span>Roll<span class="String">"</span></span>
};
bitlist <span class="Keyword">=</span> [<span class="Number">1</span>, <span class="Number">0</span>, <span class="Number">1</span>, <span class="Number">0</span>, <span class="Number">0</span>, <span class="Number">1</span>, <span class="Number">1</span>, <span class="Number">1</span>, <span class="Number">0</span>];
kids <span class="Keyword">=</span> {
brother: {
name: <span class="String"><span class="String">"</span>Max<span class="String">"</span></span>,
age: <span class="Number">11</span>
},
sister: {
name: <span class="String"><span class="String">"</span>Ida<span class="String">"</span></span>,
age: <span class="Number">9</span>
}
};
</pre><script>window.example4 = "song = [\"do\", \"re\", \"mi\", \"fa\", \"so\"]\n\nsingers = {Jagger: \"Rock\", Elvis: \"Roll\"}\n\nbitlist = [\n 1, 0, 1\n 0, 0, 1\n 1, 1, 0\n]\n\nkids =\n brother:\n name: \"Max\"\n age: 11\n sister:\n name: \"Ida\"\n age: 9\n\nalert song.join(\" ... \")"</script><div class='minibutton load' onclick='javascript: loadConsole(example4);'>carregar</div><div class='minibutton ok' onclick='javascript: var bitlist, kids, singers, song;
song = ["do", "re", "mi", "fa", "so"];
singers = {
Jagger: "Rock",
Elvis: "Roll"
};
bitlist = [1, 0, 1, 0, 0, 1, 1, 1, 0];
kids = {
brother: {
name: "Max",
age: 11
},
sister: {
name: "Ida",
age: 9
}
};
;alert(song.join(" ... "));'>executar: song.join(" ... ")</div><br class='clear' /></div>
<p>
Em JavaScript, você não pode usar palavras reservadas, como <tt>class</tt>, como
propriedades de um objeto, sem envolvê-las com aspas como <em>strings</em>.
CoffeeScript reconhece palavras reservadas usadas como chave (<i>key</i>) em um objeto
e coloca aspas nelas para você, então você não precisa se preocupar com isso
(por exemplo, quando usando jQuery).
</p>
<div class='code'><pre class="idle">$(<span class="String"><span class="String">'</span>.account<span class="String">'</span></span>).attr class: <span class="String"><span class="String">'</span>active<span class="String">'</span></span>
log object.<span class="Storage">class</span>
</pre><pre class="idle">
<span class="Keyword">$</span>(<span class="String"><span class="String">'</span>.account<span class="String">'</span></span>).attr({
<span class="String"><span class="String">"</span>class<span class="String">"</span></span>: <span class="String"><span class="String">'</span>active<span class="String">'</span></span>
});
<span class="LibraryFunction">log</span>(object[<span class="String"><span class="String">"</span>class<span class="String">"</span></span>]);
</pre><script>window.example5 = "$('.account').attr class: 'active'\n\nlog object.class\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example5);'>carregar</div><br class='clear' /></div>
<p>
<span id="lexical_scope" class="bookmark"></span>
<b class="header">Escopo Léxico e Segurança de Variáveis</b>
O compilador CoffeeScript tem o cuidado de se certificar que todas as suas
variáveis estão propriamente declaradas dentro de um escopo léxico —
você mesmo nunca precisa escrever <tt>var</tt>.
</p>
<div class='code'><pre class="idle">outer <span class="Keyword">=</span> <span class="Number">1</span>
<span class="FunctionName">changeNumbers </span><span class="Keyword">=</span> <span class="Keyword">-</span><span class="Keyword">></span>
inner <span class="Keyword">=</span> <span class="Keyword">-</span><span class="Number">1</span>
outer <span class="Keyword">=</span> <span class="Number">10</span>
inner <span class="Keyword">=</span> changeNumbers()
</pre><pre class="idle"><span class="Storage">var</span> changeNumbers, inner, outer;
outer <span class="Keyword">=</span> <span class="Number">1</span>;
<span class="FunctionName">changeNumbers</span> = <span class="Storage">function</span>() {
<span class="Storage">var</span> inner;
inner <span class="Keyword">=</span> <span class="Keyword">-</span><span class="Number">1</span>;
<span class="Keyword">return</span> outer <span class="Keyword">=</span> <span class="Number">10</span>;
};
inner <span class="Keyword">=</span> changeNumbers();
</pre><script>window.example6 = "outer = 1\nchangeNumbers = ->\n inner = -1\n outer = 10\ninner = changeNumbers()\n\nalert inner"</script><div class='minibutton load' onclick='javascript: loadConsole(example6);'>carregar</div><div class='minibutton ok' onclick='javascript: var changeNumbers, inner, outer;
outer = 1;
changeNumbers = function() {
var inner;
inner = -1;
return outer = 10;
};
inner = changeNumbers();
;alert(inner);'>executar: inner</div><br class='clear' /></div>
<p>
Note como todas as declarações de variável foram colocadas no começo do
escopo mais próximo, a primeira vez que elas aparecem.
<b>outer</b> não está declarada dentro da função, porque ela já está no
escopo; <b>inner</b> dentro da função, por outro lado, não deve ser capaz
de mudar o valor da variável externa de mesmo nome, e portanto tem uma
própria declaração.
</p>
<p>
Este comportamento é efetivamente idêntico ao escopo de Ruby para variáveis
locais. Pelo fato de você não ter acesso direto à palavra-chave <tt>var</tt>,
é impossível esconder uma variável externa de propósito, você deve apenas
se referir a ela. Então tenha cuidado com o reuso de um nome de variável
externa acidentalmente, principalmente se você estiver escrevendo uma função
profundamente aninhada.
</p>
<p>
Embora suprimida nesta documentação para maior clareza, toda saída CoffeeScript é
empacotada em uma função anônima: <tt>(function(){ ... })();</tt> Este
empacotador seguro, combinado com a geração automática da palavra-chave
<tt>var</tt>, faz com que seja extremamente difícil de poluir os espaços
de nomes (<i>namespaces</i>) globais por acidente.
</p>
<p>
Se você quiser criar variáveis de nível superior para outros scripts usarem,
anexe-as como propriedades em <b>window</b>, ou no objeto <b>exports</b> em
CommonJS. O <b>operador existencial</b> (mostrado abaixo), fornece a você uma
forma confiável de descobrir onde adicioná-las; se você quiser as duas coisas
(CommonJS e o navegador): <tt>exports ? this</tt>
</p>
<p>
<span id="conditionals" class="bookmark"></span>
<b class="header">If, Else, Unless, e Atribuição Condicional</b>
Declarações <b>If/else</b> podem ser escritas sem o uso de parênteses e chaves.
Assim como funções e outras expressões de bloco, condicionais multi-linha são
delimitados por indentação. Também existe uma forma pós-fixa, com o <tt>if</tt>
ou <tt>unless</tt> ao final.
</p>
<p>
CoffeeScript pode compilar declarações <b>if</b> para expressões JavaScript,
usando o operador ternário quando possível, e blocos de chaves caso contrário.
Não existe declaração ternária explícita em CoffeeScript — você simplesmente
usa uma declaração <b>if</b> normal em uma mesma linha.
</p>
<div class='code'><pre class="idle">mood <span class="Keyword">=</span> greatlyImproved <span class="Keyword">if</span> singing
<span class="Keyword">if</span> happy <span class="Keyword">and</span> knowsIt
clapsHands()
chaChaCha()
<span class="Keyword">else</span>
showIt()
date <span class="Keyword">=</span> <span class="Keyword">if</span> friday <span class="Keyword">then</span> sue <span class="Keyword">else</span> jill
</pre><pre class="idle"><span class="Storage">var</span> date, mood;
<span class="Keyword">if</span> (singing) {
mood <span class="Keyword">=</span> greatlyImproved;
}
<span class="Keyword">if</span> (happy <span class="Keyword">&</span><span class="Keyword">&</span> knowsIt) {
clapsHands();
chaChaCha();
} <span class="Keyword">else</span> {
showIt();
}
date <span class="Keyword">=</span> friday ? sue : jill;
</pre><script>window.example7 = "mood = greatlyImproved if singing\n\nif happy and knowsIt\n clapsHands()\n chaChaCha()\nelse\n showIt()\n\ndate = if friday then sue else jill\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example7);'>carregar</div><br class='clear' /></div>
<p>
<span id="splats" class="bookmark"></span>
<b class="header">Splats...</b>
O <b>objeto de argumentos</b> de JavaScript é uma maneira útil de trabalhar
com funções que aceitam um número variado de argumentos. CoffeeScript fornece
<em>splats</em> <tt>...</tt>, tanto para definições de função quanto para
invocações, fazendo com que o número variável de argumentos seja um pouco
mais saboroso.
</p>
<div class='code'><pre class="idle">gold <span class="Keyword">=</span> silver <span class="Keyword">=</span> rest <span class="Keyword">=</span> <span class="String"><span class="String">"</span>unknown<span class="String">"</span></span>
<span class="FunctionName">awardMedals </span><span class="Keyword">=</span> <span class="FunctionArgument">(first, second, others...)</span> <span class="Storage">-></span>
gold <span class="Keyword">=</span> first
silver <span class="Keyword">=</span> second
rest <span class="Keyword">=</span> others
contenders <span class="Keyword">=</span> [
<span class="String"><span class="String">"</span>Michael Phelps<span class="String">"</span></span>
<span class="String"><span class="String">"</span>Liu Xiang<span class="String">"</span></span>
<span class="String"><span class="String">"</span>Yao Ming<span class="String">"</span></span>
<span class="String"><span class="String">"</span>Allyson Felix<span class="String">"</span></span>
<span class="String"><span class="String">"</span>Shawn Johnson<span class="String">"</span></span>
<span class="String"><span class="String">"</span>Roman Sebrle<span class="String">"</span></span>
<span class="String"><span class="String">"</span>Guo Jingjing<span class="String">"</span></span>
<span class="String"><span class="String">"</span>Tyson Gay<span class="String">"</span></span>
<span class="String"><span class="String">"</span>Asafa Powell<span class="String">"</span></span>
<span class="String"><span class="String">"</span>Usain Bolt<span class="String">"</span></span>
]
awardMedals contenders...
alert <span class="String"><span class="String">"</span>Gold: <span class="String">"</span></span> <span class="Keyword">+</span> gold
alert <span class="String"><span class="String">"</span>Silver: <span class="String">"</span></span> <span class="Keyword">+</span> silver
alert <span class="String"><span class="String">"</span>The Field: <span class="String">"</span></span> <span class="Keyword">+</span> rest
</pre><pre class="idle"><span class="Storage">var</span> awardMedals, contenders, gold, rest, silver,
__slice <span class="Keyword">=</span> [].slice;
gold <span class="Keyword">=</span> silver <span class="Keyword">=</span> rest <span class="Keyword">=</span> <span class="String"><span class="String">"</span>unknown<span class="String">"</span></span>;
<span class="FunctionName">awardMedals</span> = <span class="Storage">function</span>() {
<span class="Storage">var</span> first, others, second;
first <span class="Keyword">=</span> arguments[<span class="Number">0</span>], second <span class="Keyword">=</span> arguments[<span class="Number">1</span>], others <span class="Keyword">=</span> <span class="Number">3</span> <span class="Keyword"><=</span> arguments.<span class="LibraryConstant">length</span> ? __slice.<span class="LibraryFunction">call</span>(arguments, <span class="Number">2</span>) : [];
gold <span class="Keyword">=</span> first;
silver <span class="Keyword">=</span> second;
<span class="Keyword">return</span> rest <span class="Keyword">=</span> others;
};
contenders <span class="Keyword">=</span> [<span class="String"><span class="String">"</span>Michael Phelps<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Liu Xiang<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Yao Ming<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Allyson Felix<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Shawn Johnson<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Roman Sebrle<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Guo Jingjing<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Tyson Gay<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Asafa Powell<span class="String">"</span></span>, <span class="String"><span class="String">"</span>Usain Bolt<span class="String">"</span></span>];
awardMedals.<span class="LibraryFunction">apply</span>(<span class="BuiltInConstant">null</span>, contenders);
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>Gold: <span class="String">"</span></span> <span class="Keyword">+</span> gold);
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>Silver: <span class="String">"</span></span> <span class="Keyword">+</span> silver);
<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">"</span>The Field: <span class="String">"</span></span> <span class="Keyword">+</span> rest);
</pre><script>window.example8 = "gold = silver = rest = \"unknown\"\n\nawardMedals = (first, second, others...) ->\n gold = first\n silver = second\n rest = others\n\ncontenders = [\n \"Michael Phelps\"\n \"Liu Xiang\"\n \"Yao Ming\"\n \"Allyson Felix\"\n \"Shawn Johnson\"\n \"Roman Sebrle\"\n \"Guo Jingjing\"\n \"Tyson Gay\"\n \"Asafa Powell\"\n \"Usain Bolt\"\n]\n\nawardMedals contenders...\n\nalert \"Gold: \" + gold\nalert \"Silver: \" + silver\nalert \"The Field: \" + rest\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example8);'>carregar</div><div class='minibutton ok' onclick='javascript: var awardMedals, contenders, gold, rest, silver,
__slice = [].slice;
gold = silver = rest = "unknown";
awardMedals = function() {
var first, others, second;
first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? __slice.call(arguments, 2) : [];
gold = first;
silver = second;
return rest = others;
};
contenders = ["Michael Phelps", "Liu Xiang", "Yao Ming", "Allyson Felix", "Shawn Johnson", "Roman Sebrle", "Guo Jingjing", "Tyson Gay", "Asafa Powell", "Usain Bolt"];
awardMedals.apply(null, contenders);
alert("Gold: " + gold);
alert("Silver: " + silver);
alert("The Field: " + rest);
;'>executar</div><br class='clear' /></div>
<p>
<span id="loops" class="bookmark"></span>
<b class="header">Laços e Compreensões de Listas</b>
A maioria dos laços (<em>loops</em>) que você escreverá em CoffeeScript serão
<b>compreensões de listas</b> (<i>list comprehensions</i>) em <em>arrays</em>, objetos, e intervalos (<em>ranges</em>).
Compreensões de listas substituem (e compilam para) laços <b>for</b>, com
cláusulas <em>guard</em> opcionais e o valor atual do índice do <em>array</em>.
Diferente de laços, as <b>compreensões</b> são expressões, e podem ser retornadas
e atribuídas.
</p>
<div class='code'><pre class="idle"><span class="Comment"><span class="Comment">#</span> Coma o almoço</span>
eat food <span class="Keyword">for</span> food <span class="Keyword">in</span> [<span class="String"><span class="String">'</span>toast<span class="String">'</span></span>, <span class="String"><span class="String">'</span>cheese<span class="String">'</span></span>, <span class="String"><span class="String">'</span>wine<span class="String">'</span></span>]
<span class="Comment"><span class="Comment">#</span> Jantar fino de cinco pratos</span>
courses <span class="Keyword">=</span> [<span class="String"><span class="String">'</span>greens<span class="String">'</span></span>, <span class="String"><span class="String">'</span>caviar<span class="String">'</span></span>, <span class="String"><span class="String">'</span>truffles<span class="String">'</span></span>, <span class="String"><span class="String">'</span>roast<span class="String">'</span></span>, <span class="String"><span class="String">'</span>cake<span class="String">'</span></span>]
menu i <span class="Keyword">+</span> <span class="Number">1</span>, dish <span class="Keyword">for</span> dish, i <span class="Keyword">in</span> courses
<span class="Comment"><span class="Comment">#</span> Refeição saudável</span>
foods <span class="Keyword">=</span> [<span class="String"><span class="String">'</span>broccoli<span class="String">'</span></span>, <span class="String"><span class="String">'</span>spinach<span class="String">'</span></span>, <span class="String"><span class="String">'</span>chocolate<span class="String">'</span></span>]
eat food <span class="Keyword">for</span> food <span class="Keyword">in</span> foods <span class="Keyword">when</span> food <span class="Keyword">isnt</span> <span class="String"><span class="String">'</span>chocolate<span class="String">'</span></span>
</pre><pre class="idle"><span class="Storage">var</span> courses, dish, food, foods, i, _i, _j, _k, _len, _len1, _len2, _ref;
_ref <span class="Keyword">=</span> [<span class="String"><span class="String">'</span>toast<span class="String">'</span></span>, <span class="String"><span class="String">'</span>cheese<span class="String">'</span></span>, <span class="String"><span class="String">'</span>wine<span class="String">'</span></span>];
<span class="Keyword">for</span> (_i <span class="Keyword">=</span> <span class="Number">0</span>, _len <span class="Keyword">=</span> _ref.<span class="LibraryConstant">length</span>; _i <span class="Keyword"><</span> _len; _i<span class="Keyword">++</span>) {
food <span class="Keyword">=</span> _ref[_i];
eat(food);
}
courses <span class="Keyword">=</span> [<span class="String"><span class="String">'</span>greens<span class="String">'</span></span>, <span class="String"><span class="String">'</span>caviar<span class="String">'</span></span>, <span class="String"><span class="String">'</span>truffles<span class="String">'</span></span>, <span class="String"><span class="String">'</span>roast<span class="String">'</span></span>, <span class="String"><span class="String">'</span>cake<span class="String">'</span></span>];
<span class="Keyword">for</span> (i <span class="Keyword">=</span> _j <span class="Keyword">=</span> <span class="Number">0</span>, _len1 <span class="Keyword">=</span> courses.<span class="LibraryConstant">length</span>; _j <span class="Keyword"><</span> _len1; i <span class="Keyword">=</span> <span class="Keyword">++</span>_j) {
dish <span class="Keyword">=</span> courses[i];
menu(i <span class="Keyword">+</span> <span class="Number">1</span>, dish);
}
foods <span class="Keyword">=</span> [<span class="String"><span class="String">'</span>broccoli<span class="String">'</span></span>, <span class="String"><span class="String">'</span>spinach<span class="String">'</span></span>, <span class="String"><span class="String">'</span>chocolate<span class="String">'</span></span>];
<span class="Keyword">for</span> (_k <span class="Keyword">=</span> <span class="Number">0</span>, _len2 <span class="Keyword">=</span> foods.<span class="LibraryConstant">length</span>; _k <span class="Keyword"><</span> _len2; _k<span class="Keyword">++</span>) {
food <span class="Keyword">=</span> foods[_k];
<span class="Keyword">if</span> (food <span class="Keyword">!</span><span class="Keyword">==</span> <span class="String"><span class="String">'</span>chocolate<span class="String">'</span></span>) {
eat(food);
}
}
</pre><script>window.example9 = "# Coma o almoço\neat food for food in ['toast', 'cheese', 'wine']\n\n# Jantar fino de cinco pratos\ncourses = ['greens', 'caviar', 'truffles', 'roast', 'cake']\nmenu i + 1, dish for dish, i in courses\n\n# Refeição saudável\nfoods = ['broccoli', 'spinach', 'chocolate']\neat food for food in foods when food isnt 'chocolate'\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example9);'>carregar</div><br class='clear' /></div>
<p>
Compreensões devem ser capazes de lidar com a maioria dos casos onde você
de outra maneira usaria um laço normal, <b>each</b>/<b>forEach</b>, <b>map</b>,
ou <b>select</b>/<b>filter</b>, por exemplo:
<tt>shortNames = (name for name in list when name.length < 5)</tt><br />
Se você sabe o começa e termina o laço, ou gostaria de percorrer o laço
com incrementos de tamanho fixo, você pode usar um intervalo (<em>range</em>)
para especificar o começo e o fim das suas <b>compreensões</b>.
</p>
<div class='code'><pre class="idle">countdown <span class="Keyword">=</span> (num <span class="Keyword">for</span> num <span class="Keyword">in</span> [<span class="Number">10</span>..<span class="Number">1</span>])
</pre><pre class="idle"><span class="Storage">var</span> countdown, num;
countdown <span class="Keyword">=</span> (<span class="Storage">function</span>() {
<span class="Storage">var</span> _i, _results;
_results <span class="Keyword">=</span> [];
<span class="Keyword">for</span> (num <span class="Keyword">=</span> _i <span class="Keyword">=</span> <span class="Number">10</span>; _i <span class="Keyword">>=</span> <span class="Number">1</span>; num <span class="Keyword">=</span> <span class="Keyword">--</span>_i) {
_results.<span class="LibraryFunction">push</span>(num);
}
<span class="Keyword">return</span> _results;
})();
</pre><script>window.example10 = "countdown = (num for num in [10..1])\n\nalert countdown"</script><div class='minibutton load' onclick='javascript: loadConsole(example10);'>carregar</div><div class='minibutton ok' onclick='javascript: var countdown, num;
countdown = (function() {
var _i, _results;
_results = [];
for (num = _i = 10; _i >= 1; num = --_i) {
_results.push(num);
}
return _results;
})();
;alert(countdown);'>executar: countdown</div><br class='clear' /></div>
<p>
Peceba que, pelo fato de estarmos atribuindo o valor das compreensões de lista
(<i>list comprehension</i>) a uma variável no exemplo acima, CoffeeScript coleta
o resultado de cada iteração em um <em>array</em>. Às vezes funções terminam com
laços que servem apenas para rodar no contexto da própria função. Tenha
cuidado para não retornar acidentalmente os resultados da compreensão, nestes casos
apenas adicione um valor de retorno significativo — como <tt>true</tt>
— ou <tt>null</tt>, ao final da sua função.
</p>
<p>
Para percorrer uma compreensão de intervalo em passos de tamanho fixo,
use <tt>by</tt>, por exemplo:<br />
<tt>pares = (x for x in [0..10] by 2)</tt>
</p>
<p>
Compreensões também podem ser usadas para iterar sobre as chaves (<em>key</em>) e valores (<em>value</em>)
em um objeto. Use <tt>of</tt> para sinalizar a compreensão sobre as propriedades
de um objeto, em vez dos valores em um <em>array</em>.
</p>
<div class='code'><pre class="idle">yearsOld <span class="Keyword">=</span> max: <span class="Number">10</span>, ida: <span class="Number">9</span>, tim: <span class="Number">11</span>
ages <span class="Keyword">=</span> <span class="Keyword">for</span> child, age <span class="Keyword">of</span> yearsOld
<span class="String"><span class="String">"</span><span class="String"><span class="String">#{</span>child<span class="String">}</span></span> is <span class="String"><span class="String">#{</span>age<span class="String">}</span></span><span class="String">"</span></span>
</pre><pre class="idle"><span class="Storage">var</span> age, ages, child, yearsOld;
yearsOld <span class="Keyword">=</span> {
max: <span class="Number">10</span>,
ida: <span class="Number">9</span>,
tim: <span class="Number">11</span>
};
ages <span class="Keyword">=</span> (<span class="Storage">function</span>() {
<span class="Storage">var</span> _results;
_results <span class="Keyword">=</span> [];
<span class="Keyword">for</span> (child <span class="Keyword">in</span> yearsOld) {
age <span class="Keyword">=</span> yearsOld[child];
_results.<span class="LibraryFunction">push</span>(<span class="String"><span class="String">"</span><span class="String">"</span></span> <span class="Keyword">+</span> child <span class="Keyword">+</span> <span class="String"><span class="String">"</span> is <span class="String">"</span></span> <span class="Keyword">+</span> age);
}
<span class="Keyword">return</span> _results;
})();
</pre><script>window.example11 = "yearsOld = max: 10, ida: 9, tim: 11\n\nages = for child, age of yearsOld\n \"#{child} is #{age}\"\n\nalert ages.join(\", \")"</script><div class='minibutton load' onclick='javascript: loadConsole(example11);'>carregar</div><div class='minibutton ok' onclick='javascript: var age, ages, child, yearsOld;
yearsOld = {
max: 10,
ida: 9,
tim: 11
};
ages = (function() {
var _results;
_results = [];
for (child in yearsOld) {
age = yearsOld[child];
_results.push("" + child + " is " + age);
}
return _results;
})();
;alert(ages.join(", "));'>executar: ages.join(", ")</div><br class='clear' /></div>
<p>
Se desejar iterar somente sobre as chaves (<em>keys</em>) que são
definidas no próprio objeto adicione uma verificação <tt>hasOwnProperty</tt>
,para evitar propriedades que possam ter sido herdadas do protótipo use<br />
<tt>for own key, value of object</tt>
</p>
<p>
O único laço de baixo nível que CoffeeScript fornece é o laço <b>while</b>. A
principal diferença de JavaScript é que o laço <b>while</b> pode ser usado como
uma expressão, retornando um <em>array</em> contendo o resultado de cada iteração
atravéz do laço.
</p>
<div class='code'><pre class="idle"><span class="Comment"><span class="Comment">#</span> Econ 101</span>
<span class="Keyword">if</span> <span class="Variable">this</span>.studyingEconomics
buy() <span class="Keyword">while</span> supply <span class="Keyword">></span> demand
sell() <span class="Keyword">until</span> supply <span class="Keyword">></span> demand
<span class="Comment"><span class="Comment">#</span> Rima de berçário</span>
num <span class="Keyword">=</span> <span class="Number">6</span>
lyrics <span class="Keyword">=</span> <span class="Keyword">while</span> num <span class="Keyword">-</span><span class="Keyword">=</span> <span class="Number">1</span>
<span class="String"><span class="String">"</span><span class="String"><span class="String">#{</span>num<span class="String">}</span></span> little monkeys, jumping on the bed.</span>
<span class="String"> One fell out and bumped his head.<span class="String">"</span></span>
</pre><pre class="idle"><span class="Storage">var</span> lyrics, num;
<span class="Keyword">if</span> (<span class="Variable">this</span>.studyingEconomics) {
<span class="Keyword">while</span> (supply <span class="Keyword">></span> demand) {