Cover image for The Book of JavaScript, 2nd Edition

Book description

The Book of JavaScript teaches readers how to add interactivity, animation, and other tricks to their web sites with JavaScript. Rather than provide a series of cut-and-paste scripts, thau! takes the reader through a series of real world JavaScript code with an emphasis on understanding. Each chapter focuses on a few important JavaScript features, shows how professional web sites incorporate them, and takes readers through examples of how they might add those features to their own web sites. This thoroughly updated 2nd edition includes new chapters on Ajax, revised appendices, and new examples throughout. Summary sections and assignments close each chapter, making the book perfect for use in college courses or independent study. CD includes code and images for every example, answers to assignments, script libraries for hard-to-program applications, and many useful software programs.

Table of Contents

  1. The Book of JavaScript, 2nd Edition
    1. ADVANCE PRAISE FOR THE BOOK OF JAVASCRIPT, 2ND EDITION
    2. PRAISE FOR THE BOOK OF JAVASCRIPT, 1ST EDITION
    3. FOREWORD
    4. FOREWORD TO THE FIRST EDITION
    5. ACKNOWLEDGMENTS
    6. INTRODUCTION
      1. How This Book Is Organized
      2. Companion Website
    7. 1. WELCOME TO JAVASCRIPT!
      1. Is JavaScript for You?
      2. Is This Book for You?
      3. The Goals of This Book
      4. What Can JavaScript Do?
      5. What Are the Alternatives to JavaScript?
        1. CGI Scripting
          1. The Need for Back-and-Forth Communication
          2. Server Overload by Concurrent Access
          3. Security Restrictions
        2. VBScript
        3. Java
        4. Flash
      6. JavaScript's Limitations
        1. JavaScript Can't Talk to Servers
        2. JavaScript Can't Create Graphics
        3. JavaScript Works Differently in Different Browsers
      7. Getting Started
      8. Where JavaScript Goes on Your Web Pages
      9. Dealing with Older Browsers
      10. Your First JavaScript
      11. Summary
      12. Assignment
    8. 2. USING VARIABLES AND BUILT-IN FUNCTIONS TO UPDATE YOUR WEB PAGES AUTOMATICALLY
      1. Variables Store Information
        1. Syntax of Variables
        2. Naming Variables
        3. Arithmetic with Variables
      2. Write Here Right Now: Displaying Results
        1. Line-by-Line Analysis of Figure 2-4
      3. Strings
        1. Line-by-Line Analysis of Figure 2-6
      4. More About Functions
        1. alert()
        2. Line-by-Line Analysis of Figure 2-9
        3. prompt()
      5. Parameters
      6. Writing the Date to Your Web Page
        1. Built-in Date Functions
        2. Date and Time Methods
        3. Code for Writing the Date and Time
        4. Line-by-Line Analysis of Figure 2-12
          1. Getting the Date and Time
          2. Making Minor Adjustments
          3. Getting the String Right
          4. What Are Those Other Functions?
          5. JavaScript and HTML
          6. Why document.write()?
      7. How the European Space Agency Writes the Date to Its Page
      8. Summary
      9. Assignment
    9. 3. GIVING THE BROWSERS WHAT THEY WANT
      1. A Real-World Example of Browser Detection
      2. Browser Detection Methods
        1. Quick-but-Rough Browser Detection
        2. More Accurate Browser Detection
      3. Redirecting Visitors to Other Pages
      4. if-then Statements
        1. Boolean Expressions
        2. Nesting
        3. if-then-else Statements
        4. if-then-else-if Statements
        5. When and Where to Place Curly Brackets
      5. OR and AND
        1. OR
        2. AND
      6. Putting It All Together
      7. A Few More Details About Boolean Expressions
      8. How Netscape Provides Browser-Specific Content
      9. Summary
      10. Assignment
    10. 4. WORKING WITH ROLLOVERS
      1. A Real-World Example of Rollovers
      2. Triggering Events
        1. Event Types
          1. onClick
          2. onMouseOver and onMouseOut
          3. onMouseMove, onMouseUp, and onMouseDown
        2. Quotes in JavaScript
        3. Clicking the Link to Nowhere
        4. More Interesting Actions
      3. Swapping Images
      4. Working with Multiple Images
      5. What's with All the Dots?
        1. The document Object
        2. Object Properties
        3. Finally, Rollovers!
        4. Image Preloading
      6. How the Tin House Rollovers Work
      7. Summary
      8. Assignment
    11. 5. OPENING AND MANIPULATING WINDOWS
      1. Real-World Examples of Opening Windows to Further Information
      2. Working with Windows as Objects
      3. Opening Windows
        1. Manipulating the Appearance of New Windows
          1. The URL Parameter
          2. The HTML Name Parameter
          3. The Features Parameter
        2. Some Browsers and Computers Open Windows Differently
      4. Closing Windows
      5. Using the Right Name: How Windows See Themselves and Each Other
      6. Moving Windows to the Front or Back of the Screen
      7. Window Properties
        1. The status Property
        2. The opener Property
      8. More Window Methods
        1. Resizing Windows
        2. Moving Windows
      9. Summary
      10. Assignment
    12. 6. WRITING YOUR OWN JAVASCRIPT FUNCTIONS
      1. Functions as Shortcuts
        1. Basic Structure of JavaScript Functions
        2. Naming Your Functions
        3. Parentheses and Curly Brackets
        4. An Example of a Simple Function
      2. Writing Flexible Functions
        1. Using Parameters
        2. Line-by-Line Analysis of Figure 6-4
        3. Using More Than One Parameter
      3. Getting Information from Functions
        1. Line-by-Line Analysis of Figure 6-9
      4. Dealing with Y2K
        1. Line-by-Line Analysis of Figure 6-12
      5. Defining Variables Properly
      6. Summary
      7. Assignment
    13. 7. PROVIDING AND RECEIVING INFORMATION WITH FORMS
      1. Real-World Examples of Forms
      2. Form Basics
        1. Text Fields
        2. Buttons, Checkboxes, and Radio Buttons
          1. The Checkbox
          2. The Radio Button
          3. The Button
        3. Select Elements
        4. Textareas
        5. Final Form Comments
      3. Forms and JavaScript
        1. Naming Form Elements
        2. Naming Radio Buttons
        3. Naming Options
      4. Reading and Setting Form Elements
        1. Reading Information from Text Fields
        2. Setting the Value of a Text Field
        3. Textareas
        4. Checkboxes
        5. Radio Buttons
        6. Pull-Down Menus and Scrollable Lists
      5. Handling Events Using Form Elements
      6. Make this a Shortcut
      7. Using Pull-Down Menus as Navigational Tools
      8. One Last Forms Shortcut
      9. How the Doctors Without Borders Pull-Down Navigation Tool Works
      10. Summary
      11. Assignment
    14. 8. KEEPING TRACK OF INFORMATION WITH ARRAYS AND LOOPS
      1. Real-World Examples of Arrays
      2. JavaScript's Built-In Arrays
      3. Figuring Out How Many Items an Array Contains
      4. Going Through Arrays
      5. while Loops
        1. while Loops and Arrays
        2. Going Off the Deep End
        3. Using array.length in Your Loop
        4. An Incremental Shortcut
        5. Beware of Infinite Loops
      6. for Loops
      7. How AntWeb Checks Off All the Checkboxes
        1. Line-by-Line Analysis of Figure 8-11
      8. Creating Your Own Arrays
        1. Line-by-Line Analysis of Figure 8-12
      9. How the Book of JavaScript Tip Box Works
        1. Checking for Blank Statements
        2. Checking the Last Element in the Array
        3. Testing the Limits of Arrays
        4. The startScroll() Function
        5. A Streamlined Version
      10. Loops Can Nest
      11. Creating Arrays As You Go Along
      12. Associative Arrays
        1. Line-by-Line Analysis of Figure 8-18
      13. Summary
      14. Assignment
    15. 9. TIMING EVENTS
      1. Real-World Examples of Timing Events
      2. Setting an Alarm with setTimeout()
      3. Canceling an Alarm with clearTimeout()
        1. Line-by-Line Analysis of Figure 9-3
      4. Repeating Timed Actions
        1. Line-by-Line Analysis of Figure 9-5
        2. Using parseInt() with Form Elements
        3. Clearing Out a Time-Out Before You Set a New One
        4. Declaring Variables That Hold Time-Outs Outside Functions
      5. Building a Clock with Timing Loops
        1. Line-by-Line Analysis of Figure 9-7
      6. How the Book of JavaScript Website's Timer Works
      7. How Space.com's Countdown Script Works
        1. Calculating Times
        2. Global Variables and Constants
      8. A Timed Slide Show
        1. Line-by-Line Analysis of Figure 9-11
      9. A Safer Version of rotateImage()
        1. Why Declaring a Variable Outside a Function Is Unsafe
        2. Why You Can't Put var Inside a Timing Loop
        3. The Solution
        4. The Hitch
        5. The Solution to the Hitch
        6. Why image_array Is Declared Outside the rotateImage() Function
      10. Summary
      11. Assignment
    16. 10. USING FRAMES AND IMAGE MAPS
      1. A Real-World Example of Frames and Image Maps
      2. Frames
        1. Frame Basics
        2. Frames and JavaScript
          1. Line-by-Line Analysis of Figure 10-4
        3. Frames and Image Swaps
        4. Changing the Contents of Two Frames at Once
          1. Line-by-Line Analysis of Figure 10-9
        5. Frames Inside Frames
        6. JavaScript and Frames Inside Frames
        7. Frame Busting
        8. Using Frames to Store Information
        9. Line-by-Line Analysis of Figure 10-15
      3. Image Maps
        1. Image Map Basics
        2. Image Maps and JavaScript
      4. How Salon's Bug-Eating Script Works
        1. Salon's Nested Frames
        2. Salon's Image Map
        3. The changeMe() Function
      5. Summary
      6. Assignment
    17. 11. VALIDATING FORMS, MASSAGING STRINGS, AND WORKING WITH SERVER-SIDE PROGRAMS
      1. A Real-World Example of Form Validation
      2. Making Sure a Visitor Has Filled Out a Form Element
        1. Line-by-Line Analysis of Figure 11-2
          1. Checking Text Fields and Scrollable Lists
          2. Checking Radio Buttons
          3. Checking error_string
      3. String Handling
        1. Breaking Strings Apart
          1. indexOf() and lastIndexOf()
          2. Line-by-Line Analysis of Figure 11-4
          3. charAt()
          4. Checking Strings Character by Character
          5. substring()
          6. split()
        2. Matching String Patterns with Regular Expressions
          1. Repeating Items
          2. Beginnings and Endings
          3. Grouping
          4. The match() Method
      4. How Dictionary.com's Form Validators Work
        1. Line-by-Line Analysis of Figure 11-11
      5. Summary
      6. Assignment
    18. 12. SAVING VISITOR INFORMATION WITH COOKIES
      1. A Real-World Example of Cookies
      2. What Are Cookies?
      3. What Cookies Can and Can't Do
      4. Working with Cookies
        1. Setting Cookies
        2. Reading Cookies
        3. Resetting Cookies
        4. Setting More Than One Piece of Information
        5. Setting the Duration of a Cookie
        6. Who Can Read the Cookie?
          1. Letting One Page Read a Cookie Set on Another
          2. Dealing with Multiple Domains
        7. The Whole Cookie
        8. Setting Multiple Cookies
      5. Cookie Libraries
      6. A Cookie-Based Shopping Cart
        1. Adding an Item to the Cart
        2. The Checkout Page
        3. The readTheCookie() Function
        4. The checkOut() Function
      7. Summary
      8. Assignment
    19. 13. DYNAMIC HTML
      1. Real-World Examples of DHTML
      2. CSS Basics
        1. The <div> Tag
        2. Positioning a div with CSS
        3. Hiding a div
        4. Layering divs
      3. JavaScript and DHTML
      4. Making divs Move
      5. Using setTimeout() and clearTimeout() to Animate a Page
        1. Line-by-Line Analysis of Figure 13-10
          1. Generating Random Numbers
          2. Determining the Direction of an Image's Motion
      6. Changing the Contents of a div
      7. spans and getElementsByTagName()
      8. Advanced DOM Techniques
        1. W3C DOM Overview
        2. Creating and Adding Elements Using the W3C DOM
        3. Adding Text to an Element
        4. Adding Elements in the Middle of a Page and Removing Elements
        5. Additional DOM Details
          1. Node Properties
          2. Looping Through Lists
          3. Cloning and Replacing Nodes
        6. Manipulating a Page Using the DOM
      9. Fancy Event Handling
        1. The event Object
          1. Keyboard Events
          2. Mouse Events
        2. Adding Event Handlers Using JavaScript
      10. Drop-Down Menus
        1. Line-by-Line Analysis of Figure 13-23
          1. The closeAll() Function
          2. The changeDiv() Function
        2. The Borders
      11. Summary
      12. Assignment
    20. 14. AJAX BASICS
      1. A Real-World Example of Ajax
      2. Introduction to Ajax
        1. Asynchronicity—The A in Ajax
        2. XML—The X in Ajax
        3. JavaScript—The J in Ajax
      3. Creating and Sending Requests
        1. Creating a Request Object
        2. Telling the Object Where to Send the Request
        3. What to Do When the Request Is Answered
        4. Writing JavaScript That Is Called After the Request Has Been Answered
        5. Sending the Request
        6. Putting Everything Together
        7. Getting the Results
      4. Demonstrating Asynchronicity
        1. Line-by-Line Analysis of Figure 14-6
      5. Ajax and Usability
        1. The Back Button
        2. URLs and Bookmarking
        3. Poor Design
      6. To Ajax, or Not to Ajax
        1. Bad: Just Because You Can
        2. Bad: It's the Hot New Thing
        3. Bad: Replacing Something That Works with Something New and Confusing
        4. Good: In-Context Data Manipulation
        5. Good: Interactive Widgets
        6. Good: Saving State
      7. Summary
      8. Assignment
    21. 15. XML IN JAVASCRIPT AND AJAX
      1. A Real-World Example of Ajax and XML
      2. Google Suggest
      3. XML—the Extensible Markup Language
      4. The Rules of XML
        1. The XML Header
        2. XML Elements
        3. XML Attributes
        4. Illegal XML Characters
        5. XML Documents Have a Single Root Element
        6. Final Comments About the XML Format
      5. Processing XML
        1. Line-by-Line Analysis of Figure 15-6
          1. Visualizing the XML Document
          2. Navigating the XML Document
          3. Extracting Information from XML Elements
          4. Wrapping Up
        2. Internet Explorer, responseXML, and Client-Side Ajax
        3. Problems with White Space in XML
      6. Creating a Suggest Application for Translation
        1. Finding the Translations
        2. Displaying the Results
      7. Summary
      8. Assignment
    22. 16. SERVER-SIDE AJAX
      1. Real-World Examples of Server-Side Ajax
      2. The Power of Webservers
      3. A Server-Side Programming Language
      4. PHP Basics
      5. Sending Simple Input to PHP with a GET Request
        1. Passing Input in a URL
        2. Using PHP to Read the Inputs of a GET Request
      6. Creating a Google Suggest Application with an Ajax GET Request
        1. Contacting Third-Party Webservers with Ajax and PHP
        2. The JavaScript for the Homemade Google Suggest Application
          1. Dealing with Spaces in URLs
          2. The Response from Google
          3. Processing the Google Results—The Magic of eval()
          4. Displaying the Results
        3. Using PHP to Contact Other Webservers
      7. Ajax and the POST Method
        1. An Ajax-Friendly Form
        2. POSTing with Ajax
        3. Sending XML Information from the Browser to a Webserver
      8. HEAD Requests: Getting Information About a Server-Side File
        1. Adding Headers to Your Responses
        2. Headers and XML
      9. The Caching Problem
      10. File Handling in PHP
        1. Creating and Adding Contents to a Text File with PHP
        2. Reading Files in PHP
      11. When Communication Breaks Down
      12. Automatically Updating a Web Page When a Server-Side File Changes
        1. readFileDoFunction()
        2. callReadFile()
        3. callUpdateIfChanged()
        4. stopTimer()
        5. Recap and Breathe
        6. The Server-Side PHP Code
      13. Summary
      14. Assignment
    23. 17. PUTTING IT ALL TOGETHER IN A SHARED TO DO LIST
      1. Features of the To Do List Application
      2. To Do List Data Files
        1. userInfo.xml
        2. To Do List File
      3. To Do List Server Side
      4. The To Do List Client Side, Part 1: The HTML
      5. The To Do List Client Side, Part 2: The JavaScript
        1. The Function Road Map
        2. Logging In and Out
        3. Functions Related to Logging In
        4. Helper Functions
          1. getFirstValue()
          2. getUser()
          3. displayHomeInformation()
          4. Logging Out and Checking If Logged In
          5. logout()
          6. getNameFromCookie()
          7. checkIfLoggedIn()
        5. Displaying Available Lists
          1. displayLists()
          2. updateUserIfChanged()
        6. Displaying a Specific List
          1. readyDisplayList()
          2. displayList()
          3. To Do List Strings
          4. Adding the Content to the Web Page
          5. updateTodoIfChanged()
        7. Processing Changes to a List
          1. readyMarkDone()
          2. markDone()
          3. getItems() and saveAndReload()
          4. getItems()
        8. Limitations on Manipulating XML Documents
          1. saveAndReload()
          2. getItemString()
          3. saveAndReload()
          4. saveFileDoFunction()
        9. Adding a New Item
          1. getHighValue()
      6. A Few Closing Notes
        1. Client-Side or Server-Side Code?
        2. Security Issues
          1. Password Encryption
          2. Using Server-Side Sessions
      7. Summary
      8. Assignment
    24. 18. DEBUGGING JAVASCRIPT AND AJAX
      1. Good Coding Practices
        1. Starting with Comments
        2. Filling In the Code
      2. Avoiding Common Mistakes
        1. Use a Consistent Naming Convention
        2. Avoid Reserved Words
        3. Remember to Use Two Equal Signs in Logical Tests
        4. Use Quotation Marks Correctly
      3. Finding Bugs
        1. Printing Variables with alert() Statements
        2. Debugging Beyond Alerts
        3. Using Your Browser's Bug Detector
        4. Using JavaScript Debuggers
        5. Debugging Ajax in Firefox 1.5 and 2.0
        6. Other Debugging Resources
      4. Fixing Bugs
        1. Back Up Your Program
        2. Fix One Bug at a Time
        3. Avoid Voodoo Coding
        4. Look for Similar Bugs
        5. Clear Your Head
        6. Ask for Help
      5. Summary
    25. A. ANSWERS TO ASSIGNMENTS
      1. Chapter 2
      2. Chapter 3
      3. Chapter 4
      4. Chapter 5
        1. index.html
        2. image_page.html
      5. Chapter 6
      6. Chapter 7
      7. Chapter 8
      8. Chapter 9
      9. Chapter 10
        1. index.html
        2. assignment-nav.html
        3. blank.html
      10. Chapter 11
        1. index.html
        2. assignment-nav.html
        3. blank.html
      11. Chapter 12
      12. Chapter 13
      13. Chapter 14
        1. addressBook.xml
        2. index.html
      14. Chapter 17
        1. Join Functions
        2. Giving a User Access to Your To Do List
    26. B. RESOURCES
      1. Tutorials
        1. HTML Tutorials
        2. Cascading Style Sheets Tutorials
        3. Advanced Topics in JavaScript
          1. Object-Oriented Programming
          2. Advanced Event Handling
          3. Exception Handling
        4. Ajax Tutorials
      2. Example JavaScript and Ajax Code
      3. Good Ajax Websites
      4. Ajax Frameworks
        1. JavaScript
        2. PHP
        3. Java
        4. .NET
        5. Ruby
    27. C. REFERENCE TO JAVASCRIPT OBJECTS AND FUNCTIONS
      1. alert() [FF, IE 3]
      2. Anchor
        1. Properties
      3. Applet
        1. Properties
        2. Methods
      4. Area [FF, IE 3]
      5. Array [FF, IE 3]
        1. Properties
        2. Methods
        3. Less Common Methods
      6. Button (Including Submit and Reset Buttons)
        1. Properties
        2. Handlers
        3. Methods
      7. Checkbox
        1. Properties
        2. Handlers
        3. Methods
      8. clearInterval() [FF, IE 4]
      9. clearTimeout() [FF, IE 3]
      10. confirm() [FF, IE 3]
      11. Date
        1. Methods for Getting the Date and Time
        2. Methods for Getting the UTC Date and Time
        3. The Problematic getYear() Method
        4. Methods for Setting the Date and Time
        5. Methods for Setting the UTC Date and Time
        6. Methods for Converting Dates to Strings
      12. Document
        1. Properties
        2. Methods
      13. elements[] [FF, IE 3]
      14. escape() [FF, IE 3]
      15. eval() [FF, IE 3]
      16. Event
        1. Properties
      17. FileUpload
        1. Properties
        2. Methods
        3. Handlers
      18. Form
        1. Properties
        2. Methods
        3. Handlers
      19. Hidden
        1. Properties
      20. History
        1. Properties
        2. Methods
      21. HTMLElement [FF, IE 4]
        1. Properties
        2. Methods
        3. Handlers [FF, IE 4]
      22. Image
        1. Properties
      23. isNaN() [FF, IE 4]
      24. Link
      25. Location
        1. Properties
        2. Methods
      26. Math [FF, IE 3]
        1. Properties
        2. Methods
      27. Navigator
        1. Properties
        2. Less Common Properties
        3. Methods
      28. Number
        1. Properties
        2. Methods
      29. Option
        1. Properties
      30. parseInt() [FF, IE 3]
      31. parseFloat() [FF, IE 3]
      32. Password
        1. Properties
        2. Methods
        3. Handlers
      33. prompt()
      34. Radio
        1. Properties
        2. Methods
        3. Handlers
      35. Reset
      36. Screen
        1. Properties
      37. Select
        1. Properties
        2. Handlers
      38. setInterval() [FF, IE 4]
      39. setTimeout() [FF, IE 3]
      40. String
        1. Properties
        2. Methods
      41. Style [FF, IE 4]
        1. Properties [FF, IE 5]
      42. Submit
      43. Text
      44. Textarea
        1. Properties
        2. Methods
        3. Handlers
      45. this [FF, IE 3]
      46. unescape() [FF, IE 3]
      47. var [FF, IE 3]
      48. window
        1. Properties
        2. Methods
        3. Features
        4. Methods
        5. Less Common Methods
        6. Handlers
      49. XMLHttpRequest [FF] and ActiveXObject("Microsoft.XMLHTTP") [IE 5.5]
        1. Properties
        2. Methods
        3. Handlers
    28. D. CHAPTER 15'S ITALIAN TRANSLATOR AND CHAPTER 17'S TO DO LIST APPLICATION
      1. Chapter 15's Italian Translator
      2. Chapter 17's To Do List Application
        1. todo.html
        2. readXMLFile.php
        3. saveXMLFile.php
    29. COLOPHON