This class exceeded my expectations. The instructor was excellent. He was knowledgeable and a great ... More Testimonials »

Advanced JavaScript With Prototype and Script.aculo.us

Delivery Options

Class Date and Time Price Pricing Information 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

In this Advanced JavaScript course, students learn to write production-grade JavaScript using object-oriented programming techniques, good standard coding conventions. Student will learn to catch errors, debug and test, and properly document code with JSDoc.

This class also covers Prototype and script.aculo.us.

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:

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.

Client Success
  1. Independent Survey
  2. Client List
  3. Testimonials
Join The Team
  1. Learn how you can become a Webucator Trainer
  2. Career Opportunities
Training Classes
Locations
Live eLearning

Like a class you would go to, but you don't have to go anywhere. More...

Customized Onsite Training

The trainer comes to you and delivers a class customized for your team. More...

Self-Paced eLearning

Our least expensive option. You proceed through the course entirely at your own pace. More...

Reference Library
Partner Programs
© Webucator, Inc. All rights reserved. | Toll Free: 877-932-8228 | UK: 0808-101-3484 | From outside the USA: 315-849-2724| Fax: 315-849-2723