Javascript: Practical Guide To Interactive Web Pages

• Introduction
• Welcome To Javascript
• USING VARIABLES AND BUILT-IN FUNCTIONS TO UPDATE YOUR WEB PAGES AUTOMATICALLY
• GIVING THE BROWSERS WHAT THEY WANT
• WORKING WITH ROLLOVERS
• OPENING AND MANIPULATING WINDOWS
• WRITING YOUR OWN JAVASCRIPT FUNCTIONS
• PROVIDING AND RECEIVING INFORMATION WITH FORMS
• KEEPING TRACK OF INFORMATION WITH ARRAYS AND LOOPS
• TIMING EVENTS
• USING FRAMES AND IMAGE MAPS
• VALIDATING FORMS, MASSAGING STRINGS, AND WORKING WITH SERVER-SIDE PROGRAMS
• SAVING VISITOR INFORMATION WITH COOKIES
• DYNAMIC HTML
• AJAX BASICS
• XML IN JAVASCRIPT AND AJAX
• SERVER-SIDE AJAX
• PUTTING IT ALL TOGETHER IN A SHARED TO DO LIST
• DEBUGGING JAVASCRIPT AND AJAX
• ANSWERS TO ASSIGNMENTS
• RESOURCES
• REFERENCE TO JAVASCRIPT OBJECTS AND FUNCTIONS
• CHAPTER 15'S ITALIAN TRANSLATOR AND CHAPTER 17'S TO DO LIST APPLICATION

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