Beginning JavaScript

About the authorsJeremy McPeak is a professional programmer and analyst who works extensively with JavaScript and C#. He coauthored both of the previous editions of Beginning JavaScript, and authored the well-reviewed JavaScript 24-Hour Trainer. He contributes to the online, web-centric learning site Tuts+ Code, covering topics such as JavaScript, C#, and the .NET Framework. Paul Wilton owns his own company, providing online booking systems to vacation property owners, which is largely developed using JavaScript.

• Introduction xixChapter 1: Introduction to Javascript and the Web 1Introduction to JavaScript 1What is JavaScript? 2JavaScript and the Web 3What Can JavaScript Do for Me? 4Tools Needed to Create JavaScript Web Applications 4Development Tools 4Web Browsers 5Where Do My Scripts Go? 7Linking to an External JavaScript File 7Advantages of Using an External File 8Your First Simple JavaScript Program 9Writing More JavaScript 10A Brief Look at Browsers and Compatibility Problems 15Summary 16Chapter 2: Data Types and Variables 17Types of Data in JavaScript 18Numerical Data 18Text Data 19Boolean Data 20Variables—Storing Data in Memory 20Creating Variables and Giving Them Values 22Assigning Variables with the Value of Other Variables 24Using Data—Calculations and Basic String Manipulation 26Numerical Calculations 26Increment and Decrement Operators 29Operator Precedence 30Basic String Operations 35Mixing Numbers and Strings 37Data Type Conversion 38Dealing with Strings That Won’t Convert 41Arrays 43A Multi‐Dimensional Array 47Summary 52Chapter 3: Decisions and Loops 55Decision Making—The if and switch Statements 56Comparison Operators 56Precedence 57Assignment versus Comparison 57Assigning the Results of Comparisons 58The if Statement 58Logical Operators 62AND 63OR 64NOT 64Multiple Conditions Inside an if Statement 65else and else if 69Comparing Strings 70The switch Statement 71Executing the Same Code for Different Cases 75Looping—The for and while Statements 76The for Loop 76The for…in Loop 80The while Loop 80The do…while loop 82The break and continue Statements 83Summary 84Chapter 4: Functions and Scope 87Creating Your Own Functions 88Scope and Lifetime 92Global Scope 92Functional Scope 93Identifier Lookup 93Functions as Values 94Summary 97Chapter 5: Javascript—An Object‐Based Language 99Object‐Based Programming 100What are Objects? 100Objects in JavaScript 100Using JavaScript Objects 101Creating an Object 102Using an Object’s Properties 103Calling an Object’s Methods 104Primitives and Objects 104JavaScript’s Native Object Types 105String Objects 105The length Property 106Finding a String Inside Another String—The indexOf()and lastIndexOf() Methods 106Copying Part of a String—The substr() and substring() Methods 109Converting Case—The toLowerCase() and toUpperCase() Methods 110Selecting a Single Character from a String—The charAt() and charCodeAt() Methods 111Converting Character Codes to a String—The fromCharCode() Method 115Removing Leading and Trailing Whitespace—The trim() Method 115Array Objects 116Finding Out How Many Elements are in an Array—The length Property 116Adding Elements—The push() Method 117Joining Arrays—The concat() Method 117Copying Part of an Array—The slice() Method 118Converting an Array into a Single String—The join() Method 119Putting Your Array in Order—The sort() Method 119Putting Your Array into Reverse Order—The reverse() Method 121Finding Array Elements—The indexOf() and lastIndexOf() Methods 122Iterating through an Array without Loops 123The Math Object 126The abs() Method 127Finding the Largest and Smallest Numbers—The min() and max() Methods 127Rounding Numbers 127The random() Method 131The pow() Method 132Number Objects 134The toFixed() Method 134Date Objects 135Creating a Date Object 135Getting Date Values 136Setting Date Values 139Calculations and Dates 140Getting Time Values 140Setting Time Values 143Creating Your Own Custom Objects 144Creating New Types of Objects (Reference Types) 148Defining a Reference Type 149Creating and Using Reference Type Instances 150Summary 151Chapter 6: String Manipulation 153Additional String Methods 154The split() Method 154The replace() Method 156The search() Method 157The match() Method 157Regular Expressions 158Simple Regular Expressions 159Regular Expressions: Special Characters 162Text, Numbers, and Punctuation 162Repetition Characters 165Position Characters 166Covering All Eventualities 170Grouping Regular Expressions 171Reusing Groups of Characters 173The String Object 175The split() Method 175The replace() Method 177The search() Method 179The match() Method 180Using the RegExp Object’s Constructor 183Telephone Number Validation 185Validating a Postal Code 187Validating an E‐mail Address 189Validating a Domain Name 189Validating a Person’s Address 190Validating the Complete Address 190Summary 191Chapter 7: Date, Time, and Timers 193World Time 194Setting and Getting a Date Object’s UTC Date and Time 197Timers in a Web Page 200One‐Shot Timer 200Setting a Timer that Fires at Regular Intervals 202Summary 203Chapter 8: Programming the Browser 205Introduction to the Browser’s Objects 206The window Object 207The history Object 208The location Object 209The navigator Object 210The geolocation Object 210The screen Object 213The document Object 213Using the document Object 214The images Collection 216The links Collection 218Determining the User’s Browser 218Feature Detection 218Browser Sniffing 221Summary 225Chapter 9: DOM Scripting 229The Web Standards 231HTML 232ECMAScript 233The Document Object Model 234The DOM Standard 234Level 0 234Level 1 234Level 2 235Level 3 235Level 4 235Browser Compliance with the Standards 235Differences between the DOM and the BOM 236Representing the HTML Document as a Tree Structure 236What is a Tree Structure? 236An Example HTML Page 237The Core DOM Objects 238Base DOM Objects 238High‐Level DOM Objects 239DOM Objects and Their Properties and Methods 240The Document Object and its Methods 240The Element Object 246The Node Object 250Manipulating the DOM 259Accessing Elements 259Changing Appearances 259Using the style Property 259Changing the class Attribute 262Positioning and Moving Content 263Example: Animated Advertisement 264Are We There Yet? 264Performing the Animation 265Summary 268Chapter 10: Events 271Types of Events 272Connecting Code to Events 273Handling Events via HTML Attributes 273Handling Events via Object Properties 280The Standard Event Model 283Connecting Code to Events—The Standard Way 283Using Event Data 289Event Handling in Old Versions of Internet Explorer 298Accessing the event Object 298Using Event Data 300Writing Cross‐Browser Code 307Native Drag and Drop 317Making Content Draggable 318Creating a Drop Target 319Transferring Data 325Summary 333Chapter 11: HTML Forms: Interacting With the User 335HTML Forms 336Traditional Form Object Properties and Methods 338HTML Elements in Forms 339Common Properties and Methods 340The name Property 340The value Property 340The form Property 340The type Property 340The focus() and blur() Methods 340Button Elements 341Text Elements 345The Text Box 345Problems with Firefox and the blur Event 350The Password Text Box 351The Hidden Text Box 351The textarea Element 351Check Boxes and Radio Buttons 355Selection Boxes 364Adding and Removing Options 365Adding New Options with Standard Methods 369Select Element Events 370HTML5 Form Object Properties and Methods 375New Input Types 376New Elements 380The Element 380The and Elements 382Summary 386Chapter 12: JSON 391XML 392JSON 393Simple Values 394Objects 394Arrays 395Serializing Into JSON 396Parsing JSON 396Summary 400Chapter 13: Data Storage 403Baking Your First Cookie 404A Fresh‐Baked Cookie 404Viewing Cookies in Internet Explorer 404Viewing Cookies in Firefox 409Viewing Cookies in Chrome 411The Cookie String 413name and value 413expires 413path 414domain 415secure 416Creating a Cookie 416Getting a Cookie’s Value 419Cookie Limitations 424A User May Disable Cookies 424Number and Information Limitation 425Cookie Security and IE 425Web Storage 426Setting Data 427Getting Data 428Removing Data 428Storing Data as Strings 428Viewing Web Storage Content 431Summary 432Chapter 14: Ajax 435What is Ajax? 436What Can It Do? 436Google Maps 436Google Suggest 436Browser Support 436Using the XMLHttpRequest Object 438Creating an XMLHttpRequest Object 438Using the XMLHttpRequest Object 438Asynchronous Requests 440Creating a Simple Ajax Module 441Planning the HttpRequest Module 441The HttpRequest Constructor 442Creating the send() Method 443The Full Code 443Validating Form Fields with Ajax 444Requesting Information 445The Received Data 445Before You Begin 446A Web Server 446PHP 447Things to Watch Out For 453Security Issues 454The Same‐Origin Policy 454CORS 454Usability Concerns 455The Browser’s Back Button 455Creating a Back/Forward‐Capable Form with an IFrame 455The Server Response 456Dealing with Delays 460Degrade Gracefully When Ajax Fails 461Summary 462Chapter 15: HTML5 Media 463A Primer 464Scripting Media 467Methods 468Properties 471Events 477Summary 481Chapter 16: jQuery 483Getting jQuery 484jQuery’s API 485Selecting Elements 485Changing Style 487Adding and Removing CSS Classes 488Toggling Classes 489Checking if a Class Exists 490Creating, Appending, and Removing Elements 490Creating Elements 491Appending Elements 491Removing Elements 492Handling Events 492The jQuery Event Object 493Rewriting the Tab Strip with jQuery 494Using jQuery for Ajax 497Understanding the jQuery Function 497Automatically Parsing JSON Data 498The jqXHR Object 498Summary 504Chapter 17: Other Javascript Libraries 505Digging into Modernizr 506Getting Modernizr 507Modernizr’s API 508Custom Tests 509Loading Resources 510Diving into Prototype 515Getting Prototype 515Testing Your Prototype Installation 516Retrieving Elements 517Selecting Elements with CSS Selectors 518Performing an Operation on Elements Selected with $$() 519Manipulating Style 519Creating, Inserting, and Removing Elements 520Creating an Element 520Adding Content 520Removing an Element 521Using Events 521Rewriting the Tab Strip with Prototype 522Using Ajax Support 525Delving into MooTools 531Getting MooTools 531Testing Your MooTools Installation 531Finding Elements 533Selecting Elements with CSS Selectors 533Performing Operations on Elements 533Changing Style 534Creating, Inserting, and Removing Elements 535Using Events 536Rewriting the Tab Strip with MooTools 537Ajax Support in MooTools 540Summary 546Chapter 18: Common Mistakes, Debugging, and Error Handling 549D’oh! I Can’t Believe I Just Did That: Some Common Mistakes 550Undefi ned Variables 550Case Sensitivity 551Incorrect Number of Closing Braces 552Incorrect Number of Closing Parentheses 553Using Equals (=) Rather than Equality (==) 553Using a Method as a Property and Vice Versa 554Missing Plus Signs during Concatenation 554Error Handling 555Preventing Errors 555The try…catch Statements 556Throwing Errors 557Nested try…catch Statements 562finally Clauses 562Debugging 563Debugging in Chrome (and Opera) 564Setting Breakpoints 566Scope Variables and Watches 566Stepping through Code 567The Console 571Call Stack Window 573Debugging in Internet Explorer 574Setting Breakpoints 576Adding Watches 576Stepping through Code 576The Console 577Debugging in Firefox with Firebug 578Setting Breakpoints 578Watches 579Stepping through Code 580The Console 580Debugging in Safari 580Setting Breakpoints 583Adding Watches 583Stepping through Code 583The Console 583Summary 583Appendix A: Answers to Exercises 587Appendix B: Javascript Core Reference 653Appendix C: W3C DOM Reference 683Appendix D: Latin‐1 Character Set 715Index 723