JavaScript in 10 Steps or Less

Arman Danesh9780764542411, 0764542419

If you are looking to add exciting interactivity to Web pages and need a quick and easy understanding of the technology in order to do so, then this book is for you-whether you’re new to JavaScript or you need a refresher on every-thing from validating user input forms to creating menu trees. Open the book and you’ll discover clear, easy-to-follow instructions for more than 250 key JavaScript tasks, each presented in ten quick steps-or less. Easy-to-navigate pages, lots of screen shots, and to-the-point directions guide you through every common (and not so common) JavaScript challenge-and help you get more done in less time. * Each solution is ten steps-or less-to help you get the job done fast * Self-contained two-page spreads deliver the answers you need-without flipping pages * A no-fluff approach focuses on helping you achieve results * A resource packed with useful and fun ways to get the most out of JavaScript * Make it simple and get productive fast!- download ready-to-use source code for each task from the book’s companion Web site

---

Table of contents :
JavaScript in 10 Steps or Less……Page 1
Credits……Page 9
About the Author……Page 10
Acknowledgments……Page 12
Contents……Page 14
Introduction……Page 22
Part 1: JavaScript Basics……Page 26
Task 1: Creating a scriptBlock……Page 27
Task 2: Hiding Your JavaScript Code……Page 29
Task 3: Providing Alternatives to Your JavaScript Code……Page 31
Task 4: Including Outside Source Code……Page 33
Task 5: Commenting Your Scripts……Page 35
Task 6: Writing a JavaScript Command……Page 37
Task 7: Temporarily Removing a Command from a Script……Page 39
Task 8: Using Curly Brackets……Page 41
Task 9: Writing Output to the Browser……Page 43
Task 10: Creating a Variable……Page 45
Task 11: Outputting a Variable……Page 47
Task 12: Creating a String……Page 49
Task 13: Creating a Numeric Variable……Page 51
Task 14: Performing Math……Page 53
Task 15: Concatenating Strings……Page 55
Task 16: Searching for Text in Strings……Page 57
Task 17: Replacing Text in Strings……Page 59
Task 18: Formatting Strings……Page 61
Task 19: Applying Multiple Formatting Functions to a String……Page 63
Task 20: Creating Arrays……Page 65
Task 21: Populating an Array……Page 67
Task 22: Sorting an Array……Page 69
Task 23: Splitting a String at a Delimiter……Page 71
Task 24: Calling Functions……Page 73
Task 25: Alerting the User……Page 75
Task 26: Confirming with the User……Page 77
Task 27: Creating Your Own Functions……Page 79
Task 28: Passing an Argument to Your Functions……Page 81
Task 29: Returning Values from Your Functions……Page 83
Task 30: Passing Multiple Parameters to Your Functions……Page 85
Task 31: Calling Functions from Tags……Page 87
Task 32: Calling Your JavaScript Code after the Page Has Loaded……Page 89
Task 33: Using forLoops……Page 91
Task 34: Testing Conditions with if……Page 93
Task 35: Using Short-Form Condition Testing……Page 95
Task 36: Looping on a Condition……Page 97
Task 37: Looping through an Array……Page 99
Task 38: Scheduling a Function for Future Execution……Page 101
Task 39: Scheduling a Function for Recurring Execution……Page 103
Task 40: Canceling a Scheduled Function……Page 105
Task 41: Adding Multiple Scripts to a Page……Page 107
Task 42: Calling Your JavaScript Code after the Page Has Loaded……Page 109
Task 43: Check If Java Is Enabled with JavaScript……Page 111
Part 2: Outputting to the Browser……Page 114
Task 44: Accessing the documentObject……Page 115
Task 45: Outputting Dynamic HTML……Page 117
Task 46: Including New Lines in Output……Page 119
Task 47: Outputting the Date to the Browser……Page 121
Task 48: Outputting the Date and Time in a Selected Time Zone……Page 123
Task 49: Controlling the Format of Date Output……Page 125
Task 50: Customizing Output by the Time of Day……Page 127
Task 51: Generating a Monthly Calendar……Page 129
Task 52: Customizing Output Using URL Variables……Page 131
Task 53: Dynamically Generating a Menu……Page 133
Task 54: Replacing the Browser Document with a New Document……Page 135
Task 55: Redirecting the User to a New Page……Page 137
Task 56: Creating a “Page Loading …” Placeholder……Page 139
Part 3: Images and Rollovers……Page 142
Task 57: Accessing an HTML-Embedded Image in JavaScript……Page 143
Task 58: Loading an Image Using JavaScript……Page 145
Task 59: Detecting MouseOver Events on Images……Page 147
Task 60: Detecting Click Events on Images……Page 149
Task 61: Switching an Image Programatically……Page 151
Task 62: Using Multiple Rollovers in One Page……Page 153
Task 63: Displaying a Random Image……Page 155
Task 64: Displaying Multiple Random Images……Page 157
Task 65: Using a Function to Create a Rollover……Page 159
Task 66: Using a Function to Trigger a Rollover……Page 161
Task 67: Using Functions to Create Multiple Rollovers in One Page……Page 163
Task 68: Creating a Simple Rollover Menu System……Page 165
Task 69: Creating a Slide Show in JavaScript……Page 167
Task 70: Randomizing Your Slide Show……Page 169
Task 71: Triggering Slide Show Transitions from Links……Page 171
Task 72: Including Captions in a Slide Show……Page 173
Task 73: Testing If an Image Is Loaded……Page 175
Task 74: Triggering a Rollover in a Different Location with a Link……Page 177
Task 75: Using Image Maps and Rollovers Together……Page 179
Task 76: Generating Animated Banners in JavaScript……Page 181
Task 77: Displaying a Random Banner Ad……Page 183
Part 4: Working with Forms……Page 186
Task 78: Preparing Your Forms for JavaScript……Page 187
Task 79: Accessing Text Field Contents……Page 189
Task 80: Dynamically Updating Text Fields……Page 191
Task 81: Detecting Changes in Text Fields……Page 193
Task 82: Accessing Selection Lists……Page 195
Task 83: Programmatically Populating a Selection List……Page 197
Task 84: Dynamically Changing Selection List Content……Page 199
Task 85: Detecting Selections in Selection Lists……Page 201
Task 86: Updating One Selection List Based on Selection in Another……Page 203
Task 87: Using Radio Buttons instead of Selection Lists……Page 205
Task 88: Detecting the Selected Radio Button……Page 207
Task 89: Detecting Change of Radio Button Selection……Page 209
Task 90: Updating or Changing Radio Button Selection……Page 211
Task 91: Creating Check Boxes……Page 213
Task 92: Detecting Check Box Selections……Page 215
Task 93: Changing Check Box Selections……Page 217
Task 94: Detecting Changes in Check Box Selections……Page 219
Task 95: Verifying Form Fields in JavaScript……Page 221
Task 96: Using the onSubmit Attribute of the Form Tag to Verify Form Fields……Page 223
Task 97: Verifying Form Fields Using INPUT TYPE=”button” Instead of TYPE=”submit”……Page 225
Task 98: Validating E-mail Addresses……Page 227
Task 99: Validating Zip Codes……Page 229
Task 100: Validating Phone Numbers……Page 231
Task 101: Validating Credit Card Numbers……Page 233
Task 102: Validating Selection List Choices……Page 235
Task 103: Validating Radio Button Selections……Page 237
Task 104: Validating Check Box Selections……Page 239
Task 105: Validating Passwords……Page 241
Task 106: Validating Phone Numbers with Regular Expressions……Page 243
Task 107: Creating Multiple Form Submission Buttons Using INPUT TYPE=”button”Buttons……Page 245
Task 108: Reacting to Mouse Clicks on Buttons……Page 247
Task 109: Using Graphical Buttons in JavaScript……Page 249
Task 110: Controlling the Form Submission URL……Page 251
Task 111: Validating a Numeric Text Field with Regular Expressions……Page 253
Task 112: Encrypting Data before Submitting It……Page 255
Task 113: Using Forms for Automatic Navigation Jumping……Page 257
Part 5: Manipulating Browser Windows……Page 260
Task 114: Using the WindowObject……Page 261
Task 115: Popping Up an Alert Dialog Box……Page 263
Task 116: Popping Up Confirmation Dialog Boxes……Page 265
Task 117: Popping Up JavaScript Prompts……Page 267
Task 118: Creating New Browser Windows……Page 269
Task 119: Opening a New Browser Window from a Link……Page 271
Task 120: Setting the Size of New Browser Windows……Page 273
Task 121: Setting the Location of New Browser Windows……Page 275
Task 122: Controlling Toolbar Visibility for New Browser Windows……Page 277
Task 123: Determining the Availability of Scroll Bars for New Browser Windows……Page 279
Task 124: Restricting Resizing of New Browser Windows……Page 281
Task 125: Loading a New Document into a Browser Window……Page 283
Task 126: Controlling Window Scrolling from JavaScript……Page 285
Task 127: Opening a Full-Screen Window in Internet Explorer……Page 287
Task 128: Handling the Parent-Child Relationship of Windows……Page 289
Task 129: Updating One Window’s Contents from Another……Page 291
Task 130: Accessing a Form in Another Browser Window……Page 293
Task 131: Closing a Window in JavaScript……Page 295
Task 132: Closing a Window from a Link……Page 297
Task 133: Creating Dependent Windows in Netscape……Page 299
Task 134: Sizing a Window to Its Contents in Netscape……Page 301
Task 135: Loading Pages into Frames……Page 303
Task 136: Updating One Frame from Another Frame……Page 305
Task 137: Sharing JavaScript Code between Frames……Page 307
Task 138: Using Frames to Store Pseudo-Persistent Data……Page 309
Task 139: Using One Frame for Your Main JavaScript Code……Page 311
Task 140: Using a Hidden Frame for Your JavaScript Code……Page 313
Task 141: Working with Nested Frames……Page 315
Task 142: Updating Multiple Frames from a Link……Page 317
Task 143: Dynamically Creating Frames in JavaScript……Page 319
Task 144: Dynamically Updating Frame Content……Page 321
Task 145: Referring to Unnamed Frames Numerically……Page 323
Part 6: Manipulating Cookies……Page 326
Task 146: Creating a Cookie in JavaScript……Page 327
Task 147: Accessing a Cookie in JavaScript……Page 329
Task 148: Displaying a Cookie……Page 331
Task 149: Controlling the Expiry of a Cookie……Page 333
Task 150: Using a Cookie to Track a User’s Session……Page 335
Task 151: Using a Cookie to Count Page Access……Page 337
Task 152: Deleting a Cookie……Page 339
Task 153: Creating Multiple Cookies……Page 341
Task 154: Accessing Multiple Cookies……Page 343
Task 155: Using Cookies to Present a Different Home Page for New Visitors……Page 345
Task 156: Creating a Cookie Function Library……Page 347
Task 157: Allowing a Cookie to be Seen for all Pages in a Site……Page 349
Part 7: DHTML and Style Sheets……Page 352
Task 158: Controlling Line Spacing……Page 353
Task 159: Determining an Object’s Location……Page 355
Task 160: Placing an Object……Page 357
Task 161: Moving an Object Horizontally……Page 359
Task 162: Moving an Object Vertically……Page 361
Task 163: Moving an Object Diagonally……Page 363
Task 164: Controlling Object Movement with Buttons……Page 365
Task 165: Creating the Appearance of Three-Dimensional Movement……Page 367
Task 166: Centering an Object Vertically……Page 369
Task 167: Centering an Object Horizontally……Page 371
Task 168: Controlling Line Height in CSS……Page 373
Task 169: Creating Drop Shadows with CSS……Page 375
Task 170: Modifying a Drop Shadow……Page 377
Task 171: Removing a Drop Shadow……Page 379
Task 172: Placing a Shadow on a Nonstandard Corner……Page 381
Task 173: Managing Z-Indexes in JavaScript……Page 383
Task 174: Setting Fonts for Text with CSS……Page 385
Task 175: Setting Font Style for Text with CSS……Page 387
Task 176: Controlling Text Alignment with CSS……Page 389
Task 177: Controlling Spacing with CSS……Page 391
Task 178: Controlling Absolute Placement with CSS……Page 393
Task 179: Controlling Relative Placement with CSS……Page 395
Task 180: Adjusting Margins with CSS……Page 397
Task 181: Applying Inline Styles……Page 399
Task 182: Using Document Style Sheets……Page 401
Task 183: Creating Global Style Sheet Files……Page 403
Task 184: Overriding Global Style Sheets for Local Instances……Page 405
Task 185: Creating a Drop Cap with Style Sheets……Page 407
Task 186: Customizing the Appearance of the First Line of Text……Page 409
Task 187: Applying a Special Style to the First Line of Every Element on the Page……Page 411
Task 188: Applying a Special Style to All Links……Page 413
Task 189: Accessing Style Sheet Settings……Page 415
Task 190: Manipulating Style Sheet Settings……Page 417
Task 191: Hiding an Object in JavaScript……Page 419
Task 192: Displaying an Object in JavaScript……Page 421
Task 193: Detecting the Window Size……Page 423
Task 194: Forcing Capitalization with Style Sheet Settings……Page 425
Task 195: Detecting the Number of Colors……Page 427
Task 196: Adjusting Padding with CSS……Page 429
Part 8: Dynamic User Interaction……Page 432
Task 197: Creating a Simple Pull-Down Menu……Page 433
Task 198: Creating Two Pull-Down Menus……Page 435
Task 199: Detecting and Reacting to Selections in a Pull-Down Menu……Page 437
Task 200: Generating a Drop-Down Menu with a Function……Page 439
Task 201: Placing Menu Code in an External File……Page 441
Task 202: Inserting a Prebuilt Drop-Down Menu……Page 443
Task 203: Creating a Floating Window……Page 445
Task 204: Closing a Floating Window……Page 447
Task 205: Resizing a Floating Window……Page 449
Task 206: Moving a Floating Window……Page 451
Task 207: Changing the Content of a Floating Window……Page 453
Task 208: Detecting Drag and Drop……Page 455
Task 209: Moving a Dragged Object in Drag and Drop……Page 457
Task 210: Changing Cursor Styles……Page 459
Task 211: Determining the Current Scroll Position……Page 461
Task 212: Creating an Expanding/Collapsing Menu……Page 463
Task 213: Creating a Highlighting Menu Using Just Text and CSS-No JavaScript……Page 465
Task 214: Creating a Highlighting Menu Using Text, CSS, and JavaScript……Page 467
Task 215: Placing Content Offscreen……Page 469
Task 216: Sliding Content into View……Page 471
Task 217: Creating a Sliding Menu……Page 473
Task 218: Auto-Scrolling a Page……Page 475
Part 9: Handling Events……Page 478
Task 219: Responding to the onMouseOverEvent……Page 479
Task 220: Taking Action When the User Clicks on an Object……Page 481
Task 221: Responding to Changes in a Form’s Text Field……Page 483
Task 222: Responding to a Form Field Gaining Focus with onFocus……Page 485
Task 223: Taking Action When a Form Field Loses Focus with onBlur……Page 487
Task 224: Post-Processing Form Data with onSubmit……Page 489
Task 225: Creating Code to Load When a Page Loads with onLoad……Page 491
Task 226: Executing Code When a User Leaves a Page for Another……Page 493
Task 227: Taking Action When a User Makes a Selection in a Selection List……Page 495
Part 10: Bookmarklets……Page 498
Task 228: Downloading and Installing Bookmarklets……Page 499
Task 229: Checking Page Freshness with a Bookmarklet……Page 501
Task 230: Checking for E-mail Links with a Bookmarklet……Page 503
Task 231: E-mailing Selected Text with a Bookmarklet in Internet Explorer……Page 505
Task 232: E-mailing Selected Text with a Bookmarklet in Netscape……Page 507
Task 233: Displaying Images from a Page with a Bookmarklet……Page 509
Task 234: Changing Background Color with a Bookmarklet……Page 511
Task 235: Removing Background Images with a Bookmarklet……Page 513
Task 236: Hiding Images with a Bookmarklet……Page 515
Task 237: Hiding Banners with a Bookmarklet……Page 517
Task 238: Opening All Links in a New Window with a Bookmarklet……Page 519
Task 239: Changing Page Fonts with a Bookmarklet……Page 521
Task 240: Highlighting Page Links with a Bookmarklet……Page 523
Task 241: Checking the Current Date and Time with a Bookmarklet……Page 525
Task 242: Checking Your IP Address with a Bookmarklet……Page 527
Task 243: Searching Yahoo! with a Bookmarklet in Internet Explorer……Page 529
Task 244: Searching Yahoo! with a Bookmarklet in Netscape……Page 531
Part 11: Cross-Browser Compatibility and Issues……Page 534
Task 245: Detecting the Browser Type……Page 535
Task 246: Detecting the Browser Version……Page 537
Task 247: Browser Detection Using Object Testing……Page 539
Task 248: Creating Browser Detection Variables……Page 541
Task 249: Dealing with Differences in Object Placement in Newer Browsers……Page 543
Task 250: Creating Layers with the div Tag……Page 545
Task 251: Controlling Layer Placement in HTML……Page 547
Task 252: Controlling Layer Size in HTML……Page 549
Task 253: Controlling Layer Visibility in HTML……Page 551
Task 254: Controlling Layer Ordering in HTML……Page 553
Task 255: Changing Layer Placement and Size in JavaScript……Page 555
Task 256: Changing Layer Visibility in JavaScript……Page 557
Task 257: Changing Layer Ordering in JavaScript……Page 559
Task 258: Fading Objects……Page 561
Task 259: Creating a Page Transition in Internet Explorer……Page 563
Task 260: Installing the X Cross-Browser Compatibility Library……Page 565
Task 261: Showing and Hiding Elements with X……Page 567
Task 262: Controlling Stacking Order with X……Page 569
Task 263: Changing Text Color with X……Page 571
Task 264: Setting a Background Color with X……Page 573
Task 265: Setting a Background Image with X……Page 575
Task 266: Repositioning an Element with X……Page 577
Task 267: Sliding an Element with X……Page 579
Task 268: Changing Layer Sizes with X……Page 581
Appendix A: JavaScript Quick Reference……Page 584
Appendix B: CSS Quick Reference……Page 618
Index……Page 626