What I'm doing

I'm participating in Boston PHP's jQuery Jam, Season 3 to boost my programming skills and learn new web and mobile technologies. During the next 15 weeks, the goal is to complete of one chapter per week from the book "JavaScript & jQuery: The Missing Manual, Second Edition" by David Sawyer McFarland.

What will I learn?

These are the major section headings in the book:

Getting Started with Javascript
Getting Started with jQuery
Building Web Page Features
Ajax: Communication with the Web Server
Tips, Tricks and Troubleshooting
And a whole lot more!

Link to discussion group

Recent site updates

Starting (04/21/2013)
Posting exercises through Chapter 3 (05/15/2013)
Chapter 4 completed (05/19/2013)
Starting Chapter 5 (05/20/2013)
Chapter 5 completed (05/25/2013)
Chapter 6 completed (05/25/2013)
Chapter 7 completed (06/05/2013)
Chapters 8 & 9 posted (06/08/2013)
Update Chapter 8 "menu" arrows image (06/10/2013)
Posting the Chapter 10 examples and tutorials (06/18/2013)
Posting the Chapter 11 (Ajax) examples and tutorials (07/03/2013)
Posting Chapter 12 examples and tutorials (07/04/2013)
Posting Chapter 13 demo pages (07/21/2013)
Posting Chapter 14 (07/28/2013)
Posting Chapter 15 demo pages (07/28/2013)

Website hit counter

JavaScript & jQuery Chapters


Practice Files:

Script 1.1 - hello.html, First javascript program

Script 1.2 - hello2.html, second javascript program

Script 1.3 - fadeIn.html, fade in effect using jquery

Practice Files:

Script 2.1 - use_variable.html, using variables in javascript

Script 2.2 - prompt.html, prompt for user input

Script 2.3 - arrays.html, Accessing array elements

Practice Files:

Script 3.1 - conditional.html, using conditionals, and loops

Script 3.2 - print_date.html, using a function to print the date

Script 3.3 - quiz.html, quiz program using conditionals, loops, and functions

Practice Files:

Pull Quote example - pull-quote.html, using jQuery to put pull-quotes on the page

Practice Files:

Introduction to jQuery Events - events_intro.html, Tutorial to introduce events

Tutorial - more advanced use of events - faq.html, One page FAQ, using jquery to hide answers

Practice Files:

Tutorial: Login Slider - signup.html, use jQuery to create a login panel

Tutorial: Login Slider, version 2 - signup2.html, use jQuery to create a login panel, different in and out effects

Script 6.1 - easing_example1.html, example page using easing

Script 6.2 - easing_example2.html, another example page using easing

Script 6.3 - callback.html, example page using callback functions

Tutorial - animated dashboard - animate.html, using events to animate page elements

Practice Files:

Script 7.1 - rollover.html, rollover images tutorial

Script 7.2 - gallery.html, photo gallery tutorial

Script 7.3 - fancybox.html, fancybox example tutorial

Practice Files:

Script 8.1 - in-page-links.html, Tutorial: opening a page within a page

Script 8.2 - menu.html, Tutorial: Animated Navigation bar

Practice Files:

Tutorial: Form enhancement - form.html, Using jQuery to improve form usability

Script 09.2 - validation.html, Form validation tutorial

Practice Files:

Tabbed Panels Tutorial - tabs.html, implementing tabbed panels with jQuery

Script 10.2 - complete_complex_tabs.html, complex tabs example

Script 10.3 - slider.html, Slider tutorial

Script 10.4 - tooltip.html, Tooltip tutorial

What we'll learn in this hour:

  • What is Ajax?
  • Ajax: The Basics
  • Ajax the jQuery Way
  • JSON
Practice Files:

Script 11.1 - load.html, Ajax tutorial

Script 11.2 - login.html, Login example using Ajax

What we'll learn in this hour:

  • Introducing JSONP
  • Adding a Flickr Feed to Your Site
  • Tutorial: Adding Flickr Images to Your Site
  • Adding Google Maps to Your Site
Practice Files:

Script 12.1 - flickr.html, tutorial using JSONP to access Flickr feeds

Script 12.1a - flickr_kjh.html, same tutorial with different Flickr feed

Script 12.2 - map.html, Using goMap to insert a google map on a page

Practice Files:

Demo 1 - find.html, Traversing the DOM - the find function

Demo 2 - parent.html, Using the .parent selector

Demo 3 - siblings.html, demoing the .siblings selector

Demo 4 - find3.html, Using the .siblings selector, selecting img elements

Demo 5 - nextall.html, Using the .nextAll and .prevAll selectors

Demo 6 - nextall_hover.html, .nextAll and .prevAll, with hover

Chapter 5, revisited - faq.html, example using the .next selector

Demo 7 - wrap.html, using the .wrap function in JQuery

Demo 8 - delegate.html, using the JQuery .delegate action in a demo

Practice Files:

Example regular expression tester - regex_tester.html, demo site to test regex processing

Script 14.2 - time.html, Example using the printTime.js functions

Practice Files:

Script 15.1 - console.html, The final version, displays character count as characters are typed

Script 15.1a - console_with_logs.html, Same script, with the console.log statements. Use firebug to see console.

Script 15.2 - debugger.html, script debugging testcase page