Book Image

CoffeeScript Application Development

By : Ian Greenleaf Young
Book Image

CoffeeScript Application Development

By: Ian Greenleaf Young

Overview of this book

JavaScript is becoming one of the key languages in web development. It is now more important than ever across a growing list of platforms. CoffeeScript puts the fun back into JavaScript programming with elegant syntax and powerful features. CoffeeScript Application Development will give you an in-depth look at the CoffeeScript language, all while building a working web application. Along the way, you'll see all the great features CoffeeScript has to offer, and learn how to use them to deal with real problems like sprawling codebases, incomplete data, and asynchronous web requests. Through the course of this book you will learn the CoffeeScript syntax and see it demonstrated with simple examples. As you go, you'll put your new skills into practice by building a web application, piece by piece. You'll start with standard language features such as loops, functions, and string manipulation. Then, we'll delve into advanced features like classes and inheritance. Learn advanced idioms to deal with common occurrences like external web requests, and hone your technique for development tasks like debugging and refactoring. CoffeeScript Application Development will teach you not only how to write CoffeeScript, but also how to build solid applications that run smoothly and are a pleasure to maintain.
Table of Contents (19 chapters)
CoffeeScript Application Development
Credits
About the Author
Acknowledgements
About the Reviewers
www.PacktPub.com
Preface
Index

Building our application


In Chapter 1, Running a CoffeeScript Program, we tested our CoffeeScript compiler by creating a bare-bones web page for a small pet shop. It's time to revisit that code, but we're more ambitious now. The first thing we need to do is use the page to display a list of available pets. Here's our index.html:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <title>The Pet Shop</title>
    <link href="style.css" media="screen" rel="style sheet" type="text/css" />
  </head>
  <body>
    <h1>Welcome to <span id="owner_name"></span>'s Pet Shop</h1>

    <p>We have some lovely pets available for the
    right owner to take home today. Please have a
    look at our selection.</p>

    <ul id="available_pets">
    </ul>

    <script src="setup.js"></script>
  </body>
</html>

It's much the same as our original version, but we've linked the code...