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 ............................................................................................................... xv About the Technical Reviewer .......................................................................................... xvii Acknowledgments ............................................................................................................. xix Introduction ....................................................................................................................... xxi ■ Chapter 1: Getting Started with JavaScript .......................................................................1 ■ Chapter 2: Data and Decisions ........................................................................................13 ■ Chapter 3: From DHTML to DOM Scripting .......................................................................49 ■ Chapter 4: HTML and JavaScript .....................................................................................69 ■ Chapter 5: Presentation and Behavior (CSS and Event Handling) .................................101 ■ Chapter 6: Common Uses of JavaScript: Images and Windows ....................................149 ■ Chapter 7: JavaScript and User Interaction: Navigation and Forms .............................199 ■ Chapter 8: Back-End Interaction with Ajax and Node.js ...............................................247 ■ Chapter 9: Data Validation Techniques ..........................................................................279 ■ Chapter 10: Modern JavaScript Case Study: A Dynamic Gallery ...................................297 ■ Chapter 11: Using Third-Party JavaScript .....................................................................321 ■ Appendix A: Debugging JavaScript ...............................................................................343 Index .................................................................................................................................361 v www.allitebooks.com Introduction JavaScript has gone though a huge transformation, from being something that was nice to know to being essential to developing web sites that are fully featured and take full advantage of the new capabilities built into browsers. The amount of attention given to JavaScript though libraries and frameworks has grown at an accelerated rate. This was not always the case. JavaScript was first introduced as LiveScript in 1995 by Netscape. Over time, Microsoft’s Internet Explorer adopted it and Netscape changed the name to JavaScript with the release of Netscape Navigator 2. As the two companies continued to compete, support was not that good. At worst, developers had to make two different versions of a site to support the most popular browsers (which, at the time, were Netscape 4 and Internet Explorer 4). Browser support has improved greatly. The World Wide Web Consortium (W3C), working with browser makers, developed a standard way of representing and interacting with HTML documents, called the Document Objet Model (DOM), and a scripting language, called ECMAScript. Over the years, compliance with these standards has improved. This book starts with the basics and gives you a good foundation on how to write JavaScript in an unobtrusive way, keeping your structure (HTML), presentation (CSS), and behavior (JavaScript) separate. There are also examples of how to keep your sites accessible for visitors using screen readers, as well as examples of how to develop your site if JavaScript is not available. We also cover subjects like objected detection versus browser detection, AJAX, HTML 5 Form validation, and an introduction to jQuery. The goal of this book is to help you understand JavaScipt. If you haven’t looked at JavaScript in a while, you’ll be glad to know a lot has changed for the better. You can use this book as a guide to update your skills. If you are new to JavaScript, this book helps you from the beginning. We start with explaining what a variable is and later move on to how to add Google Maps to your site. This book is full of examples you can use to enhance your site and add features based on the enhanced capabilities built into current browsers. xxi www.allitebooks.com CHAPTER 1 Getting Started with JavaScript This book will teach you about JavaScript and how to use it in a practical manner. After you read it, you’ll be able to • Understand JavaScript syntax and structures. • Create scripts that are easy to understand and maintain. • Write scripts that do not interfere with others. • Write scripts that make web sites easier to use without blocking out non-JavaScript users. • Write scripts that are independent of the browser or user agent trying to understand them—which means that in some years they will still be usable and won’t rely on obsolete technology. • Enhance a web site with JavaScript, and allow developers without any scripting knowledge to change the look and feel. • Enhance a web document with JavaScript, and allow HTML developers to use your functionality by simply adding a CSS class to an element. • Use progressive enhancement to make a web document nicer only when and if the user agent allows for it. • Use Ajax to bridge the gap between the back end and client side, thus creating sites that are easier to maintain and appear much slicker to the user. • Use JavaScript as part of a web methodology that enables you to maintain it independently without interfering with the other development streams. What you will not find here are • JavaScript applications that are browser specific • JavaScript that is only there to prove that it can be used and does not enhance the visitor’s experience • JavaScript that promotes unwanted content, such as pop-up windows or other flashy techniques like tickers or animation for animation’s sake JavaScript is essential in modern web development, but you cannot take it for granted that the visitor will be able to use or even experience all the effects and functionality you can achieve with JavaScript. You can use JavaScript to completely change the web page by adding and removing or showing and hiding elements. You can offer users richer interfaces such as drag-and-drop applications or multilevel drop-down menus. However, some visitors cannot use a drag-and-drop interface because they can only use a keyboard or rely on voice recognition to use our sites. 1 www.allitebooks.com CHAPTER 1 ■ GETTING STARTED WITH JAVASCRIPT Other visitors might be dependent on hearing our sites rather than seeing them (via screen readers) and might not be notified of changes achieved via JavaScript. Last but not least, there are users who just cannot have JavaScript enabled—for example, in high-security environments like banks. Therefore, you need to back up a lot of the things you do in JavaScript with solutions on the server side. ■ Note Web design has matured over the years—long ago we stopped using FONT tags, and we deprecated visual attributes like bgcolor and started moving all the formatting and presentational attributes to a CSS file. The same cleaning process has also happened to JavaScript. Now the content, structure, presentation, and behavior of web sites are all separated from each other. Web development now is done for business and for helping the user rather than done for the sake of putting something out there and hoping it works in most environments. JavaScript is now part of an overall development methodology, which means that you develop it not to interfere with other technologies like HTML or CSS, but to interact with them or complement them. Web development has come quite a way since the 1990s, and there is not much sense in creating web sites that are static and fixed in size. Any modern web design should allow for growth as needed. It should also be accessible to everyone (which does not mean that everybody gets the same appearance—a nice multicolumn layout, for example, might make sense on a high-resolution monitor but is hard to use on a mobile phone or a tablet)—and ready for internationalization. You cannot afford any longer to build something and think it’ll last forever. Because the Web is about content and change, it’ll become obsolete if we don’t upgrade our web products constantly and allow other data sources to feed into it or get information from it. Enough introductions—you got this book to learn about JavaScript, so let’s start by talking quickly about JavaScript’s history and assets before diving right into it. In this chapter, you’ll learn • What JavaScript is, and what it can do for you • The advantages and disadvantages of JavaScript • How to add JavaScript to a web document, and what its essential syntax is • Object-oriented programming (OOP) in relation to JavaScript • How to write and run a simple JavaScript program Chances are that you have already come across JavaScript and already have an idea of what it is and what it can do, so we’ll move quite swiftly through some basics of the language and its capabilities first. If you know JavaScript well already, and you simply want to know more about the newer and more accessible features and concepts, you might skip to Chapter 3. However, there might be some information you’ve forgotten, and a bit of a review doesn’t hurt, either. The Why of JavaScript In the beginning of the Web, there was HTML and