BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Resig Ferguson Paxton RELATED Pro JavaScript Techniques Pro JavaScript Techniques is the ultimate JavaScript book for today’s web developer. It provides everything you need to know about modern JavaScript, and teaches you what JavaScript can do for your web sites. This book doesn’t waste any time looking at things you already know, but instead concentrates on fundamental, vital topics—what modern JavaScripting is (and isn’t), and pitfalls to be wary of. You will learn about the ‘this’ keyword, as well as new object tools. You will be able to create reusable code with encapsulation, overloading and inheritance. The most recent techniques for debugging and testing are covered comprehensively, with information on Chrome developer tools, Jasmine, PhantomJS and Protractor. This update finishes with chapters on constructing single-page web applications that dominate the modern web. The book is filled with real-world examples and case studies, as well as numerous reusable functions and classes to save you time in your development. You will learn the practical skills needed to build professional, dynamic web applications. Pro JavaScript Techniques is an indispensable reference for any professional JavaScript web developer—enhance your JavaScript development today. Shelve in: ISBN 978-1-4302-6391-3 53999 Web Development/JavaScript User level: Intermediate–Advanced SOURCE CODE ONLINE 9781430 263913 SECOND EDITION www.apress.com www.allitebooks.com For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.allitebooks.com Contents at a Glance About the Authors .................................................................................................. xiii About the Technical Reviewers ...............................................................................xv Acknowledgments .................................................................................................xvii ■ Chapter 1: Professional JavaScript Techniques .................................................... 1 ■ Chapter 2: Features, Functions, and Objects ......................................................... 7 ■ Chapter 3: Creating Reusable Code ..................................................................... 23 ■ Chapter 4: Debugging JavaScript Code ............................................................... 39 ■ Chapter 5: The Document Object Model .............................................................. 49 ■ Chapter 6: Events ................................................................................................ 73 ■ Chapter 7: JavaScript and Form Validation ......................................................... 95 ■ Chapter 8: Introduction to Ajax ......................................................................... 107 ■ Chapter 9: Web Production Tools ....................................................................... 117 ■ Chapter 10: AngularJS and Testing ................................................................... 125 ■ Chapter 11: The Future of JavaScript ................................................................ 141 ■ Appendix A: DOM Reference .............................................................................. 161 Index ..................................................................................................................... 177 v www.allitebooks.com CHAPTER 1 Professional JavaScript Techniques Welcome to Pro JavaScript Techniques. This book provides an overview of the current state of JavaScript, particularly as it applies to the professional programmer. Who is the professional programmer? Someone who has a firm grasp of the basics of JavaScript (and probably several other languages). You are interested in the breadth and depth of JavaScript. You want to look at the typical features like the Document Object Model (DOM), but also learn about what’s going on with all this talk of Model-View-Controller (MVC) on the client side. Updated APIs, new features and functionality, and creative applications of code are what you are looking for here. This is the second edition of this book. Much has changed since the first edition came out in 2006. At that time, JavaScript was going through a somewhat painful transition from being a toy scripting language to being a language that was useful and effective for several different tasks. It was, if you will, JavaScript’s adolescence. Now, JavaScript is at the end of another transition: to continue the metaphor, from adolescence to adulthood. JavaScript usage is nearly ubiquitous, with anywhere from 85 to 95 percent of websites, depending on whose statistics you believe, having some JavaScript on their main page. Many people speak of JavaScript as the most popular programming language in the world (in the number of people who use it on a regular basis). But more important than mere usage are effectiveness and capability. JavaScript has transitioned from a toy language (image rollovers! status bar text manipulations!) to an effective, if limited tool (think of client-side form validation), to its current position as a broad-featured programming language no longer limited to mere browsers. Programmers are writing JavaScript tools that provide MVC functionality, which was long the domain of the server, as well as complex data visualizations, template libraries, and more. The list goes on and on. Where in the past, designers would have relied on a .NET or Java Swing client to provide a full-featured, rich interface to server-side data, we can now realize that application in JavaScript with a browser. And, using Node.js, we have JavaScript’s own version of a virtual machine, an executable that can run any number of different applications, all written in JavaScript and none requiring a browser. This chapter will describe how we got here and where we are going. It will look at the various improvements in browser technology (and popularity) that have abetted the JavaScript Revolution. The state of JavaScript itself needs inspection, as we want to know where we are before we look at where we are going. Then, as we examine the chapters to come, you will see what the professional JavaScript programmer needs to know to live up to his or her title. How Did We Get Here? As of the first edition of the book, Google Chrome and Mozilla Firefox were relatively new kids on the block. Internet Explorer 6 and 7 ruled the roost, with version 8 gaining some popularity. Several factors combined to jump-start JavaScript development. For most of its life, JavaScript was dependent upon the browser. The browser is the runtime environment for JavaScript, and a programmer’s access to JavaScript functionality was highly dependent 1 www.allitebooks.com CHAPTER 1 ■ PROFESSIONAL JAVASCRIPT TECHNIQUES upon the make, model, and version of browser visiting said programmer’s website. By the mid-2000s, the browser wars of the 90s had been easily won by Internet Explorer, and browser development stagnated. Two browsers challenged this state of affairs: Mozilla Firefox and Google Chrome. Firefox was the descendant of Netscape, one of the earliest web browsers. Chrome had Google’s backing, more than enough to make it an instant player on the scene. But both of these browsers made a few design decisions that facilitated the JavaScript revolution. The first decision was to support the World Wide Web consortium’s implementation of various standards. Whether dealing with the DOM, event handling, or Ajax, Chrome and Firefox generally followed the spec and implemented it as well as possible. For programmers, this meant that we didn’t have to write separate code for Firefox and Chrome. We were already used to writing separate code for IE and something else, so having branching code in itself was not new. But making sure that the branching was not overly complex was a welcome relief. Speaking of standards, Firefox and Chrome also put in a lot of work with the European Computer Manufacturer’s Association (ECMA, now styled Ecma). Ecma is the standards body that oversees JavaScript. (To be technical, Ecma oversees the ECMAScript standard, since JavaScript is a trademark of Oracle and… well, we don’t really care about those details, do we? We will use JavaScript to refer to the language and ECMAScript to refer to the specification to which a JavaScript implementation adheres.) ECMAScript standards had languished in much the same way as IE development. With the rise of real browser competition, the ECMAScript standard was taken up again. ECMAScript version 5 (2009) codified many of the changes that had been made in the ten years (!) since the previous version of the standard. The group itself was also energized, with version 5.1 coming out in 2011. The future is provided for, with significant work currently being done on both versions 6 and 7 of the standard. To give credit where credit is due, Chrome pushed the updating of JavaScript as well. The Chrome JavaScript engine, called V8, was a very important part of Chrome’s debut in 2008. The Chrome team built an engine that was much faster than most JavaScript engines, and it has kept that goal at the top of the list for subsequent versions. In fact, the V8 engine was so impressive that it became the core of Node.js, a browser-independent JavaScript interpreter. Originally intended as a server that would use JavaScript as its main application language, Node has become a flexible platform for running