more text tweaks

This commit is contained in:
Jeremy Ashkenas 2015-01-29 12:25:25 -05:00
parent cdf69eb5bc
commit f7692c92ce
2 changed files with 77 additions and 77 deletions

View File

@ -34,7 +34,7 @@
<a href="#operators">Operators and Aliases</a>
<a href="#classes">Classes, Inheritance, and Super</a>
<a href="#destructuring">Destructuring Assignment</a>
<a href="#fat-arrow">Function Binding</a>
<a href="#fat-arrow">Bound and Generator Functions</a>
<a href="#embedded">Embedded JavaScript</a>
<a href="#switch">Switch and Try/Catch</a>
<a href="#comparisons">Chained Comparisons</a>
@ -416,13 +416,6 @@ Expressions
if the incoming argument is missing (<tt>null</tt> or <tt>undefined</tt>).
</p>
<%= codeFor('default_args', 'fill("cup")') %>
<p>
CoffeeScript function support
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">ES6 generator functions</a>
through the <tt>yield</tt> keyword. There's no <tt>function*(){}</tt>
nonsense &mdash; a generator in CoffeeScript is simply a function that yields.
</p>
<%= codeFor('generators', 'ps.next().value') %>
<p>
<span id="objects_and_arrays" class="bookmark"></span>
@ -800,7 +793,7 @@ Expressions
<p>
<span id="fat-arrow" class="bookmark"></span>
<b class="header">Function binding</b>
<b class="header">Bound Functions, Generator Functions</b>
In JavaScript, the <tt>this</tt> keyword is dynamically scoped to mean the
object that the current function is attached to. If you pass a function as
a callback or attach it to a different object, the original value of <tt>this</tt>
@ -827,6 +820,13 @@ Expressions
be automatically bound to each instance of the class when the instance is
constructed.
</p>
<p>
CoffeeScript functions also support
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">ES6 generator functions</a>
through the <tt>yield</tt> keyword. There's no <tt>function*(){}</tt>
nonsense &mdash; a generator in CoffeeScript is simply a function that yields.
</p>
<%= codeFor('generators', 'ps.next().value') %>
<p>
<span id="embedded" class="bookmark"></span>

View File

@ -34,7 +34,7 @@
<a href="#operators">Operators and Aliases</a>
<a href="#classes">Classes, Inheritance, and Super</a>
<a href="#destructuring">Destructuring Assignment</a>
<a href="#fat-arrow">Function Binding</a>
<a href="#fat-arrow">Bound and Generator Functions</a>
<a href="#embedded">Embedded JavaScript</a>
<a href="#switch">Switch and Try/Catch</a>
<a href="#comparisons">Chained Comparisons</a>
@ -576,44 +576,6 @@ fill = function(container, liquid) {
return "Filling the " + container + " with " + liquid + "...";
};
;alert(fill("cup"));'>run: fill("cup")</div><br class='clear' /></div>
<p>
CoffeeScript function support
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">ES6 generator functions</a>
through the <tt>yield</tt> keyword. There's no <tt>function*(){}</tt>
nonsense &mdash; a generator in CoffeeScript is simply a function that yields.
</p>
<div class='code'><pre><code><span class="function"><span class="title">perfectSquares</span> = -&gt;</span>
num = <span class="number">0</span>
<span class="keyword">loop</span>
num += <span class="number">1</span>
yield num * num
<span class="keyword">return</span>
<span class="built_in">window</span>.ps <span class="keyword">or</span>= perfectSquares()</code></pre><pre><code><span class="keyword">var</span> perfectSquares;
perfectSquares = <span class="function"><span class="keyword">function</span>*<span class="params">()</span> {</span>
<span class="keyword">var</span> num;
num = <span class="number">0</span>;
<span class="keyword">while</span> (<span class="literal">true</span>) {
num += <span class="number">1</span>;
(<span class="keyword">yield</span> num * num);
}
};
window.ps || (window.ps = perfectSquares());
</code></pre><script>window.example4 = "perfectSquares = ->\n num = 0\n loop\n num += 1\n yield num * num\n return\n\nwindow.ps or= perfectSquares()"</script><div class='minibutton load' onclick='javascript: loadConsole(example4);'>load</div><div class='minibutton ok' onclick='javascript: var perfectSquares;
perfectSquares = function*() {
var num;
num = 0;
while (true) {
num += 1;
(yield num * num);
}
};
window.ps || (window.ps = perfectSquares());
;alert(ps.next().value);'>run: ps.next().value</div><br class='clear' /></div>
<p>
<span id="objects_and_arrays" class="bookmark"></span>
@ -663,7 +625,7 @@ kids = {
age: <span class="number">9</span>
}
};
</code></pre><script>window.example5 = "song = [\"do\", \"re\", \"mi\", \"fa\", \"so\"]\n\nsingers = {Jagger: \"Rock\", Elvis: \"Roll\"}\n\nbitlist = [\n 1, 0, 1\n 0, 0, 1\n 1, 1, 0\n]\n\nkids =\n brother:\n name: \"Max\"\n age: 11\n sister:\n name: \"Ida\"\n age: 9\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example5);'>load</div><div class='minibutton ok' onclick='javascript: var bitlist, kids, singers, song;
</code></pre><script>window.example4 = "song = [\"do\", \"re\", \"mi\", \"fa\", \"so\"]\n\nsingers = {Jagger: \"Rock\", Elvis: \"Roll\"}\n\nbitlist = [\n 1, 0, 1\n 0, 0, 1\n 1, 1, 0\n]\n\nkids =\n brother:\n name: \"Max\"\n age: 11\n sister:\n name: \"Ida\"\n age: 9\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example4);'>load</div><div class='minibutton ok' onclick='javascript: var bitlist, kids, singers, song;
song = ["do", "re", "mi", "fa", "so"];
@ -701,7 +663,7 @@ log object.class
});
log(object[<span class="string">"class"</span>]);
</code></pre><script>window.example6 = "$('.account').attr class: 'active'\n\nlog object.class\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example6);'>load</div><br class='clear' /></div>
</code></pre><script>window.example5 = "$('.account').attr class: 'active'\n\nlog object.class\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example5);'>load</div><br class='clear' /></div>
<p>
<span id="lexical-scope" class="bookmark"></span>
@ -725,7 +687,7 @@ changeNumbers = <span class="function"><span class="keyword">function</span><spa
};
inner = changeNumbers();
</code></pre><script>window.example7 = "outer = 1\nchangeNumbers = ->\n inner = -1\n outer = 10\ninner = changeNumbers()"</script><div class='minibutton load' onclick='javascript: loadConsole(example7);'>load</div><div class='minibutton ok' onclick='javascript: var changeNumbers, inner, outer;
</code></pre><script>window.example6 = "outer = 1\nchangeNumbers = ->\n inner = -1\n outer = 10\ninner = changeNumbers()"</script><div class='minibutton load' onclick='javascript: loadConsole(example6);'>load</div><div class='minibutton ok' onclick='javascript: var changeNumbers, inner, outer;
outer = 1;
@ -807,7 +769,7 @@ date = <span class="keyword">if</span> friday <span class="keyword">then</span>
}
date = friday ? sue : jill;
</code></pre><script>window.example8 = "mood = greatlyImproved if singing\n\nif happy and knowsIt\n clapsHands()\n chaChaCha()\nelse\n showIt()\n\ndate = if friday then sue else jill\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example8);'>load</div><br class='clear' /></div>
</code></pre><script>window.example7 = "mood = greatlyImproved if singing\n\nif happy and knowsIt\n clapsHands()\n chaChaCha()\nelse\n showIt()\n\ndate = if friday then sue else jill\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example7);'>load</div><br class='clear' /></div>
<p>
<span id="splats" class="bookmark"></span>
@ -866,7 +828,7 @@ alert(<span class="string">"Gold: "</span> + gold);
alert(<span class="string">"Silver: "</span> + silver);
alert(<span class="string">"The Field: "</span> + rest);
</code></pre><script>window.example9 = "gold = silver = rest = \"unknown\"\n\nawardMedals = (first, second, others...) ->\n gold = first\n silver = second\n rest = others\n\ncontenders = [\n \"Michael Phelps\"\n \"Liu Xiang\"\n \"Yao Ming\"\n \"Allyson Felix\"\n \"Shawn Johnson\"\n \"Roman Sebrle\"\n \"Guo Jingjing\"\n \"Tyson Gay\"\n \"Asafa Powell\"\n \"Usain Bolt\"\n]\n\nawardMedals contenders...\n\nalert \"Gold: \" + gold\nalert \"Silver: \" + silver\nalert \"The Field: \" + rest\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example9);'>load</div><div class='minibutton ok' onclick='javascript: var awardMedals, contenders, gold, rest, silver,
</code></pre><script>window.example8 = "gold = silver = rest = \"unknown\"\n\nawardMedals = (first, second, others...) ->\n gold = first\n silver = second\n rest = others\n\ncontenders = [\n \"Michael Phelps\"\n \"Liu Xiang\"\n \"Yao Ming\"\n \"Allyson Felix\"\n \"Shawn Johnson\"\n \"Roman Sebrle\"\n \"Guo Jingjing\"\n \"Tyson Gay\"\n \"Asafa Powell\"\n \"Usain Bolt\"\n]\n\nawardMedals contenders...\n\nalert \"Gold: \" + gold\nalert \"Silver: \" + silver\nalert \"The Field: \" + rest\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example8);'>load</div><div class='minibutton ok' onclick='javascript: var awardMedals, contenders, gold, rest, silver,
__slice = [].slice;
gold = silver = rest = "unknown";
@ -932,7 +894,7 @@ foods = [<span class="string">'broccoli'</span>, <span class="string">'spinach'<
eat(food);
}
}
</code></pre><script>window.example10 = "# Eat lunch.\neat food for food in ['toast', 'cheese', 'wine']\n\n# Fine five course dining.\ncourses = ['greens', 'caviar', 'truffles', 'roast', 'cake']\nmenu i + 1, dish for dish, i in courses\n\n# Health conscious meal.\nfoods = ['broccoli', 'spinach', 'chocolate']\neat food for food in foods when food isnt 'chocolate'\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example10);'>load</div><br class='clear' /></div>
</code></pre><script>window.example9 = "# Eat lunch.\neat food for food in ['toast', 'cheese', 'wine']\n\n# Fine five course dining.\ncourses = ['greens', 'caviar', 'truffles', 'roast', 'cake']\nmenu i + 1, dish for dish, i in courses\n\n# Health conscious meal.\nfoods = ['broccoli', 'spinach', 'chocolate']\neat food for food in foods when food isnt 'chocolate'\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example9);'>load</div><br class='clear' /></div>
<p>
Comprehensions 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>, for example:
@ -953,7 +915,7 @@ countdown = (<span class="function"><span class="keyword">function</span><span c
}
<span class="keyword">return</span> _results;
})();
</code></pre><script>window.example11 = "countdown = (num for num in [10..1])\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example11);'>load</div><div class='minibutton ok' onclick='javascript: var countdown, num;
</code></pre><script>window.example10 = "countdown = (num for num in [10..1])\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example10);'>load</div><div class='minibutton ok' onclick='javascript: var countdown, num;
countdown = (function() {
var _i, _results;
@ -1004,7 +966,7 @@ ages = (<span class="function"><span class="keyword">function</span><span class=
}
<span class="keyword">return</span> _results;
})();
</code></pre><script>window.example12 = "yearsOld = max: 10, ida: 9, tim: 11\n\nages = for child, age of yearsOld\n \"#{child} is #{age}\"\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example12);'>load</div><div class='minibutton ok' onclick='javascript: var age, ages, child, yearsOld;
</code></pre><script>window.example11 = "yearsOld = max: 10, ida: 9, tim: 11\n\nages = for child, age of yearsOld\n \"#{child} is #{age}\"\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example11);'>load</div><div class='minibutton ok' onclick='javascript: var age, ages, child, yearsOld;
yearsOld = {
max: 10,
@ -1065,7 +1027,7 @@ lyrics = (<span class="function"><span class="keyword">function</span><span clas
}
<span class="keyword">return</span> _results;
})();
</code></pre><script>window.example13 = "# Econ 101\nif this.studyingEconomics\n buy() while supply > demand\n sell() until supply > demand\n\n# Nursery Rhyme\nnum = 6\nlyrics = while num -= 1\n \"#{num} little monkeys, jumping on the bed.\n One fell out and bumped his head.\"\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example13);'>load</div><div class='minibutton ok' onclick='javascript: var lyrics, num;
</code></pre><script>window.example12 = "# Econ 101\nif this.studyingEconomics\n buy() while supply > demand\n sell() until supply > demand\n\n# Nursery Rhyme\nnum = 6\nlyrics = while num -= 1\n \"#{num} little monkeys, jumping on the bed.\n One fell out and bumped his head.\"\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example12);'>load</div><div class='minibutton ok' onclick='javascript: var lyrics, num;
if (this.studyingEconomics) {
while (supply > demand) {
@ -1114,7 +1076,7 @@ _fn = <span class="function"><span class="keyword">function</span><span class="p
filename = list[_i];
_fn(filename);
}
</code></pre><script>window.example14 = "for filename in list\n do (filename) ->\n fs.readFile filename, (err, contents) ->\n compile filename, contents.toString()"</script><div class='minibutton load' onclick='javascript: loadConsole(example14);'>load</div><br class='clear' /></div>
</code></pre><script>window.example13 = "for filename in list\n do (filename) ->\n fs.readFile filename, (err, contents) ->\n compile filename, contents.toString()"</script><div class='minibutton load' onclick='javascript: loadConsole(example13);'>load</div><br class='clear' /></div>
<p>
<span id="slices" class="bookmark"></span>
@ -1145,7 +1107,7 @@ middle = numbers.slice(<span class="number">3</span>, -<span class="number">2</s
end = numbers.slice(-<span class="number">2</span>);
copy = numbers.slice(<span class="number">0</span>);
</code></pre><script>window.example15 = "numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]\n\nstart = numbers[0..2]\n\nmiddle = numbers[3...-2]\n\nend = numbers[-2..]\n\ncopy = numbers[..]\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example15);'>load</div><div class='minibutton ok' onclick='javascript: var copy, end, middle, numbers, start;
</code></pre><script>window.example14 = "numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]\n\nstart = numbers[0..2]\n\nmiddle = numbers[3...-2]\n\nend = numbers[-2..]\n\ncopy = numbers[..]\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example14);'>load</div><div class='minibutton ok' onclick='javascript: var copy, end, middle, numbers, start;
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
@ -1172,7 +1134,7 @@ numbers[<span class="number">3.</span><span class="number">.6</span>] = [-<span
numbers = [<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>];
[].splice.apply(numbers, [<span class="number">3</span>, <span class="number">4</span>].concat(_ref = [-<span class="number">3</span>, -<span class="number">4</span>, -<span class="number">5</span>, -<span class="number">6</span>])), _ref;
</code></pre><script>window.example16 = "numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n\nnumbers[3..6] = [-3, -4, -5, -6]\n\n\n\n "</script><div class='minibutton load' onclick='javascript: loadConsole(example16);'>load</div><div class='minibutton ok' onclick='javascript: var numbers, _ref;
</code></pre><script>window.example15 = "numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n\nnumbers[3..6] = [-3, -4, -5, -6]\n\n\n\n "</script><div class='minibutton load' onclick='javascript: loadConsole(example15);'>load</div><div class='minibutton ok' onclick='javascript: var numbers, _ref;
numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@ -1216,7 +1178,7 @@ grade = <span class="function"><span class="keyword">function</span><span class=
};
eldest = <span class="number">24</span> &gt; <span class="number">21</span> ? <span class="string">"Liz"</span> : <span class="string">"Ike"</span>;
</code></pre><script>window.example17 = "grade = (student) ->\n if student.excellentWork\n \"A+\"\n else if student.okayStuff\n if student.triedHard then \"B\" else \"B-\"\n else\n \"C\"\n\neldest = if 24 > 21 then \"Liz\" else \"Ike\""</script><div class='minibutton load' onclick='javascript: loadConsole(example17);'>load</div><div class='minibutton ok' onclick='javascript: var eldest, grade;
</code></pre><script>window.example16 = "grade = (student) ->\n if student.excellentWork\n \"A+\"\n else if student.okayStuff\n if student.triedHard then \"B\" else \"B-\"\n else\n \"C\"\n\neldest = if 24 > 21 then \"Liz\" else \"Ike\""</script><div class='minibutton load' onclick='javascript: loadConsole(example16);'>load</div><div class='minibutton ok' onclick='javascript: var eldest, grade;
grade = function(student) {
if (student.excellentWork) {
@ -1249,7 +1211,7 @@ eldest = 24 > 21 ? "Liz" : "Ike";
</code></pre><pre><code><span class="keyword">var</span> one, six, three, two;
six = (one = <span class="number">1</span>) + (two = <span class="number">2</span>) + (three = <span class="number">3</span>);
</code></pre><script>window.example18 = "six = (one = 1) + (two = 2) + (three = 3)\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example18);'>load</div><div class='minibutton ok' onclick='javascript: var one, six, three, two;
</code></pre><script>window.example17 = "six = (one = 1) + (two = 2) + (three = 3)\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example17);'>load</div><div class='minibutton ok' onclick='javascript: var one, six, three, two;
six = (one = 1) + (two = 2) + (three = 3);
;alert(six);'>run: six</div><br class='clear' /></div>
@ -1271,7 +1233,7 @@ globals = ((<span class="function"><span class="keyword">function</span><span cl
}
<span class="keyword">return</span> _results;
})()).slice(<span class="number">0</span>, <span class="number">10</span>);
</code></pre><script>window.example19 = "# The first ten global properties.\n\nglobals = (name for name of window)[0...10]"</script><div class='minibutton load' onclick='javascript: loadConsole(example19);'>load</div><div class='minibutton ok' onclick='javascript: var globals, name;
</code></pre><script>window.example18 = "# The first ten global properties.\n\nglobals = (name for name of window)[0...10]"</script><div class='minibutton load' onclick='javascript: loadConsole(example18);'>load</div><div class='minibutton ok' onclick='javascript: var globals, name;
globals = ((function() {
var _results;
@ -1303,7 +1265,7 @@ alert((<span class="function"><span class="keyword">function</span><span class="
<span class="keyword">return</span> <span class="string">"And the error is ... "</span> + error;
}
})());
</code></pre><script>window.example20 = "alert(\n try\n nonexistent / undefined\n catch error\n \"And the error is ... #{error}\"\n)\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example20);'>load</div><div class='minibutton ok' onclick='javascript: var error;
</code></pre><script>window.example19 = "alert(\n try\n nonexistent / undefined\n catch error\n \"And the error is ... #{error}\"\n)\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example19);'>load</div><div class='minibutton ok' onclick='javascript: var error;
alert((function() {
try {
@ -1415,7 +1377,7 @@ winner = <span class="literal">yes</span> <span class="keyword">if</span> pick <
}
print(inspect(<span class="string">"My name is "</span> + <span class="keyword">this</span>.name));
</code></pre><script>window.example21 = "launch() if ignition is on\n\nvolume = 10 if band isnt SpinalTap\n\nletTheWildRumpusBegin() unless answer is no\n\nif car.speed < limit then accelerate()\n\nwinner = yes if pick in [47, 92, 13]\n\nprint inspect \"My name is #{@name}\"\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example21);'>load</div><br class='clear' /></div>
</code></pre><script>window.example20 = "launch() if ignition is on\n\nvolume = 10 if band isnt SpinalTap\n\nletTheWildRumpusBegin() unless answer is no\n\nif car.speed < limit then accelerate()\n\nwinner = yes if pick in [47, 92, 13]\n\nprint inspect \"My name is #{@name}\"\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example20);'>load</div><br class='clear' /></div>
<p>
<b class="header">The Existential Operator</b>
@ -1454,7 +1416,7 @@ speed = <span class="number">0</span>;
}
footprints = <span class="keyword">typeof</span> yeti !== <span class="string">"undefined"</span> &amp;&amp; yeti !== <span class="literal">null</span> ? yeti : <span class="string">"bear"</span>;
</code></pre><script>window.example22 = "solipsism = true if mind? and not world?\n\nspeed = 0\nspeed ?= 15\n\nfootprints = yeti ? \"bear\"\n\n\n\n\n\n\n "</script><div class='minibutton load' onclick='javascript: loadConsole(example22);'>load</div><div class='minibutton ok' onclick='javascript: var footprints, solipsism, speed;
</code></pre><script>window.example21 = "solipsism = true if mind? and not world?\n\nspeed = 0\nspeed ?= 15\n\nfootprints = yeti ? \"bear\"\n\n\n\n\n\n\n "</script><div class='minibutton load' onclick='javascript: loadConsole(example21);'>load</div><div class='minibutton ok' onclick='javascript: var footprints, solipsism, speed;
if ((typeof mind !== "undefined" && mind !== null) && (typeof world === "undefined" || world === null)) {
solipsism = true;
@ -1480,7 +1442,7 @@ footprints = typeof yeti !== "undefined" && yeti !== null ? yeti : "bear";
</code></pre><pre><code><span class="keyword">var</span> zip, _ref;
zip = <span class="keyword">typeof</span> lottery.drawWinner === <span class="string">"function"</span> ? (_ref = lottery.drawWinner().address) != <span class="literal">null</span> ? _ref.zipcode : <span class="keyword">void</span> <span class="number">0</span> : <span class="keyword">void</span> <span class="number">0</span>;
</code></pre><script>window.example23 = "zip = lottery.drawWinner?().address?.zipcode\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example23);'>load</div><br class='clear' /></div>
</code></pre><script>window.example22 = "zip = lottery.drawWinner?().address?.zipcode\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example22);'>load</div><br class='clear' /></div>
<p>
Soaking up nulls is similar to Ruby's
<a href="https://rubygems.org/gems/andand">andand gem</a>, and to the
@ -1594,7 +1556,7 @@ tom = <span class="keyword">new</span> Horse(<span class="string">"Tommy the Pal
sam.move();
tom.move();
</code></pre><script>window.example24 = "class Animal\n constructor: (@name) ->\n\n move: (meters) ->\n alert @name + \" moved #{meters}m.\"\n\nclass Snake extends Animal\n move: ->\n alert \"Slithering...\"\n super 5\n\nclass Horse extends Animal\n move: ->\n alert \"Galloping...\"\n super 45\n\nsam = new Snake \"Sammy the Python\"\ntom = new Horse \"Tommy the Palomino\"\n\nsam.move()\ntom.move()\n\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example24);'>load</div><div class='minibutton ok' onclick='javascript: var Animal, Horse, Snake, sam, tom,
</code></pre><script>window.example23 = "class Animal\n constructor: (@name) ->\n\n move: (meters) ->\n alert @name + \" moved #{meters}m.\"\n\nclass Snake extends Animal\n move: ->\n alert \"Slithering...\"\n super 5\n\nclass Horse extends Animal\n move: ->\n alert \"Galloping...\"\n super 45\n\nsam = new Snake \"Sammy the Python\"\ntom = new Horse \"Tommy the Palomino\"\n\nsam.move()\ntom.move()\n\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example23);'>load</div><div class='minibutton ok' onclick='javascript: var Animal, Horse, Snake, sam, tom,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
__hasProp = {}.hasOwnProperty;
@ -1665,7 +1627,7 @@ tom.move();
</code></pre><pre><code><span class="built_in">String</span>.prototype.dasherize = <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
<span class="keyword">return</span> <span class="keyword">this</span>.replace(<span class="regexp">/_/g</span>, <span class="string">"-"</span>);
};
</code></pre><script>window.example25 = "String::dasherize = ->\n this.replace /_/g, \"-\"\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example25);'>load</div><div class='minibutton ok' onclick='javascript: String.prototype.dasherize = function() {
</code></pre><script>window.example24 = "String::dasherize = ->\n this.replace /_/g, \"-\"\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example24);'>load</div><div class='minibutton ok' onclick='javascript: String.prototype.dasherize = function() {
return this.replace(/_/g, "-");
};
;alert("one_two".dasherize());'>run: "one_two".dasherize()</div><br class='clear' /></div>
@ -1703,7 +1665,7 @@ theBait = <span class="number">1000</span>;
theSwitch = <span class="number">0</span>;
_ref = [theSwitch, theBait], theBait = _ref[<span class="number">0</span>], theSwitch = _ref[<span class="number">1</span>];
</code></pre><script>window.example26 = "theBait = 1000\ntheSwitch = 0\n\n[theBait, theSwitch] = [theSwitch, theBait]\n\n\n\n\n "</script><div class='minibutton load' onclick='javascript: loadConsole(example26);'>load</div><div class='minibutton ok' onclick='javascript: var theBait, theSwitch, _ref;
</code></pre><script>window.example25 = "theBait = 1000\ntheSwitch = 0\n\n[theBait, theSwitch] = [theSwitch, theBait]\n\n\n\n\n "</script><div class='minibutton load' onclick='javascript: loadConsole(example25);'>load</div><div class='minibutton ok' onclick='javascript: var theBait, theSwitch, _ref;
theBait = 1000;
@ -1731,7 +1693,7 @@ weatherReport = <span class="function"><span class="keyword">function</span><spa
};
_ref = weatherReport(<span class="string">"Berkeley, CA"</span>), city = _ref[<span class="number">0</span>], temp = _ref[<span class="number">1</span>], forecast = _ref[<span class="number">2</span>];
</code></pre><script>window.example27 = "weatherReport = (location) ->\n # Make an Ajax request to fetch the weather...\n [location, 72, \"Mostly Sunny\"]\n\n[city, temp, forecast] = weatherReport \"Berkeley, CA\"\n\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example27);'>load</div><div class='minibutton ok' onclick='javascript: var city, forecast, temp, weatherReport, _ref;
</code></pre><script>window.example26 = "weatherReport = (location) ->\n # Make an Ajax request to fetch the weather...\n [location, 72, \"Mostly Sunny\"]\n\n[city, temp, forecast] = weatherReport \"Berkeley, CA\"\n\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example26);'>load</div><div class='minibutton ok' onclick='javascript: var city, forecast, temp, weatherReport, _ref;
weatherReport = function(location) {
return [location, 72, "Mostly Sunny"];
@ -1769,7 +1731,7 @@ futurists = {
};
_ref = futurists.poet, name = _ref.name, (_ref1 = _ref.address, street = _ref1[<span class="number">0</span>], city = _ref1[<span class="number">1</span>]);
</code></pre><script>window.example28 = "futurists =\n sculptor: \"Umberto Boccioni\"\n painter: \"Vladimir Burliuk\"\n poet:\n name: \"F.T. Marinetti\"\n address: [\n \"Via Roma 42R\"\n \"Bellagio, Italy 22021\"\n ]\n\n{poet: {name, address: [street, city]}} = futurists\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example28);'>load</div><div class='minibutton ok' onclick='javascript: var city, futurists, name, street, _ref, _ref1;
</code></pre><script>window.example27 = "futurists =\n sculptor: \"Umberto Boccioni\"\n painter: \"Vladimir Burliuk\"\n poet:\n name: \"F.T. Marinetti\"\n address: [\n \"Via Roma 42R\"\n \"Bellagio, Italy 22021\"\n ]\n\n{poet: {name, address: [street, city]}} = futurists\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example27);'>load</div><div class='minibutton ok' onclick='javascript: var city, futurists, name, street, _ref, _ref1;
futurists = {
sculptor: "Umberto Boccioni",
@ -1800,7 +1762,7 @@ _ref = futurists.poet, name = _ref.name, (_ref1 = _ref.address, street = _ref1[0
tag = <span class="string">"&lt;impossible&gt;"</span>;
_ref = tag.split(<span class="string">""</span>), open = _ref[<span class="number">0</span>], contents = <span class="number">3</span> &lt;= _ref.length ? __slice.call(_ref, <span class="number">1</span>, _i = _ref.length - <span class="number">1</span>) : (_i = <span class="number">1</span>, []), close = _ref[_i++];
</code></pre><script>window.example29 = "tag = \"<impossible>\"\n\n[open, contents..., close] = tag.split(\"\")\n\n\n\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example29);'>load</div><div class='minibutton ok' onclick='javascript: var close, contents, open, tag, _i, _ref,
</code></pre><script>window.example28 = "tag = \"<impossible>\"\n\n[open, contents..., close] = tag.split(\"\")\n\n\n\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example28);'>load</div><div class='minibutton ok' onclick='javascript: var close, contents, open, tag, _i, _ref,
__slice = [].slice;
tag = "<impossible>";
@ -1822,7 +1784,7 @@ _ref = tag.split(""), open = _ref[0], contents = 3 <= _ref.length ? __slice.call
text = <span class="string">"Every literary critic believes he will outwit history and have the last word"</span>;
_ref = text.split(<span class="string">" "</span>), first = _ref[<span class="number">0</span>], last = _ref[_ref.length - <span class="number">1</span>];
</code></pre><script>window.example30 = "text = \"Every literary critic believes he will\n outwit history and have the last word\"\n\n[first, ..., last] = text.split \" \"\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example30);'>load</div><div class='minibutton ok' onclick='javascript: var first, last, text, _ref;
</code></pre><script>window.example29 = "text = \"Every literary critic believes he will\n outwit history and have the last word\"\n\n[first, ..., last] = text.split \" \"\n\n\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example29);'>load</div><div class='minibutton ok' onclick='javascript: var first, last, text, _ref;
text = "Every literary critic believes he will outwit history and have the last word";
@ -1852,7 +1814,7 @@ Person = (<span class="function"><span class="keyword">function</span><span clas
tim = <span class="keyword">new</span> Person({
age: <span class="number">4</span>
});
</code></pre><script>window.example31 = "class Person\n constructor: (options) -> \n {@name, @age, @height} = options\n\ntim = new Person age: 4\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example31);'>load</div><div class='minibutton ok' onclick='javascript: var Person, tim;
</code></pre><script>window.example30 = "class Person\n constructor: (options) -> \n {@name, @age, @height} = options\n\ntim = new Person age: 4\n\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example30);'>load</div><div class='minibutton ok' onclick='javascript: var Person, tim;
Person = (function() {
function Person(options) {
@ -1870,7 +1832,7 @@ tim = new Person({
<p>
<span id="fat-arrow" class="bookmark"></span>
<b class="header">Function binding</b>
<b class="header">Bound Functions, Generator Functions</b>
In JavaScript, the <tt>this</tt> keyword is dynamically scoped to mean the
object that the current function is attached to. If you pass a function as
a callback or attach it to a different object, the original value of <tt>this</tt>
@ -1902,7 +1864,7 @@ Account = <span class="function"><span class="keyword">function</span><span clas
};
})(<span class="keyword">this</span>));
};
</code></pre><script>window.example32 = "Account = (customer, cart) ->\n @customer = customer\n @cart = cart\n\n $('.shopping_cart').bind 'click', (event) =>\n @customer.purchase @cart"</script><div class='minibutton load' onclick='javascript: loadConsole(example32);'>load</div><br class='clear' /></div>
</code></pre><script>window.example31 = "Account = (customer, cart) ->\n @customer = customer\n @cart = cart\n\n $('.shopping_cart').bind 'click', (event) =>\n @customer.purchase @cart"</script><div class='minibutton load' onclick='javascript: loadConsole(example31);'>load</div><br class='clear' /></div>
<p>
If we had used <tt>-&gt;</tt> in the callback above, <tt>@customer</tt> would
have referred to the undefined "customer" property of the DOM element,
@ -1913,6 +1875,44 @@ Account = <span class="function"><span class="keyword">function</span><span clas
be automatically bound to each instance of the class when the instance is
constructed.
</p>
<p>
CoffeeScript functions also support
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">ES6 generator functions</a>
through the <tt>yield</tt> keyword. There's no <tt>function*(){}</tt>
nonsense &mdash; a generator in CoffeeScript is simply a function that yields.
</p>
<div class='code'><pre><code><span class="function"><span class="title">perfectSquares</span> = -&gt;</span>
num = <span class="number">0</span>
<span class="keyword">loop</span>
num += <span class="number">1</span>
yield num * num
<span class="keyword">return</span>
<span class="built_in">window</span>.ps <span class="keyword">or</span>= perfectSquares()</code></pre><pre><code><span class="keyword">var</span> perfectSquares;
perfectSquares = <span class="function"><span class="keyword">function</span>*<span class="params">()</span> {</span>
<span class="keyword">var</span> num;
num = <span class="number">0</span>;
<span class="keyword">while</span> (<span class="literal">true</span>) {
num += <span class="number">1</span>;
(<span class="keyword">yield</span> num * num);
}
};
window.ps || (window.ps = perfectSquares());
</code></pre><script>window.example32 = "perfectSquares = ->\n num = 0\n loop\n num += 1\n yield num * num\n return\n\nwindow.ps or= perfectSquares()"</script><div class='minibutton load' onclick='javascript: loadConsole(example32);'>load</div><div class='minibutton ok' onclick='javascript: var perfectSquares;
perfectSquares = function*() {
var num;
num = 0;
while (true) {
num += 1;
(yield num * num);
}
};
window.ps || (window.ps = perfectSquares());
;alert(ps.next().value);'>run: ps.next().value</div><br class='clear' /></div>
<p>
<span id="embedded" class="bookmark"></span>