"Charting the Course ... ... to Your Success!" Working with JavaScript and JQuery Course Summary Description Working with JavaScript + jQuery provides an introduction to and experience working with the JavaScript programming language in the environment it's used in the most: the browser. JavaScript is simple and elegant, but is often difficult to work with because it's so different from the programming languages most developers are used to working with. This course also covers jQuery and provides practical and hands-on experience with the preferred JavaScript library for building rich web applications. If you are building for the web, learning jQuery will change the way you write JavaScript, working across multiple browsers and platforms. Objectives At the end of this course, students will be able to:           

Become both familiar with the language and confident enough to work with it in any context Learn enough of the DOM API to bend it to your will Make communication between the browser and your server possible Understand and effectively leverage closures Understand how JavaScript's object model differs from the model classical object-oriented programming languages Learn what jQuery is and how to add it to your applications Use jQuery to select complex sets of elements from the DOM Develop rich web pages that respond to user interaction Interact with your server-side code using Ajax Explore a wide variety of plugins and learn how to write your own Test your applications to make sure your JavaScript is as solid as the rest of your code

Topics         

JavaScript Basics JavaScript Functions JavaScript Objects JavaScript Classes JavaScript Event Handling Advanced JavaScript Download Options Debugging, Optimization & Profiling Memory Management

       

Introduction to jQuery Selecting Elements Manipulating the DOM Event Handling Ajax jQuery Plugins jQuery UI Templates

Audience This is an introductory+ level web development course, designed for experienced developers who need to extend their knowledge of web design and development. Prerequisites Attendees should have previous experience or working knowledge of developing software applications. Basic HTML and CSS development skills are required. This is a programming class. Familiarity with an object-oriented language is helpful, and real world programming experience is a must. Duration Five days Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically PT9213_WORKINGWITHJAVASCRIPTANDJQUERY.DOC

"Charting the Course ... ... to Your Success!" Working with JavaScript and JQuery Course Outline Session: JavaScript I.

JavaScript Basics A. JavaScript Defined B. Embedding Scripts in HTML C. Identifiers and literals D. Non-Standard Operators E. Loop Structures F. Iteration G. Conditional Structures H. Logical I. Return J. Throw K. With L. The with Statement

II.

JavaScript Functions A. Defining JavaScript Functions B. Function C. Functions in JavaScript D. Invoking Functions E. Functions as Data F. Functions as Methods G. Function Constructor H. Function Scope and Closures

IV. JavaScript Classes A. JavaScript Classes are NOT B. Classes as Functions or Functions as Classes C. Function Constructors D. Creating New Objects in JavaScript E. JavaScript Classes F. Creating Multiple Objects G. Prototypes H. Prototype Property I. Extending Classes With Prototype J. Extending Classes K. Prototyping L. Extending Built-in Objects M. Reusable, Flexible Classes V.

III. JavaScript Objects A. JavaScript Object B. JavaScript Literals C. Associative array D. Object Universal Properties E. JavaScript Arrays F. Arrays G. Array Methods H. Working with Arrays I. Strings J. String Objects K. JavaScript and Regular Expressions L. Regex Content M. Character Sets and Alternation N. Additional Constructs O. Repetition P. Example: Q. Using Regular Expressions in JavaScript R. Creating Regular Expressions S. Using Regular Expressions – String Match T. Using Regular Expressions – String Replace U. Using Regular Expressions – String Split V. Using Regular Expressions – String Search W. Working with the RegEx Object

JavaScript Event Handling A. JavaScript Event Handling B. Event Models C. Basic Event Handling D. HTML Events E. Handling HTML Events F. Event Handling With Dom Level 2 G. DOM 2 Event Propagation: Three Phases H. Event Handler Registration I. InnerHTML

VI. Advanced JavaScript A. JavaScript Security Limits Capability B. Same Origin Policy C. Timers Within Browser Windows D. Scheduling in JavaScript E. setTimeout() in Action F. setInterval() in Action G. Uses for JavaScript Timers H. Window and Screen Information I. Opening And Manipulating Windows J. Retrieving X,Y Location of Mouse Click K. JavaScript Execution: Global Object L. JavaScript Execution: Call Object M. JavaScript Execution Context N. Scope Chain O. Window Object – Global Context P. Executing Scripts Q. The onload Event Handler R. Window Object As Execution Context S. Threading (Actually Non-Threading) T. Manipulating Document During Loading

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically PT9213_WORKINGWITHJAVASCRIPTANDJQUERY.DOC

"Charting the Course ... ... to Your Success!" Working with JavaScript and JQuery Course Outline (cont’d) Session: Web Application Performance VII. Download Options A. Ajax and Traditional Web Apps B. Bandwidth C. User Experience on Page Load D. Multi-Stage Downloading E. Deciding How to Divide the Data F. Real-World Example – Kayak.com G. Predictive Fetching H. Predictive Fetching in Simple Interfaces I. Predictive Fetching Pitfalls J. Pre-Fetching Variant: Server Notification K. On-Demand Downloading L. init.js M. JavaScript and CSS Minification VIII. Debugging, Optimization & Profiling A. Internet Explorer Developer Tools B. FireBug & FireBug Lite C. Fiddler D. Code Optimization E. Adding Elements to a Page F. JavaScript Verbosity Tradeoffs G. Minimizing Dot-Notation H. CSS and Reflow Minimization I. Minimizing Reflow Times J. The Venkman Profiler K. Venkman Profiling Results L. Profiling Kayak M. A Snippet from the Results N. Using the Results IX. Memory Management A. Ajax Memory Considerations B. JavaScript Memory C. Tools for Measuring Memory Footprint D. Removal of DOM Nodes E. Cyclic References F. Reusing DOM Nodes G. Interactions Between Techniques

H. I. J. K. L. M. N. O. P.

Example: Selecting Elements by Tag Name Example: Selecting Elements by ID Example: Selecting Elements by Class The jQuery Object Some jQuery “Instance” Methods Example: Appending Elements Example: Handling Events Example: Hiding Elements Some jQuery “Static” Methods

XI. Selecting Elements A. Selectors B. Basic Selectors C. Hierarchical Selectors (Combinators) D. Descendant vs. Child Combinators E. Adjacent vs. General Sibling Combinators F. Attribute Selectors G. More Attribute Selectors H. Even More Attribute Selectors I. Child Filters (from CSS) J. Basic Filters K. Basic vs. Child Filters L. More Basic Filters M. Content Filters N. Form Filters O. More Form Filters P. jQuery Objects Q. Filtering Methods R. .filter(selector) S. .filter(function) T. .not(selector) U. .not(function) V. .has(selector) W. Traversing Methods X. Traversing Methods Y. More Traversing Methods Z. Restoring jQuery objects AA. Example: .andSelf() BB. Example: .end() CC. Other jQuery Object Properties and Methods DD. Using jQuery Objects Like an Array EE. .each(callback)

Session: jQuery X.

Introduction to jQuery A. What is jQuery? B. jQuery Usage C. Downloading jQuery D. Reading the Documentation E. The jQuery Function F. The jQuery Function “Overloads” G. Selecting Elements

XII. Manipulating the DOM A. $(html, [ownerDocument]) B. $(html, props) C. .attr(name, [value]) D. .attr(object) E. .prop() F. Attributes vs. Properties G. Removing Attributes and Properties H. The Class Attribute

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically PT9213_WORKINGWITHJAVASCRIPTANDJQUERY.DOC

"Charting the Course ... ... to Your Success!" Working with JavaScript and JQuery Course Outline (cont’d) I. J. K. L. M. N. O. P. Q. R. S. T. U. V. W. X. Y. Z. AA. BB.

Working with CSS .css(name, [value]) CSS Box Model Properties Element Content Checkboxes and Radio Buttons Select and Option Elements Manipulating the DOM Manipulating Children Removing Elements Inserting Content Replacing Content Wrapping and Unwrapping Effects (Animations) Built-in Effects Durations and Easing Animating Arbitrary Properties Relative Property Animations .animate() options Effects Queues jQuery UI Effects

XIII. Event Handling A. .bind(eventType, [eventData], handler) B. Binding Multiple Events to Same Handler C. Multiple Events to Different Handlers D. Shortcut Methods E. Event Handlers F. Returning false G. The Event Object H. Event Targets I. Key Event Properties J. Mouse Event Properties K. Event Object Methods L. mouseenter/mouseleave M. Other Methods for Binding Events N. Triggering Events O. Custom Events P. Removing Event Handlers Q. Namespaced Event Handlers R. Live Events S. Live Events Example T. .live() Limitations U. .delegate() as a Better .live() V. New Methods in jQuery XIV. Ajax A. $.ajax() B. $.ajax() Settings C. Posting Data D. Default Settings E. Global Ajax Handlers F. Ajax Handlers

G. H. I. J. K. L. M. N. O. P. Q. R. S. T.

Shortcut Methods .load() JSONP JSONP Example Serialization Deferred Objects Deferred Consumer Methods Deferred Consumer Example Deferred Provider Methods Deferred Provider Example Promises Piping Chaining Tasks Waiting for Multiple Tasks

XV. jQuery Plugins A. jQuery Plugins B. jQuery Validation Plugin C. jQuery Validation Plugin (Example Form) D. jQuery Validation Plugin (Example Rules) E. jQuery Validation Plugin (CSS Classes) F. jQuery Validation Plugin (Messages) G. jQuery Form plugin H. jQuery Form Plugin (Methods) I. jQuery Form Plugin (Options) J. jQuery BBQ (Back Button & Query) Plugin K. jQuery Hotkeys Plugin L. jQuery Color Plugin M. The jQuery UI Project N. Grid Plugins O. Tree Plugins P. Commercial Packages Q. Writing Custom Plugins R. Template for New Plugins XVI. jQuery UI A. jQuery UI B. jQuery UI Effects C. Visibility Transitions D. Color Transitions E. Class Transitions F. Advanced Easing G. Easing Curves H. Interactions I. Conventions Used by Interactions/Widgets J. Draggable Interaction K. Droppable Interaction L. Draggable/Droppable and CSS M. Constraining Dropping of Draggables N. Resizable Interaction O. Selectable Interaction P. Sortable Interaction

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically PT9213_WORKINGWITHJAVASCRIPTANDJQUERY.DOC

"Charting the Course ... ... to Your Success!" Working with JavaScript and JQuery Course Outline (cont’d) Q. R. S. T. U. V. W. XVII. A. B. C. D.

Position Utility Position Utility Example Widgets jQuery UI CSS Framework Example Classes Icons All Icons Templates Micro Templates Micro Template Example Micro Template With Embedded JavaScript jQuery Template Plugin

E. F. G. H. I. J. K. L. M. N. O. P. Q.

Template Plugin Example ${expression} and {{= expression}} {{html expression}} {{if expression}} {{else}} {{else expression}} {{each expression}} {{each(index, value) expression}} {{tmpl([data], [options]) template}} {{wrap([data], [options]) template}} Compiling Templates Compiling Templates Example Template Items

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically PT9213_WORKINGWITHJAVASCRIPTANDJQUERY.DOC