JavaScript in 10 Steps or Less

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