There is a new edition of this book, Murach’s JavaScript and jQuery (3rd Edition). The new book is like the old book, but it has several significant updates that are no longer presented correctly in the first edition. For new JavaScript and jQuery courses, then, we strongly recommend the new edition.

In brief, both the old and the new editions start with a crash course in JavaScript that presents all the JavaScript skills that a student needs for mastering jQuery. Then, they present a complete course in jQuery that shows how to do all of the JavaScript applications that are best done with jQuery.

New Edition

"Your books are so good that I threw away my assigned JavaScript and jQuery book for my class and bought Murach’s JavaScript and jQuery (which has, by the way, helped restore my 4.0 GPA)."

Blaine Simcox, Student, Michigan

About this Book

Table of Contents

Courseware

FAQs

Corrections

Book description

This book is divided into five sections. After your students complete the first two sections, you can proceed with any of the other sections.

Section 1: The least you need to know about JavaScript to get the most from jQuery

To get your students off to the right start, section 1 presents a crash course in the JavaScript skills that are needed for using jQuery. Although you can’t use jQuery without these JavaScript skills, most jQuery books don’t include them.

What’s more, even if your students have already taken a JavaScript course, some of these skills may have been overlooked. In that case, this section can be a good refresher to make sure all your students have the same set of core skills.

Section 2: The core jQuery skills for every web developer

In this section, your students will learn how to use jQuery to create JavaScript applications like image swaps, collapsible panels, slide shows, carousels, user-friendly forms…and more…with far less coding than you’d have to do in native JavaScript.

To begin, chapter 7 presents the jQuery selectors, methods, and event methods that are used the most. Then, the next four chapters build on that base as they focus on effects and animations, DOM manipulation and traversal, forms and data validation, the many plugins that are available for jQuery, and how to create your own plugins. When your students complete this section, they can go on to any of the three sections that follow.

Section 3: Enhance your web pages by using jQuery UI

The jQuery UI (User Interface) library helps you build common but useful features into a website...with just a few lines of code. So this section shows how to use jQuery UI to create widgets like tabs, accordions, and datepickers...interactions like draggable, droppable, and sortable...and effects like color and class transitions.

Section 4: Speed up response times and add content feeds with Ajax and JSON

Ajax and JSON are hot topics today. They can be used to get data from a server and add it to a web page without reloading the entire page, which can significantly improve response times for users. Although the JavaScript coding for this can be mind-bending, jQuery provides methods that make it far more manageable.

So in this section, your students will learn how to use jQuery with Ajax and JSON to deliver data to your websites. First, they’ll learn the basics. Then, they’ll learn how to work with the APIs for websites like Blogger, YouTube, Flickr, and Google Maps to add popular content to their pages. This is a major use of Ajax and JSON…yet no other jQuery book that we’ve seen shows you how to do it.

Section 5: Mobile websites made easier with jQuery Mobile

This section shows you how to use another JavaScript library, jQuery Mobile, to develop web pages for mobile devices with the look-and-feel of native applications. In fact, there’s no better way to develop mobile websites, and it’s much easier than rebuilding a website so that it uses responsive web design.

Book features

Like all Murach books, this book has the didactic features that help students learn faster and more thoroughly. Beyond that, though, are some features that are specific to this book:

It includes the JavaScript skills that are needed for using jQuery. This ensures that the book will work whether or not the students have taken a JavaScript course that has prepared them for jQuery.

It doesn’t show how to use JavaScript for skills that are better done with jQuery, which is a common shortcoming and time-waster in many JavaScript books.

It not only shows how to use jQuery UI but also how to use JavaScript plugins, which can do some functions better than jQuery UI.

It shows how to use jQuery for Ajax and JSON. That takes your students to another level.

It shows how to use jQuery with common APIs like Blogger, YouTube, and Flickr. This is sure to add interest to a course...and interest is a great motivator.

It shows how to use jQuery Mobile for building mobile websites.

What courses this book can be used for

If you offer a jQuery course in your curriculum, this book is for you. But we’re also finding that instructors are using this book as either a required or a recommended text in their JavaScript courses, as well as in other web design and development courses. From our point of view, the book will work well in any of the following courses.

jQuery programming

If you review the features and content of this book, you’ll see why we believe it is clearly the best book for a jQuery course. It covers all of the most-used features of jQuery…and much more. And it presents jQuery in a way that’s designed to make learning quick and interesting for students.

JavaScript programming

Because jQuery is what’s used in industry these days, we’ve found that a combined JavaScript and jQuery course makes more sense for most curricula than a traditional JavaScript course.

But our JavaScript and jQuery book can be the right book for a JavaScript course, too, if you think of JavaScript as a subject that includes the JavaScript libraries. That way, the focus is on the best way to get the results that you want instead of on the JavaScript language…and yet you can still start off with 200 pages on coding JavaScript. Using our book for a JavaScript course makes particular sense if you don’t also offer a jQuery course.

Web design with JavaScript and jQuery

If the focus of the course is web design, there’s no reason to go extensively into JavaScript, especially for applications that are better done with jQuery. In that case, our book may be the right one for the course.

What software your students need

To develop JavaScript applications, your students need:

any text editor (this book recommends Aptana Studio 3, which is available for free)

Mozilla Firefox along with the default browser for their computer: Internet Explorer for Windows or Safari for Mac OS

Although your students can use any text editor with this book, a text editor that includes syntax coloring and auto-formatting will help them develop applications more quickly and with fewer errors. That’s why we recommend Aptana Studio 3. It’s available for free, it can be used for entering JavaScript and jQuery code (as well as HTML and CSS code), and it runs on both Windows and Mac OS.

To test their web pages, your students can use the default browser on their systems. But we recommend that they also test their pages in Mozilla Firefox, which includes a terrific debugging tool called Firebug. In practice, they should also test their pages in Chrome and maybe Opera, but that isn’t necessary when they’re learning.

To help your students install these products, Appendix A provides the procedures they’ll need. In addition, chapter 1 presents a short tutorial on using Aptana, and chapter 4 shows how to use Firebug for debugging pages that are rendered in Firefox.

Presentation options

After your students complete the first two sections of this book, you can continue with any of the other sections. In other words, sections 3, 4, and 5 are written as independent modules that require only sections 1 and 2 as prerequisites. That lets you choose the subjects that you want to teach as well as the sequence in which you teach them.

Beyond that, you have some options as to which chapters you assign for each section of the book. Those options are described in the topics that follow.

Section 1: JavaScript essentials

The six chapters of section 1 present the JavaScript that your students need to know for the effective use of jQuery. Note, however, that the last chapter shows how to script the DOM with JavaScript, which is easier to do with jQuery. As a result, you can just focus on the concepts of that chapter rather than asking your students to apply the skills that they learn.

If your students already know JavaScript, you can probably skip most of this section. But you should probably assign chapter 4 on debugging and chapter 6 on DOM scripting because your students aren’t likely to have all of those skills, even if they have already taken a JavaScript course.

Section 2: jQuery essentials

The five chapters of section 2 present the core jQuery concepts and skills. After chapter 7 presents a substantial subset of jQuery, the next four chapters expand upon those skills. Note, however, that you don’t have to teach all of those chapters and you don’t have to teach them in sequence.

If, for example, you want to teach the use of plugins right after chapter 7 and then go back to chapter 8, you can do that. Or, if you want to skip chapter 9 on DOM manipulation and traversal or chapter 10 on forms and data validation, you can do that. You should, however, teach chapters 7 (core skills), 8 (effects), and 11 (plugins) before you go on to another section.

Section 3: jQuery UI essentials

The two chapters of section 3 show how to use jQuery UI to enhance a web page. Although these chapters should be taught in sequence, remember that you can skip this section if you want to go to section 4 or 5 next. Another option is to assign chapter 12on jQuery UI themes and widgets and skip chapter 13 on interactions and effects.

Section 4: Ajax, JSON, and API essentials

The three chapters in this section show how to use Ajax and JSON to update a web page without reloading it. They also show how to use Ajax and JSON with the APIs for popular websites like Blogger, YouTube, Flickr, and Google Maps.

But here again, you have some options. In particular, you can teach just the first chapter in this section (chapter 14), just the first two chapters, or all three chapters.

Section 5: jQuery Mobile essentials

The two chapters in this section show how to use jQuery to build mobile websites. Since these chapters don’t directly use jQuery methods or event methods, these chapters are relatively easy. As a result, you may want to assign one or both of them when you think your students need a relaxing interlude.

What people say about this book

"I finished up Murach’s Javascript and jQuery, and I am beyond impressed. This is a great book and will take you through not only the code of JavaScript and jQuery, but the reasons why." - Jeremy Johnson; Review posted at DreamInCode.net

From Dr. Dobb’s Must-Have Books for JavaScript: "The aim of the book is to teach jQuery in an intensely hands-on way. It succeeds in this and probably provides that fastest way to learn and master the framework." - Andrew Binstock, Editor-in-Chief, Dr. Dobb’s

"There are quite a few jQuery books out there, but most assume that you already know JavaScript. This one doesn’t. It begins with a crash course in JavaScript — a crash course which occupies almost 200 of the book’s 564 pages, and six of its 18 chapters. If you’re not up-to-speed on programming with JavaScript, you will be by the time you’re done." - David Bolton, Software Developer and About.com host Review posted at Dice.com

"Several years ago, I was told that jQuery was worth learning. After wasting time and money on books and tutorials, I had not gotten very far. Murach’s JavaScript and jQuery is exactly what I needed.

“After reading Chapter 7, I skipped to Chapter 17. Within two hours I had rebuilt a mobile website using jQuery Mobile. A friend was interested in themes and widgets, so I did Chapter 12 next. Once again within a short time I had rebuilt some pages using jQuery UI with very satisfying results. Finally, I got back to Chapter 9 about DOM manipulation. The information here solved a problem that had me frustrated. This is an amazing book!" - Andrew McConnell, Developer

"Your books are so good that I threw away my assigned JavaScript and jQuery book for my class and bought Murach’s JavaScript and jQuery (which has, by the way, helped restore my 4.0 GPA)." - Blaine Simcox, Student, Michigan

"One of my favorite parts of the book is on using JavaScript and jQuery to consume popular public APIs. This makes the book all the more practical from the real-world perspective." - Jason Ong, Site Editor, ASPNETWorld.com

"I use jQuery and JavaScript every day, and for more than 20 years of web application development, this is one of the best books I’ve used. I thought I knew a lot about jQuery and JavaScript, but this book taught me more. Thanks for a really well done book." - Posted at an online bookseller

How to use animation

How to use the advanced animate syntax and the methods for working with queues

A Carousel application with animation

The user interface, HTML, and CSS

The jQuery

Chapter 9 How to use the DOM manipulation and traversal methods

The DOM manipulation methods

The methods for working with attributes

The methods for DOM replacement

The methods for DOM insertion and cloning

The methods for DOM wrapping and removal

The TOC application

The user interface and HTML

The jQuery

The methods for working with styles and positioning

The methods for working with styles

The methods for positioning elements

The enhanced TOC application

The DOM traversal methods

The tree traversal methods

The filtering methods

A Slide Show application that uses DOM traversal methods

Chapter 10 How to work with forms and data validation

Introduction to forms and controls

How forms work

The HTML5 and CSS3 features for working with forms

How to use jQuery to work with forms

The jQuery selectors and methods for forms

The jQuery event methods for forms

A Validation application that uses JavaScript

The user interface and HTML

Some of the JavaScript for the application

How to use a plugin for data validation

How to use the validation plugin

The options and default error messages for the validation plugin

A Validation application that uses the validation plugin

The user interface

The HTML

The CSS

Chapter 11 How to create and use plugins

Introduction to plugins

How to find jQuery plugins

Some of the most useful plugins

How to use any plugin

How to use four of the most useful plugins

How to use the Lightbox plugin for images

How to use the bxSlider plugin for carousels

How to use the Cycle plugin for slide shows

How to use the jLayout plugin for two-column layouts

How to create your own plugins

The structure of a plugin

How to code a plugin that highlights menu items

How to add options to a plugin

A web page that uses two plugins

The user interface

The script elements

The HTML for the elements used by the plugins

The jQuery for using the plugins

Section 3 jQuery UI essentials

Chapter 12 Get off to a fast start with jQuery UI themes and widgets

Introduction to jQuery UI

What jQuery UI is and where to get it

The jQuery UI components

How to build and use a jQuery UI download

How to build a download

How to use ThemeRoller to build a custom theme

How to use the downloaded folders and files

How to use jQuery UI widgets

How to use any widget

How to use the Accordion widget

How to use the Tabs widget

How to use the Button and Dialog widgets

How to use the Autocomplete widget

How to use the Datepicker widget

How to use the Slider widget

How to use the Progressbar widget

A web page that uses jQuery UI

The user interface

The link and script elements

The HTML for the widgets

The jQuery for the widgets

Chapter 13 How to use jQuery UI interactions and effects

How to use interactions

Introduction to interactions

How to use the draggable and droppable interactions

How to use the resizable interaction

How to use the selectable interaction

How to use the sortable interaction

How to use effects

Introduction to effects

How to use individual effects

How to use color transitions

How to use class transitions

How to use visibility transitions

Section 4 Ajax, JSON, and API essentials

Chapter 14 How to use Ajax, JSON, and Blogger

Introduction to Ajax

How Ajax works

Common data formats for Ajax

The members of the XMLHttpRequest object

How to use the XMLHttpRequest object

How to use the jQuery shorthand methods for Ajax

The jQuery shorthand methods for working with Ajax

How to use the load method to load HTML data

How to use the $.get or $.post method to load XML data

How to use the $.getJSON method to load JSON data

How to send data with an Ajax request

How to use the $.ajax method for working with Ajax

The syntax of the $.ajax method

How to use the $.ajax method to load data

How to use Ajax with the API for Google’s Blogger

Introduction to Google’s Blogger

How to use the API for Blogger

How to use an online JSON editor to review the feed from a web site

How to use Ajax and JSON to display Blogger posts

Chapter 15 How to use the APIs for Youtube, Twitter, and Flickr

How to use Ajax with YouTube

How to use the API for YouTube

The query parameters and data items that you’ll use the most

How to list videos by channel

How to list videos by search term

How to play videos in a video player on your site

How to use Ajax with Twitter

How to use the API for Twitter

How to display the tweets for a user

How to convert the URLs within tweets to links

How to display a timestamp for each tweet

How to use Ajax with Flickr

How to use the API for Flickr

The query parameters and data items that you’ll use the most

How to display titles and descriptions for a Flickr photo feed

How to display a gallery of Flickr photos

Chapter 16 How to use the API for Google Maps

Introduction to Google Maps

Introduction to the Google Maps API

The classes for adding a Google map to a web page

The script element for the Google Maps API

How to add a Google map to a web page

How to display markers on a map

The classes and methods for geocoding and markers

How to create an address list that displays markers

How to display messages on a map

The classes and methods for messages and markers

How to add messages to markers

How to add custom messages to markers

How to add Flickr images to messages

How to display driving directions

The classes and methods for directions and listeners

How to display driving directions on your own site

Section 5 jQuery Mobile essentials

Chapter 17 Get off to a fast start with jQuery Mobile

How to work with mobile devices

How to provide pages for mobile devices

How to use a JavaScript plugin to redirect mobile browsers to a mobile web site

How to set the viewport properties

Guidelines for designing mobile web pages

Guidelines for testing mobile web pages

How to get started with jQuery Mobile

What jQuery Mobile is and where to get it

How to include jQuery Mobile in your web pages

How to create one web page with jQuery Mobile

How to code multiple web pages in a single HTML file

How to use dialogs and transitions

How to create buttons

How to create a navigation bar

How to style web pages with jQuery Mobile

How to work with the default styles

How to apply theme swatches to HTML elements

How to use ThemeRoller to roll your own theme

A mobile web site for Vecta Corp.

The layout of the web site

The HTML for the mobile web site

The style sheet for the mobile web site

Chapter 18 How to enhance a jQuery Mobile web site

How to use the jQuery Mobile documentation

The components of jQuery Mobile

The data attributes of jQuery Mobile

The events and methods of jQuery Mobile

How to use jQuery Mobile for content formatting

How to lay out content in grids

How to use collapsible content blocks

How to use collapsible sets

How to use jQuery Mobile for list views

How to use basic lists

How to use split button lists and inset lists

How to use list dividers and count bubbles

How to use search filter bars

How to use jQuery Mobile for forms

How to use text fields and text areas

How to use sliders and switches

How to use radio buttons and check boxes

How to use select menus

How to submit a form

An enhanced mobile web site for Vecta Corp.

The layout of the web site

The HTML

The style sheet

Appendixes

Appendix A How to set up your computer for this book

How to install Aptana Studio 3

On a Windows system

On a Mac OS system

How to install Firefox and Firebug

How to install Firefox

How to install Firebug

How to install and use the source code for this book

For Windows users

For Mac OS users

Appendix B A summary of the applications in this book

Appendix C How to resolve $ conflicts

If you aren’t already familiar with the supporting courseware that we provide for a book, please go to About our Courseware. As you will see, our courseware consists of the end-of-chapter activities in the book, the files in the student download at our retail site, and the instructor’s materials. These components provide everything that other publishers provide in a way that delivers better results.

If you are familiar with our courseware, here’s a quick summary of the courseware for this book. For a detailed description in PDF format, please read the Instructor’s Summary.

End-of-chapter activities in the book

Term lists

Chapter summaries

Practice exercises

Student download at our retail site

HTML, CSS, JavaScript, and jQuery source code for all the applications that are presented in the book

Starting source code for the exercises in the book

Solutions to the book exercises

Appendix A in the book gives your students complete instructions for downloading and installing these items on a PC or Mac.

Instructor’s materials

Instructional objectives by chapter

PowerPoint slides for classroom presentations

Test banks in multiple formats

Additional chapter exercises that aren’t in the book, plus their solutions

Short exercises that aren’t in the book that can be used for added practice, quizzes, or tests, plus their solutions

The files that students can download at our retail site: (1) the book applications, (2) starting points for the exercises in the book, and (3) solutions to the exercises in the book

Below are the answers to the questions that have come up most often about this book. If you have any questions that aren’t answered here, please email us. Thanks!

What do I do if I get this error when installing Aptana Studio 3: “Failed to correctly acquire installer_nodejs_windows.msi fle: CRC error”?

This error message indicates that you don’t have a version of Node.js on your computer that is compatible with the version of Aptana that you’re installing. If you see this message, exit from the Aptana installer. Then, go to this website address to automatically download an installer file named node-v0.10.13-x86.msi: http://go.aptana.com/installer_nodejs_windows. Finally, run this installer file. After that, you should be able to install Aptana without any problem.

How do I create a project from the downloadable folders if I’m using Aptana Studio 3.4 or later?

The instructions on pages 34 and 35 of our book for creating a project from the folder that contains the downloadable applications for the book was written for Aptana Studio 3.0, which was the current version when the book was published.

Since then, Aptana Studio 3.4 has been released, and you can no longer use the same procedure to create a project from an existing folder. Instead, you have to import the folder as a new project.

To import a folder, use the File→Import command to start the Import wizard. Then, in the first dialog box, expand the General folder, select Existing Folder as New Project, and click the Next button. In the next dialog box, enter or browse to the folder that contains the project files. Then, enter a name for the project, make sure the Web – Primary project type is selected, and click the Finish button.

Why did some of the book applications stop working when jQuery 1.9 was released in January 2013?

The January 2013 release of jQuery, jQuery 1.9, had changes that affected applications that were written under earlier releases. Unfortunately, this release broke some of the applications in our book.

Fortunately, we discovered the problem early and fixed this in the downloads for this book on January 25, 2013. As a result, all of the applications should work unless you downloaded the applications before that date.

If you did download the applications before January 25, 2013, you should either download them again OR make the change that follows to any applications that don’t work correctly.

Change the script element that refers to the “latest” release of jQuery:

Why don’t the YouTube applications work?

When YouTube upgraded its Data API v1 to API v2, the applications described on pages 440-448 of our jQuery book stopped working. That’s because Data API v1 no longer allows “free” connections to the YouTube Data API feed. YouTube now performs OAuth authorization by checking for the presence of a local file (typically named auth.js) that contains authorization credentials in the form of a client ID. The file containing the authorization credentials is then linked into the web page making the JSON request.

Also of note, the YouTube Data API v2 is now deprecated. The current version of the YouTube Data API is version 3.0. Because of the fluid nature of this API, YouTube applications like the ones in the book no longer make sense.

Why don’t the Twitter applications work?

When Twitter upgraded to API 1.1, the applications described on pages 452-457 of our jQuery book stopped working. That’s because API 1.1 no longer allows “free” connections to the Twitter JSON API feed.

Now, to access that feed, you have to register an application with Twitter, add an authentication token to your site, and consume both the OAuth class and the classic server_messages class. Because of these difficulties, Twitter applications like the ones in our book are no longer practical.

General corrections

To view the corrections for this book in PDF format, just click on this link:

Then, if you find any other errors, please email us so we can correct them in the next printing of the book. Thank you!

jQuery 1.9 corrections

The January 2013 release of jQuery, jQuery 1.9, had changes that affected applications that were written under earlier releases, causing them not to run. Unfortunately, the broken applications included a few of the applications in our book. For all the details, please view this PDF:

We fixed the downloads for this book on January 25, 2013. And we fixed the text in its second printing in September 2013. So if you have a copy of the book from the second or subsequent printing, these corrections won’t be an issue.

To tell which printing your book is in, look on the back of the title page, below the copyright notation, to find a series of numbers like this:

10 9 8 7 6 5 4 3 2

The number on the right of this sequence tells which printing your book is. In this example, it’s the second printing.