This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.
Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis.
INTERIOR DESIGNER Gary Adair
COVER DESIGNER Aren Howell
Contents at a Glance Introduction
PART I Getting Started
1
3
1
Understanding JavaScript
5
2
Creating a Simple Script
19
3
How JavaScript Programs Work
33
PART II Learning JavaScript Basics
41
4
Using Functions and Variables
43
5
Using Strings and Arrays
63
6
Testing and Comparing Values
79
7
Repeating Yourself: Using Loops
91
8
Using Math and Date Functions
103
PART III The Document Object Model (DOM) 9
115
Working with the Document Object Model
117
10
Responding to Events
131
11
Using Windows and Frames
147
12
Getting Data with Forms
165
13
Using Graphics and Animation
183
PART IV Moving on to Advanced JavaScript Features
199
14
Creating Cross-Browser Scripts
201
15
Creating Custom Objects
215
16
Working with Sounds and Plug-ins
225
17
Debugging JavaScript Applications
239
PART V Working with Dynamic HTML (DHTML)
255
18
Working with Style Sheets
257
19
Using Dynamic HTML (DHTML)
275
20
Using Advanced DOM Features
289
PART VI Putting it all Together
303
21
Improving a Web Page with JavaScript
305
22
Creating a JavaScript Game
319
23
Creating DHTML Applications
337
24
JavaScript Tips and Tricks
351
PART VII Appendices
363
A
Other JavaScript Resources
365
B
Tools for JavaScript Developers
369
C
Glossary
373
D
JavaScript Quick Reference
377
E
DOM Quick Reference
387
Index
393
Contents Introduction
1
How to Use This Book ............................................................................................1 Q&A, Quiz, and Exercises ......................................................................................2 This Book’s Web Site ..............................................................................................2
PART I Getting Started HOUR 1 Understanding JavaScript
3 5
Learning Web Scripting Basics................................................................................6 Scripts and Programs..........................................................................................6 Introducing JavaScript ........................................................................................7 How JavaScript Fits into a Web Page ......................................................................8 Using External JavaScript files ........................................................................10 Browsers and JavaScript ........................................................................................10 Netscape and Internet Explorer ........................................................................10 Versions of JavaScript ......................................................................................11 Specifying JavaScript Versions ........................................................................12 JavaScript Beyond the Browser........................................................................12 Alternatives to JavaScript ......................................................................................13 Java ..................................................................................................................13 ActiveX ............................................................................................................13 VBScript ..........................................................................................................14 CGI and Server-Side Scripting ........................................................................14 Summary ................................................................................................................15 Q&A ......................................................................................................................15 Quiz........................................................................................................................16 Questions ..........................................................................................................16 Answers ............................................................................................................17 Exercises ................................................................................................................17 HOUR 2 Creating a Simple Script
19
Tools for Scripting ................................................................................................20 What Time is It? ....................................................................................................21 Beginning the Script ..............................................................................................21 Adding JavaScript Statements ..............................................................................22 Storing Data in Variables..................................................................................22 Calculating the Results ....................................................................................23 Creating Output......................................................................................................23
vi
Sams Teach Yourself JavaScript in 24 Hours
Adding the Script to a Web Page ..........................................................................24 Testing the Script ..................................................................................................25 Modifying the Script ........................................................................................26 Dealing with JavaScript Errors ........................................................................28 Workshop: Hiding Scripts from Older Browsers ..................................................29 Summary ................................................................................................................30 Q&A ......................................................................................................................30 Quiz........................................................................................................................31 Questions ..........................................................................................................31 Answers ............................................................................................................32 Exercises ................................................................................................................32 HOUR 3 How JavaScript Programs Work
PART II Learning JavaScript Basics HOUR 4 Using Functions and Variables
41 43
Using Functions ....................................................................................................44 Defining a Function..........................................................................................44 Calling the Function ........................................................................................45 Returning a Value ............................................................................................47 Understanding Expressions and Operators............................................................49 Using JavaScript Operators ..............................................................................49 Operator Precedence ........................................................................................50 Using Variables ......................................................................................................51 Choosing Variable Names ................................................................................51 Using Local and Global Variables....................................................................52 Assigning Values to Variables ..........................................................................54
Contents
vii
Data Types in JavaScript........................................................................................55 Converting Between Data Types ..........................................................................56 Workshop: Storing User Data in Variables............................................................57 Summary ................................................................................................................59 Q&A ......................................................................................................................59 Quiz........................................................................................................................60 Questions ..........................................................................................................60 Answers ............................................................................................................61 Exercises ................................................................................................................61 HOUR 5 Using Strings and Arrays
63
Using String Objects ..........................................................................................64 Creating a String Object ................................................................................64 Assigning a Value ............................................................................................64 Calculating the String’s Length........................................................................66 Converting the String’s Case ............................................................................66 Working with Substrings ......................................................................................67 Using Part of a String ......................................................................................67 Getting a Single Character ..............................................................................68 Finding a Substring ..........................................................................................68 Using Numeric Arrays ..........................................................................................69 Creating a Numeric Array ................................................................................69 Understanding Array Length ............................................................................70 Accessing Array Elements................................................................................70 Using String Arrays ..............................................................................................71 Creating a String Array ....................................................................................71 Splitting a String ..............................................................................................71 Sorting a String Array ......................................................................................72 Sorting a Numeric Array........................................................................................72 Workshop: Displaying a Scrolling Message..........................................................73 Summary ................................................................................................................75 Q&A ......................................................................................................................76 Quiz ......................................................................................................................76 Questions ..........................................................................................................76 Answers ............................................................................................................77 Exercises ................................................................................................................77 HOUR 6 Testing and Comparing Values
79
The if Statement ..................................................................................................80 Conditional Operators ......................................................................................80 Combining Conditions with Logical Operators ..............................................81 The else Keyword ..........................................................................................82
viii
Sams Teach Yourself JavaScript in 24 Hours
Using Shorthand Conditional Expressions ............................................................83 Using Multiple Conditions with switch ..............................................................84 Workshop: Evaluating a User Response................................................................85 Summary ................................................................................................................87 Q&A ......................................................................................................................87 Quiz........................................................................................................................88 Questions ..........................................................................................................88 Answers ............................................................................................................88 Exercises ................................................................................................................89 HOUR 7 Repeating Yourself: Using Loops
91
Using for Loops....................................................................................................92 Using while Loops................................................................................................94 Using do…while Loops..........................................................................................95 Working with Loops ..............................................................................................95 Creating an Infinite Loop ................................................................................96 Escaping from a Loop ......................................................................................96 Continuing a Loop............................................................................................97 Using for…in loops ..............................................................................................97 Workshop: Working with Arrays and Loops ........................................................98 Summary ..............................................................................................................100 Q&A ....................................................................................................................100 Quiz......................................................................................................................101 Questions ........................................................................................................101 Answers ..........................................................................................................101 Exercises ..............................................................................................................101 HOUR 8 Using Math and Date Functions
103
What Is an Object? ..............................................................................................104 Creating Objects ............................................................................................104 Object Properties and Values..........................................................................104 Understanding Methods..................................................................................105 Using the with Keyword................................................................................105 The Math Object ..................................................................................................106 Rounding and Truncating ..............................................................................106 Generating Random Numbers ........................................................................106 Working with Dates ............................................................................................107 Creating a Date Object ..................................................................................107 Setting Date Values ........................................................................................107 Getting Date Values ........................................................................................108 Working with Time Zones..............................................................................108 Converting Between Date Formats ................................................................109
Contents
ix
Workshop: Working with the Math Object ..........................................................109 Summary ..............................................................................................................112 Q&A ....................................................................................................................112 Quiz......................................................................................................................113 Questions ........................................................................................................113 Answers ..........................................................................................................114 Exercises ..............................................................................................................114
PART III The Document Object Model (DOM) HOUR 9 Working with the Document Object Model
115 117
Understanding the Document Object Model ......................................................118 History of the DOM ......................................................................................119 DOM Levels ..................................................................................................119 Using window Objects ........................................................................................120 Working with Web Documents............................................................................120 Getting Information About the Document ....................................................121 Writing Text in a Document ..........................................................................122 Clearing and Rewriting Documents ..............................................................122 Using Links and Anchors ..............................................................................123 Accessing Browser History ................................................................................124 Working with the location Object ....................................................................125 Reading Information about the Browser ............................................................126 Workshop: Creating Back and Forward Buttons ................................................126 Summary ..............................................................................................................128 Q&A ....................................................................................................................129 Quiz......................................................................................................................129 Questions ........................................................................................................129 Answers ..........................................................................................................130 Exercises ..............................................................................................................130 HOUR 10 Responding to Events
131
Understanding Event Handlers ............................................................................132 Objects and Events ........................................................................................132 Creating an Event Handler ............................................................................132 Changing Event Handlers with JavaScript ....................................................133 Using the event Object..................................................................................134 Internet Explorer event Properties ................................................................134 Netscape event Properties ............................................................................135 Using Mouse Events ............................................................................................135 Over and Out ..................................................................................................135 Using the onMouseMove event........................................................................136 Ups and Downs ..............................................................................................136
x
Sams Teach Yourself JavaScript in 24 Hours
Using Keyboard Events ......................................................................................138 Displaying Typed Characters ........................................................................138 Using the onLoad and onUnload Events ............................................................140 Workshop: Adding Link Descriptions to a Web Page ........................................141 Summary ..............................................................................................................144 Q&A ....................................................................................................................144 Quiz......................................................................................................................145 Questions ........................................................................................................145 Answers ..........................................................................................................145 Exercises ..............................................................................................................146 HOUR 11 Using Windows and Frames
147
Controlling Windows with Objects ....................................................................148 Creating a New Window ................................................................................148 Opening and Closing Windows ......................................................................149 Moving and Resizing Windows ..........................................................................150 Using Timeouts ....................................................................................................152 Updating a Page with Timeouts ....................................................................152 Displaying Dialog Boxes ....................................................................................154 Creating a Script to Display Dialog Boxes ....................................................156 Working with Frames ..........................................................................................157 Using JavaScript Objects for Frames ............................................................157 The frames Array ..........................................................................................158 Workshop: Creating a Navigation Frame ............................................................159 Summary ..............................................................................................................161 Q&A ....................................................................................................................161 Quiz......................................................................................................................162 Questions ........................................................................................................162 Answers ..........................................................................................................162 Exercises ..............................................................................................................163 HOUR 12 Getting Data with Forms
165
The Basics of HTML Forms................................................................................166 Defining a Form ............................................................................................166 Using the form Object with JavaScript ..............................................................166 The form Object’s Properties ........................................................................167 Submitting and Resetting Forms ....................................................................167 Detecting Form Events ..................................................................................167 Scripting Form Elements ....................................................................................168 Text Fields ......................................................................................................168 Text Areas ......................................................................................................169 Working with Text in Forms ..........................................................................169 Buttons............................................................................................................170
Contents
xi
Check Boxes ..................................................................................................170 Radio Buttons ................................................................................................171 Drop-Down Lists ............................................................................................172 Displaying Data from a Form..............................................................................174 Sending Form Results by Email ..........................................................................176 Workshop: Validating a Form ..............................................................................177 Summary ..............................................................................................................179 Q&A ....................................................................................................................179 Quiz......................................................................................................................180 Questions ........................................................................................................180 Answers ..........................................................................................................180 Exercises ..............................................................................................................181 HOUR 13 Using Graphics and Animation
183
Using Image Maps with JavaScript ....................................................................184 Using Dynamic Images in JavaScript..................................................................186 Working with the images Array ....................................................................187 Preloading Images ..........................................................................................188 Creating Rollovers ..............................................................................................188 Workshop: Creating a Simple Animation............................................................190 Creating the Images........................................................................................190 Creating the HTML Document ......................................................................191 Defining the Variables ....................................................................................191 Stepping through the Animation ....................................................................192 Putting It All Together ....................................................................................193 Summary ..............................................................................................................195 Q&A ....................................................................................................................195 Quiz......................................................................................................................196 Questions ........................................................................................................196 Answers ..........................................................................................................196 Exercises ..............................................................................................................197
PART IV Moving on to Advanced JavaScript Features HOUR 14 Creating Cross-Browser Scripts
199 201
Reading Browser Information ............................................................................202 Displaying Browser Information....................................................................203 Dealing with Dishonest Browsers ..................................................................204 Supporting Browsers with JavaScript..................................................................207 Creating a Browser-Specific Page..................................................................207 Branching to Separate Pages ..........................................................................207 Making a Multiple-Browser Page ..................................................................208 Using Feature Sensing....................................................................................208
Using Objects to Simplify Scripting....................................................................215 Defining an Object ........................................................................................216 Defining an Object Method............................................................................217 Creating an Object Instance ................................................................................217 Customizing Built-In Objects ..............................................................................218 Workshop: Storing Data in Objects ....................................................................219 Summary ..............................................................................................................221 Q&A ....................................................................................................................222 Quiz......................................................................................................................222 Questions ........................................................................................................222 Answers ..........................................................................................................223 Exercises ..............................................................................................................223 HOUR 16 Working with Sounds and Plug-Ins
225
Introducing Plug-Ins ............................................................................................226 Using the <embed> Tag ..................................................................................226 Using the
