You are here

jQuery Training

Description:

jQuery is an amazing JavaScript library that has been embraced not just by the individual web developers but also by the big companies like Nokia, IBM, Microsoft, Dell, Twitter and Amazon. The list continues. It's a powerful library that can significantly reduce the amount of JavaScript code that you would typically write to do some work. jQuery also proposes a neat and clean approach of implementing feature rich web sites and web applications by separating the behavior related code from HTML structure much in the same way that CSS separates the styling rules from HTML elements.

The animations and effects, themes support, style and DOM manipulation, AJAX capabilities and the like can turn your web site or application to deliver a soothing user experience. All of that with only about 15% of JavaScript code that you would use otherwise!

This comprehensive training program on jQuery teaches you everything that you should know about the latest version of jQuery.

Training Objectives:

At the end of the training, participants will be able to

  1. Compare and contrast the jQuery way of implementing applications with plain JavaScript approaches.
  2. Use basic, intermediate and advanced features of jQuery core library.
  3. Use effects and animations.
  4. Use jQuery UI plugin (widgets, theming, effects, interactions).
  5. Use AJAX capabilities of jQuery.
  6. Apply jQuery and JavaScript best practices.
  7. Extend jQuery.

Target Groups:

  1. Web Developers, UI Engineers

Prerequisites:

  1. Having some familiarity with HTML and CSS will be advantageous even though not necessarily required. The training does not cover HTML and CSS in detail but to the level that is needed to use jQuery. Even if you are not familiar with them, you will be able to catch up.
  2. Having some programming experience will be advantages since using jQuery involves programming. The training however includes a section on JavaScript programming for those who are new to programming and/or new to JavaScript.

Communication Language:

English

Duration:

3 days (~24 hours)

Facilitator:

Kamal Wickramanayake (Profile)

Training Content:

  1. Introduction to jQuery
    • What is jQuery?
    • jQuery ecosystem
    • Anatomy of a page with jQuery
    • Unobstrusive JavaScript
    • jQuery wrapper and its capabilities
    • Self return idiom (AKA chaining)
    • Graceful degradation
    • Using jQuery with other JavaScript libraries
  2. JavaScript Basics
    • Adding JavaScript to a page
    • Variables
    • Operators
    • Flow controlling
    • Functions
    • Arrays
    • Objects
    • JavaScript debugging
  3. jQuery Selectors
    • CSS selectors
    • Child selectors
    • Container selectors
    • Attribute selectors
    • Position based selectors
    • Filter selectors
    • Managing wrapped elements
  4. DOM Manipulation
    • Adding/removing DOM elements
    • Relocating
    • Copying
    • Creating, getting, setting content
    • Manipulating attributes
    • Wrapping, replacing, removing
    • Changing styles
  5. Working With Events
    • DOM event model
    • jQuery event model
    • Binding/unbinding event handlers
    • Triggering events
    • Event propagation
    • Helper methods
  6. Animations And Effects
    • Using show, hide, and toggle, fade and slide transition effects
    • Built in animations
    • Custom animations
    • Simultaneous animations
    • Effects queue
  7. Utility Functions
    • Browser detection
    • Working with arrays
    • Working with objects
    • Working with JSON
    • Other useful functions
  8. Extending jQuery
    • Finding and using plugins
    • Developing plugins
    • New wrapper methods
    • New utility functions
  9. Forms
    • Retrieving & manipulating form elements
    • Retrieving form data
    • Leveraging the form plugin
  10. AJAX
    • Introduction to AJAX
    • Replacing XMLHttpRequest with jQuery methods
    • Loading content
    • GET and POST requests
    • Fine-grained control
    • AJAX events
    • Working with JSON data
  11. jQuery UI
    • Widgets (buttons, progress bars, autocompleters, date pickers, tabs, dialogs,...)
    • Themes and styling
    • ThemeRoller tool
    • UI effects
    • Positioning
    • Drag and drop
    • Sorting and selection