Learn JavaScript

252 Pages·2001·2.73 MB·English

Learn JavaScript
Chuck Easttom
Wordware Pub lishing, Inc.
Library of Congress Cataloging-in-Publication Data
Easttom, Chuck.
Learn JavaScript / by Chuck Easttom.
p. cm.
ISBN 1-55622-856-2 (pb)
1. Computer graphics. 2. Computer games. I. Title.
T385.F447 2000
794.8'166--dc21 00-047319
CIP
© 2002, Wordware Publishing, Inc.
All Rights Reserved
2320 Los Rios Boulevard
Plano, Texas 75074
No part of this book may be reproduced in any form or by
any means without permission in writing from
Wordware Publishing, Inc.
Printed in the United States of America
ISBN 1-55622-856-2
10 9 8 7 6 5 4 3 2 1
0109
Product names mentioned are used for identification purposes only and may be trademarks of their respective
companies.
All inquiries for volume purchases of this book should be addressed to Wordware Publishing, Inc., at the
above address. Telephone inquiries may be made by calling:
[phone]
Contents Summary
Chap ter 1 HTML Primer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chap ter 2 JavaScript Primer. . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Chap ter 3 Alerts, Prompts, and User Feed back . . . . . . . . . . . . . . . . . . 33
Chap ter 4 Im age Ef fects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Chap ter 5 Back ground Ef fects . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Chap ter 6 The Doc u ment Ob ject Model . . . . . . . . . . . . . . . . . . . . . . 75
Chap ter 7 Working with Date and Time . . . . . . . . . . . . . . . . . . . . . . 87
Chap ter 8 Working with Cookies . . . . . . . . . . . . . . . . . . . . . . . . . 97
Chap ter 9 Working with the Sta tus Bar. . . . . . . . . . . . . . . . . . . . . . 111
Chap ter 10 Cre ating Dy namic Menus . . . . . . . . . . . . . . . . . . . . . . . 121
Chap ter 11 Working with Forms. . . . . . . . . . . . . . . . . . . . . . . . . . 135
Chap ter 12 Strings in JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . 149
Chap ter 13 Math in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Chap ter 14 Adding Plug-ins. . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Chap ter 15 Ob jects in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 181
Chap ter 16 Tips and Tricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Chap ter 17 JavaScript Games. . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Chap ter 18 ActiveX and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . 209
Chap ter 19 Pro gramming and JavaScript . . . . . . . . . . . . . . . . . . . . . 217
Chap ter 20 An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 223
Ap pen dix A On line Re sources . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Ap pen dix B HTML Ref er ence. . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
iii
iv
n Contents Summary
Ap pen dix C JavaScript Ref er ence . . . . . . . . . . . . . . . . . . . . . . . . . 245
Ap pen dix D Com mon Er rors. . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Con tents
Ac knowl edg ments. . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
In tro duc tion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Chap ter 1 HTML Primer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Im ages and Hyperlinks. . . . . . . . . . . . . . . . . . . . . . . . . . 4
Colors and Back grounds. . . . . . . . . . . . . . . . . . . . . . . . . 6
Ta bles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Marq uee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Sum mary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Chap ter 2 JavaScript Primer. . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Es sen tial Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Choosing a Browser . . . . . . . . . . . . . . . . . . . . . . . . . 14
Ba sic JavaScript Struc ture. . . . . . . . . . . . . . . . . . . . . . . . 14
The <SCRIPT> Tag. . . . . . . . . . . . . . . . . . . . . . . . . . 14
Internal Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . 14
External Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Placing JavaScript Code . . . . . . . . . . . . . . . . . . . . . . . 15
JavaScript Con ven tions . . . . . . . . . . . . . . . . . . . . . . . 16
Using the Semicolon. . . . . . . . . . . . . . . . . . . . . . . . 16
Case Sensitivity . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Using Quotes . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Your First Script. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Fun da men tal JavaScript Con cepts . . . . . . . . . . . . . . . . . . . 20
Data Types and Vari ables in JavaScript. . . . . . . . . . . . . . . . 20
JavaScript Op er a tors. . . . . . . . . . . . . . . . . . . . . . . . . 21
JavaScript State ments . . . . . . . . . . . . . . . . . . . . . . . . 23
Multiple Statements . . . . . . . . . . . . . . . . . . . . . . . . 23
Nested Statements . . . . . . . . . . . . . . . . . . . . . . . . 24
JavaScript Ex pres sions . . . . . . . . . . . . . . . . . . . . . . . . 24
JavaScript Func tion Dec la ra tions. . . . . . . . . . . . . . . . . . . 24
Calling Functions . . . . . . . . . . . . . . . . . . . . . . . . . 26
Di a log Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Alert Boxes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Con firm Boxes. . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Prompt Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
v
vi
n Con tents
if State ment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Sum mary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Chap ter 3 Alerts, Prompts, and User Feed back . . . . . . . . . . . . . . . . . . 33
Alert Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Prompt Boxes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Writ ing Back to the Web Page . . . . . . . . . . . . . . . . . . . . . 38
An tique Book store Pro ject . . . . . . . . . . . . . . . . . . . . . . . 41
Sum mary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Chap ter 4 Im age Ef fects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
The Im age Ob ject . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Roll over . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Slide Show . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Im age Pre view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Ban ner Ads. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Im age Popup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
An tique Book store Pro ject . . . . . . . . . . . . . . . . . . . . . . . 56
Sum mary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Chap ter 5 Back ground Ef fects . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Doc u ment Ob ject. . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Changing the Back ground Color . . . . . . . . . . . . . . . . . . . . 59
Changing the Back ground Im age. . . . . . . . . . . . . . . . . . . . 62
More Back ground Ef fects . . . . . . . . . . . . . . . . . . . . . . . . 68
An tique Book store Pro ject . . . . . . . . . . . . . . . . . . . . . . . 70
Sum mary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Chap ter 6 The Doc u ment Ob ject Model . . . . . . . . . . . . . . . . . . . . . . 75
win dow Ob ject. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
doc u ment Ob ject . . . . . . . . . . . . . . . . . . . . . . . . . . 76
his tory Ob ject . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
The Doc u ment Ob ject . . . . . . . . . . . . . . . . . . . . . . . . . 77
The Win dow Ob ject . . . . . . . . . . . . . . . . . . . . . . . . . . 80
The Nav i ga tor Ob ject. . . . . . . . . . . . . . . . . . . . . . . . . . 83
Using the His tory Ob ject . . . . . . . . . . . . . . . . . . . . . . . . 84
An tique Book store Pro ject . . . . . . . . . . . . . . . . . . . . . . . 85
Sum mary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Chap ter 7 Working with Date and Time . . . . . . . . . . . . . . . . . . . . . . 87
Time of Day . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Day of Week . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Set Time out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
An tique Book store Pro ject . . . . . . . . . . . . . . . . . . . . . . . 93
Sum mary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Chap ter 8 Working with Cookies . . . . . . . . . . . . . . . . . . . . . . . . . 97
Baking Your First Cookie . . . . . . . . . . . . . . . . . . . . . . . . 97
vii
Con tents n
SetCookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
GetCookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Call ing the Funct ions. . . . . . . . . . . . . . . . . . . . . . . . 101
Bake An other Cookie . . . . . . . . . . . . . . . . . . . . . . . . . 102
An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 106
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Chap ter 9 Working with the Sta tus Bar. . . . . . . . . . . . . . . . . . . . . . 111
Im age Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
T-Banners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 118
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Chap ter 10 Cre ating Dy namic Menus . . . . . . . . . . . . . . . . . . . . . . . 121
Pop-Up Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Drop-Down Menus . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Pull-Down Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Ex panding Menus. . . . . . . . . . . . . . . . . . . . . . . . . . . 129
An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 132
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Chap ter 11 Working with Forms. . . . . . . . . . . . . . . . . . . . . . . . . . 135
Form Ba sics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Text Fields and But tons . . . . . . . . . . . . . . . . . . . . . . . . 137
Op tions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Ra dio But tons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Check Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Event Han dlers in Form El e ments . . . . . . . . . . . . . . . . . . . 143
onSubmit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
onReset. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Syn op sis of Form El e ments . . . . . . . . . . . . . . . . . . . . . . 146
An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 147
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Chap ter 12 Strings in JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . 149
Cre ating Strings. . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
String Length. . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
String Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
CharAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
indexOf() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
lastIndexOf() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
substring() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Num ber-to-String Con ver sion. . . . . . . . . . . . . . . . . . . . . 154
Empty String Con cat e na tion . . . . . . . . . . . . . . . . . . . . 155
An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 155
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
viii
n Con tents
Chap ter 13 Math in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Math e mat i cal Op er a tors . . . . . . . . . . . . . . . . . . . . . . . 157
The Math Ob ject . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Con stants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
E. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
LN2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
LN10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
LOG2E. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
LOG10E . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
PI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
SQRT2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Math Methods. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Arith me tic Methods. . . . . . . . . . . . . . . . . . . . . . . . . 162
abs() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
ceil() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
floor() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
log() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
max(), min() . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
pow() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
round(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
sqrt(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Trig o no met ric Methods . . . . . . . . . . . . . . . . . . . . . . . 164
cos() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 166
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Chap ter 14 Adding Plug-ins. . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Putting a Plug-in into Your HTML . . . . . . . . . . . . . . . . . . . 169
Using Plug-ins in JavaScript . . . . . . . . . . . . . . . . . . . . . . 170
What Plug-ins are Al ready In stalled? . . . . . . . . . . . . . . . . . 174
LiveAudio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 179
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Chap ter 15 Ob jects in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 181
Prop erties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Using prop er ties . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Using Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Ob ject Ori ented Con cepts . . . . . . . . . . . . . . . . . . . . . . 183
Build ing Your Own Ob jects . . . . . . . . . . . . . . . . . . . . . . 184
Con struc tor Func tions . . . . . . . . . . . . . . . . . . . . . . . 185
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Chap ter 16 Tips and Tricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Inline Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Browser De tec tion. . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Sys tem In for ma tion . . . . . . . . . . . . . . . . . . . . . . . . . . 189
ix
Con tents n
Find ing Mouse Lo ca tion. . . . . . . . . . . . . . . . . . . . . . . . 190
Pass word . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Browser In for ma tion . . . . . . . . . . . . . . . . . . . . . . . . . 191
Print ing the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 192
View the Di rec tory . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Chap ter 17 JavaScript Games. . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Press the But ton. . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Roll the Dice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Viva Las Ve gas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Chap ter 18 ActiveX and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . 209
The o ret i cal Back ground . . . . . . . . . . . . . . . . . . . . . . . . 209
Using ActiveX for TCP/IP . . . . . . . . . . . . . . . . . . . . . . . 210
Ticking Clock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Slider Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Chap ter 19 Pro gramming and JavaScript . . . . . . . . . . . . . . . . . . . . . 217
Gen eral Con cepts. . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Ar rays. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Chap ter 20 An tique Book store Pro ject. . . . . . . . . . . . . . . . . . . . . . . 223
The Main Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
In ven tory Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Fin ishing the Pages . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Sum mary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Ap pen dix A On line Re sources . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
JavaScript Web Sites . . . . . . . . . . . . . . . . . . . . . . . . . 237
HTML Web Sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Or ga ni za tional Web Sites . . . . . . . . . . . . . . . . . . . . . . . 238
Im age Col lec tions. . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Cer tif i ca tion Web Sites . . . . . . . . . . . . . . . . . . . . . . . . 238
Em ploy ment Web Sites . . . . . . . . . . . . . . . . . . . . . . . . 239
Ap pen dix B HTML Ref er ence. . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Ba sic HTML Struc ture . . . . . . . . . . . . . . . . . . . . . . . . . 241
Body For matting Tags . . . . . . . . . . . . . . . . . . . . . . . . . 241
Im ages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Marq uee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Ta bles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
x
n Con tents
Text For matting Tags . . . . . . . . . . . . . . . . . . . . . . . . . 243
Form Tags. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Ap pen dix C JavaScript Ref er ence . . . . . . . . . . . . . . . . . . . . . . . . . 245
Ap pen dix D Com mon Er rors. . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
In dex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253