JavaScript & jQuery: The Missing Manual, 3rd Edition

JavaScript & jQuery: The Missing Manual, 3rd Edition

by David Sawyer McFarland
Released September 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491948613

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to learn. This easy-to-read guide not only covers JavaScript basics, but also shows you how to save time and effort with the jQuery and jQuery UI libraries of prewritten JavaScript code. You’ll build web pages that feel and act like desktop programs—with little or no programming.

The important stuff you need to know:

  • Pull back the curtain on JavaScript. Learn how to build a basic program with this language.
  • Get up to speed on jQuery. Quickly assemble JavaScript programs that work well on multiple web browsers.
  • Transform your user interface. Learn jQuery UI, the JavaScript library for interface features like design themes and controls.
  • Make your pages interactive. Create JavaScript events that react to visitor actions.
  • Use animations and effects. Build drop-down navigation menus, pop-ups, automated slideshows, and more.
  • Collect data with web forms. Create easy-to-use forms that ensure more accurate visitor responses.
  • Practice with living examples. Get step-by-step tutorials for web projects you can build yourself.

Publisher resources

View/Submit Errata

Table of contents

  1. JavaScript & jQuery: The Missing Manual
  2. The Missing Credits
    1. About the Author
    2. About the Creative Team
    3. Acknowledgments
    4. The Missing Manual Series
  3. Introduction
    1. What Is JavaScript?
      1. A Bit of History
      2. JavaScript Is Everywhere
    2. What Is jQuery?
    3. HTML: The Barebones Structure
      1. How HTML Tags Work
    4. CSS: Adding Style to Web Pages
      1. Anatomy of a Style
    5. Software for JavaScript Programming
      1. Free Programs
      2. Commercial Software
    6. About This Book
      1. This Book’s Approach to JavaScript
      2. About the Outline
    7. The Very Basics
      1. About→These→Arrows
    8. About the Online Resources
      1. Living Examples
      2. Registration
      3. Feedback
      4. Errata
      5. Safari® Books Online
  4. 1. Getting Started with JavaScript
    1. 1. Writing Your First JavaScript Program
      1. Introducing Programming
        1. What’s a Computer Program?
      2. How to Add JavaScript to a Page
        1. External JavaScript Files
      3. Your First JavaScript Program
      4. Writing Text on a Web Page
      5. Attaching an External JavaScript File
      6. Tracking Down Errors
        1. The Chrome JavaScript Console
        2. The Internet Explorer Console
        3. The Firefox JavaScript Web Console
        4. The Safari Error Console
    2. 2. The Grammar of JavaScript
      1. Statements
      2. Built-In Functions
      3. Types of Data
        1. Numbers
        2. Strings
        3. Booleans
      4. Variables
        1. Creating a Variable
        2. Using Variables
      5. Working with Data Types and Variables
        1. Basic Math
        2. The Order of Operations
        3. Combining Strings
        4. Combining Numbers and Strings
        5. Changing the Values in Variables
      6. Tutorial: Using Variables to Create Messages
      7. Tutorial: Asking for Information
      8. Arrays
        1. Creating an Array
        2. Accessing Items in an Array
        3. Adding Items to an Array
          1. Adding an Item to the End of an Array
          2. Adding an Item to the Beginning of an Array
          3. Choosing How to Add Items to an Array
        4. Deleting Items from an Array
      9. Tutorial: Writing to a Web Page Using Arrays
      10. A Quick Object Lesson
      11. Comments
        1. When to Use Comments
        2. Comments in This Book
    3. 3. Adding Logic and Control to Your Programs
      1. Making Programs React Intelligently
        1. Conditional Statement Basics
        2. Adding a Backup Plan
        3. Testing More Than One Condition
        4. More Complex Conditions
          1. Making Sure More than One Condition is True
          2. Making Sure at Least One Condition is True
          3. Negating a Condition
        5. Nesting Conditional Statements
        6. Tips for Writing Conditional Statements
      2. Tutorial: Using Conditional Statements
      3. Handling Repetitive Tasks with Loops
        1. While Loops
        2. Loops and Arrays
        3. For Loops
        4. Do/While Loops
      4. Functions: Turn Useful Code Into Reusable Commands
        1. Mini-Tutorial
        2. Giving Information to Your Functions
        3. Retrieving Information from Functions
        4. Keeping Variables from Colliding
      5. Tutorial: A Simple Quiz
  5. 2. Getting Started with jQuery
    1. 4. Introducing jQuery
      1. About JavaScript Libraries
      2. Getting jQuery
        1. Linking to the jQuery File on a CDN Server
        2. Downloading Your Own jQuery File
      3. Adding jQuery to a Page
      4. Modifying Web Pages: An Overview
      5. Understanding the Document Object Model
      6. Selecting Page Elements: The jQuery Way
        1. Basic Selectors
          1. ID Selectors
          2. Element Selectors
          3. Class Selectors
        2. Advanced Selectors
        3. jQuery Filters
        4. Understanding jQuery Selections
          1. Automatic Loops
          2. Chaining Functions
      7. Adding Content to a Page
        1. Replacing and Removing Selections
      8. Setting and Reading Tag Attributes
        1. Classes
        2. Reading and Changing CSS Properties
        3. Changing Multiple CSS Properties at Once
      9. Reading, Setting, and Removing HTML Attributes
      10. Acting on Each Element in a Selection
        1. Anonymous Functions
        2. this and $(this)
      11. Automatic Pull Quotes
        1. Overview
        2. Programming
    2. 5. Action/Reaction: Making Pages Come Alive with Events
      1. What Are Events?
        1. Mouse Events
        2. Document/Window Events
        3. Form Events
        4. Keyboard Events
      2. Using Events the jQuery Way
      3. Tutorial: Introducing Events
      4. More jQuery Event Concepts
        1. Waiting for the HTML to Load
          1. An Alternative to $(Document).Ready()
        2. Mousing Over and Off an Element
        3. The Event Object
        4. Stopping an Event’s Normal Behavior
        5. Removing Events
      5. Advanced Event Management
        1. Other Ways to Use the on() Function
        2. Delegating Events with on()
          1. How Event Delegation Affects the $(this) Object
      6. Tutorial: A One-Page FAQ
        1. Overview of the Task
        2. The Programming
    3. 6. Animations and Effects
      1. jQuery Effects
        1. Basic Showing and Hiding
        2. Fading Elements In and Out
        3. Sliding Elements
      2. Tutorial: Login Slider
        1. The Programming
      3. Animations
        1. Easing
      4. Performing an Action After an Effect Is Completed
      5. Tutorial: Animated Dashboard
        1. The Programming
      6. jQuery and CSS3 Transitions and Animations
        1. jQuery and CSS Transitions
        2. jQuery and CSS Animations
    4. 7. Common jQuery Tasks
      1. Swapping Images
        1. Changing an Image’s src Attribute
        2. Swapping Images with jQuery
        3. Preloading Images
        4. Rollover Images
      2. Tutorial: Adding Rollover Images
        1. Overview of the Task
        2. The Programming
      3. Tutorial: Photo Gallery with Effects
        1. Overview of the Gallery
        2. The Programming
      4. Controlling How Links Behave
        1. Selecting Links with JavaScript
        2. Determining a Link’s Destination
        3. Don’t Follow That Link
      5. Opening External Links in a New Window
      6. Creating New Windows
        1. Window Properties
          1. Use the Window Reference
          2. Events that Can Open a New Window
      7. Introducing jQuery Plug-ins
        1. What to Look for in a jQuery Plug-in
        2. jQuery Plug-in Basics
      8. Build a Responsive Navigation Bar
        1. The HTML
        2. The CSS
        3. The JavaScript
        4. The Tutorial
        5. Customizing the Look of the SmartMenus Plug-in
    5. 8. Enhancing Web Forms
      1. Understanding Forms
        1. Selecting Form Elements
        2. Getting and Setting the Value of a Form Element
        3. Determining Whether Buttons and Boxes Are Checked
        4. Form Events
          1. Submit
          2. Focus
          3. Blur
          4. Click
          5. Change
      2. Adding Smarts to Your Forms
        1. Focusing the First Field in a Form
        2. Disabling and Enabling Fields
        3. Hiding and Showing Form Options
      3. Tutorial: Basic Form Enhancements
        1. Focusing a Field
        2. Disabling Form Fields
        3. Hiding Form Fields
      4. Form Validation
        1. jQuery Validation Plug-in
        2. Basic Validation
          1. Adding Validation Rules
          2. Adding Error Messages
        3. Advanced Validation
          1. Advanced Rules
          2. Advanced Error Messages
        4. Styling Error Messages
      5. Validation Tutorial
        1. Basic Validation
        2. Advanced Validation
        3. Validating Checkboxes and Radio Buttons
        4. Formatting the Error Messages
  6. 3. Getting Started with jQuery UI
    1. 9. Expanding Your Interface
      1. What Is jQuery UI?
      2. Why Use jQuery UI?
      3. Using jQuery UI
        1. Adding jQuery UI to a Web Page
      4. Adding Messages with Dialog Boxes
        1. Mini-Tutorial: Creating a Dialog Box
        2. Setting Dialog Box Properties
        3. Mini Tutorial: Passing Options to the Dialog Widget
        4. Opening Dialog Boxes with Events
        5. Adding Buttons to a Dialog Box
        6. Mini-Tutorial: Adding Buttons to a Dialog Box
      5. Providing Information with Tooltips
        1. Mini-Tutorial: Adding Tooltips Quickly
        2. Tooltip Options
        3. Using HTML Content in a Tooltip
        4. Mini-Tutorial: Add HTML to a Tooltip
      6. Adding Tabbed Panels
        1. Tabbed Panel Options
        2. Mini-Tutorial: Add Tabbed Panels
        3. Tabs with Remote Panel Content
      7. Saving Space with Accordions
        1. Mini-Tutorial: Create a jQuery UI Accordion
      8. Adding Menus to a Page
        1. Creating a Horizontal Navigation Bar
    2. 10. Forms Revisited
      1. Picking Dates with Style
        1. Setting Date Picker Properties
        2. Tutorial: Adding a Birthdate Picker
      2. Stylish Select Menus
        1. Setting Select Menu Properties
        2. Performing an Action When a Visitor Selects an Option
      3. Styling Buttons
        1. Customizing Buttons
      4. Improve Radio Buttons and Checkboxes
      5. Providing Hints with Autocomplete
        1. Using Arrays for Autocomplete
        2. Using Separate Labels and Values
        3. Getting Autocomplete Data from the Server
        4. Autocomplete Options
      6. jQuery UI Form Widget Tutorial
    3. 11. Customizing the Look of jQuery UI
      1. Introducing ThemeRoller
      2. Downloading and Using Your New Theme
        1. Adding a New Theme to an Existing Website
        2. More About the jQuery UI CSS Files
      3. Overriding jQuery UI Styles
        1. Understanding Specificity
        2. How jQuery UI Styles Widgets
    4. 12. jQuery UI Interactions and Effects
      1. The Draggable Widget
        1. Adding the Draggable Widget to a Web Page
        2. Draggable Mini-Tutorial
        3. Draggable Widget Options
        4. Draggable Widget Events
          1. The Create Event
          2. The Start Event
          3. The Drag Event
          4. The Stop Event
      2. The Droppable Widget
        1. Using the Droppable Widget
        2. Droppable Widget Options
        3. Droppable Widget Events
          1. The Drop Event
          2. The Activate Event
          3. The Deactivate Event
          4. The Over Event
          5. The Out Event
      3. Drag-and-Drop Tutorial
      4. Sorting Page Items
        1. Using the Sortable Widget
        2. Sortable Widget Options
        3. Sortable Events
        4. Sortable Methods
      5. jQuery UI Effects
        1. The Effects
        2. Easing
        3. Animating Changes Between Classes
  7. 4. Advanced jQuery and JavaScript
    1. 13. Introducing Ajax
      1. What Is Ajax?
      2. Ajax: The Basics
        1. Pieces of the Puzzle
        2. Talking to the Web Server
      3. Ajax the jQuery Way
        1. Using the load() Method
        2. Tutorial: The load() Function
          1. Overview
          2. The Programming
        3. The get() and post() Methods
        4. Formatting Data to Send to the Server
          1. Query String
          2. Object Literal
          3. Jquery’s Serialize() Function
        5. Processing Data from the Server
        6. Handling Errors
        7. Tutorial: Using the $.get() Method
          1. Overview
          2. The Programming
      4. JSON
        1. Accessing JSON Data
        2. Complex JSON Data
      5. Introducing JSONP
      6. Adding a Flickr Feed to Your Site
        1. Constructing the URL
          1. Finding Photos of Specific Things
          2. Combining options
        2. Using the $.getJSON() Method
        3. Understanding the Flickr JSON Feed
      7. Tutorial: Adding Flickr Images to Your Site
    2. 14. Building a To-Do List Application
      1. An Overview of the Application
      2. Add a Button
      3. Add a Dialog Box
      4. Adding Tasks
      5. Marking Tasks as Complete
        1. Event Delegation
      6. Deleting Tasks
      7. Going Further
        1. Editing Tasks
        2. Confirming Deletions
        3. Saving the Lists
          1. Local Storage
          2. Save to a Server
        4. More Ideas
  8. 5. Tips, Tricks, and Troubleshooting
    1. 15. Getting the Most from jQuery
      1. Useful jQuery Tips and Information
        1. $() Is the Same as jQuery()
        2. Saving Selections into Variables
        3. Adding Content as Few Times as Possible
        4. Optimizing Your Selectors
      2. Using the jQuery Docs
        1. Reading a Page on the jQuery Docs Site
      3. Traversing the DOM
      4. More Functions for Manipulating HTML
    2. 16. Going Further with JavaScript
      1. Working with Strings
        1. Determining the Length of a String
        2. Changing the Case of a String
        3. Searching a String: indexOf() Technique
        4. Extracting Part of a String with slice()
      2. Finding Patterns in Strings
        1. Creating and Using a Basic Regular Expression
        2. Building a Regular Expression
        3. Grouping Parts of a Pattern
        4. Useful Regular Expressions
          1. U.S. Zip Code
          2. U.S. Phone Number
          3. Email Address
          4. Date
          5. Web Address
        5. Matching a Pattern
          1. Matching Every Instance of a Pattern
        6. Replacing Text
        7. Trying Out Regular Expressions
      3. Working with Numbers
        1. Changing a String to a Number
        2. Testing for Numbers
        3. Rounding Numbers
        4. Formatting Currency Values
        5. Creating a Random Number
          1. Randomly Selecting an Array Element
          2. A Function for Selecting a Random Number
      4. Dates and Times
        1. Getting the Month
        2. Getting the Day of the Week
        3. Getting the Time
          1. Changing Hours to A.M. and P.M.
          2. Padding Single Digits
        4. Creating a Date Other Than Today
          1. Creating a Date That’s One Week from Today
      5. Writing More Efficient JavaScript
        1. Putting Preferences in Variables
        2. Putting Preferences in Objects
        3. Ternary Operator
        4. The Switch Statement
        5. Joining Arrays and Splitting Strings
      6. Putting It All Together
        1. Using External JavaScript Files
        2. Creating Fast-Loading JavaScript
    3. 17. Troubleshooting and Debugging
      1. Top JavaScript Programming Mistakes
        1. Non-Closed Pairs
        2. Quotation Marks
        3. Using Reserved Words
        4. Single Equals in Conditional Statements
        5. Case-Sensitivity
        6. Incorrect Path to External JavaScript File
        7. Incorrect Paths Within External JavaScript Files
        8. Disappearing Variables and Functions
      2. Debugging with the Console
        1. Opening the Console
        2. Viewing Errors with the Console
        3. Using console.log() to Track Script Progress
        4. Tutorial: Using the Console
        5. More Powerful Debugging
          1. Controlling Your Script with the Debugger
          2. Watching Your Script
      3. Debugging Tutorial
  9. 6. Appendix
    1. A. JavaScript Resources
      1. References
        1. Websites
        2. Books
      2. Basic JavaScript
        1. Websites
        2. Books
      3. jQuery
        1. Websites
        2. Books
      4. Advanced JavaScript
        1. Articles and Presentations
        2. Websites
        3. Books
      5. CSS
        1. Websites
        2. Books
  10. Index
  11. About the Author
  12. Copyright

Product information

  • Title: JavaScript & jQuery: The Missing Manual, 3rd Edition
  • Author(s): David Sawyer McFarland
  • Release date: September 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491948613