Learning JavaScript Table of Contents Preface ..................................................................... xi 1. Hello JavaScript! ........................................................ 1 Hello World! 1 Hello World! Once Again 2 The script Tag 3 JavaScript Versus ECMAScript Versus JScript 5 Defining Functions in JavaScript 6 Event Handlers 7 The document Browser Object 8 The property Operator 9 The var Keyword and Scope 10 Statements 10 Comments 11 What You Didn’t See: HTML Comments and CDATA Sections 12 JavaScript Files 14 Accessibility and JavaScript Best Practices 15 Accessibility Guidelines 16 noscript 17 2. JavaScript Data Types and Variables ....................................... 19 Identifying Variables 20 Naming Guidelines 21 Primitive Types 23 The String Data Type 24 String Escape Sequences 25 String Encoding 26 Converting to Strings 28 The Boolean Data Type 30 The Number Data Type 31 The null and undefined Variables 34 Constants: Named but Not Variables 36 v Test Your Knowledge: Quiz 36 Test Your Knowledge: Answers 37 3. Operators and Statements ............................................... 39 The Format of a JavaScript Statement 39 The Assignment Statement 41 The Arithmetic Operators 41 The Unary Operators 43 Operator Precedence 44 A Handy Shortcut: Assignment with Operation 45 The Bitwise Operators 45 Conditional Statements and Program Flow 47 The if…else Conditional Statement 49 The switch Conditional Statement 51 The Conditional Operators 54 The Equality and Identity (String Equality) Operators 54 Other Relational Operators 57 The One and Only JavaScript Ternary Operator 59 The Logical Operators 59 Advanced Statements: The Loops 61 The while Loop 61 The do…while Loop 62 The for Loops 63 Test Your Knowledge: Quiz 65 Test Your Knowledge: Answers 66 4. The JavaScript Objects .................................................. 69 Primitive Data Types As Objects 69 Boolean, Number, and String 71 The Boolean Object 71 The Number Object, Static Properties, and Instance Methods 73 The String Object 75 Regular Expressions and RegExp 81 The RegExp Methods: test and exec 82 Working with Regular Expressions 84 The Date Object 89 The Math Object 92 The Math Properties 92 The Math Methods 93 JavaScript Arrays 95 FIFO Queues 97 Test Your Knowledge: Quiz 100 Test Your Knowledge: Answers 100 vi | Table of Contents 5. Functions ............................................................ 103 Declarative Functions 103 Function Naming Conventions and Size 104 Function Returns and Arguments 104 Anonymous Functions 107 Function Literals 109 Functions and Recursion 111 Nested Functions, Function Closure, and Memory Leaks 113 Callback Functions 116 Function Type Summary 118 Function Scope 119 Function As Object 120 Test Your Knowledge: Quiz 120 Test Your Knowledge: Answers 121 6. Troubleshooting, Debugging, and Cross-Browser Issues ..................... 123 Simple Ways to Debug 123 Development and Debugging Tools by Browser 124 Firefox and Firebug 124 Using console.log 127 Firefox, the Web Developer Toolkit, and NoScript 129 Opera and Dragonfly 130 Safari/WebKit and the Web Inspector 132 Internet Explorer 133 Dealing with Cross-Browser Differences 134 Object Detection 135 Where Object Detection Fails 138 DOCTYPE, X-UA-Compatible, and Quirks Mode 141 Breaking Backward Compatibility: The IE8 http-equiv Meta Tag 141 Test Your Knowledge: Quiz 142 Test Your Knowledge: Answers 142 7. Catching Events ...................................................... 145 The Events 145 Level 0 Event Handling 146 The Event Object 149 Event Bubbling 152 Event Handlers and this 154 The DOM Level 2 Event Model 156 Generating Events 162 Test Your Knowledge: Quiz 163 Test Your Knowledge: Answers 163 Table of Contents | vii 8. Forms, Form Events, and Validation ...................................... 165 Attaching Events to Forms: Different Approaches 166 Cross-Browser Event Handling 166 Canceling an Event 167 Selection 168 Dynamically Modifying the Selection 171 Selection and Auto-Selection 172 Radio Buttons and Checkboxes 175 The text, textarea, password, and hidden Input Elements 178 Text Validation 180 Input Fields and Regular Expression Validation 182 Forms, the Sandbox, and XSS 184 Test Your Knowledge: Quiz 186 Test Your Knowledge: Answers 186 9. Browser As Puzzle Box ................................................. 189 The Structure of the Browser at a Glance 189 The window Object 190 Creating and Controlling Windows 191 The Dialogs: alert, confirm, and prompt 191 Creating Custom Windows 192 Modifying a Window 195 Frames 199 The location Object 201 Remote Scripting with the iframe 203 Adding and Controlling Timers 207 The history, screen, and navigator Objects 209 The history Object 209 The screen Object 210 The navigator Object 210 The history, screen, and navigator Properties in Action 211 The Document Object 214 Links 214 Images 215 innerHTML 217 Test Your Knowledge: Quiz 219 Test Your Knowledge: Answers 219 10. Cookies and Other Client-Side Storage Techniques .......................... 221 The JavaScript Sandbox and Cookie Security 221 The Same-Origin Security Policy 222 Using document.domain 222 All About Cookies 223 viii | Table of Contents Storing and Reading Cookies 223 Flash Shared Objects, Google Gears, and HTML5 DOM Storage 228 Test Your Knowledge: Quiz 231 Test Your Knowledge: Answers 231 11. The DOM, or Web Page As Tree .......................................... 233 A Tale of Two Interfaces 233 The DOM HTML API 234 The DOM HTML Objects and Their Properties 235 DOM (HTML) Collections 239 Understanding the DOM: The Core API 242 The DOM Tree 243 Node Properties and Methods 245 The DOM Core Document Object 249 Element and Access in Context 253 Modifying the Tree 255 Test Your Knowledge: Quiz 259 Test Your Knowledge: Answers 260 12. Dynamic Pages ....................................................... 261 JavaScript, CSS, and the DOM 261 The Style Property/Attributes 261 Fonts and Text 265 Font Style Properties 266 Text Properties 267 Position and Movement 269 Dynamic Positioning 270 Drag-and-Drop 274 Size and Clipping 277 Overflow and Dynamic Content 278 The Clipping Rectangle 280 Display, Visibility, and Opacity 282 The Right Tool for the Right Effect 283 Just-in-Time Information 283 Revisiting the DOM: Collapsing Forms, Query Selectors, and Class Names 286 Test Your Knowledge: Quiz 291 Test Your Knowledge: Answers 291 13. Creating Custom JavaScript Objects ...................................... 293 The JavaScript Object and Prototyping 293 Prototyping 293 Creating Your Own Custom JavaScript Objects 296 Enter the Function 296 Table of Contents | ix Public and Private Properties and Where this Enters the Picture 299 Getters and Setters 300 Object Encapsulation 301 Chaining Constructors and JavaScript Inheritance 308 One-Off Objects 311 Object Libraries: Packaging Your Objects for Reuse 314 Advanced Error Handling Techniques (try, throw, catch) 315 Test Your Knowledge: Quiz 318 Test Your Knowledge: Answers 319 14. Moving Outside the Page with Ajax ...................................... 321 How Ajax Works 321 Hello Ajax World! 322 The XMLHttpRequest Object and Preparing to Send the Request 325 Object, Object, Who Has the Object? 327 The XMLHttpRequest Methods 328 Processing the Web Request Return 331 Checking the readyState and status of an Ajax Request 331 Processing the Web Request Result 333 Ajax: It’s Not Only Code 335 The Dynamic Nature of Ajax 335 Ajax Accessibility and Degrading Gracefully 336 Security and Workarounds 337 JavaScript and Ajax Libraries 338 Test Your Knowledge: Quiz 341 Test Your Knowledge: Answers 342 15. Ajax Data: XML or JSON? ................................................ 343 XML-Formatted Ajax Results 343 The Data’s MIME Type 343 Generating the XML on the Server 344 Processing the XML on the Client 347 JavaScript Object Notation 350 A Simple JSON Application 351 The JSON Object 354 Test Your Knowledge: Quiz 358 Test Your Knowledge: Answers 360 Index ..................................................................... 363 x | Table of Contents Preface JavaScript was originally intended to be a scripting interface between a web page loaded in the browser client (Netscape Navigator at the time) and the application on the server. Since its introduction in 1995, JavaScript has become a key component of web devel- opment, and has found uses elsewhere as well. This book covers the JavaScript language, from its most primitive data types that have been around since the beginning of the language, to its most complex features, includ- ing those that have to do with Ajax and dynamic page effects. After reading this book, you will have the basics you need to work with even the most sophisticated libraries and web applications. Audience Readers of this book should be familiar with web page technology, including Cascading Style Sheets (CSS) and HTML/XHTML. Previous programming experience isn’t required, though some sections may require extra review if you have no previous exposure to programming. This book should help: • Anyone who wants, or needs, to integrate JavaScript into his own personal website or sites • Anyone who uses a content-management tool, such as a weblogging tool, and wants to better understand the scripting components incorporated into her tool templates • Web developers who seek to integrate JavaScript and some of the dynamic web page/Ajax features into their websites • Web service developers who want to develop for a new market of clients • Teachers who use web technologies as either the focus or a component of their courses xi