Practical Introduction to Rich User Interfaces using JavaScript, JQuery and KnockOut.js

This two day course gives a hands on tutorial to take people only a basic knowledge of traditional HTML and will take them step by step to create their own fully interactive rich user interface using jQuery and KnockOut.js

Each tutorial element is based on a hands on demo so at each stage the student is activly learning a broad base of skills and building up confidence to apply the elements later. Focusing on using the tools used by professional developers that simplify many of the dry aspects of coding and allow the students to produce working, reusable code then can apply to their own projects easily.

Students will be provided with a hosted account that will let them host files on the web and interact with a remote api.

Part One: Understanding The Tools You Already Have

The Developer Tool Menu in Chrome, FireBug in FireFox and the F12 Tools in IE.

Test Javascript in the console.
Investigate Errors
Drill into the structure of a page's html - What is the DOM
Manipulate CSS - How to look under the hood at how the browser sees styles
Script tags
Loading external javascript
console.log() - Get your code to send you messages for debugging

Part Two: Write Your First Code using jQuery

Intro: Some comments on style, common pit falls and debugging your own code
Why jQuery?
document.ready - What and why?
How to figure out what to target on the page
Show and Hide content
Applying animations when changing styles
Make a basic list sortable
Drag and drop between two lists
Add a date selection widget
Add a slider
Add a button bar
Add tabs to a page

Part Three: Doing something practical, KnockOut.js

Intro: What is KnockOut.js - Very easy to use, powerful toolset so you can focus on content not code
What is an observable value and how does it make coding easier?
What are templates and how do you use them to structure your page?

Part Four: Put it all together and Build Your Own Browser Based App (To Do List)

Display A List of Items (Teaches: Templates, For Each control)
Add to an item to a list (Teaches: Action on button press)
Delete an item from the list (Teaches: Child/Parent interaction)
Rename item (Teaches: Update Value, Toggle Visibility)
Mark an item as done(Teaches: Form Element Check Box, Change CSS Style)

Day Two

Part Five: Advanced Concepts

Add Priority (Teaches: Select Option Control)
Add Max List Size (Teaches: If statment, count children)
Add 'Mark All Done' (Teaches: each loop)
Save to a server and reload data (Teaches: Form Submit, JSON Parsing)
Smoothing the interface by using animations
Change an icon based on a value

Part Six: Extending KnockOut.js with available plugins.

Drag and Drop - Create Multiple Lists
Date Picker - Assign a due date
Slider - Assign percent complete

Part Seven: Final Q and A