www.it-ebooks.info www.it-ebooks.info JavaScript & jQuery The book that should have been in the box ® www.it-ebooks.info www.it-ebooks.info JavaScript & jQuery 2nd Edition The book that should have been in the box ® David Sawyer McFarland Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo www.it-ebooks.info JavaScript & jQuery: The Missing Manual, Second Edition by David Sawyer McFarland Copyright © 2012 David Sawyer McFarland 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 Media books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles: safari.oreilly.com For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com Printing History: July 2008: First Edition October 2011: Second Edition Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been in the box” are registered trademarks of O’Reilly Media, Inc JavaScript & jQuery: The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo 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, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein ISBN: 978-1-449-3-9902-3 [M] www.it-ebooks.info Table of Contents The Missing Credits xiii Introduction Part One: Getting Started with JavaScript Chapter 1: Writing Your First JavaScript Program 21 Introducing Programming What’s a Computer Program? How to Add JavaScript to a Page External JavaScript Files Your First JavaScript Program Writing Text on a Web Page Attaching an External JavaScript File Tracking Down Errors The Firefox JavaScript Console Displaying the Internet Explorer Console Opening the Chrome JavaScript Console Accessing the Safari Error Console 22 24 25 27 29 31 33 34 35 37 38 39 Chapter 2: The Grammar of JavaScript 41 Statements Built-In Functions Types of Data Numbers Strings Booleans Variables Creating a Variable Using Variables Working with Data Types and Variables Basic Math The Order of Operations 41 42 42 43 43 44 45 45 48 50 50 51 v www.it-ebooks.info Combining Strings Combining Numbers and Strings Changing the Values in Variables Tutorial: Using Variables to Create Messages Tutorial: Asking for Information Arrays Creating an Array Accessing Items in an Array Adding Items to an Array Deleting Items from an Array Tutorial: Writing to a Web Page Using Arrays A Quick Object Lesson Comments When to Use Comments Comments in This Book Chapter 3: Adding Logic and Control to Your Programs Making Programs React Intelligently Conditional Statement Basics Adding a Backup Plan Testing More Than One Condition More Complex Conditions Nesting Conditional Statements Tips for Writing Conditional Statements Tutorial: Using Conditional Statements Handling Repetitive Tasks with Loops While Loops Loops and Arrays For Loops Do/While Loops Functions: Turn Useful Code Into Reusable Commands Mini-Tutorial Giving Information to Your Functions Retrieving Information from Functions Keeping Variables from Colliding Tutorial: A Simple Quiz 51 52 53 55 57 59 60 62 63 66 66 70 72 73 74 77 77 79 82 83 86 88 88 89 93 93 95 97 98 100 101 102 104 105 108 Part Two: Getting Started with jQuery Chapter 4: Introducing jQuery 117 About JavaScript Libraries Getting jQuery Adding jQuery to a Page Modifying Web Pages: An Overview Understanding the Document Object Model vi table of contents www.it-ebooks.info 117 119 122 124 127 Selecting Page Elements: The jQuery Way Basic Selectors Advanced Selectors jQuery Filters Understanding jQuery Selections Adding Content to a Page Replacing and Removing Selections Setting and Reading Tag Attributes Classes Reading and Changing CSS Properties Changing Multiple CSS Properties at Once Reading, Setting, and Removing HTML Attributes Acting on Each Element in a Selection Anonymous Functions this and $(this) Automatic Pull Quotes Overview Programming 129 130 133 135 136 138 140 141 142 143 144 146 147 148 149 150 151 152 Chapter 5: Action/Reaction: Making Pages Come Alive with Events 157 What Are Events? Mouse Events Document/Window Events Form Events Keyboard Events Using Events the jQuery Way Tutorial: Introducing Events More jQuery Event Concepts Waiting for the HTML to Load jQuery Events The Event Object Stopping an Event’s Normal Behavior Removing Events Advanced Event Management Other Ways to Use the bind() Function Tutorial: A One-Page FAQ Overview of the Task The Programming 157 159 160 161 162 162 165 169 169 171 173 175 175 177 179 180 180 180 Chapter 6: Animations and Effects 185 jQuery Effects Basic Showing and Hiding Fading Elements In and Out Sliding Elements 185 187 187 188 table of contents www.it-ebooks.info vii Tutorial: Login Slider The Programming Animations Easing Performing an Action After an Effect Is Completed Tutorial: Animated Dashboard The Programming 190 191 192 194 196 198 200 Part Three: Building Web Page Features Chapter 7: Improving Your Images 207 Swapping Images Changing an Image’s src Attribute Preloading Images Rollover Images Tutorial: Adding Rollover Images Overview of the Task The Programming Tutorial: Photo Gallery with Effects Overview of Task The Programming Advanced Gallery with jQuery FancyBox The Basics Creating a Gallery of Images Customizing FancyBox Tutorial: FancyBox Photo Gallery 207 208 209 210 211 212 213 216 217 218 222 223 225 226 231 Chapter 8: Improving Navigation 235 Some Link Basics Selecting Links with JavaScript Determining a Link’s Destination Don’t Follow That Link Opening External Links in a New Window Creating New Windows Window Properties Opening Pages in a Window on the Page Tutorial: Opening a Page Within a Page Basic, Animated Navigation Bar The HTML The CSS The JavaScript The Tutorial viii table of contents www.it-ebooks.info 235 235 236 237 238 240 241 245 248 249 250 252 253 254 Index concatenation operator (+), 51 condition in do/while loop, 98 in for loop, 97 in if statement, 79–81 combining, 86–88 negating, 87–88 setting variables based on, 461–462 in while loop, 93–95 conditional statements, 77–89 conditions in, 79–81 combining, 86–88 negating, 87–88 else clause in, 82–83 else if statement, 83–85 if statement, 79–82 indentation in, 89 nesting if statements, 88–89 switch statement, 462–465 troubleshooting, 89 tutorials for, 89–92 console.log() function, Firebug, 479–480 :contains filter, 136 content distribution network (CDN), for jQuery, 119–120 content slider, 312–319 arrows in, 316, 317–318 autoplay for, 318 borders for, 317 creating, 313–316 dimensions of, 316–317 labels for, 318 navigation buttons, 317 orientation of, 318 slides of variable sizes, 319 controls See fields in forms conventions used in this book, 14–15, 74 conversions between data types automatic type conversion, 53 converting strings to numbers, 445–447 counters, in loops, 96, 97–98 creditcard validation rule, 282 Crockford, Douglas (author) Douglas Crockford’s World Wide Web, JavaScript section (web site), 501 JavaScript: The Good Parts (O’Reilly), 501 CSS (Cascading Style Sheets), 4, 7–9 absolute positioning, 189 applying to HTML elements, 124–127 classes, manipulating, 142–143 location of stylesheets, relative to scripts, 124 object literals for, 145–146 properties, manipulating, 143–146 resources for, 132, 409, 501–502 selectors See selectors for tabbed panels, 304–306 506 css() function, jQuery, 143–146 CSS sprites in content slider, 316 FancyBox using, 228 CSS: The Definitive Guide (O’Reilly), 502 CSS: The Missing Manual 2nd Edition (O’Reilly), 4, 132, 502 curly brackets ({ }) See braces currency, formatting, 448–449 cyclic option, FancyBox, 228 D \d symbol, in regular expressions, 432 \D symbol, in regular expressions, 432 dashboard tutorial, 198–204 database, browsing, 343 database server, 345 data property, event object, 174 data types, 42–45 See also booleans; numbers; strings in arrays, 61 automatic type conversion, 53 determining for an object, 72 Date() method, 450–451, 456–457 Date object, 450–451, 453 Datepicker plug-in, 125, 276 dates creating, 456–457 functions for, 450–457 regular expressions for, 439 users selecting, plug-in for, 125, 276 validating, in a form, 282 date validation rule, 282 dblclick event, 159 DDMegaMenu plug-in, 256 debugging, 477–489 See also troubleshooting installing Firebug for, 477–478 stepping through scripts with breakpoints, 485–489 tracking scripts, 479–480 tutorials for, 481–484, 489–496 viewing errors, 478–479 decision making statements See conditional statements declaration blocks, CSS styles, 8, declarations, CSS styles, delay() function, jQuery, 198 delegate() function, 422–423 descendent selectors, 133 development server, 346 dialog boxes alert message in, 42 prompt in, 57–58 digits validation rule, 282 index www.it-ebooks.info Index dimensions of browser window, 319–320 of content slider, 316–317 of document, 320 of web page elements, 319–322 disabling form fields, 269–271, 273–276 divide and assign operator (/=), 54 division operator (/), 50 div tag, HTML for tabbed panels, 302, 303–304 for tooltips, 326–327 doctype declaration, HTML, document dimensions of, determining, 320 events for, 160 document.getElementById() method, JavaScript, 128 document.getElementsByTagName() method, JavaScript, 128 Document Object Model See DOM $(document).ready() function, 123, 124, 170–171, 458 document-relative path URL, 28 document.write() method, JavaScript, 31–32, 56 Dojo Toolkit library, 119 dollar sign ($) in regular expressions, 432 preceding jQuery object, 129, 403–404 DOM (Document Object Model), 127–129 compared to jQuery selections, 136–138 finding elements in, 413–418 Do Object Oriented Programming with JavaScript (web site video), 500 dot syntax for JSON data, 372–373 for object properties or methods, 71 Douglas Crockford’s World Wide Web, JavaScript section (web site), 501 do/while loops, 98–99 Dreamweaver, 11 E each() function, jQuery, 147–150 easingIn option, FancyBox, 227 easingOut option, FancyBox, 227 easing (speed) of effects and animations, 185, 194–196, 227 Eclipse, 10 editors, 10–11 EditPlus, 11 effects, jQuery, 185–189 See also FancyBox plug-in callback function for, 196–198 completion of, performing actions after, 196– 198 fading elements in and out, 187–188 resources for, 409 sliding elements, 188–189 speed of, 185, 194–196 tutorials for, 190–192, 216–222 visibility of elements, 187 element selectors, 131 Eloquent JavaScript (web site), 501 else clause, conditional statements, 82–83 else if statement, 83–85 email addresses, regular expression for, 438– 439 email validation rule, 282 empty array, 61 empty() function, 421 empty string, 58 enabling form fields, 269–271 end() function, 418 equality operator (==), 80–81, 89 equal sign (=) assignment operator, 48 syntax errors involving, 473 == equality operator, 80–81, 89 === strict equality operator, 80 equalTo validation rule, 288 error() function, jQuery, 364 errors See also debugging; troubleshooting for form validation, 283–284, 288–291, 299–300 in Internet Explorer, blocked content, 31 preventing, 477 syntax errors, 31, 36–37, 467–477 types of, 471 viewing in Firebug, 478–479 from web server, with Ajax, 364 :even filter, 135 event bubbling, 176 event object, 173–175 events, 157–162, 421–424 applying to new elements, 422–423 assigning to selections, 163–164 document/window events, 160 form events, 161, 263–268 keyboard events, 162 mouse events, 159–160, 171–173 multiple, using the same function, 179 passing data to, 177–179 passing functions to, 163–164 removing, 175–176 resources for, 409 stopping normal behavior of, 175 tutorials for, 165–169, 180–184 index www.it-ebooks.info 507 Index examples See online resources; tutorials exclamation point (!) NOT operator, 87–88 != inequality operator, 80–81 !== strict inequality operator, 80 Expression Web Designer, 11 external HTML files, loading into web page, 349–356 external JavaScript files, 27–29, 457–459 attaching to web pages, 27–29, 33–34 compressing, 465–466 location of, 29 multiple, order of, 29 path errors involving, 474–476 external links, opening in new window, 238– 240 F fadeIn() function, jQuery, 34, 187 fadeOut() function, jQuery, 147, 187 fadeTo() function, jQuery, 188, 414 fadeToggle() function, jQuery, 187 false value See booleans FancyBox plug-in, 222–234 CSS sprites used by, 228 customizing, 226–231 downloading files for, 224–225 gallery page for, setting up, 223–225 opening a page within a page, 246–249 fancybox.png file, 228 FAQ (Frequently Asked Questions) tutorial, 180–184 fields in forms, 273 See also forms; specific fields changing value of, 267 checking status of, 262–263 clicking, 266–267 disabling, 269–271, 273–276 enabling, 269–271 focus on, 161, 264–265, 268–269, 273 getting value of, 261–262 hiding, 271–272, 276–278 leaving, 266 selecting, 259–261 setting value of, 261–262 showing, 271–272 tags for, 258–259 validating, 278–291 error messages for, 283–284, 288–291, 299–300 plug-in for, setting up, 280–281 on server, 289 tutorial for, 291–300 validation rules for, 281–283, 284–288 508 :file selector, 260 files, external See external JavaScript files filters for selectors, 135–136, 260–261 find() function, jQuery, 365, 407, 413, 414–415 Firebug plug-in, 37, 141, 477–489 installing, 477–478 stepping through scripts with breakpoints, 485–489 tracking scripts, 479–480 tutorials for, 481–484, 489–496 viewing errors, 478–479 Firefox JavaScript console in, 35–37 plug-ins for See Firebug plug-in; HTML Validator plug-in :first filter, 135 flags, boolean data type used for, 82 Flanagan, David (author) JavaScript: The Definitive Guide (O’Reilly), 498 Flash, 23 Flickr images from, adding to web page, 378–383 tutorials for, 383–387 floor() method, Match object, 449 focus event, 161, 264–265 focus for form fields, 161, 264–265, 268–269, 273 focus() function, jQuery, 265, 269, 273 focus() method, window object, 244 for loops, 97–98 Form plug-in, 388 forms, 257–268 events for, 161, 263–268 fields in checking status of, 262–263 clicking, 266–267 disabling, 269–271, 273–276 enabling, 269–271 focus on, 161, 264–265, 268–269, 273 getting values of, 261–262 hiding, 271–272, 276–278 leaving, 266 selecting, 259–261 setting values of, 261–262 showing, 271–272 tags for, 258–259 in HTML5, 22 resources for, 410 submitting, 161, 263–264 multiple times, preventing, 271 without reloading page, 343, 347–348, 365–370 tutorials for, 272–278 index www.it-ebooks.info Index validating, 278–291 error messages for, 283–284, 288–291, 299–300 plug-in for, setting up, 280–281 on server, 289 tutorial for, 291–300 validation rules for, 281–283, 284–288 form tag, HTML, 257–259 forward slash (/) division operator, 50 in HTML tags, /= divide and assign operator, 54 /* */ enclosing comments, 73 / / enclosing regular expressions, 431 // preceding comments, 73–74 Freeman, Elisabeth (author) Head First HTML with CSS and XHTML (O’Reilly), Freeman, Eric (author) Head First HTML with CSS and XHTML (O’Reilly), Frequently Asked Questions (FAQ) tutorial, 180–184 functions, built-in to JavaScript See built-in functions functions, jQuery See also specific functions anonymous, 148–149, 171–172 chaining, 137–138, 146 passing to events, 163–164 functions, user-defined in JavaScript, 100–108 calling, 101 creating, 100–101 libraries of See libraries location of, 101 naming, 100 parameters for, 102–104 for random numbers, 450 returning a value from, 104–105 scope of variables in, 105–108 tutorials for, 101–102, 108–114 undefined errors involving, 476 G getDate() method, Date object, 451 getDay() method, Date object, 451, 452 getElementById() method, document object, 128 getElementsByTagName() method, document object, 128 getFullYear() method, Date object, 451 get() function, jQuery, 356–357, 358, 365–370 getHours() method, Date object, 451, 452–456 getJSON() function, jQuery, 371–376, 378, 381 getMinutes() method, Date object, 451, 452–456 getMonth() method, Date object, 451, 451–452 getSeconds() method, Date object, 451, 452–456 getTime() method, Date object, 451 global variables, 107–108 GoMap plug-in, 387–400 information windows, adding, 397 map location, setting, 390–391 markers in map, adding, 393–396 navigation controls, removing, 392 scale of marker for, adding, 392 setting, 391 tutorials for, 397–400 type of map setting, 391–392 switching between, 392–393 using, 388–389 Google Chrome See Chrome Google Docs (web site), Google Doctype (web site), 497 Google Maps (web site) adding to web page, 387–400 as example of JavaScript, 2, 23, 124 grammatical errors See syntax errors graphics See images greater than operator (>), 80 greater than or equal to operator (>=), 80 H h1 tag, HTML, h2 tag, HTML, :has filter, 135 Head First HTML with CSS and XHTML (O’Reilly), Head First JavaScript (O’Reilly), 498 Head First PHP & MySQL (O’Reilly), 351 Head Rush Ajax (O’Reilly), 500 head tag, HTML, height See dimensions height() function, jQuery, 319–322 height property, windows, 242 Heilman, Chris (author) Show Love to the Object Literal (blog post), 500 :hidden filter, 136 :hidden selector, 260 hide() function, jQuery, 34, 187 hiding elements See visibility of elements hover event, 171–172, 210–211 href attribute, links, 236 HTML5: The Missing Manual (O’Reilly), html() function, jQuery, 138, 405–406, 419 index www.it-ebooks.info 509 Index HTML (Hypertext Markup Language), 4–7 See also web pages; specific tags effects for See effects, jQuery loading in web page from external file, 349– 352 manipulating, 124–127, 138–141, 146–147, 419–421 model of, for a web page See DOM rendered, viewing source for, 141 selecting tags in with JavaScript, 128–129 with jQuery See selectors tags, 5–7 types/versions of, 5, 22 validating, HTML-Kit, 10 html tag, HTML, HTML Validator plug-in, hyperlinks See links Hypertext Transfer Protocol See HTML hyphen (-), in CSS properties, 193 See also minus sign (-) I ID selecting tags by, in JavaScript, 128 selectors for, in jQuery, 130–131, 406 iframe tag, HTML, 245–249 if statement, 79–82, 89–92 combining conditions in, 86–88 condition in, 79–81 else clause in, 82–83 else if statement with, 83–85 indentation in, 89 negating conditions, 87–88 nesting, 88–89 troubleshooting, 89 images from Flickr, adding to web page, 378–383 photo gallery of with effects, 216–222 with FancyBox See FancyBox plug-in preloading, 209–210 rollover images, 210–216 src attribute, changing, 208–209 swapping, 207–211 tutorials for, 211–216, 216–222, 231–234 :image selector, 260 index, for array, 62–63 indexOf() method, strings, 427–428 inequality operator (!=), 80–81 infinite loops, 94 innerHeight() function, jQuery, 321 innerWidth() function, jQuery, 321 :input selector, 260 510 input tag, HTML, 258–259, 260 instances of objects, 71 Internet Explorer blocked JavaScript content, 31 Console in, 37–38 developer tools in, 141 interpreters, 25 An Introduction to JavaScript (web site), 498 isNaN() function, JavaScript, 42, 92, 447–448 J Java applets, 23 Java, compared to JavaScript, JavaScript, 1–3 adding to web page, 25–29 arrays See arrays case-sensitivity of, 473–474 as client-side language, 23 comments, 72–76, 124 compared to Java, conditional statements See conditional statements data types, 42–45 See also specific data types debugging See debugging editors for, 10–11 in external files See external JavaScript files functions, built-in See built-in functions functions, user-defined, 100–108 history of, 2–3 libraries for, 33, 117–119 See also jQuery loops See loops math operations, 50–51, 54–55 objects, 70–72 online examples using, 2, 23, 124 other software using, resources for, 11, 497–498, 500–501 as scripting language, 25 statements, 41–42 variables See variables JavaScript interpreter, 25 JavaScript Object Notation See JSON (JavaScript Object Notation) JavaScript Patterns (O’Reilly), 501 JavaScript Quick Reference from DevGuru (web site), 497 JavaScript: The Definitive Guide (O’Reilly), 498 JavaScript: The Good Parts (O’Reilly), 501 jqDock plug-in, 256 jQuery, 3–4, 117 Ajax, functions for error() function, 364 get() function, 356–357, 358, 365–370 getJSON() function, 371–376, 378, 381 load() function, 349–352, 352–356 index www.it-ebooks.info Index post() function, 356–357, 358 serialize() function, 360 animations, 192–198 attaching to a web page, 122–124 CSS classes, manipulating, 142–143 CSS properties, manipulating, 143–146 DOM, traversing, 413–418 downloading, 120–121 effects See effects events See events filters, 135–136, 260–261 forms See forms functions See also specific functions anonymous, 148–149, 171–172 chaining, 137–138, 146 passing to events, 163–164 HTML manipulation, 124–127, 138–141, 146–147, 419–421 image manipulation See images linking to CDN version of, 119–120 navigation See navigation online examples using, performance of, 407 plug-ins for See plug-ins, for jQuery resources for, 12, 312, 407–413, 499–500 selectors See selectors versions of, 122 jQuery API (Application Programming Interface), 407–413 jQuery Cheatsheet (web site article), 499 jQuery.com (web site), 499 jQuery Cookbook (O’Reilly), 499 jQuery Essentials (web site presentation), 499 jQuery for Designers (web site), 499 jQuery() function, 403–404, 408 jQuery in Action (Manning), 499 jQuery: Novice to Ninja (Sitepoint), 500 jQuery objects, 129, 403–404 jQuery Tools Tooltip plug-in, 338 jQuery Tutorials for Designers (web site article), 499 jQuery UI project, 312 jQuery UI Tooltip plug-in, 338 js file extension, 27, 33 js folder, 29 JSON (JavaScript Object Notation), 370–376 accessing data formatted as, 372–373 nested JSON objects, 373–376 receiving data formatted as, 370–372 JSONP (JSON with padding), 377–378 K Katz, Yehuda (author) jQuery in Action (Manning), 499 keyboard events, 162 keyboard shortcuts, 14 keydown event, 162 keypress event, 162 keyup event, 162 keywords (reserved words), 46–47, 472–473 L label tag, HTML, 259 :last filter, 135 layers of a web page, behavioral See JavaScript presentational See CSS (Cascading Style Sheets) structural See HTML (Hypertext Markup Language) layout of web pages content slider See content slider dimensions of elements, determining, 319– 322 position of elements, determing, 322–324 scrolling position, determing, 324–325 tabbed panels See tabbed panels layout/rendering engine, 25 Learning jQuery (web site), 499 Learning PHP, MySQL, and JavaScript (O’Reilly), 351 left angle bracket (