first draft of docs are done
This commit is contained in:
parent
0a58eeef2b
commit
705b293982
|
@ -1,7 +1,7 @@
|
||||||
body {
|
body {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
background: #efeff9;
|
background: #f3f3f9;
|
||||||
color: #191933;
|
color: #191933;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,10 +42,10 @@
|
||||||
<p>
|
<p>
|
||||||
<b>Disclaimer:</b>
|
<b>Disclaimer:</b>
|
||||||
CoffeeScript is just for fun and seriously alpha. I'm sure that there are still
|
CoffeeScript is just for fun and seriously alpha. I'm sure that there are still
|
||||||
plenty of holes in the walls and leaks in the syntax. <i>There is no guarantee,
|
plenty of holes in the lexer and leaks in the syntax. <i>There is no guarantee,
|
||||||
explicit or implied, of its suitability for any purpose.</i> That said,
|
explicit or implied, of its suitability for any purpose.</i> That said,
|
||||||
it compiles into clean JavaScript (the good parts) that can use existing
|
it compiles into clean JavaScript (the good parts) that can use existing
|
||||||
JavaScript libraries seamlessly, and can pass through
|
JavaScript libraries seamlessly, and passes through
|
||||||
<a href="http://www.jslint.com/">JSLint</a> without warnings. The compiled
|
<a href="http://www.jslint.com/">JSLint</a> without warnings. The compiled
|
||||||
output is quite readable — pretty-printed, with comments
|
output is quite readable — pretty-printed, with comments
|
||||||
preserved intact.
|
preserved intact.
|
||||||
|
@ -63,12 +63,12 @@
|
||||||
<a href="#lexical_scope">Lexical Scoping and Variable Safety</a><br />
|
<a href="#lexical_scope">Lexical Scoping and Variable Safety</a><br />
|
||||||
<a href="#conditionals">Conditionals, Ternaries, and Conditional Assignment</a><br />
|
<a href="#conditionals">Conditionals, Ternaries, and Conditional Assignment</a><br />
|
||||||
<a href="#expressions">Everything is an Expression</a><br />
|
<a href="#expressions">Everything is an Expression</a><br />
|
||||||
|
<a href="#aliases">Aliases</a><br />
|
||||||
<a href="#while">While Loops</a><br />
|
<a href="#while">While Loops</a><br />
|
||||||
<a href="#array_comprehensions">Array Comprehensions</a><br />
|
<a href="#array_comprehensions">Array Comprehensions</a><br />
|
||||||
<a href="#slice">Array Slice Literals</a><br />
|
<a href="#slice">Array Slice Literals</a><br />
|
||||||
<a href="#super">Calling Super from a Subclass</a><br />
|
<a href="#super">Calling Super from a Subclass</a><br />
|
||||||
<a href="#embedded">Embedded JavaScript</a><br />
|
<a href="#embedded">Embedded JavaScript</a><br />
|
||||||
<a href="#aliases">Aliases</a><br />
|
|
||||||
<a href="#switch">Switch/Case/Else</a><br />
|
<a href="#switch">Switch/Case/Else</a><br />
|
||||||
<a href="#try">Try/Catch/Finally</a><br />
|
<a href="#try">Try/Catch/Finally</a><br />
|
||||||
<a href="#strings">Multiline Strings</a><br />
|
<a href="#strings">Multiline Strings</a><br />
|
||||||
|
@ -88,7 +88,7 @@ sudo gem install coffee-script</pre>
|
||||||
<p>
|
<p>
|
||||||
Installing the gem provides the <tt>coffee-script</tt> command, which can
|
Installing the gem provides the <tt>coffee-script</tt> command, which can
|
||||||
be used to compile CoffeeScript <tt>.cs</tt> files into JavaScript, as
|
be used to compile CoffeeScript <tt>.cs</tt> files into JavaScript, as
|
||||||
well as debug. By default, <tt>coffee-script</tt> writes out the
|
well as debug them. By default, <tt>coffee-script</tt> writes out the
|
||||||
JavaScript as <tt>.js</tt> files in the same directory, but output
|
JavaScript as <tt>.js</tt> files in the same directory, but output
|
||||||
can be customized with the following options:
|
can be customized with the following options:
|
||||||
</p>
|
</p>
|
||||||
|
@ -103,7 +103,7 @@ sudo gem install coffee-script</pre>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>-w, --watch</code></td>
|
<td><code>-w, --watch</code></td>
|
||||||
<td>
|
<td>
|
||||||
Watch the modification times of the named scripts, recompiling as
|
Watch the modification times of the coffee-scripts, recompiling as
|
||||||
soon as a change occurs.
|
soon as a change occurs.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -118,14 +118,15 @@ sudo gem install coffee-script</pre>
|
||||||
<td><code>-l, --lint</code></td>
|
<td><code>-l, --lint</code></td>
|
||||||
<td>
|
<td>
|
||||||
If the <tt>jsl</tt> (JavaScript Lint) command is installed, use it
|
If the <tt>jsl</tt> (JavaScript Lint) command is installed, use it
|
||||||
to check the compilation of a CoffeeScript file.
|
to check the compilation of a CoffeeScript file. (Handy in
|
||||||
|
conjunction with <tt>--watch</tt>)
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>-e, --eval</code></td>
|
<td><code>-e, --eval</code></td>
|
||||||
<td>
|
<td>
|
||||||
Compile and print a little snippet of CoffeeScript directly from the
|
Compile and print a little snippet of CoffeeScript directly from the
|
||||||
command line. For example:<br /><tt>coffee-script -e "square: x => x * x."</tt>
|
command line (or from <b>stdin</b>). For example:<br /><tt>coffee-script -e "square: x => x * x."</tt>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -143,6 +144,12 @@ sudo gem install coffee-script</pre>
|
||||||
AST.
|
AST.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>--install-bundle</code></td>
|
||||||
|
<td>
|
||||||
|
Install the TextMate bundle for CoffeeScript syntax highlighting.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
@ -160,10 +167,9 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
<i>
|
<i>
|
||||||
This document is structured so that it can be read from top to bottom,
|
This document is structured so that it can be read from top to bottom,
|
||||||
if you like. Later sections use ideas and syntax previously introduced.
|
if you like. Later sections use ideas and syntax previously introduced.
|
||||||
|
Familiarity with JavaScript is assumed.
|
||||||
In all of the following examples, the source CoffeeScript is provided on
|
In all of the following examples, the source CoffeeScript is provided on
|
||||||
the left, and the direct compilation into JavaScript is on the right.
|
the left, and the direct compilation into JavaScript is on the right.
|
||||||
Familiarity with JavaScript is assumed, although it would certainly
|
|
||||||
be nice to have a tutorial that builds from the ground up in the future.
|
|
||||||
</i>
|
</i>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
@ -173,7 +179,7 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
the line will do just as well. All other whitespace is
|
the line will do just as well. All other whitespace is
|
||||||
not significant. Instead of using curly braces <tt>{ }</tt>
|
not significant. Instead of using curly braces <tt>{ }</tt>
|
||||||
to delimit a block of code, use a period <tt>.</tt> to mark the end of a
|
to delimit a block of code, use a period <tt>.</tt> to mark the end of a
|
||||||
block for
|
block, for
|
||||||
<a href="#functions">functions</a>,
|
<a href="#functions">functions</a>,
|
||||||
<a href="#conditionals">if-statements</a>,
|
<a href="#conditionals">if-statements</a>,
|
||||||
<a href="#switch">switch</a>, and <a href="#try">try/catch</a>.
|
<a href="#switch">switch</a>, and <a href="#try">try/catch</a>.
|
||||||
|
@ -181,9 +187,8 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
|
|
||||||
<p id="functions">
|
<p id="functions">
|
||||||
<b class="header">Functions and Invocation</b>
|
<b class="header">Functions and Invocation</b>
|
||||||
Let's start with the best part of CoffeeScript, shall we? Functions are defined
|
Functions are defined by a list of parameters, an arrow, and the
|
||||||
by a list of parameters, an arrow, and the function body. The empty
|
function body. The empty function looks like this: <tt>=>.</tt>
|
||||||
function looks like this: <tt>=>.</tt>
|
|
||||||
</p>
|
</p>
|
||||||
<%= code_for('functions', 'cube(5)') %>
|
<%= code_for('functions', 'cube(5)') %>
|
||||||
|
|
||||||
|
@ -207,18 +212,18 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
<p id="lexical_scope">
|
<p id="lexical_scope">
|
||||||
<b class="header">Lexical Scoping and Variable Safety</b>
|
<b class="header">Lexical Scoping and Variable Safety</b>
|
||||||
The CoffeeScript compiler takes care to make sure that all of your variables
|
The CoffeeScript compiler takes care to make sure that all of your variables
|
||||||
are properly defined within lexical scope — you never need to declare
|
are properly declared within lexical scope — you never need to write
|
||||||
<i>var</i> yourself.
|
<tt>var</tt> yourself.
|
||||||
</p>
|
</p>
|
||||||
<%= code_for('scope', 'new_num') %>
|
<%= code_for('scope', 'new_num') %>
|
||||||
<p>
|
<p>
|
||||||
Notice how the variables are declared with <tt>var</tt> the first time
|
Notice how the variables are declared with <tt>var</tt> the first time
|
||||||
they appear. The second reference of <b>num</b>, within the function,
|
they appear. The second reference of <b>num</b>, within the function,
|
||||||
is not redeclared because <b>num</b> is still in scope. As opposed
|
is not redeclared because <b>num</b> is still in scope. As opposed
|
||||||
to the second <b>new_num</b>, in the last line.
|
to the second occurrence of <b>new_num</b>, in the last line.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Although suppressed within this documentation, all
|
Although suppressed within this documentation for clarity, all
|
||||||
CoffeeScript output is wrapped in an anonymous function:
|
CoffeeScript output is wrapped in an anonymous function:
|
||||||
<tt>(function(){ ... })();</tt> This safety wrapper, combined with the
|
<tt>(function(){ ... })();</tt> This safety wrapper, combined with the
|
||||||
automatic generation of the <tt>var</tt> keyword, make it exceedingly difficult
|
automatic generation of the <tt>var</tt> keyword, make it exceedingly difficult
|
||||||
|
@ -243,7 +248,7 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
<p id="expressions">
|
<p id="expressions">
|
||||||
<b class="header">Everything is an Expression (at least, as much as possible)</b>
|
<b class="header">Everything is an Expression (at least, as much as possible)</b>
|
||||||
You might have noticed how even though we don't add return statements
|
You might have noticed how even though we don't add return statements
|
||||||
to CoffeScript functions, they nonetheless return their final value.
|
to CoffeeScript functions, they nonetheless return their final value.
|
||||||
The CoffeeScript compiler tries to make sure that all statements in the
|
The CoffeeScript compiler tries to make sure that all statements in the
|
||||||
language can be used as expressions. Watch how the <tt>return</tt> gets
|
language can be used as expressions. Watch how the <tt>return</tt> gets
|
||||||
pushed down into each possible branch of execution, in the function
|
pushed down into each possible branch of execution, in the function
|
||||||
|
@ -251,10 +256,31 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
</p>
|
</p>
|
||||||
<%= code_for('expressions', 'eldest') %>
|
<%= code_for('expressions', 'eldest') %>
|
||||||
<p>
|
<p>
|
||||||
The same mechanism is used to push down assignment statements, switch
|
The same mechanism is used to push down assignment through <b>switch</b>
|
||||||
statements, and if-elses (although the ternary operator is preferred).
|
statements, and <b>if-elses</b> (although the ternary operator is preferred).
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<p id="aliases">
|
||||||
|
<b class="header">Aliases</b>
|
||||||
|
Because the <tt>==</tt> operator frequently causes undesirable coercion,
|
||||||
|
is intransitive, and has a different meaning than in other languages,
|
||||||
|
CoffeeScript compiles <tt>==</tt> into <tt>===</tt>, and <tt>!=</tt> into
|
||||||
|
<tt>!==</tt>.
|
||||||
|
In addition, <tt>is</tt> compiles into <tt>===</tt>,
|
||||||
|
and <tt>aint</tt> into <tt>!==</tt>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
You can use <tt>not</tt> as an alias for <tt>!</tt>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
As in <a href="http://yaml.org/">YAML</a>, <tt>on</tt> and <tt>yes</tt>
|
||||||
|
are the same as boolean <tt>true</tt>, while <tt>off</tt> and <tt>no</tt> are boolean <tt>false</tt>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
For single-line statements, <tt>unless</tt> can be used as the inverse of <tt>if</tt>.
|
||||||
|
</p>
|
||||||
|
<%= code_for('aliases') %>
|
||||||
|
|
||||||
<p id="while">
|
<p id="while">
|
||||||
<b class="header">While Loops</b>
|
<b class="header">While Loops</b>
|
||||||
The only low-level loop that CoffeeScript provides is the while loop.
|
The only low-level loop that CoffeeScript provides is the while loop.
|
||||||
|
@ -310,30 +336,9 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
</p>
|
</p>
|
||||||
<%= code_for('embedded', 'hi()') %>
|
<%= code_for('embedded', 'hi()') %>
|
||||||
|
|
||||||
<p id="aliases">
|
|
||||||
<b class="header">Aliases</b>
|
|
||||||
Because the <tt>==</tt> operator frequently causes undesirable coercion,
|
|
||||||
is intransitive, and has a different meaning than in other languages,
|
|
||||||
CoffeeScript compiles <tt>==</tt> into <tt>===</tt>, and <tt>!=</tt> into
|
|
||||||
<tt>!==</tt>.
|
|
||||||
In addition, <tt>is</tt> compiles into <tt>===</tt>,
|
|
||||||
and <tt>aint</tt> into <tt>!==</tt>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
You can use <tt>not</tt> as an alias for <tt>!</tt>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
As in <a href="http://yaml.org/">YAML</a>, <tt>on</tt> and <tt>yes</tt>
|
|
||||||
are the same as boolean <tt>true</tt>, while <tt>off</tt> and <tt>no</tt> are boolean <tt>false</tt>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
For single-line statements, <tt>unless</tt> can be used as the inverse of <tt>if</tt>.
|
|
||||||
</p>
|
|
||||||
<%= code_for('aliases') %>
|
|
||||||
|
|
||||||
<p id="switch">
|
<p id="switch">
|
||||||
<b class="header">Switch/Case/Else</b>
|
<b class="header">Switch/Case/Else</b>
|
||||||
Switch statements in JavaScript are rather broken. You can only
|
<b>Switch</b> statements in JavaScript are rather broken. You can only
|
||||||
do string comparisons, and need to remember to <b>break</b> at the end of
|
do string comparisons, and need to remember to <b>break</b> at the end of
|
||||||
every <b>case</b> statement to avoid accidentally falling through to
|
every <b>case</b> statement to avoid accidentally falling through to
|
||||||
the default case. CoffeeScript
|
the default case. CoffeeScript
|
||||||
|
@ -346,7 +351,7 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
|
|
||||||
<p id="try">
|
<p id="try">
|
||||||
<b class="header">Try/Catch/Finally</b>
|
<b class="header">Try/Catch/Finally</b>
|
||||||
Try/catch statements just about the same as JavaScript (although
|
Try/catch statements are just about the same as JavaScript (although
|
||||||
they work as expressions). No braces required.
|
they work as expressions). No braces required.
|
||||||
</p>
|
</p>
|
||||||
<%= code_for('try') %>
|
<%= code_for('try') %>
|
||||||
|
|
125
index.html
125
index.html
|
@ -28,10 +28,10 @@
|
||||||
<p>
|
<p>
|
||||||
<b>Disclaimer:</b>
|
<b>Disclaimer:</b>
|
||||||
CoffeeScript is just for fun and seriously alpha. I'm sure that there are still
|
CoffeeScript is just for fun and seriously alpha. I'm sure that there are still
|
||||||
plenty of holes in the walls and leaks in the syntax. <i>There is no guarantee,
|
plenty of holes in the lexer and leaks in the syntax. <i>There is no guarantee,
|
||||||
explicit or implied, of its suitability for any purpose.</i> That said,
|
explicit or implied, of its suitability for any purpose.</i> That said,
|
||||||
it compiles into clean JavaScript (the good parts) that can use existing
|
it compiles into clean JavaScript (the good parts) that can use existing
|
||||||
JavaScript libraries seamlessly, and can pass through
|
JavaScript libraries seamlessly, and passes through
|
||||||
<a href="http://www.jslint.com/">JSLint</a> without warnings. The compiled
|
<a href="http://www.jslint.com/">JSLint</a> without warnings. The compiled
|
||||||
output is quite readable — pretty-printed, with comments
|
output is quite readable — pretty-printed, with comments
|
||||||
preserved intact.
|
preserved intact.
|
||||||
|
@ -49,12 +49,12 @@
|
||||||
<a href="#lexical_scope">Lexical Scoping and Variable Safety</a><br />
|
<a href="#lexical_scope">Lexical Scoping and Variable Safety</a><br />
|
||||||
<a href="#conditionals">Conditionals, Ternaries, and Conditional Assignment</a><br />
|
<a href="#conditionals">Conditionals, Ternaries, and Conditional Assignment</a><br />
|
||||||
<a href="#expressions">Everything is an Expression</a><br />
|
<a href="#expressions">Everything is an Expression</a><br />
|
||||||
|
<a href="#aliases">Aliases</a><br />
|
||||||
<a href="#while">While Loops</a><br />
|
<a href="#while">While Loops</a><br />
|
||||||
<a href="#array_comprehensions">Array Comprehensions</a><br />
|
<a href="#array_comprehensions">Array Comprehensions</a><br />
|
||||||
<a href="#slice">Array Slice Literals</a><br />
|
<a href="#slice">Array Slice Literals</a><br />
|
||||||
<a href="#super">Calling Super from a Subclass</a><br />
|
<a href="#super">Calling Super from a Subclass</a><br />
|
||||||
<a href="#embedded">Embedded JavaScript</a><br />
|
<a href="#embedded">Embedded JavaScript</a><br />
|
||||||
<a href="#aliases">Aliases</a><br />
|
|
||||||
<a href="#switch">Switch/Case/Else</a><br />
|
<a href="#switch">Switch/Case/Else</a><br />
|
||||||
<a href="#try">Try/Catch/Finally</a><br />
|
<a href="#try">Try/Catch/Finally</a><br />
|
||||||
<a href="#strings">Multiline Strings</a><br />
|
<a href="#strings">Multiline Strings</a><br />
|
||||||
|
@ -158,7 +158,7 @@ sudo gem install coffee-script</pre>
|
||||||
<p>
|
<p>
|
||||||
Installing the gem provides the <tt>coffee-script</tt> command, which can
|
Installing the gem provides the <tt>coffee-script</tt> command, which can
|
||||||
be used to compile CoffeeScript <tt>.cs</tt> files into JavaScript, as
|
be used to compile CoffeeScript <tt>.cs</tt> files into JavaScript, as
|
||||||
well as debug. By default, <tt>coffee-script</tt> writes out the
|
well as debug them. By default, <tt>coffee-script</tt> writes out the
|
||||||
JavaScript as <tt>.js</tt> files in the same directory, but output
|
JavaScript as <tt>.js</tt> files in the same directory, but output
|
||||||
can be customized with the following options:
|
can be customized with the following options:
|
||||||
</p>
|
</p>
|
||||||
|
@ -173,7 +173,7 @@ sudo gem install coffee-script</pre>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>-w, --watch</code></td>
|
<td><code>-w, --watch</code></td>
|
||||||
<td>
|
<td>
|
||||||
Watch the modification times of the named scripts, recompiling as
|
Watch the modification times of the coffee-scripts, recompiling as
|
||||||
soon as a change occurs.
|
soon as a change occurs.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -188,14 +188,15 @@ sudo gem install coffee-script</pre>
|
||||||
<td><code>-l, --lint</code></td>
|
<td><code>-l, --lint</code></td>
|
||||||
<td>
|
<td>
|
||||||
If the <tt>jsl</tt> (JavaScript Lint) command is installed, use it
|
If the <tt>jsl</tt> (JavaScript Lint) command is installed, use it
|
||||||
to check the compilation of a CoffeeScript file.
|
to check the compilation of a CoffeeScript file. (Handy in
|
||||||
|
conjunction with <tt>--watch</tt>)
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>-e, --eval</code></td>
|
<td><code>-e, --eval</code></td>
|
||||||
<td>
|
<td>
|
||||||
Compile and print a little snippet of CoffeeScript directly from the
|
Compile and print a little snippet of CoffeeScript directly from the
|
||||||
command line. For example:<br /><tt>coffee-script -e "square: x => x * x."</tt>
|
command line (or from <b>stdin</b>). For example:<br /><tt>coffee-script -e "square: x => x * x."</tt>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -213,6 +214,12 @@ sudo gem install coffee-script</pre>
|
||||||
AST.
|
AST.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>--install-bundle</code></td>
|
||||||
|
<td>
|
||||||
|
Install the TextMate bundle for CoffeeScript syntax highlighting.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
@ -230,10 +237,9 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
<i>
|
<i>
|
||||||
This document is structured so that it can be read from top to bottom,
|
This document is structured so that it can be read from top to bottom,
|
||||||
if you like. Later sections use ideas and syntax previously introduced.
|
if you like. Later sections use ideas and syntax previously introduced.
|
||||||
|
Familiarity with JavaScript is assumed.
|
||||||
In all of the following examples, the source CoffeeScript is provided on
|
In all of the following examples, the source CoffeeScript is provided on
|
||||||
the left, and the direct compilation into JavaScript is on the right.
|
the left, and the direct compilation into JavaScript is on the right.
|
||||||
Familiarity with JavaScript is assumed, although it would certainly
|
|
||||||
be nice to have a tutorial that builds from the ground up in the future.
|
|
||||||
</i>
|
</i>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
@ -243,7 +249,7 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
the line will do just as well. All other whitespace is
|
the line will do just as well. All other whitespace is
|
||||||
not significant. Instead of using curly braces <tt>{ }</tt>
|
not significant. Instead of using curly braces <tt>{ }</tt>
|
||||||
to delimit a block of code, use a period <tt>.</tt> to mark the end of a
|
to delimit a block of code, use a period <tt>.</tt> to mark the end of a
|
||||||
block for
|
block, for
|
||||||
<a href="#functions">functions</a>,
|
<a href="#functions">functions</a>,
|
||||||
<a href="#conditionals">if-statements</a>,
|
<a href="#conditionals">if-statements</a>,
|
||||||
<a href="#switch">switch</a>, and <a href="#try">try/catch</a>.
|
<a href="#switch">switch</a>, and <a href="#try">try/catch</a>.
|
||||||
|
@ -251,9 +257,8 @@ coffee-script --print app/scripts/*.cs > concatenation.js</pre>
|
||||||
|
|
||||||
<p id="functions">
|
<p id="functions">
|
||||||
<b class="header">Functions and Invocation</b>
|
<b class="header">Functions and Invocation</b>
|
||||||
Let's start with the best part of CoffeeScript, shall we? Functions are defined
|
Functions are defined by a list of parameters, an arrow, and the
|
||||||
by a list of parameters, an arrow, and the function body. The empty
|
function body. The empty function looks like this: <tt>=>.</tt>
|
||||||
function looks like this: <tt>=>.</tt>
|
|
||||||
</p>
|
</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.
|
<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.
|
<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.
|
||||||
|
@ -315,8 +320,8 @@ var ages = {
|
||||||
<p id="lexical_scope">
|
<p id="lexical_scope">
|
||||||
<b class="header">Lexical Scoping and Variable Safety</b>
|
<b class="header">Lexical Scoping and Variable Safety</b>
|
||||||
The CoffeeScript compiler takes care to make sure that all of your variables
|
The CoffeeScript compiler takes care to make sure that all of your variables
|
||||||
are properly defined within lexical scope — you never need to declare
|
are properly declared within lexical scope — you never need to write
|
||||||
<i>var</i> yourself.
|
<tt>var</tt> yourself.
|
||||||
</p>
|
</p>
|
||||||
<div class='code'><pre class="idle">num<span class="Keyword">:</span> <span class="Number">1</span>
|
<div class='code'><pre class="idle">num<span class="Keyword">:</span> <span class="Number">1</span>
|
||||||
<span class="FunctionName">change_numbers</span><span class="Keyword">:</span> <span class="Storage">=></span>
|
<span class="FunctionName">change_numbers</span><span class="Keyword">:</span> <span class="Storage">=></span>
|
||||||
|
@ -342,10 +347,10 @@ var new_num = change_numbers();
|
||||||
Notice how the variables are declared with <tt>var</tt> the first time
|
Notice how the variables are declared with <tt>var</tt> the first time
|
||||||
they appear. The second reference of <b>num</b>, within the function,
|
they appear. The second reference of <b>num</b>, within the function,
|
||||||
is not redeclared because <b>num</b> is still in scope. As opposed
|
is not redeclared because <b>num</b> is still in scope. As opposed
|
||||||
to the second <b>new_num</b>, in the last line.
|
to the second occurrence of <b>new_num</b>, in the last line.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Although suppressed within this documentation, all
|
Although suppressed within this documentation for clarity, all
|
||||||
CoffeeScript output is wrapped in an anonymous function:
|
CoffeeScript output is wrapped in an anonymous function:
|
||||||
<tt>(function(){ ... })();</tt> This safety wrapper, combined with the
|
<tt>(function(){ ... })();</tt> This safety wrapper, combined with the
|
||||||
automatic generation of the <tt>var</tt> keyword, make it exceedingly difficult
|
automatic generation of the <tt>var</tt> keyword, make it exceedingly difficult
|
||||||
|
@ -389,7 +394,7 @@ expensive <span class="Keyword">=</span> expensive <span class="Keyword">||</spa
|
||||||
<p id="expressions">
|
<p id="expressions">
|
||||||
<b class="header">Everything is an Expression (at least, as much as possible)</b>
|
<b class="header">Everything is an Expression (at least, as much as possible)</b>
|
||||||
You might have noticed how even though we don't add return statements
|
You might have noticed how even though we don't add return statements
|
||||||
to CoffeScript functions, they nonetheless return their final value.
|
to CoffeeScript functions, they nonetheless return their final value.
|
||||||
The CoffeeScript compiler tries to make sure that all statements in the
|
The CoffeeScript compiler tries to make sure that all statements in the
|
||||||
language can be used as expressions. Watch how the <tt>return</tt> gets
|
language can be used as expressions. Watch how the <tt>return</tt> gets
|
||||||
pushed down into each possible branch of execution, in the function
|
pushed down into each possible branch of execution, in the function
|
||||||
|
@ -426,10 +431,46 @@ eldest<span class="Keyword">:</span> <span class="Keyword">if</span> <span class
|
||||||
var eldest = 24 > 21 ? "Liz" : "Ike";
|
var eldest = 24 > 21 ? "Liz" : "Ike";
|
||||||
;alert(eldest);'>run: eldest</button><br class='clear' /></div>
|
;alert(eldest);'>run: eldest</button><br class='clear' /></div>
|
||||||
<p>
|
<p>
|
||||||
The same mechanism is used to push down assignment statements, switch
|
The same mechanism is used to push down assignment through <b>switch</b>
|
||||||
statements, and if-elses (although the ternary operator is preferred).
|
statements, and <b>if-elses</b> (although the ternary operator is preferred).
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<p id="aliases">
|
||||||
|
<b class="header">Aliases</b>
|
||||||
|
Because the <tt>==</tt> operator frequently causes undesirable coercion,
|
||||||
|
is intransitive, and has a different meaning than in other languages,
|
||||||
|
CoffeeScript compiles <tt>==</tt> into <tt>===</tt>, and <tt>!=</tt> into
|
||||||
|
<tt>!==</tt>.
|
||||||
|
In addition, <tt>is</tt> compiles into <tt>===</tt>,
|
||||||
|
and <tt>aint</tt> into <tt>!==</tt>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
You can use <tt>not</tt> as an alias for <tt>!</tt>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
As in <a href="http://yaml.org/">YAML</a>, <tt>on</tt> and <tt>yes</tt>
|
||||||
|
are the same as boolean <tt>true</tt>, while <tt>off</tt> and <tt>no</tt> are boolean <tt>false</tt>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
For single-line statements, <tt>unless</tt> can be used as the inverse of <tt>if</tt>.
|
||||||
|
</p>
|
||||||
|
<div class='code'><pre class="idle">launch() <span class="Keyword">if</span> ignition <span class="Keyword">is</span> <span class="BuiltInConstant">on</span>
|
||||||
|
|
||||||
|
volume<span class="Keyword">:</span> <span class="Number">10</span> <span class="Keyword">if</span> band <span class="Keyword">aint</span> spinal_tap
|
||||||
|
|
||||||
|
let_the_wild_rumpus_begin() <span class="Keyword">unless</span> answer <span class="Keyword">is</span> <span class="BuiltInConstant">no</span>
|
||||||
|
</pre><pre class="idle"><span class="Keyword">if</span> (ignition <span class="Keyword">===</span> <span class="BuiltInConstant">true</span>) {
|
||||||
|
launch();
|
||||||
|
}
|
||||||
|
<span class="Storage">var</span> volume;
|
||||||
|
<span class="Keyword">if</span> (band <span class="Keyword">!</span><span class="Keyword">==</span> spinal_tap) {
|
||||||
|
volume <span class="Keyword">=</span> <span class="Number">10</span>;
|
||||||
|
}
|
||||||
|
<span class="Keyword">if</span> (<span class="Keyword">!</span>(answer <span class="Keyword">===</span> <span class="BuiltInConstant">false</span>)) {
|
||||||
|
let_the_wild_rumpus_begin();
|
||||||
|
}
|
||||||
|
</pre><br class='clear' /></div>
|
||||||
|
|
||||||
<p id="while">
|
<p id="while">
|
||||||
<b class="header">While Loops</b>
|
<b class="header">While Loops</b>
|
||||||
The only low-level loop that CoffeeScript provides is the while loop.
|
The only low-level loop that CoffeeScript provides is the while loop.
|
||||||
|
@ -537,6 +578,10 @@ tom<span class="Keyword">:</span> <span class="Keyword">new</span> <span class="
|
||||||
|
|
||||||
sam.move()
|
sam.move()
|
||||||
tom.move()
|
tom.move()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre><pre class="idle"><span class="Storage">var</span> <span class="FunctionName">Animal</span> = <span class="Storage">function</span>() {
|
</pre><pre class="idle"><span class="Storage">var</span> <span class="FunctionName">Animal</span> = <span class="Storage">function</span>() {
|
||||||
};
|
};
|
||||||
<span class="LibraryClassType">Animal</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">move</span> = <span class="Storage">function</span>(<span class="FunctionArgument">meters</span>) {
|
<span class="LibraryClassType">Animal</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">move</span> = <span class="Storage">function</span>(<span class="FunctionArgument">meters</span>) {
|
||||||
|
@ -606,45 +651,9 @@ return [document.title, "Hello JavaScript"].join(": ");
|
||||||
};
|
};
|
||||||
;alert(hi());'>run: hi()</button><br class='clear' /></div>
|
;alert(hi());'>run: hi()</button><br class='clear' /></div>
|
||||||
|
|
||||||
<p id="aliases">
|
|
||||||
<b class="header">Aliases</b>
|
|
||||||
Because the <tt>==</tt> operator frequently causes undesirable coercion,
|
|
||||||
is intransitive, and has a different meaning than in other languages,
|
|
||||||
CoffeeScript compiles <tt>==</tt> into <tt>===</tt>, and <tt>!=</tt> into
|
|
||||||
<tt>!==</tt>.
|
|
||||||
In addition, <tt>is</tt> compiles into <tt>===</tt>,
|
|
||||||
and <tt>aint</tt> into <tt>!==</tt>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
You can use <tt>not</tt> as an alias for <tt>!</tt>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
As in <a href="http://yaml.org/">YAML</a>, <tt>on</tt> and <tt>yes</tt>
|
|
||||||
are the same as boolean <tt>true</tt>, while <tt>off</tt> and <tt>no</tt> are boolean <tt>false</tt>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
For single-line statements, <tt>unless</tt> can be used as the inverse of <tt>if</tt>.
|
|
||||||
</p>
|
|
||||||
<div class='code'><pre class="idle">launch() <span class="Keyword">if</span> ignition <span class="Keyword">is</span> <span class="BuiltInConstant">on</span>
|
|
||||||
|
|
||||||
volume<span class="Keyword">:</span> <span class="Number">10</span> <span class="Keyword">if</span> band <span class="Keyword">aint</span> spinal_tap
|
|
||||||
|
|
||||||
let_the_wild_rumpus_begin() <span class="Keyword">unless</span> answer <span class="Keyword">is</span> <span class="BuiltInConstant">no</span>
|
|
||||||
</pre><pre class="idle"><span class="Keyword">if</span> (ignition <span class="Keyword">===</span> <span class="BuiltInConstant">true</span>) {
|
|
||||||
launch();
|
|
||||||
}
|
|
||||||
<span class="Storage">var</span> volume;
|
|
||||||
<span class="Keyword">if</span> (band <span class="Keyword">!</span><span class="Keyword">==</span> spinal_tap) {
|
|
||||||
volume <span class="Keyword">=</span> <span class="Number">10</span>;
|
|
||||||
}
|
|
||||||
<span class="Keyword">if</span> (<span class="Keyword">!</span>(answer <span class="Keyword">===</span> <span class="BuiltInConstant">false</span>)) {
|
|
||||||
let_the_wild_rumpus_begin();
|
|
||||||
}
|
|
||||||
</pre><br class='clear' /></div>
|
|
||||||
|
|
||||||
<p id="switch">
|
<p id="switch">
|
||||||
<b class="header">Switch/Case/Else</b>
|
<b class="header">Switch/Case/Else</b>
|
||||||
Switch statements in JavaScript are rather broken. You can only
|
<b>Switch</b> statements in JavaScript are rather broken. You can only
|
||||||
do string comparisons, and need to remember to <b>break</b> at the end of
|
do string comparisons, and need to remember to <b>break</b> at the end of
|
||||||
every <b>case</b> statement to avoid accidentally falling through to
|
every <b>case</b> statement to avoid accidentally falling through to
|
||||||
the default case. CoffeeScript
|
the default case. CoffeeScript
|
||||||
|
@ -680,7 +689,7 @@ let_the_wild_rumpus_begin() <span class="Keyword">unless</span> answer <span cla
|
||||||
|
|
||||||
<p id="try">
|
<p id="try">
|
||||||
<b class="header">Try/Catch/Finally</b>
|
<b class="header">Try/Catch/Finally</b>
|
||||||
Try/catch statements just about the same as JavaScript (although
|
Try/catch statements are just about the same as JavaScript (although
|
||||||
they work as expressions). No braces required.
|
they work as expressions). No braces required.
|
||||||
</p>
|
</p>
|
||||||
<div class='code'><pre class="idle"><span class="Keyword">try</span>
|
<div class='code'><pre class="idle"><span class="Keyword">try</span>
|
||||||
|
|
|
@ -10,7 +10,7 @@ module CoffeeScript
|
||||||
class CommandLine
|
class CommandLine
|
||||||
|
|
||||||
BANNER = <<-EOS
|
BANNER = <<-EOS
|
||||||
coffee-script compiles CoffeeScript files into JavaScript.
|
coffee-script compiles CoffeeScript source files into JavaScript.
|
||||||
|
|
||||||
Usage:
|
Usage:
|
||||||
coffee-script path/to/script.cs
|
coffee-script path/to/script.cs
|
||||||
|
|
|
@ -273,13 +273,15 @@ rule
|
||||||
|
|
||||||
# Try/catch/finally exception handling blocks.
|
# Try/catch/finally exception handling blocks.
|
||||||
Try:
|
Try:
|
||||||
TRY Expressions CATCH IDENTIFIER
|
TRY Expressions Catch "." { result = TryNode.new(val[1], val[2][0], val[2][1]) }
|
||||||
Expressions "." { result = TryNode.new(val[1], val[3], val[4]) }
|
| TRY Expressions Catch
|
||||||
| TRY Expressions FINALLY
|
FINALLY Then Expressions "." { result = TryNode.new(val[1], val[2][0], val[2][1], val[5]) }
|
||||||
Expressions "." { result = TryNode.new(val[1], nil, nil, val[3]) }
|
;
|
||||||
| TRY Expressions CATCH IDENTIFIER
|
|
||||||
Expressions
|
# A catch clause.
|
||||||
FINALLY Expressions "." { result = TryNode.new(val[1], val[3], val[4], val[6]) }
|
Catch:
|
||||||
|
/* nothing */ { result = [nil, nil] }
|
||||||
|
| CATCH IDENTIFIER Then Expressions { result = [val[1], val[3]] }
|
||||||
;
|
;
|
||||||
|
|
||||||
# Throw an exception.
|
# Throw an exception.
|
||||||
|
|
|
@ -541,7 +541,8 @@ module CoffeeScript
|
||||||
o = super(o)
|
o = super(o)
|
||||||
indent = o[:indent]
|
indent = o[:indent]
|
||||||
o[:indent] += TAB
|
o[:indent] += TAB
|
||||||
catch_part = @recovery && " catch (#{@error}) {\n#{@recovery.compile(o)}\n#{indent}}"
|
error_part = @error ? " (#{@error}) " : ' '
|
||||||
|
catch_part = @recovery && " catch#{error_part}{\n#{@recovery.compile(o)}\n#{indent}}"
|
||||||
finally_part = @finally && " finally {\n#{@finally.compile(o.merge(:assign => nil, :return => nil))}\n#{indent}}"
|
finally_part = @finally && " finally {\n#{@finally.compile(o.merge(:assign => nil, :return => nil))}\n#{indent}}"
|
||||||
write("try {\n#{@try.compile(o)}\n#{indent}}#{catch_part}#{finally_part}")
|
write("try {\n#{@try.compile(o)}\n#{indent}}#{catch_part}#{finally_part}")
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in New Issue