The Book of JavaScript · 2nd Edition by thau! -- Read -- Imperial Library of Trantor

Index

The Book of JavaScript, 2nd Edition

ADVANCE PRAISE FOR THE BOOK OF JAVASCRIPT, 2ND EDITION PRAISE FOR THE BOOK OF JAVASCRIPT, 1ST EDITION FOREWORD FOREWORD TO THE FIRST EDITION ACKNOWLEDGMENTS INTRODUCTION

How This Book Is Organized Companion Website

1. 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

The Need for Back-and-Forth Communication Server Overload by Concurrent Access Security Restrictions

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

2. 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

Getting the Date and Time Making Minor Adjustments Getting the String Right What Are Those Other Functions? JavaScript and HTML Why document.write()?

How the European Space Agency Writes the Date to Its Page Summary Assignment

3. 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

4. WORKING WITH ROLLOVERS

A Real-World Example of Rollovers Triggering Events

Event Types

onClick onMouseOver and onMouseOut onMouseMove, onMouseUp, and onMouseDown

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

5. 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

The URL Parameter The HTML Name Parameter The Features Parameter

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

6. 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

7. PROVIDING AND RECEIVING INFORMATION WITH FORMS

Real-World Examples of Forms Form Basics

Text Fields Buttons, Checkboxes, and Radio Buttons

The Checkbox The Radio Button The Button

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

8. 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

9. 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

10. USING FRAMES AND IMAGE MAPS

A Real-World Example of Frames and Image Maps Frames

Frame Basics Frames and JavaScript

Line-by-Line Analysis of Figure 10-4

Frames and Image Swaps Changing the Contents of Two Frames at Once

Line-by-Line Analysis of Figure 10-9

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

11. 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

Checking Text Fields and Scrollable Lists Checking Radio Buttons Checking error_string

String Handling

Breaking Strings Apart

indexOf() and lastIndexOf() Line-by-Line Analysis of Figure 11-4 charAt() Checking Strings Character by Character substring() split()

Matching String Patterns with Regular Expressions

Repeating Items Beginnings and Endings Grouping The match() Method

How Dictionary.com's Form Validators Work

Line-by-Line Analysis of Figure 11-11

Summary Assignment

12. 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?

Letting One Page Read a Cookie Set on Another Dealing with Multiple Domains

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

13. 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

Generating Random Numbers Determining the Direction of an Image's Motion

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

Node Properties Looping Through Lists Cloning and Replacing Nodes

Manipulating a Page Using the DOM

Fancy Event Handling

The event Object

Keyboard Events Mouse Events

Adding Event Handlers Using JavaScript

Drop-Down Menus

Line-by-Line Analysis of Figure 13-23

The closeAll() Function The changeDiv() Function

The Borders

Summary Assignment

14. 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

15. 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

Visualizing the XML Document Navigating the XML Document Extracting Information from XML Elements Wrapping Up

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

16. 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

Dealing with Spaces in URLs The Response from Google Processing the Google Results—The Magic of eval() Displaying the Results

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

17. 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

getFirstValue() getUser() displayHomeInformation() Logging Out and Checking If Logged In logout() getNameFromCookie() checkIfLoggedIn()

Displaying Available Lists

displayLists() updateUserIfChanged()

Displaying a Specific List

readyDisplayList() displayList() To Do List Strings Adding the Content to the Web Page updateTodoIfChanged()

Processing Changes to a List

readyMarkDone() markDone() getItems() and saveAndReload() getItems()

Limitations on Manipulating XML Documents

saveAndReload() getItemString() saveAndReload() saveFileDoFunction()

Adding a New Item

getHighValue()

A Few Closing Notes

Client-Side or Server-Side Code? Security Issues

Password Encryption Using Server-Side Sessions

Summary Assignment

18. 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

A. ANSWERS TO ASSIGNMENTS

Chapter 2 Chapter 3 Chapter 4 Chapter 5

index.html image_page.html

Chapter 6 Chapter 7 Chapter 8 Chapter 9 Chapter 10

index.html assignment-nav.html blank.html

Chapter 11

index.html assignment-nav.html blank.html

Chapter 12 Chapter 13 Chapter 14

addressBook.xml index.html

Chapter 17

Join Functions Giving a User Access to Your To Do List

B. RESOURCES

Tutorials

HTML Tutorials Cascading Style Sheets Tutorials Advanced Topics in JavaScript

Object-Oriented Programming Advanced Event Handling Exception Handling

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() [FF, IE 3] Anchor

Properties

Applet

Properties Methods

Area [FF, IE 3] Array [FF, IE 3]

Properties Methods Less Common Methods

Button (Including Submit and Reset Buttons)

Properties Handlers Methods

Checkbox

Properties Handlers Methods

clearInterval() [FF, IE 4] clearTimeout() [FF, IE 3] confirm() [FF, IE 3] Date

Methods for Getting the Date and Time Methods for Getting the UTC Date and Time The Problematic getYear() Method Methods for Setting the Date and Time Methods for Setting the UTC Date and Time Methods for Converting Dates to Strings

Document

Properties Methods

elements[] [FF, IE 3] escape() [FF, IE 3] eval() [FF, IE 3] Event

Properties

FileUpload

Properties Methods Handlers

Form

Properties Methods Handlers

Hidden

Properties

History

Properties Methods

HTMLElement [FF, IE 4]

Properties Methods Handlers [FF, IE 4]

Image

Properties

isNaN() [FF, IE 4] Link Location

Properties Methods

Math [FF, IE 3]

Properties Methods

Navigator

Properties Less Common Properties Methods

Number

Properties Methods

Option

Properties

parseInt() [FF, IE 3] parseFloat() [FF, IE 3] Password

Properties Methods Handlers

prompt() Radio

Properties Methods Handlers

Reset Screen

Properties

Select

Properties Handlers

setInterval() [FF, IE 4] setTimeout() [FF, IE 3] String

Properties Methods

Style [FF, IE 4]

Properties [FF, IE 5]

Submit Text Textarea

Properties Methods Handlers

this [FF, IE 3] unescape() [FF, IE 3] var [FF, IE 3] window

Properties Methods Features Methods Less Common Methods Handlers

XMLHttpRequest [FF] and ActiveXObject("Microsoft.XMLHTTP") [IE 5.5]

Properties Methods Handlers

D. CHAPTER 15'S ITALIAN TRANSLATOR AND CHAPTER 17'S TO DO LIST APPLICATION

Chapter 15's Italian Translator Chapter 17's To Do List Application

todo.html readXMLFile.php saveXMLFile.php

COLOPHON

← Prev
Back
Next →

← Prev
Back
Next →