User Interface Development with jQuery Workshop

Workshop Materials

• Presention slides
  • PDF
  • Original Keynote slides
  • Exported Powerpoint format
• Example code and exercises

Workshop Agenda

1. What is jQuery?
2. How does it compare to other toolkits?
3. The jQuery Way: Unobtrusiveness, etc.
4. The 10-minute JavaScript Refresher Course
5. Finding things: using selectors
6. Attributes
7. Styling
8. Events
9. DOM Manipulation
10. Accessibility
11. AJAX
12. Building Applications: What's Missing?
13. Infusing Your jQuery App With Fluid Infusion

Example Code: Flutter

• Build a simple Twitter client using jQuery

Exercises

These exercises will use the Twitter client assets, building upon them into a working application.

1. Selecting things and using them
   • Using the full Twitter client HTML, try out different types of selectors: id-based, containment, CSS style, pseudo selectors
   • Apply simple CSS class names
   • Add inline styles
   • Adjust attributes
2. DOM Manipulation
   • Move elements from one spot in the document to another
   • Inject HTML using simple strings and templates
3. Keyboard accessibility and ARIA
4. AJAX
   • Calling home: simple GET requests
   • Processing data in JSON format from Twitter
   • POSTing data back to the server