Web Dev Intensive

Pop Quiz!

• Pop Practical Quiz

Discussions

• Normalizing Javascript
• Introduction to jQuery
• Including jQuery into your own projects
• Deconstructing jQuery syntax
• some useful jQuery Plugins

Examples

Basics

• Javascript is inconsistent
• basic usage of jQuery selectors

Using JQuery to handle events

• using jQuery to handle page load events
• using jQuery to handle click events
• using jQuery to handle mouseover events
• using jQuery to handle mouseout events
• using jQuery to handle form submission events

Using JQuery to change element styles

• using jQuery to change an individual CSS style of an element
• using jQuery to change an element’s CSS class names
• using jQuery to show and hide an element
• a simple example of creating a tab system (advanced version here)

JQuery effects

• examples of show and hide
• examples of fade in and fade out
• examples of slide up and slide down
• examples of animations
• an imitation of the nike.com animated list of countries

Some examples of JQuery plugins

• Curvy Corners – makes it easy to create elements with rounded corners.
• Form Example – makes it easy to put placeholder text within a text input element that disappears when a user starts typing.
• Validation - validates the data a user enters into a form.
• AlphaNumeric – allows you to set restrictions on what kind of text can be entered into a form field.
• Lightbox – easily create slideshows of images
• Cycle - another sort of slideshow plugin
• GalleryView - yet another slideshow plugin

JQuery UI library examples

• example of making an element draggable
• example of drag and drop - a draggable element and a droppable element in combination
• a date picker example

In-class assignment

• mock e-commerce site with dynamic HTML (you may recognize this wireframe.)  If you are totally stuck on this assignment, or you have completed it, feel free to refer to my forensic case study of the assignment (read at your own risk.)

Homework

• Complete all prior client-side assignments
• prepare for a quiz on all client-side technologies
  

Advanced assignment (optional)

• a tic-tac-toe game using jQuery (not easy – requires proficiency in jQuery as well as in basic programming concepts in Javascript)  See a solution here if you’re desperate and want to cheat.