Now that we know how to compile a CoffeeScript file, let's use it in a web page! We'll create a simple web page that uses CoffeeScript to read a configuration object and insert text into the page. This page will be used by the owner of a small pet shop. We'll insert the owner's name dynamically, so it can be easily changed if needed. First let's create a simple index.html:
<!DOCTYPE html>
<html>
<head>
<title>The Pet Shop</title>
</head>
<body>
<h1>Welcome to <span id="owner_name"></span>'s Pet Shop</h1>
<script src="setup.js"></script>
</body>
</html>You'll notice that we have a script tag pointing to our JavaScript file, just like normal. The web application doesn't need to know anything about our CoffeeScript files. It will run the compiled JavaScript output, happily ignorant of the original source.
Note
It is possible to make your browser aware of CoffeeScript, and make it run CoffeeScript code directly. However, this is an advanced technique and not really necessary to get you started, so throughout the book we will always compile to JavaScript and run that. If you'd like to learn more about this technique, see Chapter 10, Using CoffeeScript in more places.
Let's get rid of that annoying alert in setup.coffee, and update it with a configuration object and some code to insert the owner's name into the page heading. You probably know how you would write this in JavaScript. It's similar in CoffeeScript, so see if you can follow along:
shop = {
owner: { name: "Ian" }
}
nameElement = document.getElementById("owner_name")
nameElement.innerHTML = shop.owner.nameNow we'll run the compiler again so that it updates the JavaScript. This time, we'll pass it the whole directory as an argument instead of our single file. This will compile any CoffeeScript files it finds in the directory, which will come in handy later, when we have more than one CoffeeScript file.
coffee -c .
Our setup.js has been updated, so load index.html in a web page, and it should say Welcome to Ian's Pet Shop.
Let's make one small addition to our web application. We should update the title of the window with the owner's name as well. Before we edit our CoffeeScript file, it's time to learn a very helpful feature of the coffee command-line tool. Passing it the -w option when compiling will tell the tool to watch the source files or directory, and recompile them any time the files change. This saves you the trouble of going back to the command line and performing the compilation again every time you save a file. Start the compiler:
coffee -w -c .
Tip
For a full reference of options available from the command line tool, visit http://coffeescript.org/#usage or run coffee --help.
Now edit setup.coffee to add a line at the end:
shop = {
owner: { name: "Ian" }
}
nameElement = document.getElementById("owner_name")
nameElement.innerHTML = shop.owner.name
document.title = shop.owner.name + "'s Pet Shop"
When you save the file, setup.js will be updated automatically. Reload the page, and you should now see the new name in the title bar. Cool, huh?
Tip
If you'd like to take this a step further, you could try out a tool like LiveReload. It watches your code and not only recompiles when it sees a change, but also reloads the page in your browser! Learn more at http://livereload.com/.