You are previewing JavaScript & DHTML Cookbook, 2nd Edition.
O'Reilly logo
JavaScript & DHTML Cookbook, 2nd Edition

Book Description

In today's Web 2.0 world, JavaScript and Dynamic HTML are at the center of the hot new approach to designing highly interactive pages on the client side. With this environment in mind, the new edition of this book offers bite-sized solutions to very specific scripting problems that web developers commonly face. Each recipe includes a focused piece of code that you can insert right into your application. Why is JavaScript & DHTML Cookbook so popular? After reading thousands of forum threads over the years, author and scripting pioneer Danny Goodman has compiled a list of problems that frequently vex scripters of various experience levels. For every problem he addresses, Goodman not only offers code, but a discussion of how and why the solution works. Recipes range from simple tasks, such as manipulating strings and validating dates in JavaScript, to entire libraries that demonstrate complex tasks, such as cross-browser positioning of HTML elements, sorting tables, and implementing Ajax features on the client. Ideal for novices as well as experienced scripters, this book contains more than 150 recipes for:

  • Working with interactive forms and style sheets

  • Presenting user-friendly page navigation

  • Creating dynamic content via Document Object Model scripting

  • Producing visual effects for stationary content

  • Positioning HTML elements

  • Working with XML data in the browser

Recipes in this Cookbook are compatible with the latest W3C standards and browsers, including Internet Explorer 7, Firefox 2, Safari, and Opera 9. Several new recipes provide client-side Ajax solutions, and many recipes from the previous edition have been revised to help you build extensible user interfaces for Web 2.0 applications. If you want to write your own scripts and understand how they work, rather than rely on a commercial web development framework, the JavaScript & DHTML Cookbook is a must.

Table of Contents

  1. Special Upgrade Offer
  2. A Note Regarding Supplemental Files
  3. Preface
    1. About You
    2. About the Recipes
    3. What’s in This Book
    4. Browser Platforms
    5. Conventions Used in This Book
    6. Using Code Examples
    7. Request for Comments
    8. Safari® Enabled
    9. Acknowledgments
  4. 1. Strings
    1. 1.0. Introduction
    2. 1.1. Concatenating (Joining) Strings
    3. 1.2. Improving String Handling Performance
    4. 1.3. Accessing Substrings
    5. 1.4. Changing String Case
    6. 1.5. Testing Equality of Two Strings
    7. 1.6. Testing String Containment Without Regular Expressions
    8. 1.7. Testing String Containment with Regular Expressions
    9. 1.8. Searching and Replacing Substrings
    10. 1.9. Using Special and Escaped Characters
    11. 1.10. Reading and Writing Strings for Cookies
    12. 1.11. Converting Between Unicode Values and String Characters
    13. 1.12. Encoding and Decoding URL Strings
    14. 1.13. Encoding and Decoding Base64 Strings
  5. 2. Numbers and Dates
    1. 2.0. Introduction
    2. 2.1. Converting Between Numbers and Strings
    3. 2.2. Testing a Number’s Validity
    4. 2.3. Testing Numeric Equality
    5. 2.4. Rounding Floating-Point Numbers
    6. 2.5. Formatting Numbers for Text Display
    7. 2.6. Converting Between Decimal and Hexadecimal Numbers
    8. 2.7. Generating Pseudorandom Numbers
    9. 2.8. Calculating Trigonometric Functions
    10. 2.9. Creating a Date Object
    11. 2.10. Calculating a Previous or Future Date
    12. 2.11. Calculating the Number of Days Between Two Dates
    13. 2.12. Validating a Date
  6. 3. Arrays and Objects
    1. 3.0. Introduction
    2. 3.1. Creating a Simple Array
    3. 3.2. Creating a Multidimensional Array
    4. 3.3. Converting Between Arrays and Strings
    5. 3.4. Doing Something with the Items in an Array
    6. 3.5. Sorting a Simple Array
    7. 3.6. Combining Arrays
    8. 3.7. Dividing Arrays
    9. 3.8. Creating a Custom Object
    10. 3.9. Simulating a Hash Table for Fast Array Lookup
    11. 3.10. Doing Something with a Property of an Object
    12. 3.11. Sorting an Array of Objects
    13. 3.12. Customizing an Object’s Prototype
    14. 3.13. Converting Arrays and Custom Objects to Strings
    15. 3.14. Using Objects to Reduce Naming Conflicts
  7. 4. Variables, Functions, and Flow Control
    1. 4.0. Introduction
    2. 4.1. Creating a JavaScript Variable
    3. 4.2. Creating a Named Function
    4. 4.3. Nesting Named Functions
    5. 4.4. Creating an Anonymous Function
    6. 4.5. Delaying a Function Call
    7. 4.6. Branching Execution Based on Conditions
    8. 4.7. Handling Script Errors Gracefully
    9. 4.8. Improving Script Performance
  8. 5. Browser Feature Detection
    1. 5.0. Introduction
    2. 5.1. Detecting the Browser Brand
    3. 5.2. Detecting an Early Browser Version
    4. 5.3. Detecting the Internet Explorer Version
    5. 5.4. Detecting the Mozilla Version
    6. 5.5. Detecting the Safari Version
    7. 5.6. Detecting the Opera Version
    8. 5.7. Detecting the Client Operating System
    9. 5.8. Detecting Object Support
    10. 5.9. Detecting Object Property and Method Support
    11. 5.10. Detecting W3C DOM Standard Support
    12. 5.11. Detecting the Browser Written Language
    13. 5.12. Detecting Cookie Availability
    14. 5.13. Defining Browser- or Feature-Specific Links
    15. 5.14. Testing on Multiple Browser Versions
  9. 6. Managing Browser Windows
    1. 6.0. Introduction
    2. 6.1. Living with Browser Window Control Limitations
    3. 6.2. Setting the Main Window’s Size
    4. 6.3. Positioning the Main Window
    5. 6.4. Maximizing the Main Window
    6. 6.5. Creating a New Window
    7. 6.6. Bringing a Window to the Front
    8. 6.7. Communicating with a New Window
    9. 6.8. Communicating Back to the Main Window
    10. 6.9. Using Internet Explorer Modal/Modeless Windows
    11. 6.10. Simulating a Cross-Browser Modal Dialog Window
    12. 6.11. Simulating a Window with Layers
  10. 7. Managing Multiple Frames
    1. 7.0. Introduction
    2. 7.1. Creating a Blank Frame in a New Frameset
    3. 7.2. Changing the Content of One Frame from Another
    4. 7.3. Changing the Content of Multiple Frames at Once
    5. 7.4. Replacing a Frameset with a Single Page
    6. 7.5. Avoiding Being “Framed” by Another Site
    7. 7.6. Ensuring a Page Loads in Its Frameset
    8. 7.7. Reading a Frame’s Dimensions
    9. 7.8. Resizing Frames
    10. 7.9. Setting Frameset Specifications Dynamically
  11. 8. Dynamic Forms
    1. 8.0. Introduction
    2. 8.1. Auto-Focusing the First Text Field
    3. 8.2. Performing Common Text Field Validations
    4. 8.3. Preventing Form Submission upon Validation Failure
    5. 8.4. Auto-Focusing an Invalid Text Field Entry
    6. 8.5. Using a Custom Validation Object
    7. 8.6. Changing a Form’s Action
    8. 8.7. Blocking Submissions from the Enter Key
    9. 8.8. Advancing Text Field Focus with the Enter Key
    10. 8.9. Submitting a Form by an Enter Key Press in Any Text Box
    11. 8.10. Disabling Form Controls
    12. 8.11. Hiding and Showing Form Controls
    13. 8.12. Allowing Only Numbers (or Letters) in a Text Box
    14. 8.13. Auto-Tabbing for Fixed-Length Text Boxes
    15. 8.14. Changing select Element Content
    16. 8.15. Copying Form Data Between Pages
  12. 9. Managing Events
    1. 9.0. Introduction
    2. 9.1. Equalizing the IE and W3C Event Models
    3. 9.2. Initiating a Process After the Page Loads
    4. 9.3. Appending Multiple Load Event Handlers
    5. 9.4. Determining the Coordinates of a Click Event
    6. 9.5. Preventing an Event from Performing Its Default Behavior
    7. 9.6. Blocking Duplicate Clicks
    8. 9.7. Determining Which Element Received an Event
    9. 9.8. Determining Which Mouse Button Was Pressed
    10. 9.9. Reading Which Character Key Was Typed
    11. 9.10. Reading Which Noncharacter Key Was Pressed
    12. 9.11. Determining Which Modifier Keys Were Pressed During an Event
    13. 9.12. Determining the Element the Cursor Rolled From/To
    14. 9.13. Synchronizing Sounds to Events
  13. 10. Page Navigation Techniques
    1. 10.0. Introduction
    2. 10.1. Loading a New Page or Anchor
    3. 10.2. Keeping a Page Out of the Browser History
    4. 10.3. Using a select Element for Navigation
    5. 10.4. Passing Data Between Pages via Cookies
    6. 10.5. Passing Data Between Pages via Frames
    7. 10.6. Passing Data Between Pages via URLs
    8. 10.7. Creating a Contextual (Right-Click) Menu
    9. 10.8. Creating Drop-Down Navigation Menus
    10. 10.9. Providing Navigation Trail Menus
    11. 10.10. Creating Expandable Menus
    12. 10.11. Creating Collapsible XML Menus
  14. 11. Managing Style Sheets
    1. 11.0. Introduction
    2. 11.1. Assigning Style Sheet Rules to an Element Globally
    3. 11.2. Assigning Style Sheet Rules to a Subgroup of Elements
    4. 11.3. Assigning Style Sheet Rules to an Individual Element
    5. 11.4. Importing External Style Sheets
    6. 11.5. Importing Browser-or Operating System-Specific Style Sheets
    7. 11.6. Changing Imported Style Sheets After Loading
    8. 11.7. Enabling/Disabling Style Sheets
    9. 11.8. Toggling Between Style Sheets for an Element
    10. 11.9. Overriding a Style Sheet Rule
    11. 11.10. Turning Arbitrary Content into a Styled Element
    12. 11.11. Creating Center-Aligned Body Elements
    13. 11.12. Reading Effective Style Sheet Property Values
    14. 11.13. Forcing Recent Browsers into Standards-Compatibility Mode
  15. 12. Visual Effects for Stationary Content
    1. 12.0. Introduction
    2. 12.1. Precaching Images
    3. 12.2. Swapping Images (Rollovers)
    4. 12.3. Reducing Rollover Image Downloads with JavaScript
    5. 12.4. Reducing Rollover Image Downloads with CSS
    6. 12.5. Dynamically Changing Image Sizes
    7. 12.6. Changing Text Style Properties
    8. 12.7. Offering Body Text Size Choices to Users
    9. 12.8. Creating Custom Link Styles
    10. 12.9. Changing Page Background Colors and Images
    11. 12.10. Hiding and Showing Elements
    12. 12.11. Adjusting Element Transparency
    13. 12.12. Creating Transition Visual Effects
    14. 12.13. Drawing Charts in the Canvas Element
  16. 13. Positioning HTML Elements
    1. 13.0. Introduction
    2. 13.1. Making an Element Positionable in the Document Space
    3. 13.2. Connecting a Positioned Element to a Body Element
    4. 13.3. Controlling Positioning via a DHTML JavaScript Library
    5. 13.4. Deciding Between div and span Containers
    6. 13.5. Adjusting Positioned Element Stacking Order (Z-order)
    7. 13.6. Centering an Element on Top of Another Element
    8. 13.7. Centering an Element in a Window or Frame
    9. 13.8. Determining the Location of a Nonpositioned Element
    10. 13.9. Animating Straight-Line Element Paths
    11. 13.10. Animating Circular Element Paths
    12. 13.11. Creating a Draggable Element
    13. 13.12. Scrolling div Content
    14. 13.13. Creating a Custom Scrollbar
    15. 13.14. Creating a Slider Control
  17. 14. Creating Dynamic Content
    1. 14.0. Introduction
    2. 14.1. Writing Dynamic Content During Page Loading
    3. 14.2. Creating New Page Content Dynamically
    4. 14.3. Including External HTML Content
    5. 14.4. Embedding XML Data
    6. 14.5. Embedding Data As JavaScript Objects
    7. 14.6. Transforming XML Data into HTML Tables
    8. 14.7. Transforming JavaScript Objects into HTML Tables
    9. 14.8. Converting an XML Node Tree to JavaScript Objects
    10. 14.9. Creating a New HTML Element
    11. 14.10. Creating Text Content for a New Element
    12. 14.11. Creating Mixed Element and Text Nodes
    13. 14.12. Inserting and Populating an iframe Element
    14. 14.13. Getting a Reference to an HTML Element Object
    15. 14.14. Referencing All Elements of the Same Class
    16. 14.15. Replacing Portions of Body Content
    17. 14.16. Removing Body Content
    18. 14.17. Using XMLHttpRequest for a REST Request
    19. 14.18. Using XMLHttpRequest for a SOAP Call
    20. 14.19. Sorting Dynamic Tables
    21. 14.20. Walking the Document Node Tree
    22. 14.21. Capturing Document Content
  18. 15. Dynamic Content Applications
    1. 15.0. Introduction
    2. 15.1. Displaying a Random Aphorism
    3. 15.2. Converting a User Selection into an Arbitrary Element
    4. 15.3. Automating the Search-and-Replace of Body Content
    5. 15.4. Designing a User-Editable Content Page
    6. 15.5. Creating a Slide Show
    7. 15.6. Auto-Scrolling the Page
    8. 15.7. Greeting Users with Their Time of Day
    9. 15.8. Displaying the Number of Days Before Christmas
    10. 15.9. Displaying a Countdown Timer
    11. 15.10. Creating a Calendar Date Picker
    12. 15.11. Displaying an Animated Progress Bar
  19. A. Keyboard Event Character Values
  20. B. Keyboard Key Code Values
  21. C. ECMAScript Reserved Keywords
  22. About the Author
  23. Colophon
  24. Special Upgrade Offer
  25. Copyright