Advanced JavaScript With Prototype and Script.aculo.us

Delivery Options

• Live eLearning (3 days): $1,275.00 (Register)

» Register Now

» Free Demo

» Watch Presentation

» Contact Education Consultant

• Customized Onsite Training (3 days): Request a Proposal

Class Date and Time	Price Volume Discounts Students Discounts 2 5% 3-4 10% 5 or more 15% GSA Price: $1,211.25	Register
Apr 5 - 7, 2010 10:00 AM - 5:00 PM ET	$1,275.00 or 3 vouchers	Register
Jun 1 - 3, 2010 10:00 AM - 5:00 PM ET	$1,275.00 or 3 vouchers	Register

Class Description

Class Overview

Class Goals

• Review JavaScript functions and the DOM.
• Introduce / Review XmlHttpRequest and JSON.
• Learn to use advanced techniques, such as anonymous functions and call() and apply().
• Learn to use JavaScripts object-oriented features.
• Learn to write production-grade JavaScript for high performance.
• Learn to use industry-recognized coding standards.
• Learn JavaScript debugging techniques.
• Learn to work with JSUnit for unit testing.
• Learn to document code with JSDoc.
• Learn to take advantage of Prototype to speed up development.
• Learn to use script.aculo.us to create dynamic affects.

Class Outline

1. Quick JavaScript Recap
   1. Intrinsic data types (String, Date, Array, etc)
   2. Functions
   3. DOM is not JavaScript
   4. XmlHttpRequest is also not JavaScript
   5. JSON
2. Advanced JS techniques
   1. functions with flexible number of arguments
   2. Using the || as a coalescing operator
   3. Passing functions as arguments to other functions
   4. Anonymous functions
   5. Merging objects
   6. Using the [ ] operator to access object properties or methods.
   7. eval( )
   8. call() vs apply()
3. OO Aspects of JavaScript
   1. Leveraging JavaScript's OO Features
      1. You have objects in your server code, you should have objects in the client scripts too
      2. Client script objects are meant to deal with client-related problems
   2. Creating simple objects
      1. Properties
      2. Methods
   3. The perils of "this"
   4. Extending Objects
      1. That's what a Dynamic language is
      2. Prototype-based programming
      3. Creating prototypes (classes)
         1. Properties
         2. Methods
      4. Extending classes
      5. A word on Dynamic languages
         1. Duck Typing
         2. Runtime errors
         3. Scary? No, flexible and productive
4. Production-grade JavaScript
   1. Where to put JS
      1. Inline (in tag attributes like onclick)
      2. In <script> blocks
      3. In external files
      4. Performance implications of each alternative
      5. minifying vs. obfuscation
      6. gzipping
      7. combining files
   2. Coding standards (Yahoo!/Crockford)
      1. JSLint
   3. Unicode issues
   4. Error handling
   5. Debugging JS
      1. tools
      2. Firebug in Firefox
   6. Unit Testing
      1. Dynamic languages go hand-in-hand with UT.
      2. What are unit tests?
      3. JSUnit
   7. Code documentation
      1. JSDoc
5. Prototype.js
   1. what is, who wrote, who uses, who maintains
   2. Extensions to JS classes (String, Array, Object, etc)
   3. String extensions in detail
      1. escapeHTML, evalScripts, gsub, toQueryParams, etc
      2. Templates
   4. Enumerables
      1. loops
      2. iterators
      3. list operations
   5. Base class inheritance
   6. Utility functions
   7. DOM
      1. element extensions
      2. form extensions
      3. chaining methods
      4. Insertions
      5. Events (observing, getting info about the event)
   8. Ajax
      1. Request
      2. Updater
      3. PeriodicalUpdater
   9. Extending Prototype
      1. Adding your own Element methods
      2. Inheriting from Ajax.Request
   10. Where to get more info (lists, trac, docs)
6. script.aculo.us
   1. what is, who wrote, who uses, who maintains
   2. Effects
      1. Core effects
         1. Opacity
         2. Move
         3. Scale
         4. Highlight
         5. ScrollTo
      2. Combined effects
         1. Fade/Appear
         2. BliddUp/BlindDown
         3. Shake
         4. SlideUp/SlideDown
         5. etc
      3. Creating your own effect
         1. Inheriting from Effects.Base
         2. Combining other effects
      4. Element extensions
   3. Controls
      1. Autocompleter
      2. InPlaceEditor
      3. Draggables
      4. Sortables
   4. Where to get more info (lists, trac, docs)

Class Materials

All students receive a course manual or book and all the class examples.

Students in private onsite classes will also receive:

• Technical Reference Library

Class Prerequisites

Experience in the following areas is required:

• HTML
• CSS
• Plenty of real-world experience with JavaScript

Technical Requirements

Our computer technical requirements and setup process is easy, with support just a click away.

• Course technical requirements and setup instructions.