User Interface Development with jQuery Workshop
Workshop Materials
- Presention slides
- Example code and exercises
Workshop Agenda
- What is jQuery?
- How does it compare to other toolkits?
- The jQuery Way: Unobtrusiveness, etc.
- The 10-minute JavaScript Refresher Course
- Finding things: using selectors
- Attributes
- Styling
- Events
- DOM Manipulation
- Accessibility
- AJAX
- Building Applications: What's Missing?
- 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.
- 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
- DOM Manipulation
- Move elements from one spot in the document to another
- Inject HTML using simple strings and templates
- Keyboard accessibility and ARIA
- AJAX
- Calling home: simple GET requests
- Processing data in JSON format from Twitter
- POSTing data back to the server