/
User Interface Development with jQuery Workshop

User Interface Development with jQuery Workshop

Mar 05, 2010

Workshop Materials

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