My Cart (0)

Customer Service 1-800-221-5528

Murach’s JavaScript and jQuery

by Zak Ruvalcaba and Mike Murach
18 chapters, 603 pages, 250 illustrations
Published December 2012
ISBN 978-1-890774-70-7

This book is Out of Print. The newest edition of this book is Murach's JavaScript and jQuery (4th Edition).

College Instructors

Go to our instructor’s site to learn more about this book and its instructor’s materials.

The aim of the book is to teach jQuery in an intensely hands-on way. It succeeds in this and probably provides the fastest way to learn and master the framework."

Andrew Binstock, Editor-in-Chief, Dr. Dobb's Journal

  • About this Book
  • Table of Contents
  • FREE Downloads
  • Book FAQs
  • Corrections
  • Reviews

What this book does

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

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

This section is especially designed for programming novices. But even if you already know JavaScript, you’ll probably pick up a few new skills as you skim through the chapters. (And our paired-pages format makes it easy to skim.)

Section 2: The core jQuery skills for every web developer

In this section, you’ll 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 you’ll use most often. 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 you complete this section, you can go on to any of the 3 sections that follow.

Section 3: Enhance your web pages by using jQuery UI

Besides the core jQuery library, jQuery provides the jQuery UI (User Interface) library. This library helps you build features that your site visitors may appreciate, all with just a few lines of code. So this section shows you 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. Together, 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 (if you’ve ever scrolled around a Google Map, you’ve seen this in action). But to be honest, the coding can be mind-bending. Fortunately, jQuery provides methods that make it far more manageable.

So in this section, you’ll learn how to use jQuery with Ajax and JSON to deliver data to your websites. First, you’ll learn the

basics. Then, you’ll learn how to work with the APIs for websites like Blogger, YouTube, Twitter, Flickr, and Google Maps to add popular content to your pages. This is a major use of Ajax and JSON…yet no other jQuery book 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, for jQuery users, there’s no better way to develop mobile websites right now. And you can add it to your skill set any time after you’ve finished Section 2.

Who this book is for

You can think of jQuery as one of the 4 technologies that every professional web developer should master, along with HTML, CSS, and JavaScript. So this book is for:

  • web developers who know HTML and CSS but are new to JavaScript and jQuery
  • web developers who have done JavaScript programming but are new to jQuery
  • web developers who have used jQuery for special-purpose applications, but don’t feel comfortable with it
  • web developers who program in ASP.NET, JSP, or PHP on the server side and want to master client-side programming too
  • web developers who have already read 3 or 4 jQuery books but still aren’t sure how to use jQuery in real-world applications

The only prerequisite is a basic familiarity with HTML and CSS. We don’t expect you to code HTML and CSS, though, so we provide that code for all of the examples and exercises in the book. Then, when you’re ready to learn more, you can get Murach’s HTML5 and CSS3.

What software you need

To develop JavaScript applications, you need:

  • any text editor (this book recommends Aptana Studio 3, which is available for free)
  • Mozilla Firefox (because of its debugger), along with the default browser on your system: Internet Explorer for Windows users and Safari for Mac OS

Although you can use any text editor with this book, a text editor that includes syntax coloring and auto-formatting will help you

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 a web page, you can use the default browser on your system. But we recommend that you also test your pages in Mozilla Firefox, which includes a terrific debugging tool called Firebug. In practice, you should also test your pages in Opera and Chrome, or in any other browser that your website visitors are likely to use, but that isn’t necessary as you learn. Again, all of these browsers are available for free.

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

The perfect companion book

Murach's HTML5 and CSS3 (4th Edition)

HTML5, CSS3, JavaScript, and jQuery work hand-in-hand these days, so our HTML5 and CSS3 book is the perfect companion to our jQuery book. It teaches you how to code HTML and CSS from scratch. And right from page 1, it shows you how to structure and design your pages using all of the most popular HTML5/CSS3 features, like semantic tags, drop shadows, rounded corners, gradients, accessible forms, embedded fonts, canvas…and more!

What people say about this book

"I finished up Murach's Javascript and jQuery, and I am beyond impressed. This is a great book for someone with a beginner's level of programming and will take you through not only the code of JavaScript and jQuery, but the reasons why. This is not to say it isn't an excellent book for moderate to advanced programmers - the projects help quickly identify the uses and structure needed to get you from a limited background in JavaScript to up-and-running in no time."
- 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

"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

"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

"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

View the table of contents for this book in a PDF: Table of Contents (PDF)

Click on any chapter title to display or hide its content.

Section 1 JavaScript essentials

Chapter 1 Introduction to web development

How a web application works

The components of a web application

How static web pages are processed

How dynamic web pages are processed

How JavaScript and jQuery are used for client-side processing

The components of a JavaScript application

How the Email List application works

The HTML

The CSS

The JavaScript

The HTML and CSS skills that you need for this book

How to use the HTML5 semantic elements

How to use the div and span elements

How to use the basic HTML attributes

How to provide CSS styles for an HTML page

How to code the basic CSS selectors

How to code CSS rule sets

How to test a JavaScript application

How to run a JavaScript application

How to ensure cross-browser compatibility

How to use Aptana to develop JavaScript applications

How to create or import a project

How to open or close an HTML, CSS, or JavaScript file

How to change the colors that highlight the syntax

How to edit a file

How to run a JavaScript application

Chapter 2 Getting started with JavaScript

How to include JavaScript in an HTML document

Two ways to include JavaScript in the head of an HTML document

How to include JavaScript in the body of an HTML document

The JavaScript syntax

How to code JavaScript statements

How to create identifiers

How to use comments

How to use objects, methods, and properties

How to work with JavaScript data

The primitive data types

How to code numeric expressions

How to work with numeric variables

How to work with string and Boolean variables

How to use the parseInt and parseFloat methods

How to code control statements

How to code conditional expressions

How to code if statements

How to code while and do-while loops

How to code for loops

Two illustrative applications

The Miles Per Gallon application

The Test Scores application

How to find errors in your code

How to get error messages with Firefox

Common JavaScript errors

Chapter 3 How to work with objects, functions, and events

How to use objects to work with data

How to use the window and document objects

How to use Textbox and Number objects

How to use Date and String objects

How to use DOM objects to change the text for an element

How to use functions

How to create and call an anonymous function

How to create and call a named function

When and how to use local and global variables

How to handle events

How to attach an event handler to an event

How to use an onload event handler to attach the other event handlers

Two illustrative applications

The Miles Per Gallon application

The Email List application

Chapter 4 How to test and debug a JavaScript application

An introduction to testing and debugging

Typical test phases for a JavaScript application

The three types of errors that can occur

Common JavaScript errors

How top-down coding and testing can simplify debugging

How to debug with Firebug

How to enable Firebug and find errors

How to use breakpoints and step through code

Other debugging methods

When and how to get error messages with other browsers

A simple way to trace the execution of your JavaScript code

When and how to view the source code

When and how to validate the HTML

Chapter 5 How to work with arrays

How to create and use an array

How to create an array and refer to its elements

How to add and delete array elements

How to use for loops to work with arrays

How to use for-in loops to work with arrays

How to use the methods of an Array object

An enhanced Email List application

The user interface and HTML

The JavaScript

Chapter 6 How to script the DOM with JavaScript

DOM scripting properties and methods

DOM scripting concepts

The Node interface

The Document and Element interfaces

The FAQs application

The user interface, HTML, and CSS

The JavaScript

Another way the FAQs application could be coded

Two critical issues for JavaScript applications

Usability

Accessibility

The FAQs application with improved accessibility

DOM scripting skills for links and images

How to cancel the default action of an event

How to preload images

The Image Swap application

The HTML and CSS

The JavaScript

How to use timers

How to use a one-time timer

How to use an interval timer

The Slide Show application

The HTML and CSS

The JavaScript

Section 2 jQuery essentials

Chapter 7 Get off to a fast start with jQuery

Introduction to jQuery

What jQuery is

How to include jQuery in your web pages

How jQuery can simplify JavaScript development

How jQuery can affect testing and debugging

How jQuery UI and plugins can simplify JavaScript development

The basics of jQuery programming

How to code jQuery selectors

How to call jQuery methods

How to use jQuery event methods

The Email List application in jQuery

The user interface and HTML

The jQuery

A working subset of selectors, methods, and event methods

The most useful selectors

The most useful methods

The most useful event methods

Other event methods that you should be aware of

Three illustrative applications

The FAQs application in jQuery

The Image Swap application in jQuery

The Image Rollover application in jQuery

Chapter 8 How to use effects and animations

How to use effects

The jQuery methods for effects

The FAQs application with jQuery effects

A Slide Show application with effects

The user interface, HTML, and CSS

Two ways to code the jQuery

How to stop and start a slide show

How to use animation

How to use the basic syntax of the animate method

How to chain animate methods

How to use the delay and stop methods

How to use easings with effects and animations

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

Sample chapters

Chapter 7: Get off to a fast start with jQuery

If you already know the basics of JavaScript, this chapter will quickly show you how jQuery makes JavaScript programming easier…and you’ll learn a working subset of jQuery that lets you start using it yourself. Four complete applications illustrate each point along the way and give you practical ideas for incorporating jQuery into your own web pages.

Chapter 7 PDF (1.2Mb) Download Now

Chapter 7 ePub (1.3Mb) Download Now

Book applications and exercises

This download includes:

  • The source code for the applications that are presented in the book
  • The starting source code for the exercises in the book
  • The solutions to the book exercises so you can check your work

Appendix A in the book shows how to install and use these files on Windows and Mac systems.

Exe file for Windows (14.9Mb) Download Now

Zip file for any system (14.9Mb) Download Now

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:

jquery script reference example

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:

View the corrections

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:

Corrections for jQuery 1.9

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.

There are no reviews for this product yet.

To leave a review, please log in to your account.     Log In Here

Our Ironclad Guarantee

You must be satisfied. Try our print books for 30 days or our eBooks for 14 days. If they aren't the best you've ever used, you can return the books or cancel the eBooks for a prompt refund. No questions asked!

Contact Murach Books

For orders and customer service:

1-800-221-5528

Weekdays, 8 to 4 Pacific Time

College Instructors

If you're a college instructor who would like to consider a book for a course, please visit our website for instructors to learn how to get a complimentary review copy and the full set of instructional materials.