JavaScript

Happy Holidays from CoffeeScript

Jeff Friesen
Share

The holidays are upon us. To help you get into the mood, I’ve created an HTML5/CoffeeScript application that presents a festive and animated scene (with background music). Although this application is frivolous, it demonstrates HTML5 and CoffeeScript concepts that you might find useful in other projects.

This article first introduces you to the application, presenting its components and showing you how to compile its pair of CoffeeScript source files into their equivalent JavaScript source files. Moving on, the article shows you how to embed this application in a web page. The linked zip file contains the source code and a companion PDF file which walks you through each CoffeeScript file’s code.

NOTE: This article has been tested with the Chrome 23.0.1271.95 m, Firefox 17.0.1, Internet Explorer 9.0.8112.16421, Opera 12.02, and Safari 5.1.5 desktop browsers.

Introducing HHFCS

Happy Holidays from CoffeeScript (HHFCS) is an HTML5/CoffeeScript application that uses the HTML5 Canvas API to present a winter forest scene at night. Snowflakes are falling and a pair of wreaths are blinking their lights in the foreground. Also, a centered message fades into view while Jingle Bells music plays, thanks to the HTML5 Audio API. A screenshot of the scenery is shown in Figure 1.

HHFCS consists of several files that are organized into an HHFCS directory and its audio and images subdirectories. The following list presents these files:

  • HHFCS/audio/jb.mp3 stores the Jingle Bells music in MP3 format. This file is used by all browsers except for Firefox and Opera, which support the Ogg format.
  • HHFCS/audio/jb.ogg stores the Jingle Bells music in Ogg format. This file is used by Firefox and Opera.
  • HHFCS/HHFCS.coffee stores the CoffeeScript code for the application’s main class.
  • HHFCS/HHFCS.html stores the startup HTML code and three lines of JavaScript for running HHFCS.
  • HHFCS/HHFCS.js stores the JavaScript equivalent of HHFCS.coffee.
  • HHFCS/images/message.png stores the message that fades into view.
  • HHFCS/images/scene.png stores the winter forest scene, which is a modified version of a public domain image located here.
  • HHFCS/images/wreath0.png stores the first frame of a three-frame wreath animation. All three frames are courtesy of Free Christmas Gifts.
  • HHFCS/images/wreath1.png stores the second frame of a three-frame wreath animation.
  • HHFCS/images/wreath2.png stores the third frame of a three-frame wreath animation.
  • HHFCS/Snowflake.coffee stores the CoffeeScript code for the application’s Snowflake class.
  • HHFCS/Snowflake.js stores the JavaScript equivalent of Snowflake.coffee.
  • HHFCS/stripes.png stores a candy cane pattern for use as the web page’s background image.
  • HHFCS/title.png stores the web page’s title in an ice pattern. This image was created via the online Logo Design and Name generator under the academic license.

Because browsers don’t recognize CoffeeScript, the two CoffeeScript source files must be translated into equivalent JavaScript. The instructions at coffeescript.org tell you how to download and install the CoffeeScript compiler. The following command lines use this compiler to translate these files:

coffee --compile --bare HHFCS
coffee --compile --bare Snowflake

You must specify coffee‘s --compile and --bare options when compiling these source files. The --compile option compiles a CoffeeScript source file into a same-named JavaScript source file, and the --bare option omits the top-level function safety wrapper.

Embedding HHFCS in a Web Page

HHFCS must be embedded in a web page so that it can be run. I’ve created a small HHFCS.html HTML file that accomplishes this task. Listing 1 presents this file’s contents.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

<html>
   <head>
      <title>
         Happy Holidays from CoffeeScript
      </title>

      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

      <script src="HHFCS.js">
      </script>

      <script src="Snowflake.js">
      </script>
   </head>

   <body style="text-align: center; background-image: url('stripes.png');
                background-repeat: repeat">
      <img src="title.png">

      <script>
         var DELAY = 40;
         HHFCS.init(DELAY);
         setInterval("HHFCS.draw()", DELAY);
      </script>
   </body>
</html>

Listing 1: Embedding HHFCS in a web page via the HHFCS.html file

Listing 1 first presents a declaration that tells the browser which version of HTML the page targets. This declaration is present to prevent Internet Explorer from generating an “Object doesn’t support property or method ‘getContext'” error message when attempting to obtain the canvas context.

A bit later, Listing 1 presents the tag. This tag identifies the page’s content type as ISO-8859-1 to prevent Firefox from complaining about an undeclared character encoding.

Continuing, Listing 1 presents elements for loading HHFCS.js and Snowflake.js, and then paints a striped background via the CSS background-image and background-repeat properties. Finally, Listing 1 presents a short JavaScript script that creates a DELAY variable (describing a delay in milliseconds), invokes the HHFCS object’s init() function property with this delay, and repeatedly executes this object’s draw() function property every DELAY milliseconds via the setInterval("HHFCS.draw()", DELAY) call.

Conclusion

I found it much easier (and faster) to write HHFCS in CoffeeScript than in JavaScript. Because HHFCS is my first CoffeeScript application, I probably haven’t used CoffeeScript to its full extent, and so I leave it to you to make the code more CoffeeScriptish. Be sure to check out the companion PDF file in this article’s associated code file, to learn how the application works. Happy holidays from CoffeeScript, JSPro, and me!