jQuery meets CoffeeScript

Disclaimer: This article is pretty old.

I'm just amazed how brilliant jQuery and CoffeeScript are working together. JQuery promises "write less, do more", but with the clean syntax of CoffeeScript you can be even more concise!

Here is a quick example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>jQuery meets CoffeeScript</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
  
    <script type="text/coffeescript">

      show_message = (msg) -> 
        $('#message').hide().text(msg).fadeIn(2222, 
          -> $('#message').append('!') 
        )
              
      $ -> show_message "world"
      $('#message').click -> show_message "you"
      
    </script>

</head>
<body>
  <h1>hello <span id="message"></span></h1>
</body>
</html>

Here you see it running. Just click "world" to fire the click event.

hello

Just have a look to the JavaScript version:

var show_message = function(msg) {
  return $('#message').hide().text(msg).fadeIn(2222, function() {
    $('#message').append('!');
  });
};
$(function() {
  show_message("world");
});
$('#message').click(function() {
  show_message("you");
});

Happy coding!