Beginning JavaScript (with DOM Scripting and AJAX)

About the Book

This is a book about JavaScript. When I got commissioned to write it, I had one goal in mind: To write a book that teaches you the language, uses real-world examples and is not connected to the ‚here and now‛ but teaches timeless principles instead. Writing a beginner’s book about JavaScript is a tricky subject: Far too many JavaScript publications either go the ‚Hello World‛ way, showing you theoretical examples or the ‚pimp my web site‛ way explaining flashy examples and browser-specific tricks.

I hope I succeeded in avoiding both and instead giving you a good start to deal with already written JavaScript and to learn how to write your own to solve a specific task. You’ll learn about the basics of JavaScript but will also find up-to-date examples of Ajax and DOM scripting.

I approach JavaScript like any other job I do: Do it right the first time and make it easy for others to understand what you have done and how to maintain it and the task will not come back to haunt you. If you are a JavaScript novice, this book will teach you how to write clean and maintainable code, if you already used JavaScript, it’ll help you brush up on it and say good-bye to old practices that made sense when the web was young but are not applicable any longer.

The script examples in this book have been developed with certain ideals in mind: Being agnostic of platform or browser, accessible, using web standards and being very easy to maintain by others.

I’ve used my 8 years of experience developing JavaScript in the most diverse environments and I am not shy to show you mistakes I have done in the past to help you avoid making the same.

(yes this is nicked from the back of the book)

Table of Contents

• Foreword xiii
• About the Author xv
• About the Technical Reviewer xvii
• Introduction xix
• CHAPTER 1 Getting Started with JavaScript 1
  • The Why of JavaScript 3
  • What Is JavaScript? 4
  • Problems and Merits of JavaScript 5
  • Why Use JavaScript If It Cannot Be Relied On? 6
  • JavaScript in a Web Page and Essential Syntax 7
    • JavaScript Syntax 8
    • Code Execution 9
    • An Aside About Functions 11
  • Objects 12
  • A Simple JavaScript Example 13
  • Summary 16
• CHAPTER 2 Data and Decisions 17
  • Data, Data Types, and Data Operators 18
    • The String Data Type 18
    • Operators 21
    • JavaScript Variables 23
    • Converting Different Types of Data 26
  • The Composite Data Types: Array and Object 30
    • Objects JavaScript Supplies You with: String, Date and Math 30
  • Arrays 39
    • The Array Object’s Methods and Properties 42
  • Making Decisions in JavaScript 45
    • The Logical and Comparison Operators 45
    • Conditional Statements 49
    • Testing Multiple Values: the switch Statement 52
    • Repeating Things: Loops 54
  • Summary 59
• CHAPTER 3 From DHTML to DOM Scripting 61
  • JavaScript As the Behavior Layer 63
    • Object Detection vs. Browser Dependence 65
    • Progressive Enhancement 68
  • JavaScript and Accessibility 69
  • Good Coding Practices 71
    • Naming Conventions 71
    • Code Layout 72
    • Commenting 74
    • Functions 76
    • Short Code via the Ternary Operator 79
    • Sorting and Reuse of Functions 80
    • Variable and Function Scope 80
    • Keeping Scripts Safe with the Object Literal 81
  • Summary 83
• CHAPTER 4 HTML and JavaScript 85
  • The Anatomy of an HTML Document 85
  • Providing Feedback in Web Pages via JavaScript: The Old School Ways 89
    • Using window Methods: prompt(), alert(),and confirm() 90
  • Accessing the Document via the DOM 96
  • Of Children, Parents, Siblings, and Values 99
    • From the Parents to the Children 100
    • From the Children to the Parents 102
    • Among Siblings 103
  • Changing Attributes of Elements 107
  • Creating, Removing, and Replacing Elements 109
    • Avoiding NOSCRIPT 113
    • Shortening Your Scripts via InnerHTML 115
    • DOM Summary: Your Cheat Sheet 116
    • DOMhelp: Our Own Helper Library 118
  • Summary 122
• CHAPTER 5 Presentation and Behavior (CSS and Event Handling) 123
  • Changing the Presentation Layer via JavaScript 123
    • Helping the CSS Designer 131
  • Changing the Document’s Behavior via Event Handling 153
    • Events in the W3C-Compliant World 156
    • Fixing Events for the Non-W3C-Compliant World 165
    • Never Stop Optimizing 172
    • The Ugly Page Load Problem and Its Ugly Solutions 173
    • Reading and Filtering Keyboard Entries 174
    • The Dangers of Event Handling 179
  • Summary 180
• CHAPTER 6 Common Uses of JavaScript: Images and Windows 183
  • Images and JavaScript 183
    • Basics of Image Scripting 184
    • Preloading Images 186
    • Rollover Effects 187
    • Slide Shows 196
    • Summary of Images and JavaScript 211
  • Windows and JavaScript 212
    • Window Properties 213
    • Window Methods 215
    • Summary: Windows and JavaScript 238
  • Summary 239
• CHAPTER 7 JavaScript and User Interaction: Navigation and Forms 241
  • Navigation and JavaScript 241
    • The Fear of the Page Reload 242
    • Basics of Navigation and JavaScript 242
    • Browser Navigation 245
    • In-Page Navigation 246
    • Site Navigation 255
    • Pagination 263
    • Summary of Navigation with JavaScript 272
  • Forms and JavaScript 272
    • Basics of Forms with JavaScript 274
    • Form Elements 275
    • Interactive Forms: Hiding and Showing Dependent Elements 291
    • Custom Form Elements 297
    • Summary of Forms and JavaScript 297
  • Summary 297
• CHAPTER 8 Back-End Interaction with Ajax 299
  • Household Cleaning Liquid, Football Club, or Flash Gordon’s Spacecraft: What Is Ajax? 300
  • Et Tu, Cache? 309
  • Putting the X Back into Ajax 309
    • Replacing XML with JSON 314
    • Using Server-Side Scripts to Reach Third-Party Content 316
    • XHR on Slow Connections 320
    • A Larger Ajax Example: Connected Select Boxes 323
    • Optional Dynamic Ajax Menus 331
  • Summary 340
• CHAPTER 9 Data Validation Techniques 343
  • Pros and Cons of Client-Side JavaScript Validation 343
  • A Quick Reminder About Protecting Content with JavaScript 344
  • The One-Size-Fits-All Validation Myth 345
  • Basic JavaScript Validation with String and Numeric Methods 346
    • String Validation Methods 346
    • Numeric Validation Methods 352
  • Regular Expressions 357
    • Syntax and Attributes 357
    • Wildcard Searches, Constraining Scope, and Alternatives 358
    • Restricting the Number of Characters with Quantifiers 359
    • Word Boundaries, Whitespace, and Other Shortcuts 360
    • Methods Using Regular Expressions 361
    • The Power of Parenthesis Grouping 361
    • Regular Expression Resources 363
  • Summary of Validation Methods 363
  • Form Validation Techniques 364
    • Designating Mandatory Fields 364
    • The Hidden Field Method 364
    • The Indicator Element Method 365
    • The CSS Classes Method 366
    • The Custom Attribute Method 366
    • Failures of These Methods 367
    • Sharing Validation Rules 367
  • Giving Users Validation Feedback 369
    • Showing a List of Erroneous Fields 369
    • Replacing the Main Form with a Clickable Error Message 374
    • Highlighting Erroneous Fields Individually 376
    • Instant Validation Feedback 379
  • Other Dynamic Validation Methods 381
  • Summary 385
• CHAPTER 10 Modern JavaScript Case Study: A Dynamic Gallery 387
  • Basics of Thumbnail Galleries 387
  • What Is a Thumbnail Gallery and What Should It Do? 388
  • Static Thumbnail Galleries 388
  • Faking Dynamic Galleries with JavaScript 389
  • Displaying Captions 396
  • Dynamic Thumbnail Galleries 401
  • Creating an Image Badge From a Folder 406
  • Summary 414
• CHAPTER 11 Using Third-Party JavaScript 415
  • What the Web Offers You 415
  • Code Snippets, RSS Feeds, APIs, and Libraries 416
    • RSS Feeds and REST APIs 417
    • Examples of REST APIs 418
  • Using a Library: Short, Shorter, jQuery 419
    • Dangers of jQuery and Other Libraries Using Their Own Syntax 426
  • Using an API: Adding a Map to Your Site with Google Maps 427
  • Full Service: The Yahoo Developer Network and User Interface Library 438
    • Bouncy Headlines Using YUI 439
    • Replacing Pop-Up Windows Using the YUI Connection Manager and Container Components 444
    • Yahoo User Interface Library Summary 449
  • Summary 450
• APPENDIX Debugging JavaScript 451
  • Common JavaScript Mistakes 451
    • Misspellings and Case-Sensitivity Issues 451
    • Trying to Access Undefined Variables 452
    • Incorrect Number of Closing Braces and Parentheses 454
    • Concatenation Gone Wrong 456
    • Assigning Instead of Testing the Value of a Variable 458
  • Tracing Errors with alert() and Console Elements 458
  • Error Handling with try and catch() 459
  • Sequential Uncommenting 462
  • Error Reporting in Browsers 463
    • Microsoft Internet Explorer 6 463
    • Safari 464
    • Opera 8.5 466
    • Firefox 1.5.0.3 466
  • JSLint and JSUNIT 470
  • Summary 470
  • INDEX 471

• Home
• The Code
• The Book
• The Author
• Contacting Options
• Related Publications