My Webucator class was well done, informative and professional. Top notch material and Instructor. ... More Testimonials »

Advanced JavaScript With Prototype and Script.aculo.us

Delivery Options

Class Date and Time Price Pricing Information
Sep 20 - 22, 2010 10:00 AM - 5:00 PM ET $1,275.00 or 3 vouchers
Oct 11 - 13, 2010 10:00 AM - 5:00 PM ET $1,275.00 or 3 vouchers
Nov 8 - 10, 2010 10:00 AM - 5:00 PM ET $1,275.00 or 3 vouchers

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. Students 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
Locations

Recent Blog Articles

Using a Regular Expression to create a simple HTML list

Posted on Aug 09, 2010 by Nat Dunn

I often find myself creating HTML lists from a list of items in a text format. In TextPad (or any other tool that supports regular expressions) ...


Using JavaScript to Blur a TextBox

Posted on Aug 04, 2010 by Connie

How can you keep a user from changing the contents of a textbox? It is easy to do using HTML Event Handlers. Try the code below. It works ...


HTML Event Handlers and JavaScript Event Listeners

Posted on Aug 03, 2010 by Connie

HTML Event Handlers provide a gateway from HTML to JavaScript. Event Handlers are HTML attributes that force an element to “listen” ...


Creating a Rollover Effect with CSS

Posted on Jul 27, 2010 by Sean

I recently discovered there’s yet another way to create rollover images in Dreamweaver. This method actually doesn’t even ...


variables, parameters, arguments and values

Posted on Jun 15, 2010 by Nat Dunn

Programmers often use the following terms incorrectly, which can cause confusion: variable parameter argument value Variable A variable ...

Learn the benefits of online training with Webucator

Watch a 3-minute video about Webucator's instructor-led online training.

Learn about Webucator's online training from the CEO

In depth video from our CEO on Webucator's instructor-led online training.

© 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