RubyGems - haml-more - Versions diffs - 0.4.0.a - Mend

haml-more 0.4.0.a

Files changed (225) hide show

data/vendor/coffee-script/index.html ADDED Viewed

@@ -0,0 +1,1847 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+  <title>CoffeeScript</title>
+  <link rel="stylesheet" type="text/css" href="documentation/css/docs.css" />
+  <link rel="stylesheet" type="text/css" href="documentation/css/idle.css" />
+</head>
+<body>
+  <div id="fadeout"></div>
+  <div id="flybar">
+    <a id="logo" href="#top"> </a>
+    <div class="navigation">
+      <div class="button">
+        Table of Contents
+      </div>
+      <div class="contents">
+        <a href="#overview">Mini Overview</a>
+        <a href="#installation">Installation and Usage</a>
+        <a href="#language">Language Reference</a>
+        <a href="#whitespace">Significant Whitespace</a>
+        <a href="#functions">Functions and Invocation</a>
+        <a href="#assignment">Assignment</a>
+        <a href="#objects_and_arrays">Objects and Arrays</a>
+        <a href="#lexical_scope">Lexical Scoping and Variable Safety</a>
+        <a href="#conditionals">Conditionals, Ternaries, and Conditional Assignment</a>
+        <a href="#aliases">Aliases</a>
+        <a href="#splats">Splats...</a>
+        <a href="#arguments">Arguments are Arrays</a>
+        <a href="#while">While Loops</a>
+        <a href="#comprehensions">Comprehensions (Arrays, Objects, and Ranges)</a>
+        <a href="#slice_splice">Array Slicing and Splicing with Ranges</a>
+        <a href="#expressions">Everything is an Expression</a>
+        <a href="#existence">The Existential Operator</a>
+        <a href="#inheritance">Inheritance, and Calling Super from a Subclass</a>
+        <a href="#pattern_matching">Pattern Matching</a>
+        <a href="#fat_arrow">Function Binding</a>
+        <a href="#embedded">Embedded JavaScript</a>
+        <a href="#switch">Switch/When/Else</a>
+        <a href="#try">Try/Catch/Finally</a>
+        <a href="#comparisons">Chained Comparisons</a>
+        <a href="#strings">Multiline Strings and Heredocs</a>
+        <a href="#cake">Cake, and Cakefiles</a>
+        <a href="#resources">Resources</a>
+        <a href="#change_log">Change Log</a>
+      </div>
+    </div>
+    <div class="navigation try">
+      <div class="button">
+        Try CoffeeScript
+      </div>
+      <div class="contents repl_wrapper">
+        <div class="code">
+          <textarea id="repl_source">reverse: (string) ->
+  string.split('').reverse().join ''
+alert reverse '!tpircseeffoC'</textarea>
+          <pre id="repl_results"></pre>
+          <button class="compile" onclick="javascript: repl_compile();">compile</button>
+          <button class="run" onclick="javascript: repl_run();">run</button>
+          <br class="clear" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="container">
+    <span class="bookmark" id="top"></span>
+    <p>
+      CoffeeScript is a little language that compiles into JavaScript. Think
+      of it as JavaScript's less ostentatious kid brother &mdash; the same genes,
+      roughly the same height, but a different sense of style. Apart from a handful of
+      bonus goodies, statements in CoffeeScript correspond one-to-one with their
+      equivalent in JavaScript, it's just another way of saying it.
+    </p>
+    <p>
+      <b>Disclaimer:</b>
+      CoffeeScript is just for fun. Until it reaches 1.0, <i>there are no guarantees
+      that the syntax won't change between versions.</i> That said,
+      it compiles into clean JavaScript (the good parts) that can use existing
+      JavaScript libraries seamlessly, and passes through
+      <a href="http://www.jslint.com/">JSLint</a> without warnings. The compiled
+      output is quite readable &mdash; pretty-printed, with comments
+      preserved intact.
+    </p>
+    <p>
+      <b>Latest Version:</b>
+      <a href="http://github.com/jashkenas/coffee-script/tarball/0.5.1">0.5.1</a>
+    </p>
+    <h2>
+      <span id="overview" class="bookmark"></span>
+      Mini Overview
+    </h2>
+    <p><i>CoffeeScript on the left, compiled JavaScript output on the right.</i></p>
+    <div class='code'><pre class="idle"><span class="Comment"><span class="Comment">#</span> Assignment:</span>
+<span class="FunctionName">number</span><span class="Keyword">:</span> <span class="Number">42</span>
+<span class="FunctionName">opposite_day</span><span class="Keyword">:</span> <span class="BuiltInConstant">true</span>
+<span class="Comment"><span class="Comment">#</span> Conditions:</span>
+<span class="FunctionName">number</span><span class="Keyword">:</span> <span class="Keyword">-</span><span class="Number">42</span> <span class="Keyword">if</span> opposite_day
+<span class="Comment"><span class="Comment">#</span> Functions:</span>
+<span class="FunctionName">square</span><span class="Keyword">:</span> <span class="FunctionArgument">(</span><span class="FunctionArgument">x</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span> x <span class="Keyword">*</span> x
+<span class="Comment"><span class="Comment">#</span> Arrays:</span>
+<span class="FunctionName">list</span><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> Objects:</span>
+<span class="FunctionName">math</span><span class="Keyword">:</span> {
+  <span class="FunctionName">root</span><span class="Keyword">:</span>   Math.sqrt
+  <span class="FunctionName">square</span><span class="Keyword">:</span> square
+  <span class="FunctionName">cube</span><span class="Keyword">:</span>   <span class="FunctionArgument">(</span><span class="FunctionArgument">x</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</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">(</span><span class="FunctionArgument">winner, runners...</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span>
+  print winner, runners
+<span class="Comment"><span class="Comment">#</span> Existence:</span>
+alert <span class="String"><span class="String">&quot;</span>I knew it!<span class="String">&quot;</span></span> <span class="Keyword">if</span> elvis<span class="Keyword">?</span>
+<span class="Comment"><span class="Comment">#</span> Array comprehensions:</span>
+<span class="FunctionName">cubed_list</span><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> _a, _b, _c, cubed_list, list, math, num, number, opposite_day, race, square;
+<span class="Comment"><span class="Comment">//</span> Assignment:</span>
+number <span class="Keyword">=</span> <span class="Number">42</span>;
+opposite_day <span class="Keyword">=</span> <span class="BuiltInConstant">true</span>;
+<span class="Comment"><span class="Comment">//</span> Conditions:</span>
+<span class="Keyword">if</span> (opposite_day) {
+  number <span class="Keyword">=</span> <span class="Keyword">-</span><span class="Number">42</span>;
+}
+<span class="Comment"><span class="Comment">//</span> Functions:</span>
+square <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">square</span>(<span class="FunctionArgument">x</span>) {
+  <span class="Keyword">return</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> Objects:</span>
+math <span class="Keyword">=</span> {
+  root: <span class="LibraryClassType">Math</span>.sqrt,
+  square: square,
+  cube: <span class="Storage">function</span> <span class="FunctionName">cube</span>(<span class="FunctionArgument">x</span>) {
+    <span class="Keyword">return</span> x <span class="Keyword">*</span> square(x);
+  }
+};
+<span class="Comment"><span class="Comment">//</span> Splats:</span>
+race <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">race</span>(<span class="FunctionArgument">winner</span>) {
+  <span class="Storage">var</span> runners;
+  runners <span class="Keyword">=</span> <span class="LibraryClassType">Array</span>.<span class="LibraryConstant">prototype</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="Comment"><span class="Comment">//</span> Existence:</span>
+<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">&quot;</span>undefined<span class="String">&quot;</span></span> <span class="Keyword">&amp;</span><span class="Keyword">&amp;</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">&quot;</span>I knew it!<span class="String">&quot;</span></span>);
+}
+<span class="Comment"><span class="Comment">//</span> Array comprehensions:</span>
+cubed_list <span class="Keyword">=</span> (<span class="Storage">function</span>() {
+  _a <span class="Keyword">=</span> []; _b <span class="Keyword">=</span> list;
+  <span class="Keyword">for</span> (_c <span class="Keyword">=</span> <span class="Number">0</span>; _c <span class="Keyword">&lt;</span> _b.<span class="LibraryConstant">length</span>; _c<span class="Keyword">++</span>) {
+    num <span class="Keyword">=</span> _b[_c];
+    _a.<span class="LibraryFunction">push</span>(math.cube(num));
+  }
+  <span class="Keyword">return</span> _a;
+}).<span class="LibraryFunction">call</span>(<span class="Variable">this</span>);
+</pre><button onclick='javascript: var _a, _b, _c, cubed_list, list, math, num, number, opposite_day, race, square;
+// Assignment:
+number = 42;
+opposite_day = true;
+// Conditions:
+if (opposite_day) {
+  number = -42;
+}
+// Functions:
+square = function square(x) {
+  return x * x;
+};
+// Arrays:
+list = [1, 2, 3, 4, 5];
+// Objects:
+math = {
+  root: Math.sqrt,
+  square: square,
+  cube: function cube(x) {
+    return x * square(x);
+  }
+};
+// Splats:
+race = function race(winner) {
+  var runners;
+  runners = Array.prototype.slice.call(arguments, 1);
+  return print(winner, runners);
+};
+// Existence:
+if ((typeof elvis !== "undefined" && elvis !== null)) {
+  alert("I knew it!");
+}
+// Array comprehensions:
+cubed_list = (function() {
+  _a = []; _b = list;
+  for (_c = 0; _c < _b.length; _c++) {
+    num = _b[_c];
+    _a.push(math.cube(num));
+  }
+  return _a;
+}).call(this);
+;alert(cubed_list);'>run: cubed_list</button><br class='clear' /></div>
+    <p>
+      For a longer CoffeeScript example, check out
+      <a href="documentation/underscore.html">Underscore.coffee</a>, a port
+      of the <a href="http://documentcloud.github.com/underscore/">Underscore.js</a>
+      library of helper functions. Underscore.coffee can pass the entire Underscore.js
+      test suite. The CoffeeScript version is faster than the original for a number
+      of methods (in general, due to the speed of CoffeeScript's array comprehensions), and
+      after being minified and gzipped, is only 241 bytes larger than the original
+      JavaScript version.
+      Additional examples are included in the source repository, inside the
+      <a href="http://github.com/jashkenas/coffee-script/tree/master/examples/">examples</a> folder.
+    </p>
+    <h2>
+      <span id="installation" class="bookmark"></span>
+      Installation and Usage
+    </h2>
+    <p>
+      The CoffeeScript compiler is written in pure CoffeeScript, using a
+      <a href="http://github.com/jashkenas/coffee-script/blob/master/src/grammar.coffee">small DSL</a>
+      on top of the <a href="http://github.com/zaach/jison">Jison parser generator</a>, and is available
+      as a <a href="http://nodejs.org/">Node.js</a> utility. The core compiler however,
+      does not depend on Node, and can be run in other server-side-JavaScript environments,
+      or in the browser (see "Try CoffeeScript", above). This may be helpful,
+      as Node only run on flavors of nix, and not Windows, for the time being.
+    </p>
+    <p>
+      To install, first make sure you have a working version of
+      <a href="http://nodejs.org/">Node.js</a>, 0.1.30 or higher. Then clone the CoffeeScript
+      <a href="http://github.com/jashkenas/coffee-script">source repository</a>
+      from GitHub, or download the latest
+      release: <a href="http://github.com/jashkenas/coffee-script/tarball/0.5.1">0.5.1</a>.
+      To install the CoffeeScript compiler system-wide
+      under <tt>/usr/local</tt>, open the directory and run:
+    </p>
+    <pre>
+sudo bin/cake install</pre>
+    <p>
+      This provides the <tt>coffee</tt> command, which can
+      be used to compile CoffeeScript <tt>.coffee</tt> files into JavaScript, as
+      well as debug them. The <tt>coffee</tt>
+      command also provides direct evaluation and an interactive REPL.
+      When compiling to JavaScript, <tt>coffee</tt> writes the output
+      as <tt>.js</tt> files in the same directory by default, but output
+      can be customized with the following options:
+    </p>
+    <table>
+      <tr>
+        <td width="25%"><code>-i, --interactive</code></td>
+        <td>
+          Launch an interactive CoffeeScript session to try short snippets.
+        </td>
+      </tr>
+      <tr>
+        <td><code>-r, --run</code></td>
+        <td>
+          Compile and execute a given CoffeeScript without saving the intermediate
+          JavaScript.
+        </td>
+      </tr>
+      <tr>
+        <td><code>-o, --output [DIR]</code></td>
+        <td>
+          Write out all compiled JavaScript files into the specified directory.
+        </td>
+      </tr>
+      <tr>
+        <td><code>-w, --watch</code></td>
+        <td>
+          Watch the modification times of the coffee-scripts, recompiling as
+          soon as a change occurs.
+        </td>
+      </tr>
+      <tr>
+        <td><code>-p, --print</code></td>
+        <td>
+          Instead of writing out the JavaScript as a file, print it
+          directly to <b>stdout</b>.
+        </td>
+      </tr>
+      <tr>
+        <td><code>-l, --lint</code></td>
+        <td>
+          If the <tt>jsl</tt>
+          (<a href="http://www.javascriptlint.com/">JavaScript Lint</a>)
+          command is installed, use it
+          to check the compilation of a CoffeeScript file. (Handy in
+          conjunction with <tt>--watch</tt>)
+        </td>
+      </tr>
+      <tr>
+        <td><code>-e, --eval</code></td>
+        <td>
+          Compile and print a little snippet of CoffeeScript directly from the
+          command line. For example:<br /><tt>coffee -e "square: (x) -> x * x"</tt>
+        </td>
+      </tr>
+      <tr>
+        <td><code>-n, --no-wrap</code></td>
+        <td>
+          Compile the JavaScript without the top-level function safety wrapper.
+          (Used for CoffeeScript as a Node.js module.)
+        </td>
+      </tr>
+      <tr>
+        <td><code>-t, --tokens</code></td>
+        <td>
+          Instead of parsing the CoffeeScript, just lex it, and print out the
+          token stream: <tt>[IDENTIFIER square] [ASSIGN :] [PARAM_START (]</tt> ...
+        </td>
+      </tr>
+      <tr>
+        <td><code>-tr, --tree</code></td>
+        <td>
+          Instead of compiling the CoffeeScript, just lex and parse it, and print
+          out the parse tree:
+<pre class="no_bar">
+Expressions
+  Assign
+    Value "square"
+    Code "x"
+      Op *
+        Value "x"
+        Value "x"</pre>
+        </td>
+      </tr>
+    </table>
+    <p>
+      <b>Examples:</b>
+    </p>
+    <pre>
+coffee path/to/script.coffee
+coffee --interactive
+coffee --watch --lint experimental.coffee
+coffee --print app/scripts/*.coffee > concatenation.js</pre>
+    <h2>
+      <span id="language" class="bookmark"></span>
+      Language Reference
+    </h2>
+    <p>
+      <i>
+        This reference is structured so that it can be read from top to bottom,
+        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
+        the left, and the direct compilation into JavaScript is on the right.
+      </i>
+    </p>
+    <p>
+      <i>
+        Many of the examples can be run (where it makes sense) by pressing the "run"
+        button towards the bottom right. You can also paste examples into
+        "Try CoffeeScript" in the toolbar, and play with them from there.
+      </i>
+    <p>
+      <span id="whitespace" class="bookmark"></span>
+      <b class="header">Significant Whitespace</b>
+      CoffeeScript uses Python-style significant whitespace: You don't need to
+      use semicolons <tt>;</tt> to terminate expressions, ending
+      the line will do just as well. Semicolons can still be used to fit
+      multiple expressions onto a single line. Instead of using curly braces
+      <tt>{ }</tt> to delimit blocks of code (like <a href="#functions">functions</a>,
+      <a href="#conditionals">if-statements</a>,
+      <a href="#switch">switch</a>, and <a href="#try">try/catch</a>),
+      use indentation.
+    </p>
+    <p>
+      You don't need to use parentheses to invoke a function if you're passing
+      arguments:<br /><tt>print "coffee"</tt>
+    </p>
+    <p>
+      You can use newlines to break up your expression into smaller pieces,
+      as long as CoffeeScript can determine that the line hasn't finished yet,
+      because it ends with an operator or a dot.
+    </p>
+    <p>
+      <span id="functions" class="bookmark"></span>
+      <b class="header">Functions and Invocation</b>
+      Functions are defined by a list of parameters, an arrow, and the
+      function body. The empty function looks like this: <tt>-></tt> All
+      functions in CoffeeScript are named by default, for easier debugging.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">square</span><span class="Keyword">:</span> <span class="FunctionArgument">(</span><span class="FunctionArgument">x</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span> x <span class="Keyword">*</span> x
+<span class="FunctionName">cube</span><span class="Keyword">:</span>   <span class="FunctionArgument">(</span><span class="FunctionArgument">x</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span> square(x) <span class="Keyword">*</span> x
+</pre><pre class="idle"><span class="Storage">var</span> cube, square;
+square <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">square</span>(<span class="FunctionArgument">x</span>) {
+  <span class="Keyword">return</span> x <span class="Keyword">*</span> x;
+};
+cube <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">cube</span>(<span class="FunctionArgument">x</span>) {
+  <span class="Keyword">return</span> square(x) <span class="Keyword">*</span> x;
+};
+</pre><button onclick='javascript: var cube, square;
+square = function square(x) {
+  return x * x;
+};
+cube = function cube(x) {
+  return square(x) * x;
+};
+;alert(cube(5));'>run: cube(5)</button><br class='clear' /></div>
+    <p>
+      If you'd like to assign a function literal to a variable, but not have
+      it be named, just wrap the function definition in parentheses:
+      <tt>((x) -> x * x)</tt>
+    </p>
+    <p>
+      <span id="assignment" class="bookmark"></span>
+      <b class="header">Assignment</b>
+      Use a colon <tt>:</tt> to assign, as in
+      <a href="http://json.org">JSON</a>. Equal signs are only needed for
+      mathy things. While colons are preferred, the two may be used interchangeably,
+      even within object literals.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">greeting</span><span class="Keyword">:</span> <span class="String"><span class="String">&quot;</span>Hello CoffeeScript<span class="String">&quot;</span></span>
+<span class="FunctionName">difficulty</span><span class="Keyword">:</span> <span class="Number">0.5</span>
+</pre><pre class="idle"><span class="Storage">var</span> difficulty, greeting;
+greeting <span class="Keyword">=</span> <span class="String"><span class="String">&quot;</span>Hello CoffeeScript<span class="String">&quot;</span></span>;
+difficulty <span class="Keyword">=</span> <span class="Number">0.5</span>;
+</pre><button onclick='javascript: var difficulty, greeting;
+greeting = "Hello CoffeeScript";
+difficulty = 0.5;
+;alert(greeting);'>run: greeting</button><br class='clear' /></div>
+    <p>
+      All declaration of new variables is pushed up to the top of the nearest
+      lexical scope, so that assignment may always be performed within expressions.
+    </p>
+    <p>
+      <span id="objects_and_arrays" class="bookmark"></span>
+      <b class="header">Objects and Arrays</b>
+      Object and Array literals look very similar to their JavaScript cousins.
+      When you spread out each assignment on a separate line, the commas are
+      optional. In this way, assigning object properties looks the same as
+      assigning local variables, and can be moved around freely. Feel free to mix
+      and match the two styles.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">song</span><span class="Keyword">:</span> [<span class="String"><span class="String">&quot;</span>do<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>re<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>mi<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>fa<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>so<span class="String">&quot;</span></span>]
+<span class="FunctionName">ages</span><span class="Keyword">:</span> {
+  <span class="FunctionName">max</span><span class="Keyword">:</span> <span class="Number">10</span>
+  <span class="FunctionName">ida</span><span class="Keyword">:</span> <span class="Number">9</span>
+  <span class="FunctionName">tim</span><span class="Keyword">:</span> <span class="Number">11</span>
+}
+<span class="FunctionName">matrix</span><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>
+]
+</pre><pre class="idle"><span class="Storage">var</span> ages, matrix, song;
+song <span class="Keyword">=</span> [<span class="String"><span class="String">&quot;</span>do<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>re<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>mi<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>fa<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>so<span class="String">&quot;</span></span>];
+ages <span class="Keyword">=</span> {
+  max: <span class="Number">10</span>,
+  ida: <span class="Number">9</span>,
+  tim: <span class="Number">11</span>
+};
+matrix <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>];
+</pre><button onclick='javascript: var ages, matrix, song;
+song = ["do", "re", "mi", "fa", "so"];
+ages = {
+  max: 10,
+  ida: 9,
+  tim: 11
+};
+matrix = [1, 0, 1, 0, 0, 1, 1, 1, 0];
+;alert(song.join(","));'>run: song.join(",")</button><br class='clear' /></div>
+    <p>
+      <span id="lexical_scope" class="bookmark"></span>
+      <b class="header">Lexical Scoping and Variable Safety</b>
+      The CoffeeScript compiler takes care to make sure that all of your variables
+      are properly declared within lexical scope &mdash; you never need to write
+      <tt>var</tt> yourself.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">num</span><span class="Keyword">:</span> <span class="Number">1</span>
+<span class="FunctionName">change_numbers</span><span class="Keyword">:</span> <span class="Storage">-&gt;</span>
+  <span class="FunctionName">new_num</span><span class="Keyword">:</span> <span class="Keyword">-</span><span class="Number">1</span>
+  <span class="FunctionName">num</span><span class="Keyword">:</span> <span class="Number">10</span>
+<span class="FunctionName">new_num</span><span class="Keyword">:</span> change_numbers()
+</pre><pre class="idle"><span class="Storage">var</span> change_numbers, new_num, num;
+num <span class="Keyword">=</span> <span class="Number">1</span>;
+change_numbers <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">change_numbers</span>() {
+  <span class="Storage">var</span> new_num;
+  new_num <span class="Keyword">=</span> <span class="Keyword">-</span><span class="Number">1</span>;
+  <span class="Keyword">return</span> num <span class="Keyword">=</span> <span class="Number">10</span>;
+};
+new_num <span class="Keyword">=</span> change_numbers();
+</pre><button onclick='javascript: var change_numbers, new_num, num;
+num = 1;
+change_numbers = function change_numbers() {
+  var new_num;
+  new_num = -1;
+  return num = 10;
+};
+new_num = change_numbers();
+;alert(new_num);'>run: new_num</button><br class='clear' /></div>
+    <p>
+      Notice how the all of the variable declarations have been pushed up to
+      the top of the closest scope, the first time they appear.
+      <b>num</b> is not redeclared within the inner function, because it's
+      already in scope; the <b>new_num</b> within the function, on the other hand,
+      should not be able to change the value of the external variable of the same name, and
+      therefore has a declaration of its own.
+    </p>
+    <p>
+      Although suppressed within this documentation for clarity, all
+      CoffeeScript output is wrapped in an anonymous function:
+      <tt>(function(){ ... })();</tt> This safety wrapper, combined with the
+      automatic generation of the <tt>var</tt> keyword, make it exceedingly difficult
+      to pollute the global namespace by accident.
+    </p>
+    <p>
+      If you'd like to create top-level variables for other scripts to use,
+      attach them as properties on <b>window</b>, or on the <b>exports</b>
+      object in CommonJS. The <b>existential operator</b> (below), gives you a
+      reliable way to figure out where to add them, if you're targeting both
+      CommonJS and the browser: <tt>root: exports ? this</tt>
+    </p>
+    <p>
+      <span id="conditionals" class="bookmark"></span>
+      <b class="header">Conditionals, Ternaries, and Conditional Assignment</b>
+      <b>If/else</b> statements can be written without the use of parentheses and
+      curly brackets. As with functions and other block expressions,
+      multi-line conditionals are delimited by indentation. There's also a handy
+      postfix form, with the <tt>if</tt> or <tt>unless</tt> at the end.
+    </p>
+    <p>
+      CoffeeScript will compile <b>if</b> statements using the ternary operator
+      when possible, to make it easier to use the result as an expression.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">mood</span><span class="Keyword">:</span> greatly_improved <span class="Keyword">if</span> singing
+<span class="Keyword">if</span> happy <span class="Keyword">and</span> knows_it
+  claps_hands()
+  cha_cha_cha()
+<span class="FunctionName">date</span><span class="Keyword">:</span> <span class="Keyword">if</span> friday <span class="Keyword">then</span> sue <span class="Keyword">else</span> jill
+expensive <span class="Keyword">||</span><span class="Keyword">=</span> do_the_math()
+</pre><pre class="idle"><span class="Storage">var</span> date, expensive, mood;
+<span class="Keyword">if</span> (singing) {
+  mood <span class="Keyword">=</span> greatly_improved;
+}
+<span class="Keyword">if</span> (happy <span class="Keyword">&amp;</span><span class="Keyword">&amp;</span> knows_it) {
+  claps_hands();
+  cha_cha_cha();
+}
+date <span class="Keyword">=</span> friday ? sue : jill;
+expensive <span class="Keyword">=</span> expensive <span class="Keyword">||</span> do_the_math();
+</pre><br class='clear' /></div>
+    <p>
+      The conditional assignment operators are included: <tt>||=</tt>,
+      which only assigns a value to a variable if the variable's current value
+      is falsy, and <tt>&amp;&amp;=</tt>, which only replaces the value of
+      truthy variables.
+    </p>
+    <p>
+      <span id="aliases" class="bookmark"></span>
+      <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>isnt</tt> into <tt>!==</tt>.
+    </p>
+    <p>
+      You can use <tt>not</tt> as an alias for <tt>!</tt>.
+    </p>
+    <p>
+      For logic, <tt>and</tt> compiles to <tt>&amp;&amp;</tt>, and <tt>or</tt>
+      into <tt>||</tt>.
+    </p>
+    <p>
+      Instead of a newline or semicolon, <tt>then</tt> can be used to separate
+      conditions from expressions, in <b>while</b>,
+      <b>if</b>/<b>else</b>, and <b>switch</b>/<b>when</b> statements.
+    </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>
+    <p>
+      As a shortcut for <tt>this.property</tt>, you can use <tt>@property</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>
+<span class="FunctionName">volume</span><span class="Keyword">:</span> <span class="Number">10</span> <span class="Keyword">if</span> band <span class="Keyword">isnt</span> spinal_tap
+let_the_wild_rumpus_begin() <span class="Keyword">unless</span> answer <span class="Keyword">is</span> <span class="BuiltInConstant">no</span>
+<span class="Keyword">if</span> car.speed <span class="Keyword">&lt;</span> speed_limit <span class="Keyword">then</span> accelerate()
+print <span class="String"><span class="String">&quot;</span>My name is <span class="String">&quot;</span></span> <span class="Keyword">+</span> <span class="Variable">@name</span>
+</pre><pre class="idle"><span class="Storage">var</span> volume;
+<span class="Keyword">if</span> (ignition <span class="Keyword">===</span> <span class="BuiltInConstant">true</span>) {
+  launch();
+}
+<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();
+}
+car.speed <span class="Keyword">&lt;</span> speed_limit ? accelerate() : <span class="BuiltInConstant">null</span>;
+<span class="LibraryFunction">print</span>(<span class="String"><span class="String">&quot;</span>My name is <span class="String">&quot;</span></span> <span class="Keyword">+</span> <span class="Variable">this</span>.<span class="LibraryConstant">name</span>);
+</pre><br class='clear' /></div>
+    <p>
+      <span id="splats" class="bookmark"></span>
+      <b class="header">Splats...</b>
+      The JavaScript <b>arguments object</b> is a useful way to work with
+      functions that accept variable numbers of arguments. CoffeeScript provides
+      splats <tt>...</tt>, both for function definition as well as invocation,
+      making variable numbers of arguments a little bit more palatable.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">gold</span><span class="Keyword">:</span> <span class="FunctionName">silver</span><span class="Keyword">:</span> <span class="FunctionName">the_field</span><span class="Keyword">:</span> <span class="String"><span class="String">&quot;</span>unknown<span class="String">&quot;</span></span>
+<span class="FunctionName">award_medals</span><span class="Keyword">:</span> <span class="FunctionArgument">(</span><span class="FunctionArgument">first, second, rest...</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span>
+  <span class="FunctionName">gold</span><span class="Keyword">:</span>       first
+  <span class="FunctionName">silver</span><span class="Keyword">:</span>     second
+  <span class="FunctionName">the_field</span><span class="Keyword">:</span>  rest
+<span class="FunctionName">contenders</span><span class="Keyword">:</span> [
+  <span class="String"><span class="String">&quot;</span>Michael Phelps<span class="String">&quot;</span></span>
+  <span class="String"><span class="String">&quot;</span>Liu Xiang<span class="String">&quot;</span></span>
+  <span class="String"><span class="String">&quot;</span>Yao Ming<span class="String">&quot;</span></span>
+  <span class="String"><span class="String">&quot;</span>Allyson Felix<span class="String">&quot;</span></span>
+  <span class="String"><span class="String">&quot;</span>Shawn Johnson<span class="String">&quot;</span></span>
+  <span class="String"><span class="String">&quot;</span>Roman Sebrle<span class="String">&quot;</span></span>
+  <span class="String"><span class="String">&quot;</span>Guo Jingjing<span class="String">&quot;</span></span>
+  <span class="String"><span class="String">&quot;</span>Tyson Gay<span class="String">&quot;</span></span>
+  <span class="String"><span class="String">&quot;</span>Asafa Powell<span class="String">&quot;</span></span>
+  <span class="String"><span class="String">&quot;</span>Usain Bolt<span class="String">&quot;</span></span>
+]
+award_medals contenders...
+alert <span class="String"><span class="String">&quot;</span>Gold: <span class="String">&quot;</span></span> <span class="Keyword">+</span> gold
+alert <span class="String"><span class="String">&quot;</span>Silver: <span class="String">&quot;</span></span> <span class="Keyword">+</span> silver
+alert <span class="String"><span class="String">&quot;</span>The Field: <span class="String">&quot;</span></span> <span class="Keyword">+</span> the_field
+</pre><pre class="idle"><span class="Storage">var</span> award_medals, contenders, gold, silver, the_field;
+gold <span class="Keyword">=</span> (silver <span class="Keyword">=</span> (the_field <span class="Keyword">=</span> <span class="String"><span class="String">&quot;</span>unknown<span class="String">&quot;</span></span>));
+award_medals <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">award_medals</span>(<span class="FunctionArgument">first, second</span>) {
+  <span class="Storage">var</span> rest;
+  rest <span class="Keyword">=</span> <span class="LibraryClassType">Array</span>.<span class="LibraryConstant">prototype</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> the_field <span class="Keyword">=</span> rest;
+};
+contenders <span class="Keyword">=</span> [<span class="String"><span class="String">&quot;</span>Michael Phelps<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Liu Xiang<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Yao Ming<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Allyson Felix<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Shawn Johnson<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Roman Sebrle<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Guo Jingjing<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Tyson Gay<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Asafa Powell<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Usain Bolt<span class="String">&quot;</span></span>];
+award_medals.<span class="LibraryFunction">apply</span>(<span class="Variable">this</span>, contenders);
+<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">&quot;</span>Gold: <span class="String">&quot;</span></span> <span class="Keyword">+</span> gold);
+<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">&quot;</span>Silver: <span class="String">&quot;</span></span> <span class="Keyword">+</span> silver);
+<span class="LibraryFunction">alert</span>(<span class="String"><span class="String">&quot;</span>The Field: <span class="String">&quot;</span></span> <span class="Keyword">+</span> the_field);
+</pre><button onclick='javascript: var award_medals, contenders, gold, silver, the_field;
+gold = (silver = (the_field = "unknown"));
+award_medals = function award_medals(first, second) {
+  var rest;
+  rest = Array.prototype.slice.call(arguments, 2);
+  gold = first;
+  silver = second;
+  return the_field = rest;
+};
+contenders = ["Michael Phelps", "Liu Xiang", "Yao Ming", "Allyson Felix", "Shawn Johnson", "Roman Sebrle", "Guo Jingjing", "Tyson Gay", "Asafa Powell", "Usain Bolt"];
+award_medals.apply(this, contenders);
+alert("Gold: " + gold);
+alert("Silver: " + silver);
+alert("The Field: " + the_field);
+;'>run</button><br class='clear' /></div>
+    <p>
+      <span id="arguments" class="bookmark"></span>
+      <b class="header">Arguments are Arrays</b>
+      If you reference the <b>arguments object</b> directly, it will be converted
+      into a real Array, making all of the
+      <a href="https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/Array">Array methods</a>
+      available.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">backwards</span><span class="Keyword">:</span> <span class="Storage">-&gt;</span>
+  alert arguments.reverse()
+backwards <span class="String"><span class="String">&quot;</span>stairway<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>to<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>heaven<span class="String">&quot;</span></span>
+</pre><pre class="idle"><span class="Storage">var</span> backwards;
+backwards <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">backwards</span>() {
+  arguments <span class="Keyword">=</span> <span class="LibraryClassType">Array</span>.<span class="LibraryConstant">prototype</span>.slice.<span class="LibraryFunction">call</span>(arguments, <span class="Number">0</span>);
+  <span class="Keyword">return</span> <span class="LibraryFunction">alert</span>(arguments.<span class="LibraryFunction">reverse</span>());
+};
+backwards(<span class="String"><span class="String">&quot;</span>stairway<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>to<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>heaven<span class="String">&quot;</span></span>);
+</pre><button onclick='javascript: var backwards;
+backwards = function backwards() {
+  arguments = Array.prototype.slice.call(arguments, 0);
+  return alert(arguments.reverse());
+};
+backwards("stairway", "to", "heaven");
+;'>run</button><br class='clear' /></div>
+    <p>
+      <span id="while" class="bookmark"></span>
+      <b class="header">While Loops</b>
+      The only low-level loop that CoffeeScript provides is the <b>while</b> loop. The
+      main difference from JavaScript is that the <b>while</b> loop can be used
+      as an expression, returning an array containing the result of each iteration
+      through the loop.
+    </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>.studying_economics
+  <span class="Keyword">while</span> supply <span class="Keyword">&gt;</span> demand <span class="Keyword">then</span> buy()
+  <span class="Keyword">while</span> supply <span class="Keyword">&lt;</span> demand <span class="Keyword">then</span> sell()
+<span class="Comment"><span class="Comment">#</span> Nursery Rhyme</span>
+<span class="FunctionName">num</span><span class="Keyword">:</span> <span class="Number">6</span>
+<span class="FunctionName">lyrics</span><span class="Keyword">:</span> <span class="Keyword">while</span> num <span class="Keyword">-</span><span class="Keyword">=</span> <span class="Number">1</span>
+  num <span class="Keyword">+</span> <span class="String"><span class="String">&quot;</span> little monkeys, jumping on the bed.</span>
+<span class="String">    One fell out and bumped his head.<span class="String">&quot;</span></span>
+</pre><pre class="idle"><span class="Storage">var</span> _a, lyrics, num;
+<span class="Comment"><span class="Comment">//</span> Econ 101</span>
+<span class="Keyword">if</span> (<span class="Variable">this</span>.studying_economics) {
+  <span class="Keyword">while</span> (supply <span class="Keyword">&gt;</span> demand) {
+    buy();
+  }
+  <span class="Keyword">while</span> (supply <span class="Keyword">&lt;</span> demand) {
+    sell();
+  }
+}
+<span class="Comment"><span class="Comment">//</span> Nursery Rhyme</span>
+num <span class="Keyword">=</span> <span class="Number">6</span>;
+lyrics <span class="Keyword">=</span> (<span class="Storage">function</span>() {
+  _a <span class="Keyword">=</span> [];
+  <span class="Keyword">while</span> (num <span class="Keyword">-</span><span class="Keyword">=</span> <span class="Number">1</span>) {
+    _a.<span class="LibraryFunction">push</span>(num <span class="Keyword">+</span> <span class="String"><span class="String">&quot;</span> little monkeys, jumping on the bed. \</span>
+<span class="String">One fell out and bumped his head.<span class="String">&quot;</span></span>);
+  }
+  <span class="Keyword">return</span> _a;
+}).<span class="LibraryFunction">call</span>(<span class="Variable">this</span>);
+</pre><button onclick='javascript: var _a, lyrics, num;
+// Econ 101
+if (this.studying_economics) {
+  while (supply > demand) {
+    buy();
+  }
+  while (supply < demand) {
+    sell();
+  }
+}
+// Nursery Rhyme
+num = 6;
+lyrics = (function() {
+  _a = [];
+  while (num -= 1) {
+    _a.push(num + " little monkeys, jumping on the bed. \
+One fell out and bumped his head.");
+  }
+  return _a;
+}).call(this);
+;alert(lyrics.join("\n"));'>run: lyrics.join("\n")</button><br class='clear' /></div>
+    <p>
+      Other JavaScript loops, such as <b>for</b> loops and <b>do-while</b> loops
+      can be mimicked by variations on <b>while</b>, but the hope is that you
+      won't need to do that with CoffeeScript, either because you're using
+      <b>each</b> (<b>forEach</b>) style iterators, or...
+    </p>
+    <p>
+      <span id="comprehensions" class="bookmark"></span>
+      <b class="header">Comprehensions (Arrays, Objects, and Ranges)</b>
+      For your looping needs, CoffeeScript provides array comprehensions
+      similar to Python's. They replace (and compile into) <b>for</b> loops, with
+      optional guard clauses and the value of the current array index.
+      Unlike for loops, array comprehensions are expressions, and can be returned
+      and assigned. They should be able to handle most places where you otherwise
+      would use a loop, <b>each</b>/<b>forEach</b>, <b>map</b>, or <b>select</b>/<b>filter</b>.
+    </p>
+    <div class='code'><pre class="idle"><span class="Comment"><span class="Comment">#</span> Eat lunch.</span>
+<span class="FunctionName">lunch</span><span class="Keyword">:</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> Naive collision detection.</span>
+<span class="Keyword">for</span> roid <span class="Keyword">in</span> asteroids
+  <span class="Keyword">for</span> roid2 <span class="Keyword">in</span> asteroids <span class="Keyword">when</span> roid <span class="Keyword">isnt</span> roid2
+    roid.explode() <span class="Keyword">if</span> roid.overlaps roid2
+</pre><pre class="idle"><span class="Storage">var</span> _a, _b, _c, _d, _e, _f, _g, food, lunch, roid, roid2;
+<span class="Comment"><span class="Comment">//</span> Eat lunch.</span>
+lunch <span class="Keyword">=</span> (<span class="Storage">function</span>() {
+  _a <span class="Keyword">=</span> []; _b <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> (_c <span class="Keyword">=</span> <span class="Number">0</span>; _c <span class="Keyword">&lt;</span> _b.<span class="LibraryConstant">length</span>; _c<span class="Keyword">++</span>) {
+    food <span class="Keyword">=</span> _b[_c];
+    _a.<span class="LibraryFunction">push</span>(eat(food));
+  }
+  <span class="Keyword">return</span> _a;
+}).<span class="LibraryFunction">call</span>(<span class="Variable">this</span>);
+<span class="Comment"><span class="Comment">//</span> Naive collision detection.</span>
+_d <span class="Keyword">=</span> asteroids;
+<span class="Keyword">for</span> (_e <span class="Keyword">=</span> <span class="Number">0</span>; _e <span class="Keyword">&lt;</span> _d.<span class="LibraryConstant">length</span>; _e<span class="Keyword">++</span>) {
+  roid <span class="Keyword">=</span> _d[_e];
+  _f <span class="Keyword">=</span> asteroids;
+  <span class="Keyword">for</span> (_g <span class="Keyword">=</span> <span class="Number">0</span>; _g <span class="Keyword">&lt;</span> _f.<span class="LibraryConstant">length</span>; _g<span class="Keyword">++</span>) {
+    roid2 <span class="Keyword">=</span> _f[_g];
+    <span class="Keyword">if</span> (roid <span class="Keyword">!</span><span class="Keyword">==</span> roid2) {
+      <span class="Keyword">if</span> (roid.overlaps(roid2)) {
+        roid.explode();
+      }
+    }
+  }
+}
+</pre><br class='clear' /></div>
+    <p>
+      If you know the start and end of your loop, or would like to step through
+      in fixed-size increments, you can use a range to specify the start and
+      end of your comprehension. (The long line-breaking "for" definitions in
+      the compiled JS below allow ranges to count downwards, as well as upwards).
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">countdown</span><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>]
+<span class="FunctionName">egg_delivery</span><span class="Keyword">:</span> <span class="Storage">-&gt;</span>
+  <span class="Keyword">for</span> i <span class="Keyword">in</span> [<span class="Number">0</span>...eggs.length] <span class="Keyword">by</span> <span class="Number">12</span>
+    <span class="FunctionName">dozen_eggs</span><span class="Keyword">:</span> eggs[i...i<span class="Keyword">+</span><span class="Number">12</span>]
+    deliver <span class="Keyword">new</span> <span class="TypeName">egg_carton</span>(dozen)
+</pre><pre class="idle"><span class="Storage">var</span> _a, _b, _c, _d, _e, countdown, egg_delivery, num;
+countdown <span class="Keyword">=</span> (<span class="Storage">function</span>() {
+  _a <span class="Keyword">=</span> []; _d <span class="Keyword">=</span> <span class="Number">10</span>; _e <span class="Keyword">=</span> <span class="Number">1</span>;
+  <span class="Keyword">for</span> (_c <span class="Keyword">=</span> <span class="Number">0</span>, num<span class="Keyword">=</span>_d; (_d <span class="Keyword">&lt;=</span> _e ? num <span class="Keyword">&lt;=</span> _e : num <span class="Keyword">&gt;=</span> _e); (_d <span class="Keyword">&lt;=</span> _e ? num <span class="Keyword">+</span><span class="Keyword">=</span> <span class="Number">1</span> : num <span class="Keyword">-</span><span class="Keyword">=</span> <span class="Number">1</span>), _c<span class="Keyword">++</span>) {
+    _a.<span class="LibraryFunction">push</span>(num);
+  }
+  <span class="Keyword">return</span> _a;
+}).<span class="LibraryFunction">call</span>(<span class="Variable">this</span>);
+egg_delivery <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">egg_delivery</span>() {
+  <span class="Storage">var</span> _f, _g, _h, _i, _j, dozen_eggs, i;
+  _f <span class="Keyword">=</span> []; _i <span class="Keyword">=</span> <span class="Number">0</span>; _j <span class="Keyword">=</span> eggs.<span class="LibraryConstant">length</span>;
+  <span class="Keyword">for</span> (_h <span class="Keyword">=</span> <span class="Number">0</span>, i<span class="Keyword">=</span>_i; (_i <span class="Keyword">&lt;=</span> _j ? i <span class="Keyword">&lt;</span> _j : i <span class="Keyword">&gt;</span> _j); (_i <span class="Keyword">&lt;=</span> _j ? i <span class="Keyword">+</span><span class="Keyword">=</span> <span class="Number">12</span> : i <span class="Keyword">-</span><span class="Keyword">=</span> <span class="Number">12</span>), _h<span class="Keyword">++</span>) {
+    _f.<span class="LibraryFunction">push</span>((<span class="Storage">function</span>() {
+      dozen_eggs <span class="Keyword">=</span> eggs.<span class="LibraryFunction">slice</span>(i, i <span class="Keyword">+</span> <span class="Number">12</span>);
+      <span class="Keyword">return</span> deliver(<span class="Keyword">new</span> <span class="TypeName">egg_carton</span>(dozen));
+    }).<span class="LibraryFunction">call</span>(<span class="Variable">this</span>));
+  }
+  <span class="Keyword">return</span> _f;
+};
+</pre><button onclick='javascript: var _a, _b, _c, _d, _e, countdown, egg_delivery, num;
+countdown = (function() {
+  _a = []; _d = 10; _e = 1;
+  for (_c = 0, num=_d; (_d <= _e ? num <= _e : num >= _e); (_d <= _e ? num += 1 : num -= 1), _c++) {
+    _a.push(num);
+  }
+  return _a;
+}).call(this);
+egg_delivery = function egg_delivery() {
+  var _f, _g, _h, _i, _j, dozen_eggs, i;
+  _f = []; _i = 0; _j = eggs.length;
+  for (_h = 0, i=_i; (_i <= _j ? i < _j : i > _j); (_i <= _j ? i += 12 : i -= 12), _h++) {
+    _f.push((function() {
+      dozen_eggs = eggs.slice(i, i + 12);
+      return deliver(new egg_carton(dozen));
+    }).call(this));
+  }
+  return _f;
+};
+;alert(countdown);'>run: countdown</button><br class='clear' /></div>
+    <p>
+      Comprehensions can also be used to iterate over the keys and values in
+      an object. Use <tt>of</tt> to signal comprehension over the properties of
+      an object instead of the values in an array.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">years_old</span><span class="Keyword">:</span> {<span class="FunctionName">max</span><span class="Keyword">:</span> <span class="Number">10</span>, <span class="FunctionName">ida</span><span class="Keyword">:</span> <span class="Number">9</span>, <span class="FunctionName">tim</span><span class="Keyword">:</span> <span class="Number">11</span>}
+<span class="FunctionName">ages</span><span class="Keyword">:</span> <span class="Keyword">for</span> child, age <span class="Keyword">of</span> years_old
+  child <span class="Keyword">+</span> <span class="String"><span class="String">&quot;</span> is <span class="String">&quot;</span></span> <span class="Keyword">+</span> age
+</pre><pre class="idle"><span class="Storage">var</span> _a, _b, age, ages, child, years_old;
+<span class="Storage">var</span> __hasProp <span class="Keyword">=</span> <span class="LibraryClassType">Object</span>.<span class="LibraryConstant">prototype</span>.hasOwnProperty;
+years_old <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>() {
+  _a <span class="Keyword">=</span> []; _b <span class="Keyword">=</span> years_old;
+  <span class="Keyword">for</span> (child <span class="Keyword">in</span> _b) { <span class="Keyword">if</span> (__hasProp.<span class="LibraryFunction">call</span>(_b, child)) {
+    age <span class="Keyword">=</span> _b[child];
+    _a.<span class="LibraryFunction">push</span>(child <span class="Keyword">+</span> <span class="String"><span class="String">&quot;</span> is <span class="String">&quot;</span></span> <span class="Keyword">+</span> age);
+  }}
+  <span class="Keyword">return</span> _a;
+}).<span class="LibraryFunction">call</span>(<span class="Variable">this</span>);
+</pre><button onclick='javascript: var _a, _b, age, ages, child, years_old;
+var __hasProp = Object.prototype.hasOwnProperty;
+years_old = {
+  max: 10,
+  ida: 9,
+  tim: 11
+};
+ages = (function() {
+  _a = []; _b = years_old;
+  for (child in _b) { if (__hasProp.call(_b, child)) {
+    age = _b[child];
+    _a.push(child + " is " + age);
+  }}
+  return _a;
+}).call(this);
+;alert(ages.join(", "));'>run: ages.join(", ")</button><br class='clear' /></div>
+    <p>
+      <span id="slice_splice" class="bookmark"></span>
+      <b class="header">Array Slicing and Splicing with Ranges</b>
+      CoffeeScript borrows Ruby's
+      <a href="http://ruby-doc.org/core/classes/Range.html">range syntax</a>
+      for extracting slices of arrays. With two dots (<tt>3..5</tt>), the range
+      is inclusive: the first argument is the index of the first element in
+      the slice, and the second is the index of the last one. Three dots signify
+      a range that excludes the end.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">numbers</span><span class="Keyword">:</span> [<span class="Number">0</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="Number">6</span>, <span class="Number">7</span>, <span class="Number">8</span>, <span class="Number">9</span>]
+<span class="FunctionName">three_to_six</span><span class="Keyword">:</span> numbers[<span class="Number">3</span>..<span class="Number">6</span>]
+<span class="FunctionName">numbers_copy</span><span class="Keyword">:</span> numbers[<span class="Number">0</span>...numbers.length]
+</pre><pre class="idle"><span class="Storage">var</span> numbers, numbers_copy, three_to_six;
+numbers <span class="Keyword">=</span> [<span class="Number">0</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="Number">6</span>, <span class="Number">7</span>, <span class="Number">8</span>, <span class="Number">9</span>];
+three_to_six <span class="Keyword">=</span> numbers.<span class="LibraryFunction">slice</span>(<span class="Number">3</span>, <span class="Number">6</span> <span class="Keyword">+</span> <span class="Number">1</span>);
+numbers_copy <span class="Keyword">=</span> numbers.<span class="LibraryFunction">slice</span>(<span class="Number">0</span>, numbers.<span class="LibraryConstant">length</span>);
+</pre><button onclick='javascript: var numbers, numbers_copy, three_to_six;
+numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+three_to_six = numbers.slice(3, 6 + 1);
+numbers_copy = numbers.slice(0, numbers.length);
+;alert(numbers_copy);'>run: numbers_copy</button><br class='clear' /></div>
+    <p>
+      The same syntax can be used with assignment to replace a segment of an
+      array with new values (to splice it).
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">numbers</span><span class="Keyword">:</span> [<span class="Number">0</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="Number">6</span>, <span class="Number">7</span>, <span class="Number">8</span>, <span class="Number">9</span>]
+numbers[<span class="Number">3</span>..<span class="Number">6</span>]<span class="Keyword">:</span> [<span class="Keyword">-</span><span class="Number">3</span>, <span class="Keyword">-</span><span class="Number">4</span>, <span class="Keyword">-</span><span class="Number">5</span>, <span class="Keyword">-</span><span class="Number">6</span>]
+</pre><pre class="idle"><span class="Storage">var</span> numbers;
+numbers <span class="Keyword">=</span> [<span class="Number">0</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="Number">6</span>, <span class="Number">7</span>, <span class="Number">8</span>, <span class="Number">9</span>];
+numbers.splice.<span class="LibraryFunction">apply</span>(numbers, [<span class="Number">3</span>, <span class="Number">6</span> <span class="Keyword">-</span> <span class="Number">3</span> <span class="Keyword">+</span> <span class="Number">1</span>].<span class="LibraryFunction">concat</span>([<span class="Keyword">-</span><span class="Number">3</span>, <span class="Keyword">-</span><span class="Number">4</span>, <span class="Keyword">-</span><span class="Number">5</span>, <span class="Keyword">-</span><span class="Number">6</span>]));
+</pre><button onclick='javascript: var numbers;
+numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+numbers.splice.apply(numbers, [3, 6 - 3 + 1].concat([-3, -4, -5, -6]));
+;alert(numbers);'>run: numbers</button><br class='clear' /></div>
+    <p>
+      <span id="expressions" class="bookmark"></span>
+      <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
+      to CoffeeScript functions, they nonetheless return their final value.
+      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
+      pushed down into each possible branch of execution, in the function
+      below.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">grade</span><span class="Keyword">:</span> <span class="FunctionArgument">(</span><span class="FunctionArgument">student</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span>
+  <span class="Keyword">if</span> student.excellent_work
+    <span class="String"><span class="String">&quot;</span>A+<span class="String">&quot;</span></span>
+  <span class="Keyword">else</span> <span class="Keyword">if</span> student.okay_stuff
+    <span class="Keyword">if</span> student.tried_hard <span class="Keyword">then</span> <span class="String"><span class="String">&quot;</span>B<span class="String">&quot;</span></span> <span class="Keyword">else</span> <span class="String"><span class="String">&quot;</span>B-<span class="String">&quot;</span></span>
+  <span class="Keyword">else</span>
+    <span class="String"><span class="String">&quot;</span>C<span class="String">&quot;</span></span>
+<span class="FunctionName">eldest</span><span class="Keyword">:</span> <span class="Keyword">if</span> <span class="Number">24</span> <span class="Keyword">&gt;</span> <span class="Number">21</span> <span class="Keyword">then</span> <span class="String"><span class="String">&quot;</span>Liz<span class="String">&quot;</span></span> <span class="Keyword">else</span> <span class="String"><span class="String">&quot;</span>Ike<span class="String">&quot;</span></span>
+</pre><pre class="idle"><span class="Storage">var</span> eldest, grade;
+grade <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">grade</span>(<span class="FunctionArgument">student</span>) {
+  <span class="Keyword">if</span> (student.excellent_work) {
+    <span class="Keyword">return</span> <span class="String"><span class="String">&quot;</span>A+<span class="String">&quot;</span></span>;
+  } <span class="Keyword">else</span> <span class="Keyword">if</span> (student.okay_stuff) {
+    <span class="Keyword">return</span> student.tried_hard ? <span class="String"><span class="String">&quot;</span>B<span class="String">&quot;</span></span> : <span class="String"><span class="String">&quot;</span>B-<span class="String">&quot;</span></span>;
+  } <span class="Keyword">else</span> {
+    <span class="Keyword">return</span> <span class="String"><span class="String">&quot;</span>C<span class="String">&quot;</span></span>;
+  }
+};
+eldest <span class="Keyword">=</span> <span class="Number">24</span> <span class="Keyword">&gt;</span> <span class="Number">21</span> ? <span class="String"><span class="String">&quot;</span>Liz<span class="String">&quot;</span></span> : <span class="String"><span class="String">&quot;</span>Ike<span class="String">&quot;</span></span>;
+</pre><button onclick='javascript: var eldest, grade;
+grade = function grade(student) {
+  if (student.excellent_work) {
+    return "A+";
+  } else if (student.okay_stuff) {
+    return student.tried_hard ? "B" : "B-";
+  } else {
+    return "C";
+  }
+};
+eldest = 24 > 21 ? "Liz" : "Ike";
+;alert(eldest);'>run: eldest</button><br class='clear' /></div>
+    <p>
+      Even though functions will always return their final value, it's both possible
+      and encouraged to return early from a function body writing out the explicit
+      return (<tt>return value</tt>), when you know that you're done.
+    </p>
+    <p>
+      Because variable declarations occur at the top of scope, assignment can
+      be used within expressions, even for variables that haven't been seen before:
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">six</span><span class="Keyword">:</span> (<span class="FunctionName">one</span><span class="Keyword">:</span> <span class="Number">1</span>) <span class="Keyword">+</span> (<span class="FunctionName">two</span><span class="Keyword">:</span> <span class="Number">2</span>) <span class="Keyword">+</span> (<span class="FunctionName">three</span><span class="Keyword">:</span> <span class="Number">3</span>)
+</pre><pre class="idle"><span class="Storage">var</span> one, six, three, two;
+six <span class="Keyword">=</span> ((one <span class="Keyword">=</span> <span class="Number">1</span>)) <span class="Keyword">+</span> ((two <span class="Keyword">=</span> <span class="Number">2</span>)) <span class="Keyword">+</span> ((three <span class="Keyword">=</span> <span class="Number">3</span>));
+</pre><button onclick='javascript: var one, six, three, two;
+six = ((one = 1)) + ((two = 2)) + ((three = 3));
+;alert(six);'>run: six</button><br class='clear' /></div>
+    <p>
+      Things that would otherwise be statements in JavaScript, when used
+      as part of an expression in CoffeeScript, are converted into expressions
+      by wrapping them in a closure. This lets you do useful things, like assign
+      the result of a comprehension to a variable:
+    </p>
+    <div class='code'><pre class="idle"><span class="Comment"><span class="Comment">#</span> The first ten global properties.</span>
+<span class="FunctionName">globals</span><span class="Keyword">:</span> (name <span class="Keyword">for</span> name <span class="Keyword">of</span> window)[<span class="Number">0</span>...<span class="Number">10</span>]
+</pre><pre class="idle"><span class="Storage">var</span> _a, _b, globals, name;
+<span class="Storage">var</span> __hasProp <span class="Keyword">=</span> <span class="LibraryClassType">Object</span>.<span class="LibraryConstant">prototype</span>.hasOwnProperty;
+<span class="Comment"><span class="Comment">//</span> The first ten global properties.</span>
+globals <span class="Keyword">=</span> (<span class="Storage">function</span>() {
+  _a <span class="Keyword">=</span> []; _b <span class="Keyword">=</span> <span class="LibraryClassType">window</span>;
+  <span class="Keyword">for</span> (name <span class="Keyword">in</span> _b) { <span class="Keyword">if</span> (__hasProp.<span class="LibraryFunction">call</span>(_b, name)) {
+    _a.<span class="LibraryFunction">push</span>(name);
+  }}
+  <span class="Keyword">return</span> _a;
+}).<span class="LibraryFunction">call</span>(<span class="Variable">this</span>).<span class="LibraryFunction">slice</span>(<span class="Number">0</span>, <span class="Number">10</span>);
+</pre><button onclick='javascript: var _a, _b, globals, name;
+var __hasProp = Object.prototype.hasOwnProperty;
+// The first ten global properties.
+globals = (function() {
+  _a = []; _b = window;
+  for (name in _b) { if (__hasProp.call(_b, name)) {
+    _a.push(name);
+  }}
+  return _a;
+}).call(this).slice(0, 10);
+;alert(globals);'>run: globals</button><br class='clear' /></div>
+    <p>
+      As well as silly things, like passing a <b>try/catch</b> statement directly
+      into a function call:
+    </p>
+    <div class='code'><pre class="idle">alert(
+  <span class="Keyword">try</span>
+    nonexistent <span class="Keyword">/</span> <span class="BuiltInConstant">undefined</span>
+  <span class="Keyword">catch</span> error
+    <span class="String"><span class="String">&quot;</span>And the error is ... <span class="String">&quot;</span></span> <span class="Keyword">+</span> error
+)
+</pre><pre class="idle"><span class="LibraryFunction">alert</span>((<span class="Storage">function</span>() {
+  <span class="Keyword">try</span> {
+    <span class="Keyword">return</span> nonexistent / undefined;
+  } <span class="Keyword">catch</span> (error) {
+    <span class="Keyword">return</span> <span class="String"><span class="String">&quot;</span>And the error is ... <span class="String">&quot;</span></span> <span class="Keyword">+</span> error;
+  }
+}).<span class="LibraryFunction">call</span>(<span class="Variable">this</span>));
+</pre><button onclick='javascript: alert((function() {
+  try {
+    return nonexistent / undefined;
+  } catch (error) {
+    return "And the error is ... " + error;
+  }
+}).call(this));
+;'>run</button><br class='clear' /></div>
+    <p>
+      There are a handful of statements in JavaScript that can't be meaningfully
+      converted into expressions, namely <tt>break</tt>, <tt>continue</tt>,
+      and <tt>return</tt>. If you make use of them within a block of code,
+      CoffeeScript won't try to perform the conversion.
+    </p>
+    <p>
+      <span id="existence" class="bookmark"></span>
+      <b class="header">The Existential Operator</b>
+      It's a little difficult to check for the existence of a variable in
+      JavaScript. <tt>if (variable) ...</tt> comes close, but fails for zero,
+      the empty string, and false. CoffeeScript's existential operator <tt>?</tt> returns true unless
+      a variable is <b>null</b> or <b>undefined</b>, which makes it analogous
+      to Ruby's <tt>nil?</tt>
+    </p>
+    <p>
+      It can also be used for safer conditional assignment than <tt>||=</tt>
+      provides, for cases where you may be handling numbers or strings.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">solipsism</span><span class="Keyword">:</span> <span class="BuiltInConstant">true</span> <span class="Keyword">if</span> mind<span class="Keyword">?</span> <span class="Keyword">and</span> <span class="Keyword">not</span> world<span class="Keyword">?</span>
+speed <span class="Keyword">?</span><span class="Keyword">=</span> <span class="Number">140</span>
+</pre><pre class="idle"><span class="Storage">var</span> solipsism, speed;
+<span class="Keyword">if</span> ((<span class="Keyword">typeof</span> mind <span class="Keyword">!</span><span class="Keyword">==</span> <span class="String"><span class="String">&quot;</span>undefined<span class="String">&quot;</span></span> <span class="Keyword">&amp;</span><span class="Keyword">&amp;</span> mind <span class="Keyword">!</span><span class="Keyword">==</span> <span class="BuiltInConstant">null</span>) <span class="Keyword">&amp;</span><span class="Keyword">&amp;</span> <span class="Keyword">!</span>(<span class="Keyword">typeof</span> world <span class="Keyword">!</span><span class="Keyword">==</span> <span class="String"><span class="String">&quot;</span>undefined<span class="String">&quot;</span></span> <span class="Keyword">&amp;</span><span class="Keyword">&amp;</span> world <span class="Keyword">!</span><span class="Keyword">==</span> <span class="BuiltInConstant">null</span>)) {
+  solipsism <span class="Keyword">=</span> <span class="BuiltInConstant">true</span>;
+}
+speed <span class="Keyword">=</span> (<span class="Keyword">typeof</span> speed <span class="Keyword">!</span><span class="Keyword">==</span> <span class="String"><span class="String">&quot;</span>undefined<span class="String">&quot;</span></span> <span class="Keyword">&amp;</span><span class="Keyword">&amp;</span> speed <span class="Keyword">!</span><span class="Keyword">==</span> <span class="BuiltInConstant">null</span>) ? speed : <span class="Number">140</span>;
+</pre><button onclick='javascript: var solipsism, speed;
+if ((typeof mind !== "undefined" && mind !== null) && !(typeof world !== "undefined" && world !== null)) {
+  solipsism = true;
+}
+speed = (typeof speed !== "undefined" && speed !== null) ? speed : 140;
+;alert(speed);'>run: speed</button><br class='clear' /></div>
+    <p>
+      The accessor variant of the existential operator <tt>?.</tt> can be used to soak
+      up null references in a chain of properties. Use it instead
+      of the dot accessor <tt>.</tt> in cases where the base value may be <b>null</b>
+      or <b>undefined</b>. If all of the properties exist then you'll get the expected
+      result, if the chain is broken, <b>undefined</b> is returned instead of
+      the <b>TypeError</b> that would be raised otherwise.
+    </p>
+    <div class='code'><pre class="idle">lottery.draw_winner()<span class="Keyword">?</span>.address<span class="Keyword">?</span>.zipcode
+</pre><pre class="idle"><span class="Storage">var</span> _a;
+(_a <span class="Keyword">=</span> lottery.draw_winner()) <span class="Keyword">==</span> undefined ? undefined : _a.address <span class="Keyword">==</span> undefined ? undefined : _a.address.zipcode;
+</pre><br class='clear' /></div>
+    <p>
+      Soaking up nulls is similar to Ruby's
+      <a href="http://andand.rubyforge.org/">andand gem</a>, and to the
+      <a href="http://groovy.codehaus.org/Operators#Operators-SafeNavigationOperator%28%3F.%29">safe navigation operator</a>
+      in Groovy.
+    </p>
+    <p>
+      <span id="inheritance" class="bookmark"></span>
+      <b class="header">Inheritance, and Calling Super from a Subclass</b>
+      JavaScript's prototypal inheritance has always been a bit of a
+      brain-bender, with a whole family tree of libraries that provide a cleaner
+      syntax for classical inheritance on top of JavaScript's prototypes:
+      <a href="http://code.google.com/p/base2/">Base2</a>,
+      <a href="http://prototypejs.org/">Prototype.js</a>,
+      <a href="http://jsclass.jcoglan.com/">JS.Class</a>, etc.
+      The libraries provide syntactic sugar, but the built-in inheritance would
+      be completely usable if it weren't for a couple of small exceptions:
+      it's awkward to call <b>super</b> (the prototype object's
+      implementation of the current function), and it's awkward to correctly
+      set the prototype chain.
+    </p>
+    <p>
+      CoffeeScript provides <tt>extends</tt>
+      to help with prototype setup, <tt>::</tt> for quick access to an
+      object's prototype, and converts <tt>super()</tt> into a call against
+      the immediate ancestor's method of the same name.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">Animal</span><span class="Keyword">:</span> <span class="Storage">-&gt;</span>
+<span class="FunctionName">Animal::move</span><span class="Keyword">:</span> <span class="FunctionArgument">(</span><span class="FunctionArgument">meters</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span>
+  alert <span class="Variable">@name</span> <span class="Keyword">+</span> <span class="String"><span class="String">&quot;</span> moved <span class="String">&quot;</span></span> <span class="Keyword">+</span> meters <span class="Keyword">+</span> <span class="String"><span class="String">&quot;</span>m.<span class="String">&quot;</span></span>
+<span class="FunctionName">Snake</span><span class="Keyword">:</span> <span class="FunctionArgument">(</span><span class="FunctionArgument">name</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span>
+  <span class="Variable">@name</span><span class="Keyword">:</span> name
+  <span class="Variable">this</span>
+Snake <span class="Variable">extends</span> Animal
+<span class="FunctionName">Snake::move</span><span class="Keyword">:</span> <span class="Storage">-&gt;</span>
+  alert <span class="String"><span class="String">&quot;</span>Slithering...<span class="String">&quot;</span></span>
+  <span class="Variable">super</span> <span class="Number">5</span>
+<span class="FunctionName">Horse</span><span class="Keyword">:</span> <span class="FunctionArgument">(</span><span class="FunctionArgument">name</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span>
+  <span class="Variable">@name</span><span class="Keyword">:</span> name
+  <span class="Variable">this</span>
+Horse <span class="Variable">extends</span> Animal
+<span class="FunctionName">Horse::move</span><span class="Keyword">:</span> <span class="Storage">-&gt;</span>
+  alert <span class="String"><span class="String">&quot;</span>Galloping...<span class="String">&quot;</span></span>
+  <span class="Variable">super</span> <span class="Number">45</span>
+<span class="FunctionName">sam</span><span class="Keyword">:</span> <span class="Keyword">new</span> <span class="TypeName">Snake</span> <span class="String"><span class="String">&quot;</span>Sammy the Python<span class="String">&quot;</span></span>
+<span class="FunctionName">tom</span><span class="Keyword">:</span> <span class="Keyword">new</span> <span class="TypeName">Horse</span> <span class="String"><span class="String">&quot;</span>Tommy the Palomino<span class="String">&quot;</span></span>
+sam.move()
+tom.move()
+</pre><pre class="idle"><span class="Storage">var</span> Animal, Horse, Snake, _a, _b, sam, tom;
+Animal <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">Animal</span>() {  };
+<span class="LibraryClassType">Animal</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">move</span> = <span class="Storage">function</span> <span class="FunctionName">move</span>(<span class="FunctionArgument">meters</span>) {
+  <span class="Keyword">return</span> <span class="LibraryFunction">alert</span>(<span class="Variable">this</span>.<span class="LibraryConstant">name</span> <span class="Keyword">+</span> <span class="String"><span class="String">&quot;</span> moved <span class="String">&quot;</span></span> <span class="Keyword">+</span> meters <span class="Keyword">+</span> <span class="String"><span class="String">&quot;</span>m.<span class="String">&quot;</span></span>);
+};
+Snake <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">Snake</span>(<span class="FunctionArgument">name</span>) {
+  <span class="Variable">this</span>.<span class="LibraryConstant">name</span> <span class="Keyword">=</span> name;
+  <span class="Keyword">return</span> <span class="Variable">this</span>;
+};
+<span class="FunctionName">_a</span> = <span class="Storage">function</span>(){};
+<span class="LibraryClassType">_a</span>.<span class="LibraryConstant">prototype</span> = Animal.<span class="LibraryConstant">prototype</span>;
+Snake.__superClass__ <span class="Keyword">=</span> Animal.<span class="LibraryConstant">prototype</span>;
+<span class="LibraryClassType">Snake</span>.<span class="LibraryConstant">prototype</span> = <span class="Keyword">new</span> <span class="TypeName">_a</span>();
+<span class="LibraryClassType">Snake</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">constructor</span> = Snake;
+<span class="LibraryClassType">Snake</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">move</span> = <span class="Storage">function</span> <span class="FunctionName">move</span>() {
+  <span class="LibraryFunction">alert</span>(<span class="String"><span class="String">&quot;</span>Slithering...<span class="String">&quot;</span></span>);
+  <span class="Keyword">return</span> Snake.__superClass__.move.<span class="LibraryFunction">call</span>(<span class="Variable">this</span>, <span class="Number">5</span>);
+};
+Horse <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">Horse</span>(<span class="FunctionArgument">name</span>) {
+  <span class="Variable">this</span>.<span class="LibraryConstant">name</span> <span class="Keyword">=</span> name;
+  <span class="Keyword">return</span> <span class="Variable">this</span>;
+};
+<span class="FunctionName">_b</span> = <span class="Storage">function</span>(){};
+<span class="LibraryClassType">_b</span>.<span class="LibraryConstant">prototype</span> = Animal.<span class="LibraryConstant">prototype</span>;
+Horse.__superClass__ <span class="Keyword">=</span> Animal.<span class="LibraryConstant">prototype</span>;
+<span class="LibraryClassType">Horse</span>.<span class="LibraryConstant">prototype</span> = <span class="Keyword">new</span> <span class="TypeName">_b</span>();
+<span class="LibraryClassType">Horse</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">constructor</span> = Horse;
+<span class="LibraryClassType">Horse</span>.<span class="LibraryConstant">prototype</span>.<span class="FunctionName">move</span> = <span class="Storage">function</span> <span class="FunctionName">move</span>() {
+  <span class="LibraryFunction">alert</span>(<span class="String"><span class="String">&quot;</span>Galloping...<span class="String">&quot;</span></span>);
+  <span class="Keyword">return</span> Horse.__superClass__.move.<span class="LibraryFunction">call</span>(<span class="Variable">this</span>, <span class="Number">45</span>);
+};
+sam <span class="Keyword">=</span> <span class="Keyword">new</span> <span class="TypeName">Snake</span>(<span class="String"><span class="String">&quot;</span>Sammy the Python<span class="String">&quot;</span></span>);
+tom <span class="Keyword">=</span> <span class="Keyword">new</span> <span class="TypeName">Horse</span>(<span class="String"><span class="String">&quot;</span>Tommy the Palomino<span class="String">&quot;</span></span>);
+sam.move();
+tom.move();
+</pre><button onclick='javascript: var Animal, Horse, Snake, _a, _b, sam, tom;
+Animal = function Animal() {  };
+Animal.prototype.move = function move(meters) {
+  return alert(this.name + " moved " + meters + "m.");
+};
+Snake = function Snake(name) {
+  this.name = name;
+  return this;
+};
+_a = function(){};
+_a.prototype = Animal.prototype;
+Snake.__superClass__ = Animal.prototype;
+Snake.prototype = new _a();
+Snake.prototype.constructor = Snake;
+Snake.prototype.move = function move() {
+  alert("Slithering...");
+  return Snake.__superClass__.move.call(this, 5);
+};
+Horse = function Horse(name) {
+  this.name = name;
+  return this;
+};
+_b = function(){};
+_b.prototype = Animal.prototype;
+Horse.__superClass__ = Animal.prototype;
+Horse.prototype = new _b();
+Horse.prototype.constructor = Horse;
+Horse.prototype.move = function move() {
+  alert("Galloping...");
+  return Horse.__superClass__.move.call(this, 45);
+};
+sam = new Snake("Sammy the Python");
+tom = new Horse("Tommy the Palomino");
+sam.move();
+tom.move();
+;'>run</button><br class='clear' /></div>
+    <p>
+      <span id="pattern_matching" class="bookmark"></span>
+      <b class="header">Pattern Matching (Destructuring Assignment)</b>
+      To make extracting values from complex arrays and objects more convenient,
+      CoffeeScript implements ECMAScript Harmony's proposed
+      <a href="http://wiki.ecmascript.org/doku.php?id=harmony:destructuring">destructuring assignment</a>
+      syntax. When you assign an array or object literal to a value, CoffeeScript
+      breaks up and matches both sides against each other, assigning the values
+      on the right to the variables on the left. In the simplest case, it can be
+      used for parallel assignment:
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">bait</span><span class="Keyword">:</span> <span class="Number">1000</span>
+<span class="FunctionName">and_switch</span><span class="Keyword">:</span> <span class="Number">0</span>
+[bait, and_switch]<span class="Keyword">:</span> [and_switch, bait]
+</pre><pre class="idle"><span class="Storage">var</span> _a, and_switch, bait;
+bait <span class="Keyword">=</span> <span class="Number">1000</span>;
+and_switch <span class="Keyword">=</span> <span class="Number">0</span>;
+_a <span class="Keyword">=</span> [and_switch, bait];
+bait <span class="Keyword">=</span> _a[<span class="Number">0</span>];
+and_switch <span class="Keyword">=</span> _a[<span class="Number">1</span>];
+</pre><button onclick='javascript: var _a, and_switch, bait;
+bait = 1000;
+and_switch = 0;
+_a = [and_switch, bait];
+bait = _a[0];
+and_switch = _a[1];
+;alert(bait);'>run: bait</button><br class='clear' /></div>
+    <p>
+      But it's also helpful for dealing with functions that return multiple
+      values.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">weather_report</span><span class="Keyword">:</span> <span class="FunctionArgument">(</span><span class="FunctionArgument">location</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span>
+  <span class="Comment"><span class="Comment">#</span> Make an Ajax request to fetch the weather...</span>
+  [location, <span class="Number">72</span>, <span class="String"><span class="String">&quot;</span>Mostly Sunny<span class="String">&quot;</span></span>]
+[city, temp, forecast]<span class="Keyword">:</span> weather_report <span class="String"><span class="String">&quot;</span>Berkeley, CA<span class="String">&quot;</span></span>
+</pre><pre class="idle"><span class="Storage">var</span> _a, city, forecast, temp, weather_report;
+weather_report <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">weather_report</span>(<span class="FunctionArgument">location</span>) {
+  <span class="Comment"><span class="Comment">//</span> Make an Ajax request to fetch the weather...</span>
+  <span class="Keyword">return</span> [location, <span class="Number">72</span>, <span class="String"><span class="String">&quot;</span>Mostly Sunny<span class="String">&quot;</span></span>];
+};
+_a <span class="Keyword">=</span> weather_report(<span class="String"><span class="String">&quot;</span>Berkeley, CA<span class="String">&quot;</span></span>);
+city <span class="Keyword">=</span> _a[<span class="Number">0</span>];
+temp <span class="Keyword">=</span> _a[<span class="Number">1</span>];
+forecast <span class="Keyword">=</span> _a[<span class="Number">2</span>];
+</pre><button onclick='javascript: var _a, city, forecast, temp, weather_report;
+weather_report = function weather_report(location) {
+  // Make an Ajax request to fetch the weather...
+  return [location, 72, "Mostly Sunny"];
+};
+_a = weather_report("Berkeley, CA");
+city = _a[0];
+temp = _a[1];
+forecast = _a[2];
+;alert(forecast);'>run: forecast</button><br class='clear' /></div>
+    <p>
+      Pattern matching can be used with any depth of array and object nesting,
+      to help pull out deeply nested properties.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">futurists</span><span class="Keyword">:</span> {
+  <span class="FunctionName">sculptor</span><span class="Keyword">:</span> <span class="String"><span class="String">&quot;</span>Umberto Boccioni<span class="String">&quot;</span></span>
+  <span class="FunctionName">painter</span><span class="Keyword">:</span>  <span class="String"><span class="String">&quot;</span>Vladimir Burliuk<span class="String">&quot;</span></span>
+  <span class="FunctionName">poet</span><span class="Keyword">:</span> {
+    <span class="FunctionName">name</span><span class="Keyword">:</span>   <span class="String"><span class="String">&quot;</span>F.T. Marinetti<span class="String">&quot;</span></span>
+    <span class="FunctionName">address</span><span class="Keyword">:</span> [
+      <span class="String"><span class="String">&quot;</span>Via Roma 42R<span class="String">&quot;</span></span>
+      <span class="String"><span class="String">&quot;</span>Bellagio, Italy 22021<span class="String">&quot;</span></span>
+    ]
+  }
+}
+{<span class="FunctionName">poet</span><span class="Keyword">:</span> {<span class="FunctionName">name</span><span class="Keyword">:</span> poet, <span class="FunctionName">address</span><span class="Keyword">:</span> [street, city]}}<span class="Keyword">:</span> futurists
+</pre><pre class="idle"><span class="Storage">var</span> _a, _b, _c, city, futurists, poet, street;
+futurists <span class="Keyword">=</span> {
+  sculptor: <span class="String"><span class="String">&quot;</span>Umberto Boccioni<span class="String">&quot;</span></span>,
+  painter: <span class="String"><span class="String">&quot;</span>Vladimir Burliuk<span class="String">&quot;</span></span>,
+  poet: {
+    name: <span class="String"><span class="String">&quot;</span>F.T. Marinetti<span class="String">&quot;</span></span>,
+    address: [<span class="String"><span class="String">&quot;</span>Via Roma 42R<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Bellagio, Italy 22021<span class="String">&quot;</span></span>]
+  }
+};
+_a <span class="Keyword">=</span> futurists;
+_b <span class="Keyword">=</span> _a.poet;
+poet <span class="Keyword">=</span> _b.<span class="LibraryConstant">name</span>;
+_c <span class="Keyword">=</span> _b.address;
+street <span class="Keyword">=</span> _c[<span class="Number">0</span>];
+city <span class="Keyword">=</span> _c[<span class="Number">1</span>];
+</pre><button onclick='javascript: var _a, _b, _c, city, futurists, poet, street;
+futurists = {
+  sculptor: "Umberto Boccioni",
+  painter: "Vladimir Burliuk",
+  poet: {
+    name: "F.T. Marinetti",
+    address: ["Via Roma 42R", "Bellagio, Italy 22021"]
+  }
+};
+_a = futurists;
+_b = _a.poet;
+poet = _b.name;
+_c = _b.address;
+street = _c[0];
+city = _c[1];
+;alert(poet + " — " + street);'>run: poet + " — " + street</button><br class='clear' /></div>
+    <p>
+      <span id="fat_arrow" class="bookmark"></span>
+      <b class="header">Function binding</b>
+      The fat arrow <tt>=></tt> can be used to both define a function, and to bind
+      it to the current value of <tt>this</tt>, right on the spot. This is helpful
+      when using callback-based libraries like Prototype or jQuery, for creating
+      iterator functions to pass to <tt>each</tt>, or event-handler functions
+      to use with <tt>bind</tt>. Functions created with the fat arrow are able to access
+      properties of the <tt>this</tt> where they're defined.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">Account</span><span class="Keyword">:</span> <span class="FunctionArgument">(</span><span class="FunctionArgument">customer, cart</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span>
+  <span class="Variable">@customer</span><span class="Keyword">:</span> customer
+  <span class="Variable">@cart</span><span class="Keyword">:</span> cart
+  $(<span class="String"><span class="String">'</span>.shopping_cart<span class="String">'</span></span>).bind <span class="String"><span class="String">'</span>click<span class="String">'</span></span>, <span class="FunctionArgument">(</span><span class="FunctionArgument">event</span><span class="FunctionArgument">)</span> <span class="Storage">=&gt;</span>
+    <span class="Variable">@customer</span>.purchase <span class="Variable">@cart</span>
+</pre><pre class="idle"><span class="Storage">var</span> Account;
+Account <span class="Keyword">=</span> <span class="Storage">function</span> <span class="FunctionName">Account</span>(<span class="FunctionArgument">customer, cart</span>) {
+  <span class="Variable">this</span>.customer <span class="Keyword">=</span> customer;
+  <span class="Variable">this</span>.cart <span class="Keyword">=</span> cart;
+  <span class="Keyword">return</span> <span class="Keyword">$</span>(<span class="String"><span class="String">'</span>.shopping_cart<span class="String">'</span></span>).bind(<span class="String"><span class="String">'</span>click<span class="String">'</span></span>, (<span class="Storage">function</span>(__this) {
+    <span class="Storage">var</span> <span class="FunctionName">__func</span> = <span class="Storage">function</span>(<span class="FunctionArgument">event</span>) {
+      <span class="Keyword">return</span> <span class="Variable">this</span>.customer.purchase(<span class="Variable">this</span>.cart);
+    };
+    <span class="Keyword">return</span> (<span class="Storage">function</span>() {
+      <span class="Keyword">return</span> __func.<span class="LibraryFunction">apply</span>(__this, arguments);
+    });
+  })(<span class="Variable">this</span>));
+};
+</pre><br class='clear' /></div>
+    <p>
+      <span id="embedded" class="bookmark"></span>
+      <b class="header">Embedded JavaScript</b>
+      Hopefully, you'll never need to use it, but if you ever need to intersperse
+      snippets of JavaScript within your CoffeeScript, you can
+      use backticks to pass it straight through.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">hi</span><span class="Keyword">:</span> <span class="String"><span class="String">`</span>function() {</span>
+<span class="String">  return [document.title, &quot;Hello JavaScript&quot;].join(&quot;: &quot;);</span>
+<span class="String">}<span class="String">`</span></span>
+</pre><pre class="idle"><span class="Storage">var</span> hi;
+<span class="FunctionName">hi</span> = <span class="Storage">function</span>() {
+<span class="Keyword">return</span> [<span class="LibraryClassType">document</span>.<span class="LibraryConstant">title</span>, <span class="String"><span class="String">&quot;</span>Hello JavaScript<span class="String">&quot;</span></span>].<span class="LibraryFunction">join</span>(<span class="String"><span class="String">&quot;</span>: <span class="String">&quot;</span></span>);
+};
+</pre><button onclick='javascript: var hi;
+hi = function() {
+return [document.title, "Hello JavaScript"].join(": ");
+};
+;alert(hi());'>run: hi()</button><br class='clear' /></div>
+    <p>
+      <span id="switch" class="bookmark"></span>
+      <b class="header">Switch/When/Else</b>
+      <b>Switch</b> statements in JavaScript are rather broken. You can only
+      do comparisons based on string equality, and need to remember to <b>break</b> at the end of
+      every <b>case</b> statement to avoid accidentally falling through to
+      the default case. CoffeeScript compiles <b>switch</b> statements into JavaScript if-else chains, allowing you to
+      compare any object (via <b>===</b>), preventing fall-through, and resulting
+      in a returnable, assignable expression. The format is: <tt>switch</tt> condition,
+      <tt>when</tt> clauses, <tt>else</tt> the default case.
+    </p>
+    <p>
+      As in Ruby, <b>switch</b> statements in CoffeeScript can take multiple
+      values for each <b>when</b> clause. If any of the values match, the clause
+      runs.
+    </p>
+    <div class='code'><pre class="idle"><span class="Keyword">switch</span> day
+  <span class="Keyword">when</span> <span class="String"><span class="String">&quot;</span>Mon<span class="String">&quot;</span></span> <span class="Keyword">then</span> go_to_work()
+  <span class="Keyword">when</span> <span class="String"><span class="String">&quot;</span>Tue<span class="String">&quot;</span></span> <span class="Keyword">then</span> go_to_the_park()
+  <span class="Keyword">when</span> <span class="String"><span class="String">&quot;</span>Thu<span class="String">&quot;</span></span> <span class="Keyword">then</span> go_ice_fishing()
+  <span class="Keyword">when</span> <span class="String"><span class="String">&quot;</span>Fri<span class="String">&quot;</span></span>, <span class="String"><span class="String">&quot;</span>Sat<span class="String">&quot;</span></span>
+    <span class="Keyword">if</span> day <span class="Keyword">is</span> bingo_day
+      go_to_bingo()
+      go_dancing()
+  <span class="Keyword">when</span> <span class="String"><span class="String">&quot;</span>Sun<span class="String">&quot;</span></span> <span class="Keyword">then</span> go_to_church()
+  <span class="Keyword">else</span> go_to_work()
+</pre><pre class="idle"><span class="Keyword">if</span> (day <span class="Keyword">===</span> <span class="String"><span class="String">&quot;</span>Mon<span class="String">&quot;</span></span>) {
+  go_to_work();
+} <span class="Keyword">else</span> <span class="Keyword">if</span> (day <span class="Keyword">===</span> <span class="String"><span class="String">&quot;</span>Tue<span class="String">&quot;</span></span>) {
+  go_to_the_park();
+} <span class="Keyword">else</span> <span class="Keyword">if</span> (day <span class="Keyword">===</span> <span class="String"><span class="String">&quot;</span>Thu<span class="String">&quot;</span></span>) {
+  go_ice_fishing();
+} <span class="Keyword">else</span> <span class="Keyword">if</span> (day <span class="Keyword">===</span> <span class="String"><span class="String">&quot;</span>Fri<span class="String">&quot;</span></span> <span class="Keyword">||</span> day <span class="Keyword">===</span> <span class="String"><span class="String">&quot;</span>Sat<span class="String">&quot;</span></span>) {
+  <span class="Keyword">if</span> (day <span class="Keyword">===</span> bingo_day) {
+    go_to_bingo();
+    go_dancing();
+  }
+} <span class="Keyword">else</span> <span class="Keyword">if</span> (day <span class="Keyword">===</span> <span class="String"><span class="String">&quot;</span>Sun<span class="String">&quot;</span></span>) {
+  go_to_church();
+} <span class="Keyword">else</span> {
+  go_to_work();
+}
+</pre><br class='clear' /></div>
+    <p>
+      <span id="try" class="bookmark"></span>
+      <b class="header">Try/Catch/Finally</b>
+      Try/catch statements are just about the same as JavaScript (although
+      they work as expressions).
+    </p>
+    <div class='code'><pre class="idle"><span class="Keyword">try</span>
+  all_hell_breaks_loose()
+  cats_and_dogs_living_together()
+<span class="Keyword">catch</span> error
+  print error
+<span class="Keyword">finally</span>
+  clean_up()
+</pre><pre class="idle"><span class="Keyword">try</span> {
+  all_hell_breaks_loose();
+  cats_and_dogs_living_together();
+} <span class="Keyword">catch</span> (error) {
+  <span class="LibraryFunction">print</span>(error);
+} <span class="Keyword">finally</span> {
+  clean_up();
+}
+</pre><br class='clear' /></div>
+    <p>
+      <span id="comparisons" class="bookmark"></span>
+      <b class="header">Chained Comparisons</b>
+      CoffeeScript borrows
+      <a href="http://docs.python.org/reference/expressions.html#notin">chained comparisons</a>
+      from Python &mdash; making it easy to test if a value falls within a
+      certain range.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">cholesterol</span><span class="Keyword">:</span> <span class="Number">127</span>
+<span class="FunctionName">healthy</span><span class="Keyword">:</span> <span class="Number">200</span> <span class="Keyword">&gt;</span> cholesterol <span class="Keyword">&gt;</span> <span class="Number">60</span>
+</pre><pre class="idle"><span class="Storage">var</span> cholesterol, healthy;
+cholesterol <span class="Keyword">=</span> <span class="Number">127</span>;
+healthy <span class="Keyword">=</span> (<span class="Number">200</span> <span class="Keyword">&gt;</span> cholesterol) <span class="Keyword">&amp;</span><span class="Keyword">&amp;</span> (cholesterol <span class="Keyword">&gt;</span> <span class="Number">60</span>);
+</pre><button onclick='javascript: var cholesterol, healthy;
+cholesterol = 127;
+healthy = (200 > cholesterol) && (cholesterol > 60);
+;alert(healthy);'>run: healthy</button><br class='clear' /></div>
+    <p>
+      <span id="strings" class="bookmark"></span>
+      <b class="header">Multiline Strings and Heredocs</b>
+      Multiline strings are allowed in CoffeeScript.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">moby_dick</span><span class="Keyword">:</span> <span class="String"><span class="String">&quot;</span>Call me Ishmael. Some years ago --</span>
+<span class="String">never mind how long precisely -- having little</span>
+<span class="String">or no money in my purse, and nothing particular</span>
+<span class="String">to interest me on shore, I thought I would sail</span>
+<span class="String">about a little and see the watery part of the</span>
+<span class="String">world...<span class="String">&quot;</span></span>
+</pre><pre class="idle"><span class="Storage">var</span> moby_dick;
+moby_dick <span class="Keyword">=</span> <span class="String"><span class="String">&quot;</span>Call me Ishmael. Some years ago -- \</span>
+<span class="String">never mind how long precisely -- having little \</span>
+<span class="String">or no money in my purse, and nothing particular \</span>
+<span class="String">to interest me on shore, I thought I would sail \</span>
+<span class="String">about a little and see the watery part of the \</span>
+<span class="String">world...<span class="String">&quot;</span></span>;
+</pre><button onclick='javascript: var moby_dick;
+moby_dick = "Call me Ishmael. Some years ago -- \
+never mind how long precisely -- having little \
+or no money in my purse, and nothing particular \
+to interest me on shore, I thought I would sail \
+about a little and see the watery part of the \
+world...";
+;alert(moby_dick);'>run: moby_dick</button><br class='clear' /></div>
+    <p>
+      Heredocs can be used to hold formatted or indentation-sensitive text
+      (or, if you just don't feel like escaping quotes and apostrophes). The
+      indentation level that begins the heredoc is maintained throughout, so
+      you can keep it all aligned with the body of your code.
+    </p>
+    <div class='code'><pre class="idle"><span class="FunctionName">html</span><span class="Keyword">:</span> <span class="String"><span class="String">'''</span></span>
+<span class="String">      &lt;strong&gt;</span>
+<span class="String">        cup of coffeescript</span>
+<span class="String">      &lt;/strong&gt;</span>
+<span class="String">      <span class="String">'''</span></span>
+</pre><pre class="idle"><span class="Storage">var</span> html;
+html <span class="Keyword">=</span> <span class="String"><span class="String">&quot;</span>&lt;strong&gt;<span class="UserDefinedConstant">\n</span>  cup of coffeescript<span class="UserDefinedConstant">\n</span>&lt;/strong&gt;<span class="String">&quot;</span></span>;
+</pre><br class='clear' /></div>
+    <h2>
+      <span id="cake" class="bookmark"></span>
+      Cake, and Cakefiles
+    </h2>
+    <p>
+      CoffeeScript includes a simple build system similar to Make and Rake. Naturally,
+      it's called Cake, and is used for the build and test tasks for the CoffeeScript
+      language itself. Tasks are defined in a file named <tt>Cakefile</tt>, and
+      can be invoked by running <tt>cake taskname</tt> from within the directory.
+      To print a list of all the tasks, just run <tt>cake</tt>.
+    </p>
+    <p>
+      Task definitions are written in CoffeeScript, so you can put arbitrary code
+      in your Cakefile. Define a task with a name, a long description, and the
+      function to invoke when the task is run. Here's a hypothetical task
+      that uses the Node.js API.
+    </p>
+    <div class='code'><pre class="idle">process.mixin require <span class="String"><span class="String">'</span>assert<span class="String">'</span></span>
+task <span class="String"><span class="String">'</span>test<span class="String">'</span></span>, <span class="String"><span class="String">'</span>run each of the unit tests<span class="String">'</span></span>, <span class="Storage">-&gt;</span>
+  <span class="Keyword">for</span> test <span class="Keyword">in</span> test_files
+    fs.readFile test, <span class="FunctionArgument">(</span><span class="FunctionArgument">err, code</span><span class="FunctionArgument">)</span> <span class="Storage">-&gt;</span> eval coffee.compile code
+</pre><pre class="idle">process.mixin(require(<span class="String"><span class="String">'</span>assert<span class="String">'</span></span>));
+task(<span class="String"><span class="String">'</span>test<span class="String">'</span></span>, <span class="String"><span class="String">'</span>run each of the unit tests<span class="String">'</span></span>, <span class="Storage">function</span>() {
+  <span class="Storage">var</span> _a, _b, _c, test;
+  _a <span class="Keyword">=</span> []; _b <span class="Keyword">=</span> test_files;
+  <span class="Keyword">for</span> (_c <span class="Keyword">=</span> <span class="Number">0</span>; _c <span class="Keyword">&lt;</span> _b.<span class="LibraryConstant">length</span>; _c<span class="Keyword">++</span>) {
+    test <span class="Keyword">=</span> _b[_c];
+    _a.<span class="LibraryFunction">push</span>(fs.readFile(test, <span class="Storage">function</span>(err, code) {
+      <span class="Keyword">return</span> <span class="LibraryFunction">eval</span>(coffee.<span class="LibraryFunction">compile</span>(code));
+    }));
+  }
+  <span class="Keyword">return</span> _a;
+});
+</pre><br class='clear' /></div>
+    <h2>
+      <span id="resources" class="bookmark"></span>
+      Resources
+    </h2>
+    <ul>
+      <li>
+        <a href="http://github.com/jashkenas/coffee-script/">Source Code</a><br />
+        Use <tt>bin/coffee</tt> to test your changes,<br />
+        <tt>bin/cake test</tt> to run the test suite,<br />
+        <tt>bin/cake build</tt> to rebuild the CoffeeScript compiler, and <br />
+        <tt>bin/cake build:parser</tt> to regenerate the Jison parser if you're
+        working on the grammar.
+      </li>
+      <li>
+        <a href="http://github.com/jashkenas/coffee-script/issues">CoffeeScript Issues</a><br />
+        Bugs reports, feature requests, and general discussion all belong here.
+      </li>
+      <li>
+        If you'd like to chat, stop by <tt>#coffeescript</tt> on Freenode.
+      </li>
+    </ul>
+    <h2>
+      <span id="change_log" class="bookmark"></span>
+      Change Log
+    </h2>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.5.1</b>
+      Improvements to null soaking with the existential operator, including
+      soaks on indexed properties. Added conditions to <tt>while</tt> loops,
+      so you can use them as filters with <tt>when</tt>, in the same manner as
+      comprehensions.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.5.0</b>
+      CoffeeScript 0.5.0 is a major release, While there are no language changes,
+      the Ruby compiler has been removed in favor of a self-hosting
+      compiler written in pure CoffeeScript.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.3.2</b>
+      <tt>@property</tt> is now a shorthand for <tt>this.property</tt>.<br />
+      Switched the default JavaScript engine from Narwhal to Node.js. Pass
+      the <tt>--narwhal</tt> flag if you'd like to continue using it.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.3.0</b>
+      CoffeeScript 0.3 includes major syntax changes:
+      <br />
+      The function symbol was changed to
+      <tt>-></tt>, and the bound function symbol is now <tt>=></tt>.
+      <br />
+      Parameter lists in function definitions must now be wrapped in parentheses.
+      <br />
+      Added property soaking, with the <tt>?.</tt> operator.
+      <br />
+      Made parentheses optional, when invoking functions with arguments.
+      <br />
+      Removed the obsolete block literal syntax.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.2.6</b>
+      Added Python-style chained comparisons, the conditional existence
+      operator <tt>?=</tt>, and some examples from <i>Beautiful Code</i>.
+      Bugfixes relating to statement-to-expression conversion, arguments-to-array
+      conversion, and the TextMate syntax highlighter.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.2.5</b>
+      The conditions in switch statements can now take multiple values at once &mdash;
+      If any of them are true, the case will run. Added the long arrow <tt>==></tt>,
+      which defines and immediately binds a function to <tt>this</tt>. While loops can
+      now be used as expressions, in the same way that comprehensions can. Splats
+      can be used within pattern matches to soak up the rest of an array.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.2.4</b>
+      Added ECMAScript Harmony style destructuring assignment, for dealing with
+      extracting values from nested arrays and objects. Added indentation-sensitive
+      heredocs for nicely formatted strings or chunks of code.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.2.3</b>
+      Axed the unsatisfactory <tt>ino</tt> keyword, replacing it with <tt>of</tt> for
+      object comprehensions. They now look like: <tt>for prop, value of object</tt>.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.2.2</b>
+      When performing a comprehension over an object, use <tt>ino</tt>, instead
+      of <tt>in</tt>, which helps us generate smaller, more efficient code at
+      compile time.
+      <br />
+      Added <tt>::</tt> as a shorthand for saying <tt>.prototype.</tt>
+      <br />
+      The "splat" symbol has been changed from a prefix asterisk <tt>*</tt>, to
+      a postfix ellipsis <tt>...</tt>
+      <br />
+      Added JavaScript's <tt>in</tt> operator,
+      empty <tt>return</tt> statements, and empty <tt>while</tt> loops.
+      <br />
+      Constructor functions that start with capital letters now include a
+      safety check to make sure that the new instance of the object is returned.
+      <br />
+      The <tt>extends</tt> keyword now functions identically to <tt>goog.inherits</tt>
+      in Google's Closure Library.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.2.1</b>
+      Arguments objects are now converted into real arrays when referenced.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.2.0</b>
+      Major release. Significant whitespace. Better statement-to-expression
+      conversion. Splats. Splice literals. Object comprehensions. Blocks.
+      The existential operator. Many thanks to all the folks who posted issues,
+      with special thanks to
+      <a href="http://github.com/kamatsu">Liam O'Connor-Davis</a> for whitespace
+      and expression help.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.1.6</b>
+      Bugfix for running <tt>coffee --interactive</tt> and <tt>--run</tt>
+      from outside of the CoffeeScript directory. Bugfix for nested
+      function/if-statements.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.1.5</b>
+      Array slice literals and array comprehensions can now both take Ruby-style
+      ranges to specify the start and end. JavaScript variable declaration is
+      now pushed up to the top of the scope, making all assignment statements into
+      expressions. You can use <tt>\</tt> to escape newlines.
+      The <tt>coffee-script</tt> command is now called <tt>coffee</tt>.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.1.4</b>
+      The official CoffeeScript extension is now <tt>.coffee</tt> instead of
+      <tt>.cs</tt>, which properly belongs to
+      <a href="http://en.wikipedia.org/wiki/C_Sharp_(programming_language)">C#</a>.
+      Due to popular demand, you can now also use <tt>=</tt> to assign. Unlike
+      JavaScript, <tt>=</tt> can also be used within object literals, interchangeably
+      with <tt>:</tt>. Made a grammatical fix for chained function calls
+      like <tt>func(1)(2)(3)(4)</tt>. Inheritance and super no longer use
+      <tt>__proto__</tt>, so they should be IE-compatible now.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.1.3</b>
+      The <tt>coffee</tt> command now includes <tt>--interactive</tt>,
+      which launches an interactive CoffeeScript session, and <tt>--run</tt>,
+      which directly compiles and executes a script. Both options depend on a
+      working installation of Narwhal.
+      The <tt>aint</tt> keyword has been replaced by <tt>isnt</tt>, which goes
+      together a little smoother with <tt>is</tt>.
+      Quoted strings are now allowed as identifiers within object literals: eg.
+      <tt>{"5+5": 10}</tt>.
+      All assignment operators now use a colon: <tt>+:</tt>, <tt>-:</tt>,
+      <tt>*:</tt>, etc.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.1.2</b>
+      Fixed a bug with calling <tt>super()</tt> through more than one level of
+      inheritance, with the re-addition of the <tt>extends</tt> keyword.
+      Added experimental <a href="http://narwhaljs.org/">Narwhal</a>
+      support (as a Tusk package), contributed by
+      <a href="http://tlrobinson.net/">Tom Robinson</a>, including
+      <b>bin/cs</b> as a CoffeeScript REPL and interpreter.
+      New <tt>--no-wrap</tt> option to suppress the safety function
+      wrapper.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.1.1</b>
+      Added <tt>instanceof</tt> and <tt>typeof</tt> as operators.
+    </p>
+    <p>
+      <b class="header" style="margin-top: 20px;">0.1.0</b>
+      Initial CoffeeScript release.
+    </p>
+  </div>
+  <script type="text/javascript" src="lib/rewriter.js"></script>
+  <script type="text/javascript" src="lib/lexer.js"></script>
+  <script type="text/javascript" src="lib/parser.js"></script>
+  <script type="text/javascript" src="lib/scope.js"></script>
+  <script type="text/javascript" src="lib/nodes.js"></script>
+  <script type="text/javascript" src="lib/coffee-script.js"></script>
+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+  <script type="text/javascript">
+    window.repl_compile = function() {
+      var source = $('#repl_source').val();
+      window.compiled_js = '';
+      try {
+        window.compiled_js = CoffeeScript.compile(source, {no_wrap: true});
+      } catch(error) {
+        alert(error);
+      }
+      $('#repl_results').html(window.compiled_js);
+    };
+    window.repl_run = function() {
+      try {
+        eval(window.compiled_js);
+      } catch(error) {
+        alert(error);
+      }
+    };
+    var nav = $('.navigation');
+    var currentNav = null;
+    var closeMenus = function() {
+      if (currentNav) currentNav.removeClass('active');
+      currentNav = null;
+    };
+    nav.click(function(e) {
+      if (e.target.tagName.toLowerCase() == 'a') return;
+      if (this !== (currentNav && currentNav[0])) {
+        closeMenus();
+        currentNav = $(this);
+        currentNav.addClass('active');
+      }
+      return false;
+    });
+    $(document.body).click(function() {
+      closeMenus();
+    });
+  </script>
+</body>
+</html>