Introduction to JavaScript Training Overview

In this JavaScript training course, students learn to use JavaScript effectively to make their web pages more dynamic and functional and to reduce the number of roundtrips to the server.

Introduction to JavaScript Training Course Goals

• Learn how JavaScript is used
• Learn JavaScript syntax
• Learn about objects, methods and properties
• Learn to work with JavaScript variables
• Learn to create your own functions in JavaScript
• Learn to write flow control logic in JavaScript
• Learn to validate forms with JavaScript

Introduction to JavaScript Training Course Prerequisites

Experience in the following areas is required:

• HTML

Experience in the following areas would be beneficial.

• CSS
• Programming Experience

Introduction to JavaScript Training Course Outline

1. JavaScript Basics
   1. The Name "JavaScript"
   2. The HTML DOM
   3. JavaScript Syntax
      1. Basic Rules
      2. Dot Notation
      3. Square Bracket Notation
   4. Where Is JavaScript Code Written?
   5. JavaScript Objects, Methods and Properties
      1. Methods
      2. Properties
      3. The Implicit window Object
      4. The getElementById() Method
   6. Event Handlers
2. Variables, Arrays and Operators
   1. JavaScript Variables
      1. A Loosely-typed Language
      2. Storing User-Entered Data
   2. Arrays
      1. Associative Arrays
      2. Array Properties and Methods
   3. JavaScript Operators
   4. Conclusion
3. JavaScript Functions
   1. Built-in Functions
      1. Number(object)
      2. String(object)
      3. isNaN(object)
      4. parseFloat() and parseInt()
   2. Built-in Functions vs. Methods
   3. User-defined Functions
      1. Function Syntax
      2. Passing Values to Functions
      3. A Note on Variable Scope
      4. Returning Values from Functions
   4. Conclusion
4. Built-In JavaScript Objects
   1. String
   2. Math
   3. Date
   4. typeof Operator
   5. Conclusion
5. Conditionals and Loops
   1. Conditionals
      1. if - else if - else Conditions
      2. Switch / Case
   2. Loops
      1. while Loop Syntax
      2. do...while Loop Syntax
      3. for Loop Syntax
      4. for...in Loop Syntax
   3. Conclusion
6. JavaScript Form Validation
   1. Accessing Form Data
   2. Basics of Form Validation
      1. The this Object
      2. Cleaner Validation
   3. Validating Radio Buttons
   4. Validating Checkboxes
   5. Validating Select Menus
   6. Focus, Blur, and Change Events
      1. Focus and Blur
      2. Change
   7. Validating Textareas
   8. Conclusion
7. Working with Images
   1. Image Rollovers
      1. Backward Compatibility
      2. An Image Rollover Function
   2. Preloading Images
   3. Conclusion

Advanced JavaScript with Prototype and Script.aculo.us 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.

Advanced JavaScript with Prototype and Script.aculo.us Course 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.

Advanced JavaScript with Prototype and Script.aculo.us Course Prerequisites

Experience in the following areas is required:

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

Advanced JavaScript with Prototype and Script.aculo.us Course 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)