JavaScript and Ajax

Jason Rudolph presents a Refactotum session on contributing to open source at the innaugural 2GX Groovy/Grails Experience in early 2008.

Jason Rudolph presents a Refactotum session on contributing to open source at the innaugural 2GX Groovy/Grails Experience in early 2008.

Photo courtesy JS Bournival. Used with Permission.

Contact us to schedule training for your team:

100 Europa Drive Suite 495 Chapel Hill, NC 27517
phone 919.442.3030 fax 919.968.7210
info@thinkrelevance.com

Ajax has done two major things for web development:

  • enabled rich user experiences without proprietary or platform-specific code
  • revitalized JavaScript as a serious development language

Ajax is not about flashing lights and sliding images. Ajax gives you the opportunity give users the right information at the right time. We will show you how to build applications that are more usable. You will learn the details of the techniques that make Ajax possible, including:

  • creating asynchronous requests
  • responding to asynchronous responses
  • dynamically updating user interfaces using modern JavaScript and CSS techniques.

You will also learn to use the expanded dialect of JavaScript provided by Prototype and Scriptaculous.

Course length:

2 days
Class size:

Up to 18
Supplied Materials:
Prerequisites:
  • Experience in a modern programming language (not necessarily Ruby)
  • Familiarity with HTML and the Web
Setup:

Students:

  • Computer with Ruby and Rails installed
  • Editor or IDE of student’s choice
  • Internet access

Instructor:

  • Computer with Ruby and Rails installed
  • Projector

Module Outline

1. Exploring JavaScript

  • hello, world
  • a few key types
  • Firebug
  • the JavaScript Shell
  • reflection
  • ajax
  • unit testing

2. JavaScript: The Language

  • getting script onto a web page
  • language basics
  • types and scopes
  • object model
  • functions and closures
  • patterns for code reuse

3. The Browser Object Model

  • the window object
  • the document object
  • the location object
  • the navigator object
  • the screen object
  • browser detection
  • abstract a common object model

4. Ajax

  • the browser xhr object
  • asynchronous requests
  • returning HTML
  • returning JSON
  • returning JavaScript
  • error handling

5. Prototype

  • Class.create and Object.extend
  • Enumerable
  • the $ methods
  • event model
  • Ajax.Request and Ajax.Updater
  • page update helpers
  • form helpers

6. Scriptaculous

  • visual effects
  • the mighty Morph
  • drag, drop, and sort
  • autocomplete
  • slider
  • custom effects
  • miscellany

7. Rich Web Challenges

  • usability
  • degradable ajax
  • client side storage
  • combining multiple libraries
  • comet
  • drawing APIs
  • REST