Menu
I'm now making the transition towards writing all my javascript code using Coffeescript, But I'm frustrated because the simplest of examples is causing me problems. As of now, I've done more than an hour of research without being able to find the answer to this...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script>
<link href="sheet.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/coffeescript">
$ ->
sayHi()
sayHi = ->
alert 'Hi there!'
</script>
</head>
<body>
<div id="all">
</div>
</body>
</html>
As it is clear from the code above, I'm just trying to make the call to the sayHi() function work from inside the jQuery's ready handler. But the error I'm getting is the following:
Uncaught TypeError: undefined is not a function
Please help me, According to the compiler and tutorials I've read this 'should' work, But I don't know what I'm doing Horribly wrong for this to not run :(
519
You can simply invoke a function by placing parenthesis after its name as shown in the following example. // Generated by CoffeeScript 1.10. 0 (function() { var add; add = function() { var a, b, c; a = 20; b = 30; c = a + b; return console. log("Sum of the two numbers is: " + c); }; add(); }).
With the rise of ES6/7 and TypeScript, it seemed like CoffeeScript would become obsolete. But it's not. CoffeeScript was one of the pioneers of the compile-to-JavaScript concept. In fact, some of things you now see in the modern JavaScript appeared in the first version of CoffeeScript some 8 years ago.
CoffeeScript is something that makes even good JavaScript code better. CoffeeScript compiled code can do everything that natively written JavaScript code can, only the code produced by using CoffeeScript is way shorter, and much easier to read.
text/coffeescript tags have a key difference from text/javascript tags. They dont "run" until the document loads. This is because the coffee script library has to find all the coffee script tags and compile them, and it has to wait until the DOM ready so it can be sure to find them all.
The other issue is that jQuery will fire the DOM ready callback immediately if the event already happened. And in this case it has.
So when this is compiled to JS you get this:
var sayHi;
$(function() {
return sayHi();
});
sayHi = function() {
return alert('Hi there!');
};
So what happens is:
sayHi variable with no value, making it undefined.sayHi() which is still undefined.sayHi is then set to the function you wanted to run.Now if this was a normal JS tag, it could have run before the document loaded, and then it would have worked fine because by time the callback actually ran, then sayHi would have been assigned properly.
To fix it you should assign the function BEFORE you run pass in the callback. Or you can skip doing the $(->) entirely since you know DOM ready fired already. But really, this is one major reason you really shouldn't use coffeescript tags. It's really not the same as using a JS tag. And one of many reason this is not the recommended approach for using CoffeeScript on a real website.
So compile your coffee script before your browser sees it like a responsible developer :)
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
