3rd Edition “The Missing Manual series is simply the most intelligent and usable series of guidebooks…” Answers found here! The important stuff you need to know n Make your pages come alive Use jQuery to create interactive elements that respond to visitor input n Get acquainted with jQuery UI Expand your interface with tabbed panels, dialog boxes, date pickers, and other widgets n Display good forms Get information from visitors, help shoppers buy goods, and let members post their thoughts n Go beyond the browser with Ajax Communicate with the web server to update your pages without reloading David Sawyer McFarland, president of Sawyer McFarland Media, Inc., has spent nearly 20 years building and managing websites Having served as webmaster at UC Berkeley, he’s also taught at the UC Berkeley Graduate School of Journalism and the Portland State University multimedia program David lives in Portland and has written bestselling Missing Manual titles on Adobe Dreamweaver and CSS n Put your new skills right to work Create a simple application step-by-step, using jQuery and jQuery UI widgets n Dive into advanced concepts Use ThemeRoller to customize your widgets; avoid common errors that new programmers often make JavaScript & jQuery n 3rd Editio Covers jQuery UI McFarland Web Authoring and Design US $49.99 JavaScript & jQuery JavaScript lets you supercharge your web pages with animation, interactivity, and visual effects, but learning the language isn’t easy This fully updated and expanded guide takes you step-by-step through JavaScript basics, then shows you how to save time and effort with jQuery—the library of prewritten JavaScript code—and the newest innovations from the jQuery UI plug-in —KEVIN KELLY, CO-FOUNDER OF WIRED CAN $52.99 ISBN: 978-1-491-94707-4 missingmanuals.com twitter: @missingmanuals facebook.com/MissingManuals David Sawyer McFarland 3rd Edition “The Missing Manual series is simply the most intelligent and usable series of guidebooks…” Answers found here! The important stuff you need to know n Make your pages come alive Use jQuery to create interactive elements that respond to visitor input n Get acquainted with jQuery UI Expand your interface with tabbed panels, dialog boxes, date pickers, and other widgets n Display good forms Get information from visitors, help shoppers buy goods, and let members post their thoughts n Go beyond the browser with Ajax Communicate with the web server to update your pages without reloading David Sawyer McFarland, president of Sawyer McFarland Media, Inc., has spent nearly 20 years building and managing websites Having served as webmaster at UC Berkeley, he’s also taught at the UC Berkeley Graduate School of Journalism and the Portland State University multimedia program David lives in Portland and has written bestselling Missing Manual titles on Adobe Dreamweaver and CSS n Put your new skills right to work Create a simple application step-by-step, using jQuery and jQuery UI widgets n Dive into advanced concepts Use ThemeRoller to customize your widgets; avoid common errors that new programmers often make JavaScript & jQuery n 3rd Editio Covers jQuery UI McFarland Web Authoring and Design US $49.99 JavaScript & jQuery JavaScript lets you supercharge your web pages with animation, interactivity, and visual effects, but learning the language isn’t easy This fully updated and expanded guide takes you step-by-step through JavaScript basics, then shows you how to save time and effort with jQuery—the library of prewritten JavaScript code—and the newest innovations from the jQuery UI plug-in —KEVIN KELLY, CO-FOUNDER OF WIRED CAN $52.99 ISBN: 978-1-491-94707-4 missingmanuals.com twitter: @missingmanuals facebook.com/MissingManuals David Sawyer McFarland JavaScript & jQuery The book that should have been in the box® David Sawyer McFarland Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo JavaScript & jQuery: The Missing Manual by David Sawyer McFarland Copyright © 2014 Sawyer McFarland Media, Inc All rights reserved Printed in the United States of America Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (http://safaribooksonline.com) For more information, contact our corporate/institutional sales department: (800) 9989938 or corporate@oreilly.com July 2008: First Edition October 2011: Second Edition September 2014: Third Edition Revision History for the Third Edition: 2014-09-10 First release See http://oreilly.com/catalog/errata.csp?isbn=9781491947074 for release details The Missing Manual is a registered trademark of O’Reilly Media, Inc The Missing Manual logo, and “The book that should have been in the box” are trademarks of O’Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media is aware of a trademark claim, the designations are capitalized While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained in it ISBN-13: 978-1-491-94707-4 [LSI] Contents The Missing Credits ix Introduction xiii What Is JavaScript? xiii What Is jQuery? xv HTML: The Barebones Structure xvi CSS: Adding Style to Web Pages xix Software for JavaScript Programming xxii About This Book xxiii The Very Basics xxvi About the Online Resources xxvii Part One: CHAPTER 1: Getting Started with JavaScript Writing Your First JavaScript Program Introducing Programming How to Add JavaScript to a Page Your First JavaScript Program 12 Writing Text on a Web Page 14 Attaching an External JavaScript File 15 Tracking Down Errors 18 CHAPTER 2: The Grammar of JavaScript 25 Statements 25 Built-In Functions 26 Types of Data 27 Variables 29 Working with Data Types and Variables 33 Tutorial: Using Variables to Create Messages 40 Tutorial: Asking for Information 42 Arrays 44 Tutorial: Writing to a Web Page Using Arrays 51 A Quick Object Lesson 55 Comments 58 iii CHAPTER 3: Adding Logic and Control to Your Programs 61 Making Programs React Intelligently 61 Tutorial: Using Conditional Statements 74 Handling Repetitive Tasks with Loops 78 Functions: Turn Useful Code Into Reusable Commands 85 Tutorial: A Simple Quiz 94 Part Two: CHAPTER 4: Getting Started with jQuery Introducing jQuery 105 About JavaScript Libraries 105 Getting jQuery 107 Adding jQuery to a Page 112 Modifying Web Pages: An Overview 113 Understanding the Document Object Model 117 Selecting Page Elements: The jQuery Way 119 Adding Content to a Page 127 Setting and Reading Tag Attributes 131 Reading, Setting, and Removing HTML Attributes 137 Acting on Each Element in a Selection 138 Automatic Pull Quotes 141 CHAPTER 5: Action/Reaction: Making Pages Come Alive with Events 147 What Are Events? 147 Using Events the jQuery Way 152 Tutorial: Introducing Events 155 More jQuery Event Concepts 160 Advanced Event Management 167 Tutorial: A One-Page FAQ 174 CHAPTER 6: Animations and Effects 183 jQuery Effects 183 Tutorial: Login Slider 188 Animations 191 Performing an Action After an Effect Is Completed 194 Tutorial: Animated Dashboard 197 jQuery and CSS3 Transitions and Animations 202 CHAPTER 7: Common jQuery Tasks 209 Swapping Images 209 Tutorial: Adding Rollover Images 215 Tutorial: Photo Gallery with Effects 220 Controlling How Links Behave 225 Opening External Links in a New Window 229 iv Contents Creating New Windows 231 Introducing jQuery Plug-ins 236 Build a Responsive Navigation Bar 241 CHAPTER 8: Enhancing Web Forms 251 Understanding Forms 251 Adding Smarts to Your Forms 262 Tutorial: Basic Form Enhancements 266 Form Validation 273 Validation Tutorial 286 Part Three: CHAPTER 9: Getting Started with jQuery UI Expanding Your Interface 299 What Is jQuery UI? 299 Why Use jQuery UI? 300 Using jQuery UI 302 Adding Messages with Dialog Boxes 305 Providing Information with Tooltips 321 Adding Tabbed Panels 326 Saving Space with Accordions 338 Adding Menus to a Page 343 CHAPTER 10: Forms Revisited 351 Picking Dates with Style 351 Stylish Select Menus 360 Styling Buttons 366 Improve Radio Buttons and Checkboxes 368 Providing Hints with Autocomplete 370 jQuery UI Form Widget Tutorial 379 CHAPTER 11: Customizing the Look of jQuery UI 385 Introducing ThemeRoller 385 Downloading and Using Your New Theme 390 Overriding jQuery UI Styles 392 CHAPTER 12: jQuery UI Interactions and Effects 399 The Draggable Widget 399 The Droppable Widget 412 Drag-and-Drop Tutorial 420 Sorting Page Items 426 jQuery UI Effects .438 Contents v Part Four: Advanced jQuery and JavaScript CHAPTER 13: Introducing Ajax 447 What Is Ajax? 447 Ajax: The Basics 449 Ajax the jQuery Way 455 JSON 477 Introducing JSONP 483 Adding a Flickr Feed to Your Site 484 Tutorial: Adding Flickr Images to Your Site 488 CHAPTER 14: Building a To-Do List Application 495 An Overview of the Application .495 Add a Button 496 Add a Dialog Box 498 Adding Tasks 502 Marking Tasks as Complete 508 Deleting Tasks 513 Going Further 515 Part Five: Tips, Tricks, and Troubleshooting CHAPTER 15: Getting the Most from jQuery 521 Useful jQuery Tips and Information 521 Using the jQuery Docs 526 Traversing the DOM 531 More Functions for Manipulating HTML 535 CHAPTER 16: Going Further with JavaScript 541 Working with Strings 541 Finding Patterns in Strings 546 Working with Numbers 562 Dates and Times 568 Writing More Efficient JavaScript 575 Putting It All Together 582 CHAPTER 17: Troubleshooting and Debugging 587 Top JavaScript Programming Mistakes 587 Debugging with the Console 597 Debugging Tutorial 609 vi Contents Part Six: Appendix APPENDIX A: JavaScript Resources 619 References 619 Basic JavaScript 620 jQuery 620 Advanced JavaScript 621 CSS 622 Index 623 Contents vii JQUERY() FUNCTION, $() FUNCTION AND 642 jQuery() function, $() function and, 521–522 jQuery Fundamentals (website), 621– 622 jQuery in Action (Bibeault and Katz), 621 jQuery objects, 119 jQuery’s documentation (website), 620 jQuery UI about, 299–300 adding to web page, 304–305 advantages of, 300–301 alternatives to, 302 class animations, 443–444 customizing look of CSS files and, 391–392 overding styles, 392–397 using ThemeRoller, 385–390 Download Builder, 302–303 downloading, 303–304 effects about, 300,438 animating changes between classes, 443–444 easing functions, 442–443 explode, 425 functions for adding, 439 functions for animating class changes, 444 options for, 440–442 passing to dialog box, 310,312 using, 439–440 events custom, 335,337 Draggable widget, 408–410,423– 425 Droppable widget, 416–420,425 opening dialog boxes with, 313– 315 Sortable widget, 432–435 interactions. See interactions, jQuery UI themes adding new themes to websites, 390–391 downloading and using new themes, 390–392 overriding styles, 392–397 to-do list application, building about, 495–496 INDEX adding buttons, 496–497,500– 501 adding dialog box, 498–502 adding tasks, 502–513 as ongoing project, 517 confirming deletions, 516 deleting tasks, 513–515 editing tasks, 515 formatting buttons, 500–501 saving lists, 516–517 using easing methods from, 193–194 website for finding, 302 widgets. See also widgets, jQuery UI user interface, 115 jScript, xiv js file extension, 9,11 JSMin, 585 JS-Must-Watch (website), 621 JSON (JavaScript Object Notation) about, 476–478 accessing data, 478–479 adding format to URL, 485 arrays in, 481–482 creating complex collections of data, 479–482 sending information to server using, 466 understanding Flickr JSON Feed, 487–488 JSONP (JSON with padding) about, 483 adding callback to URL, 485 K Katz, Yehuda, jQuery in Action, 621 Kendo UI, 302 keyboard events about, 151–152 keydown, 152 keypress, 152 keyup, 152 keywords, JavaScript, 31–32 L tags, 252–253 :last filter, 125 lastIndexOf() function, jQuery, 544– 545 layout (rendering) engine, in web browsers, 6–7 Learning PHP, MySQL, and JavaScript (O’Reilly), 455 less than operator (