JavaScript for Absolute Beginners Companion eBook Available 7.5 x 9.25 spine = 0.9375" 504 page count THE EXPERT’S VOICE ® IN WEB DEVELOPMENT Terry McNavage Learn to write effective JavaScript code from scratch McNavage this print for content only—size & color not accurate CYAN MAGENTA YELLOW BLACK PANTONE 123 C BOOKS FOR PROFESSIONALS BY PROFESSIONALS ® JavaScript for Absolute Beginners Dear Reader, Even though I’ve been hand-coding JavaScript for twelve years, I haven’t forgot- ten what it’s like to be just starting out. With this in mind, I wrote this book in a friendly, conversational style for web designers new to both JavaScript and pro- gramming. I assume a familiarity with HTML and CSS, but nothing more. I’m also aware that just passively staring at code samples in a book is no way to learn how to program. So, as we explore ECMAScript, a standard defining JavaScript’s core syn- tax, and DOM, a standard providing features for working with HTML, CSS, and events, you will enter and run hundreds of code snippets to see exactly how the techniques you’re learning work in the real world. All this will be done in the safe- ty of the JavaScript console of Firebug, a free add-on to Firefox for PC, Mac, or Linux. Then in the last two chapters of the book, you’ll leave the nest and hand- code a real-world application in your preferred text editor. That application will contain features like drag-and-drop, animated scrolling, sprites, and skin swap- ping. Moreover, it will dynamically add five galleries either by way of Ajax and data encoded JSON, XML, and HTML, or by dynamic script insertion and JSON with Padding (JSON-P). Don’t worry if that sounds a bit bewildering now, it’ll all make sense soon enough! Finally, you’ll make your script snappier, by incorporating leading-edge optimizations, such as advance conditional definition, lazy loaders, reverse loops, closure, minimizing reflows, and thread yielding. And even some new features from DOM3 and HTML5 that Explorer, Firefox, Safari, and Opera now implement. So, by the end of the book, you will know how to hand-code ultra- responsive interfaces. And you’ll have the kinds of JavaScript tools in your pocket that employers crave. Terry McNavage US $29.99 Shelve in Web Development\JavaScript User level: Beginner www.apress.com SOURCE CODE ONLINE Companion eBook See last page for details on $10 eBook version ISBN 978-1-4302-7219-9 9 781430 272199 52999 THE APRESS ROADMAP Beginning HTML5 and CSS3 Pro JavaScript with Mootools Pro JavaScript RIA Techniques JavaScript for Absolute Beginners for Absolute Beginners JavaScript Download from www.eBookTM.Com i JavaScript for Absolute Beginners ■ ■ ■ Terry McNavage ii JavaScript for Absolute Beginners Copyright © 2010 by Terry McNavage All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-7219-9 ISBN-13 (electronic): 978-1-4302-7218-2 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. President and Publisher: Paul Manning Lead Editors: Ben Renow-Clarke, Matthew Moodie Technical Reviewers: Kristian Besley, Rob Drimmie, Tom Barker Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes, Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Coordinating Editor: Mary Tobin Copy Editor: Kim Wimpsett Compositor: MacPS, LLC Indexer: Toma Mulligan Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer- sbm.com, or visit www.springeronline.com. For information on translations, please e-mail rights@apress.com, or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/info/bulksales. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. iii To the Little Flower, St. Thérèse de Lisieux, for sending me this rose. iv Contents at a Glance ■Contents v ■About the Author xiii ■About the Technical Reviewers xiv ■Acknowledgments xv ■Preface xvi ■Chapter 1: Representing Data with Values 1 ■Chapter 2: Type Conversion 25 ■Chapter 3: Operators 57 ■Chapter 4: Controlling Flow 97 ■Chapter 5: Member Inheritance 145 ■Chapter 6: Functions and Arrays 181 ■Chapter 7: Traversing and Modifying the DOM Tree 255 ■Chapter 8: Scripting CSS 307 ■Chapter 9: Listening for Events 347 ■Chapter 10: Scripting BOM 399 ■Index 461 v Contents ■ Contents at a Glance iv ■About the Author xiii ■About the Technical Reviewers xiv ■Acknowledgments xv ■Preface xvi ■Chapter 1: Representing Data with Values 1 What Are Value Types? 1 Creating a String Literal 2 Commenting Code 2 Gluing Strings Together with the + Operator 3 Creating a Number Literal 4 Creating a Boolean Literal 5 Naming a Value with an Identifier 6 Can I Name a Variable Anything I Want? 6 Some Valid Identifiers Are Already Taken 7 Creating an Object Literal 9 Naming Members with Identifiers 12 Creating an Array Literal 14 Creating a Function Literal 19 Summary 23  ■ CONTENTS vi ■Chapter 2: Type Conversion 25 String Members 25 Determining the Number of Characters 30 Decoding or Encoding Characters 31 Converting Case 33 Locating a Substring 35 Clipping a Substring 36 Replacing a Substring 37 Splitting a String into an Array of Smaller Strings 39 Searching with Regular Expressions 43 Explicitly Creating Wrappers 43 Converting a Value to Another Type 44 Converting a Value to a Number 46 Converting a Value to a String 50 Putting Off Learning RegExp Syntax 53 Summary 56 ■Chapter 3: Operators 57 Introducing Operator Precedence and Associativity 57 Using JavaScript Operators 60 Combining Math and Assignment Operations 61 Incrementing or Decrementing Values 66 Testing for Equality 68 Testing for Inequality 70 Comparing Objects, Arrays, and Functions 72 Determining Whether One Number or String Is Greater Than Another 74 Determining Whether One Number or String Is Less Than Another 77 Greater Than or Equal to, Less Than or Equal to 78 Creating More Complex Comparisons 81 Saying or With || 83 Saying “and” with && 84 ■ CONTENTS vii Chaining || Expressions 85  Chaining && Expressions 87 Chaining || and && Expressions 89 Conditionally Returning One of Two Values 90 Making Two Expressions Count as One 93 Deleting a Member, Element, or Variable 94 Summary 95 ■Chapter 4: Controlling Flow 97 Writing an if Condition 98 Appending an else Clause 100 To Wrap or Not to Wrap 101 Coding Several Paths with the else if Idiom 102 Controlling Flow with Conditional Expressions 105 Taking One of Several Paths with a Switch 107 Writing a while Loop 115 Aborting an Iteration but Not the Loop 118 Replacing Break with Return in a Function 120 Writing a do while loop 122 Writing a for Loop 125 Enumerating Members with a for in Loop 127 Snappier Conditionals 129 Snappier Loops 136 Summary 144 ■Chapter 5: Member Inheritance 145 Creating Objects with a Constructor 145 Classical Inheritance 149 Determining Which Type or Types an Object Is an Instance Of 156 Inherited Members Are Shared Not Copied 158 Modifying New and Past Instances of a Type 160 ■ CONTENTS viii Sharing a Prototype but Forgoing the Chain 163  Adding an Empty Chain Link 166 Stealing a Constructor 169 Prototypal Inheritance 171 Cloning Members 174 Mixins 176 Summary 179 ■Chapter 6: Functions and Arrays 181 Why Use Functions? 181 Functions Are Values 183 Function Members 184 Conditional Advance Loading 185 Writing Object.defineProperty() 186 Writing Object.defineProperties() 187 Writing Object.create() 188 Using the new Functions 189 Lazy Loading 194 Recursion 198 Borrowing Methods with apply() or call() 201 Overriding toString() 201 Testing for an Array 204 Rewriting cloneMembers() 206 Currying 208 Chaining Methods 212 Closure and Returning Functions 216 Passing a Configuration Object 222 Callback Functions 223 Memoization 224 [...]... worldwide for some time However, no one complained during the public comment period Like construction proposals, no one ever bothers to read the preface to a programming book Typically, that’s mostly harmless, but not for this book Though you won’t be vaporized into star dust for jumping to Chapter 1 or later, you’ll be befuddled for not having downloaded and familiarized yourself with Firebug, our tool for. .. tool for learning JavaScript JavaScript is a beginner-friendly programming language available in browsers such as Internet Explorer, Firefox, Safari, Opera, and Chrome Those browsers contain a JavaScript interpreter to parse and run your JavaScript programs, which you write in plain text with a text editor So, you can use the same text editor that you code your XHTML and CSS with JavaScript derives... joining us, flip back to the Preface for details on how to do this Type the following string in the right panel of Firebug, and click Run As Figure 1–1 displays, JavaScript will echo the string value, printing it in the left panel of Firebug: "Ben & Jerry's Chocolate Fudge Brownie"; Figure 1–1 JavaScript parrots the string literal back to us JavaScript interpreters for Firefox and other browsers return... statement, which is simply something you tell JavaScript to do, ends with a semicolon Our simple statement shown earlier tells JavaScript to create a string literal in memory We’ll explore statements more fully in Chapter 4 Commenting Code Just like CSS or XHTML, JavaScript permits you to comment your code and format it with whitespace Single-line comments begin with a // JavaScript disregards anything following... icecream." is referred to as an expression for a value In JavaScript, those are any phrases of code that create a value You might think of an expression as a recipe for a value We’ll explore that analogy in Chapter 3 Creating a Number Literal Scripts typically do a lot of math So, JavaScript, of course, has a number value type Click Clear in Firebug, and let’s have JavaScript do some math Chocolate Fudge... standard and its features for manipulating XHTML, CSS, and HTTP from the DOM standard Typically, JavaScript interpreters implement ECMAScript and DOM in separate libraries So, just as your brain has left and right lobes, a browser’s JavaScript brain has ECMAScript and DOM lobes In the first six chapters, we’ll converse with the ECMAScript lobe Then we’ll converse with the DOM lobe for a couple of chapters... Though I didn’t say, “No, and why are you telling me that?” I sure was thinking it If you are new to JavaScript and programming, some of the things I say in the first few chapters may bewilder you like Dad’s query did me Just know that, although I’ve been hand-coding JavaScript for 12 years, I’ve not forgotten how tough it can be at the very beginning So, this book is written conversational style, covering... John, and Ryan for their love and support I wish to also thank everyone at Apress, especially Ben Renow-Clarke, Matthew Moodie, Kristian Besley, Dominic Shakeshaft, and Mary Tobin, for their diligence, patience, and encouragement —Terry McNavage xv ■ PREFACE Preface In the 2005 film adaptation of The Hitchhiker’s Guide to the Galaxy by Douglas Adams, aliens demolish the earth to make way for a hyperspace... 458 ■Index 461 xii About the Author ■ Terry McNavage, www.popwebdesign.com, has been hand-coding JavaScript for 12 years In addition to being a JavaScript wizard, he has expertise in creative design, XHTML, CSS, PHP, Perl, and MySQL Terry is an elite runner, too For the past 14 years he has run 100 or more miles per week over the hilly terrain of Pittsburgh He is also a bit of a... or providing geeky technical assistance to a whole gamut of institutions or individuals in an effort to save them time and money (at his own expense!) He has authored and coauthored a large number of books for friends of ED and Apress including the Foundation Flash series, Flash MX Video, Flash ActionScript for Flash (with the wonderful David Powers), and Flash MX Creativity His words have also graced . JavaScript RIA Techniques JavaScript for Absolute Beginners for Absolute Beginners JavaScript Download from www.eBookTM.Com i JavaScript for Absolute Beginners . scratch McNavage this print for content only—size & color not accurate CYAN MAGENTA YELLOW BLACK PANTONE 123 C BOOKS FOR PROFESSIONALS BY PROFESSIONALS ® JavaScript for Absolute Beginners Dear Reader, Even. www.springeronline.com. For information on translations, please e-mail rights @apress. com, or visit www .apress. com. Apress and friends of ED books may be purchased in bulk for academic, corporate,