Objective

To take a deep dive into JavaScript. Asynchronous JavaScript and XML (AJAX) and JavaScript Object Notation (JSON) will quickly become valuable tools in your web development toolkit.

Goals

This class is targeted at developers who are more comfortable writing back-end services than browser-based front-ends. You will learn about JavaScript -- both its strengths and its weaknesses. From there, you'll see how JavaScript mixes with Cascading Style Sheets (CSS), the Document Object Model (DOM), and the XmlHttpRequest (XHR) object to give you the suite of technologies known informally as AJAX. We'll also see how JSON is quickly replacing XML and SOAP for web services tailored for browser consumption.

Course Outline

Introduction to JavaScript

It's ironic that many developers are expected to "just know" JavaScript without any formal training. No other programming language has this expectation, and leads to frustration. JavaScript is not Java, nor is it C, or VisualBasic, or anything else. JavaScript is JavaScript. It's not perfect, but it's the only game in town when it comes to browser-based development. In this section we'll learn to appreciate it for what it is -- warts and all.

Deconstructing AJAX

In this section, you'll learn how JavaScript, CSS, and HTML form the three legs of the AJAX platform. By understanding simple examples of common AJAX constructs like tabbed views and remote updates, you'll see all of the moving parts with great clarity.

Prototype, Script.aculo.us, and Grails

Now that you understand the basics, it's time for some applied learning. We'll start by creating a simple Grails application. From there, we'll explore built-in features like the g:formRemote and g:remoteLink tags that leverage Prototype and script.aculo.us under the covers.

Deconstructing Slippy Maps

When Google Maps was released, it didn't just change the way we look at web mapping -- it kicked off the AJAX revolution. In this section, we'll show you how easy it is to add a map to your webpage using the Google Maps API. But more importantly, you'll see how in just 150 lines of code you can create your own Google Maps-like slippy map.

Understanding JSON

JavaScript Object Notation is becoming a familiar delivery platform for Web 2.0 content. JSON gives you all of the flexibility of a RESTful web service without the hassle of trying to deal with deeply nested, complex XML in a language that is conspicuously lacking in native XML support. In this section, we look at popular websites (like Yahoo!) that offer JSON output. We look at client-side JavaScript code that effortlessly consumes JSON in the browser. We even look at ways to easily generate JSON from Java Servlets (using JSON.org libraries) and the native support for JSON that Grails offers out of the box.