JavaScript by Example

Thoroughly updated to reflect today's newest Web 2.0/AJAX programming techniques and best practices, "JavaScript by Example" teaches JavaScript programming through hundreds of small, easy-to-understand examples, each designed to illustrate a single programming concept Contents 6 Preface 16 1 Introduction to JavaScript 18 1.1 What JavaScript Is 18 1.2 What JavaScript Is Not 19 1.3 What JavaScript Is Used For 20 1.4 JavaScript and Its Place in a Web Page 21 1.4.1 Analysis of the Diagram 21 1.5 What Is Ajax? 22 1.6 What JavaScript Looks Like 24 1.7 JavaScript and Its Role in Web Development 25 1.7.1 The Three Layers 25 1.8 JavaScript and Events 27 1.9 Standardizing JavaScript and the W3C 29 1.9.1 JavaScript Objects 30 1.9.2 The Document Object Model 30 1.10 What Browser? 32 1.10.1 Versions of JavaScript 33 1.10.2 Does Your Browser Follow the Standard? 35 1.10.3 Is JavaScript Enabled on Your Browser? 35 1.11 Where to Put JavaScript 37 1.11.1 JavaScript from External Files 39 1.12 Validating Your Markup 41 1.12.1 The W3C Validation Tool 41 1.12.2 The Validome Validation Tool 42 1.13 What You Should Know 43 2 Script Setup 46 2.1 The HTML Document and JavaScript 46 2.1.1 Script Execution 47 2.2 Syntactical Details 50 2.2.1 Case Sensitivity 50 2.2.2 Free Form and Reserved Words 50 2.2.3 Statements and Semicolons 51 2.2.4 Comments 52 2.2.5 The Tag 52 2.3 Generating HTML and Printing Output 54 2.3.1 Strings and String Concatenation 54 2.3.2 The write() and writeln() Methods 55 2.4 About Debugging 57 2.4.1 Types of Errors 57 2.5 Debugging Tools 58 2.5.1 Firefox 58 2.5.2 Debugging in Internet Explorer 8 61 2.5.3 The URL Protocol 63 2.6 JavaScript and Old or Disabled Browsers 64 2.6.1 Hiding JavaScript from Old Browsers 64 2.7 What You Should Know 67 3 The Building Blocks: Data Types, Literals, and Variables 70 3.1 Data Types 70 3.1.1 Primitive Data Types 70 3.1.2 Composite Data Types 76 3.2 Variables 76 3.2.1 Valid Names 77 3.2.2 Declaring and Initializing Variables 77 3.2.3 Dynamically or Loosely Typed Language 79 3.2.4 Scope of Variables 83 3.2.5 Concatenation and Variables 83 3.3 Constants 84 3.4 Bugs to Watch For 86 3.5 What You Should Know 87 4 Dialog Boxes 90 4.1 Interacting with the User 90 4.1.1 The alert() Method 90 4.1.2 The prompt() Method 93 4.1.3 The confirm() Method 95 4.2 What You Should Know 97 5 Operators 100 5.1 About JavaScript Operators and Expressions 100 5.1.1 Assignment 101 5.1.2 Precedence and Associativity 101 5.2 Types of Operators 105 5.2.1 Arithmetic Operators 105 5.2.2 Shortcut Assignment Operators 107 5.2.3 Autoincrement and Autodecrement Operators 108 5.2.4 Concatenation Operator 111 5.2.5 Comparison Operators 112 5.2.6 Logical Operators 118 5.2.7 The Conditional Operator 125 5.2.8 Bitwise Operators 126 5.3 Number, String, or Boolean? Data Type Conversion 129 5.3.1 The parseInt() Function 131 5.3.2 The parseFloat() Function 133 5.3.3 The eval() Function 135 5.4 Special Operators 136 5.5 What You Should Know 137 6 Under Certain Conditions 140 6.1 Control Structures, Blocks, and Compound Statements 140 6.2 Conditionals 140 6.2.1 if/else 141 6.2.2 if/else if 144 6.2.3 switch 145 6.3 Loops 148 6.3.1 The while Loop 148 6.3.2 The do/while Loop 150 6.3.3 The for Loop 151 6.3.4 The for/in Loop 152 6.3.5 Loop Control with break and continue 153 6.3.6 Nested Loops and Labels 154 6.4 What You Should Know 157 7 Functions 160 7.1 What Is a Function? 160 7.1.1 Function Declaration and Invocation 161 7.1.2 Return Values 170 7.1.3 Anonymous Functions as Variables 173 7.1.4 Closures 175 7.1.5 Recursion 178 7.1.6 Functions Are Objects 183 7.2 Debugging Techniques 183 7.2.1 Function Syntax 183 7.2.2 Exception Handling with try/catch and throw 185 7.3 What You Should Know 189 8 Objects 192 8.1 What Are Objects? 192 8.1.1 Objects and the Dot Syntax 193 8.1.2 Creating an Object with a Constructor 194 8.1.3 Properties of the Object 195 8.1.4 Methods of the Object 197 8.2 Classes and User-Defined Functions 199 8.2.1 What Is a Class? 199 8.2.2 What Is this? 199 8.2.3 Inline Functions as Methods 202 8.3 Object Literals 204 8.4 Manipulating Objects 208 8.4.1 The with Keyword 208 8.4.2 The for/in Loop 211 8.5 Extending Objects with Prototypes 213 8.5.1 Adding Properties with the Prototype Property 215 8.5.2 The Prototype Lookup Chain 216 8.5.3 Adding Methods with Prototype 219 8.5.4 Properties and Methods of All Objects 221 8.5.5 Creating Subclasses and Inheritance 224 8.6 What You Should Know 227 9 JavaScript Core Objects 230 9.1 What Are Core Objects? 230 9.2 Array Objects 230 9.2.1 Declaring and Populating Arrays 231 9.2.2 Array Object Properties 236 9.2.3 Associative Arrays 238 9.2.4 Nested Arrays 240 9.3 Array Methods 244 9.4 The Date Object 251 9.4.1 Using the Date Object Methods 252 9.4.2 Manipulating the Date and Time 255 9.4.3 Customizing the Date Object with the prototype Property 257 9.5 The Math Object 258 9.5.1 Rounding Up and Rounding Down 261 9.5.2 Generating Random Numbers 262 9.5.3 Wrapper Objects (String, Number, Function, Boolean) 263 9.5.4 The String Object 264 9.5.5 The Number Object 276 9.5.6 The Boolean Object 280 9.5.7 The Function Object 281 9.5.8 The with Keyword Revisited 283 9.6 What You Should Know 284 10 It’s the BOM! Browser Objects 288 10.1 JavaScript and the Browser Object Model 288 10.1.1 Working with the navigator Object 290 10.1.2 Working with the window Object 302 10.1.3 Creating Timed Events 309 10.1.4 Working with Frames 320 10.1.5 The location Object 332 10.1.6 The history Object 336 10.1.7 The screen Object 339 10.2 What You Should Know 342 11 Working with Forms and Input Devices 344 11.1 The Document Object Model and the Legacy DOM 0 344 11.2 The JavaScript Hierarchy 345 11.2.1 The Document Itself 346 11.3 About HTML Forms 351 11.3.1 Attributes of the Tag 351 11.4 JavaScript and the form Object 358 11.4.1 Naming Forms and Input Types (Controls) for Forms 359 11.4.2 The Legacy DOM with Forms 362 11.4.3 Naming Forms and Buttons 367 11.4.4 Submitting Fillout Forms 373 11.4.5 The this Keyword 382 11.4.6 The submit() and reset() Methods 385 11.5 Programming Input Devices (Controls) 389 11.5.1 Simple Form Validation 418 11.6 What You Should Know 426 12 Working with Images (and Links) 430 12.1 Introduction to Images 430 12.1.1 HTML Review of Images 431 12.1.2 The JavaScript image Object 433 12.2 Reviewing Links 434 12.2.1 The JavaScript links Object 435 12.3 Working with Imagemaps 439 12.3.1 Replacing Images Dynamically with the src Property 445 12.3.2 Preloading Images and the Image() Constructor 449 12.3.3 Randomly Displaying Images and the onClick Event 451 12.3.4 Links with an Image Map and JavaScript 453 12.4 Resizing an Image to Fit the Window 455 12.5 Introduction to Slideshows 458 12.5.1 A Simple Slideshow with Controls 459 12.5.2 A Clickable Image Slideshow 462 12.6 Animation and Timers 466 12.6.1 Changing Image Position 467 12.6.2 Changing Image Height and Width Properties 468 12.7 What You Should Know 469 13 Handling Events 472 13.1 Introduction to Event Handlers 472 13.2 The Inline Model for Handling Events 472 13.2.1 HTML and the Event Handler 473 13.2.2 Setting Up an Event Handler 476 13.2.3 Return Values 478 13.2.4 JavaScript Object Methods and Events 479 13.3 Handling a Window or Frame Event 482 13.3.1 The onLoad and onUnLoad Events 482 13.3.2 The onFocus and onBlur Event Handlers 485 13.3.3 The onResize Event Handler 489 13.4 Handling Mouse Events 491 13.4.1 How to Use Mouse Events 492 13.4.2 Mouse Events and Images—Rollovers 494 13.4.3 Creating a Slideshow with Mouse Events 495 13.5 Handling Link Events 498 13.5.1 JavaScript URLs 498 13.6 Handling a Form Event 499 13.6.1 Buttons 500 13.6.2 this for Forms and this for Buttons 501 13.6.3 Forms and the onClick Event Handler 503 13.6.4 Forms and the onFocus and onBlur Event Handlers 504 13.6.5 Forms and the onChange Event Handler 506 13.6.6 Forms and the onSubmit Event Handler 508 13.6.7 HTML Event Handlers and JavaScript Event Methods 513 13.6.8 The onError Event 515 13.7 The event Object 516 13.7.1 Capturing and Bubbling (Trickle Down and Bubble Up) 517 13.7.2 Event Object Properties 518 13.7.3 Using Event Object Properties 520 13.7.4 Passing Events to a JavaScript Function 522 13.7.5 Mouse Positions 525 13.7.6 Key Events 530 13.8 The Scripting Model for Handling Events 534 13.8.1 Getting a Reference to the Object 534 13.9 What You Should Know 540 14 Introduction to CSS (Cascading Style Sheets) with JavaScript 544 14.1 What Is CSS? 544 14.2 What Is a Style Sheet? 544 14.2.1 What Is a CSS-Enhanced Browser? 545 14.2.2 How Does a Style Sheet Work? 546 14.3 CSS Program Structure 547 14.3.1 Comments 547 14.3.2 Grouping 548 14.4 Common Style Sheet Properties 549 14.4.1 Units of Measurement 552 14.4.2 Working with Colors 553 14.4.3 Working with Fonts 556 14.4.4 Working with Text 559 14.4.5 Working with Backgrounds and Images 561 14.4.6 Working with Margins and Borders 564 14.5 Types of Style Sheets 567 14.5.1 The Embedded Style Sheet and the Tag 567 14.5.2 The Inline Style and the Attribute 570 14.6 The External Type with a Link 572 14.6.1 The Tag 572 14.6.2 Importing with @import 574 14.7 Creating a Style Class 575 14.7.1 Styling a Simple Table with Class 577 14.7.2 Using a Specific Class Selector 579 14.8 The ID Selector and the ID Attribute 581 14.9 Overriding or Adding a Style with the Tag 583 14.9.1 The Tag and the style Attribute 584 14.9.2 The Tag and the class Attribute 585 14.9.3 Inheritance and Contextual Selectors 586 14.10 Positioning Elements and Layers 589 14.10.1 Absolute Positioning 590 14.10.2 The Container 596 14.10.3 Absolute Positioning 597 14.10.4 Relative Positioning 598 14.10.5 The z-index and Three Dimensions 600 14.11 Where Does JavaScript Fit In? 602 14.11.1 What Is DHTML? 602 14.11.2 How JavaScript Views Style Sheets 602 14.11.3 The style Object 606 14.11.4 The className Property 615 14.11.5 Drop-Down Menus and Tooltips 618 14.12 What You Should Know 626 15 The W3C DOM and JavaScript 628 15.1 The W3C DOM 628 15.2 How the DOM Works with Nodes 629 15.3 Nodes 630 15.3.1 Parents and Children 632 15.3.2 Siblings 633 15.3.3 The nodeName and nodeType Properties 633 15.3.4 The Whitespace Bug 634 15.4 Walking with the DOM 635 15.5 DOM Inspectors 638 15.6 Methods to Shorten the DOM Walk 639 15.6.1 The document.getElementById() Method 639 15.6.2 The document.getElementsByTagName() Method 642 15.6.3 JavaScript Properties to Represent HTML Attributes 644 15.7 Modifying the DOM (Appending, Copying, and Removing Nodes) 646 15.7.1 The innerHTML Property and the Element’s Content 647 15.7.2 Modifying the Content of an Element 649 15.7.3 Creating New Elements with the DOM 651 15.7.4 Inserting Before a Node 653 15.7.5 Creating Attributes for Nodes 654 15.7.6 DOM Review: Creating a Blog 656 15.7.7 Creating a Table with the DOM 661 15.7.8 Cloning Nodes 665 15.7.9 Removing a Node 670 15.7.10 Scrolling with the Nodes 675 15.8 Event Handling and the DOM 678 15.8.1 The HTML Inline Way 678 15.8.2 The Scripting Way 678 15.8.3 The DOM Way 679 15.8.4 Bubbling and Capturing 679 15.9 Event Listeners with the W3C Model 685 15.9.1 Adding an Event 685 15.9.2 Registering More Than One Event 687 15.9.3 Removing an EventListener 690 15.9.4 Event Listeners with Microsoft Internet Explorer 693 15.9.5 Event Properties Revisited 695 15.10 Unobtrusive JavaScript 699 15.10.1 JavaScript Libraries 706 15.11 What You Should Know 707 16 Cookies 712 16.1 What Are Cookies? 712 16.1.1 Cookie Ingredients 715 16.1.2 The Attributes of a Cookie 716 16.2 Creating a Cookie with JavaScript 718 16.2.1 The Cookie Object 718 16.2.2 Assigning Cookie Attributes 719 16.2.3 Let’s Make Cookies! 721 16.2.4 Retrieving Cookies from a Server 725 16.2.5 Deleting a Cookie 727 16.2.6 Using the Browser to Remove Cookies 730 16.3 What You Should Know 731 17 Regular Expressions and Pattern Matching 734 17.1 What Is a Regular Expression? 734 17.2 Creating a Regular Expression 736 17.2.1 The Literal Way 736 17.2.2 The Constructor Method 737 17.2.3 Testing the Expression 738 17.2.4 Properties of the RegExp Object 741 17.3 String Methods Using Regular Expressions 744 17.3.1 The match() Method 744 17.3.2 The search() Method 746 17.3.3 The replace() Method 747 17.3.4 The split() Method 748 17.4 Getting Control—The Metacharacters 750 17.4.1 The Dot Metacharacter 753 17.4.2 The Character Class 755 17.4.3 Metasymbols 758 17.4.4 Metacharacters to Repeat Pattern Matches 762 17.4.5 Anchoring Metacharacters 771 17.4.6 Alternation 776 17.5 Form Validation with Regular Expressions 782 17.5.1 Checking for Empty Fields 782 17.5.2 Checking for Numeric Zip Codes 784 17.5.3 Checking for Alphabetic Data 786 17.5.4 Removing Extraneous Characters 788 17.5.5 Checking for Valid Social Security Numbers 792 17.5.6 Checking for Valid Phone Numbers 794 17.5.7 Checking for Valid E-Mail Addresses 798 17.5.8 Credit Card Validation 800 17.5.9 Putting It All Together 808 17.6 What You Should Know 812 18 An Introduction to Ajax (with JSON) 814 18.1 Why Ajax? 814 18.2 Why Is Ajax Covered Last? 815 18.3 The Steps for Creating Ajax Communication 816 18.3.1 Step 1: Create the XMLHttpRequest Object 817 18.3.2 Step 2: Initializing the Object 820 18.3.3 Sending the Request to the Server 822 18.3.4 Step 3: Monitoring the State of the Server Response 823 18.3.5 Handling the Response with a Callback Function 825 18.3.6 The Browser Cache Issue 827 18.4 Putting It All Together 829 18.4.1 Using Ajax to Retrieve Text from a File 836 18.4.2 Using Ajax to Retrieve XML from a File 839 18.4.3 Ajax and Forms 843 18.5 Ajax and JSON 851 18.5.1 JSON Data Structures 852 18.5.2 Steps to Use JSON 853 18.5.3 Putting It All Together with JSON 856 18.5.4 Solving the eval() Security Problem 860 18.6 Debugging Ajax with Firebug 865 18.6.1 Basic Instructions for Using Firefox 868 18.6.2 What You Should Know 869 Index 872 A 872 B 874 C 875 D 877 E 878 F 879 G 881 H 881 I 882 J 883 K 884 L 884 M 885 N 886 O 887 P 889 Q 890 R 890 S 891 T 893 U 895 V 895 W 895 X 896 Y 896 Z 896

The World’s Easiest Java Script Tutorial–Fully Updated!

JavaScript by Example, Second Edition, is the easiest, most hands-on way to learn JavaScript. Legendary programming instructor Ellie Quigley has thoroughly updated her classic book to deliver the skills and information today’s JavaScript users need most–including up-to-the-minute coverage of JavaScript programming constructs, CSS, Ajax, JSON, and the latest JavaScript libraries and best practices.

Quigley illuminates every technique with focused, classroom-tested code examples, detailed line-by-line explanations, and real program output. This exceptionally clear, easy-to-understand book takes you from your first script to advanced techniques. It’s the only JavaScript book you’ll ever need!

New in This Edition

• End-of-chapter study tools, including classroom-tested labs
• Programming the DOM
• More Cascading Style Sheets
• Introduction to Ajax and JSON
• Explanation of how to develop interactive Web applications with dynamic, desktop-style interfaces
• Programmers’ preparation for HTML 5’s breakthrough capabilities

This edition has been completely updated and includes many new and completely rewritten code examples; contains fully revised and updated coverage of Cascading Style Sheets (CSS) and the Document Object Model (DOM); and fully covers modern JavaScript concepts, principles, and programming techniques.

Thousands of Web developers, administrators, and power users have relied on JavaScript by Example to become expert JavaScript programmers. With this new edition, you can, too–even if you’re completely new to JavaScript. After you’ve become an expert, you’ll turn to this book constantly as the best source for trustworthy answers, solutions, and code.

**The World’s Easiest Java Script Tutorial–Fully Updated!** __**__JavaScript by Example, Second Edition,__**__ is the easiest, most hands-on way to learn JavaScript. Legendary programming instructor Ellie Quigley has thoroughly updated her classic book to deliver the skills and information today’s JavaScript users need most–including up-to-the-minute coverage of JavaScript programming constructs, CSS, Ajax, JSON, and the latest JavaScript libraries and best practices. Quigley illuminates every technique with focused, classroom-tested code examples, detailed line-by-line explanations, and real program output. This exceptionally clear, easy-to-understand book takes you from your first script to advanced techniques. It’s the only JavaScript book you’ll ever need! __New in This Edition__ * End-of-chapter study tools, including classroom-tested labs * Programming the DOM * More Cascading Style Sheets * Introduction to Ajax and JSON * Explanation of how to develop interactive Web applications with dynamic, desktop-style interfaces * Programmers’ preparation for HTML 5’s breakthrough capabilities This edition has been completely updated and includes many new and completely rewritten code examples; contains fully revised and updated coverage of Cascading Style Sheets (CSS) and the Document Object Model (DOM); and fully covers modern JavaScript concepts, principles, and programming techniques. Thousands of Web developers, administrators, and power users have relied on __JavaScript by Example__ to become expert JavaScript programmers. With this new edition, you can, too–even if you’re completely new to JavaScript. After you’ve become an expert, you’ll turn to this book constantly as the best source for trustworthy answers, solutions, and code.