Object-Oriented JavaScript, 2nd Edition

Learn everything you need to know about OOJS in this comprehensive guide **Overview** * Think in JavaScript * Make object-oriented programming accessible and understandable to web developers * Apply design patterns to solve JavaScript coding problems * Learn coding patterns that unleash the unique power of the language * Write better and more maintainable JavaScript code * Type in and play around with examples that can be used in your own scripts **In Detail** JavaScript is the behavior, the third pillar in today's paradigm that looks at web pages as something that consists of clearly distinguishable parts: content (HTML), presentation (CSS) and behavior (JavaScript). Using JavaScript, you can create not only web pages but also desktop widgets, browser and application extensions, and other pieces of software. It's a pretty good deal: you learn one language and then code all kinds of different applications. While there's one chapter specifically dedicated to the web browser environment including DOM, Events and AJAX tutorials, the rest is applicable to the other environments Many web developers have tried coding or adopting some bits of JavaScript, but it is time to "man up" and learn the language properly because it is the language of the browser and is, virtually, everywhere. This book starts from zero, not assuming any prior JavaScript programming knowledge and takes you through all the in-depth and exciting futures hidden behind the facade. Once listed in the "nice to have" sections of job postings, these days the knowledge of JavaScript is a deciding factor when it comes to hiring web developers. After reading this book you'll be prepared to ace your JavaScript job interview and even impress with some bits that the interviewer maybe didn't know. You should read this book if you want to be able to take your JavaScript skills to a new level of sophistication. **What you will learn from this book** * The basics of object-oriented programming, and how to apply it in the JavaScript environment * How to set up and use your training environment (Firebug) * In depth discussion of data types, operators, and flow control statements in JavaScript * In depth discussion of functions, function usage patterns, and variable scope * Understand how prototypes work * Reuse code with common patterns for inheritance * Make your programs cleaner, faster and compatible with other programs and libraries * Use object-oriented JavaScript for improving script performance * Achieve missing object-oriented features in JavaScript **Approach** You will first be introduced to object-oriented programming, then to the basics of objects in JavaScript. This book takes a do-it-yourself approach when it comes to writing code, because the best way to really learn a programming language is by writing code. You are encouraged to type code into Firebug's console, see how it works and then tweak it and play around with it. There are practice questions at the end of each chapter to help you review what you have learned. **Who this book is written for** For new to intermediate JavaScript developer who wants to prepare themselves for web development problems solved by smart JavaScript! Cover 1 Copyright 3 Credits 4 About the Authors 5 About the Reviewer 6 www.PacktPub.com 7 Table of Contents 8 Preface 16 Chapter 1: Object-oriented JavaScript 22 A bit of history 23 Browser wars and renaissance 24 The present 25 The future 26 ECMAScript 5 27 Object-oriented programming 27 Objects 28 Classes 28 Encapsulation 29 Aggregation 30 Inheritance 30 Polymorphism 31 OOP summary 31 Setting up your training environment 32 WebKit's Web Inspector 32 JavaScriptCore on a Mac 33 More consoles 34 Summary 35 Chapter 2: Primitive Data Types, Arrays, Loops, and Conditions 36 Variables 36 Variables are case sensitive 38 Operators 39 Primitive data types 43 Finding out the value type – the typeof operator 43 Numbers 44 Octal and hexadecimal numbers 44 Exponent literals 45 Infinity 46 NaN 47 Strings 48 String conversions 49 Special strings 50 Booleans 51 Logical operators 52 Operator precedence 54 Lazy evaluation 55 Comparison 56 Undefined and null 58 Primitive data types recap 59 Arrays 60 Adding/updating array elements 61 Deleting elements 62 Arrays of arrays 62 Conditions and loops 63 The if condition 64 The else clause 64 Code blocks 65 Checking if a variable exists 66 Alternative if syntax 68 Switch 69 Loops 71 While loops 71 Do-while loops 72 For loops 72 For-in loops 75 Comments 76 Summary 76 Exercises 77 Chapter 3: Functions 78 What is a function? 79 Calling a function 79 Parameters 80 Predefined functions 81 parseInt() 82 parseFloat() 83 isNaN() 84 isFinite() 85 eval() 86 Scope of variables 87 Variable hoisting 89 Functions are data 90 Anonymous functions 91 Callback functions 92 Callback examples 93 Immediate functions 95 Inner (private) functions 96 Functions that return functions 97 Function, rewrite thyself! 98 Closures 100 Scope chain 100 Breaking the chain with a closure 101 Closure #1 103 Closure #2 103 A definition and closure #3 104 Closures in a loop 105 Getter/setter 107 Iterator 108 Summary 109 Exercises 110 Chapter 4: Objects 112 From arrays to objects 112 Elements, properties, methods, and members 114 Hashes and associative arrays 115 Accessing an object's properties 115 Calling an object's methods 117 Altering properties/methods 117 Using the this value 119 Constructor functions 119 The global object 120 The constructor property 122 The instanceof operator 123 Functions that return objects 123 Passing objects 124 Comparing objects 125 Objects in the WebKit console 126 console.log 127 Built-in objects 127 Object 128 Array 129 A few array methods 132 Function 133 Properties of function objects 135 Methods of function objects 136 The arguments object revisited 138 Inferring object types 139 Boolean 140 Number 141 String 142 A few methods of string objects 144 Math 147 Date 149 Methods to work with date objects 151 RegExp 153 Properties of RegExp objects 154 Methods of RegExp objects 155 String methods that accept regular expressions as arguments 156 search() and match() 156 replace() 157 Replace callbacks 157 split() 159 Passing a string when a regexp is expected 159 Error objects 160 Summary 163 Exercises 164 Chapter 5: Prototype 168 The prototype property 169 Adding methods and properties using the prototype 169 Using the prototype's methods and properties 170 Own properties versus prototype properties 171 Overwriting a prototype's property with an own property 172 Enumerating properties 174 isPrototypeOf() 177 The secret __proto__ link 178 Augmenting built-in objects 179 Augmenting built-in objects – discussion 180 Prototype gotchas 181 Summary 184 Exercises 184 Chapter 6: Inheritance 186 Prototype chaining 186 Prototype chaining example 187 Moving shared properties to the prototype 190 Inheriting the prototype only 192 A temporary constructor – new F() 194 Uber – access to the parent from a child object 196 Isolating the inheritance part into a function 197 Copying properties 199 Heads-up when copying by reference 201 Objects inherit from objects 203 Deep copy 205 object() 207 Using a mix of prototypal inheritance and copying properties 208 Multiple inheritance 210 Mixins 212 Parasitic inheritance 212 Borrowing a constructor 213 Borrow a constructor and copy its prototype 215 Summary 216 Case study – drawing shapes 220 Analysis 220 Implementation 221 Testing 225 Exercises 226 Chapter 7: The Browser Environment 228 Including JavaScript in an HTML page 228 BOM and DOM – an overview 229 BOM 230 The window object revisited 230 window.navigator 231 Your console is a cheat sheet 232 window.location 232 window.history 233 window.frames 234 window.screen 236 window.open()/close() 237 window.moveTo() and window.resizeTo() 237 window.alert(), window.prompt(), and window.confirm() 238 window.setTimeout() and window.setInterval() 240 window.document 241 DOM 242 Core DOM and HTML DOM 244 Accessing DOM nodes 245 The document node 246 documentElement 247 Child nodes 248 Attributes 249 Accessing the content inside a tag 249 DOM access shortcuts 250 Siblings, body, first, and last child 252 Walk the DOM 254 Modifying DOM nodes 254 Modifying styles 255 Fun with forms 255 Creating new nodes 257 DOM-only method 258 cloneNode() 258 insertBefore() 259 Removing nodes 260 HTML-only DOM objects 262 Primitive ways to access the document 262 document.write() 263 Cookies, title, referrer, domain 264 Events 265 Inline HTML attributes 266 Element Properties 266 DOM event listeners 267 Capturing and bubbling 268 Stop propagation 270 Prevent default behavior 272 Cross-browser event listeners 273 Types of events 274 XMLHttpRequest 275 Sending the request 276 Processing the response 277 Creating XMLHttpRequest objects in IE prior to Version 7 278 A is for Asynchronous 279 X is for XML 279 An example 280 Summary 282 Exercises 283 Chapter 8: Coding and Design Patterns 286 Coding patterns 287 Separating behavior 287 Content 287 Presentation 288 Behavior 288 Example of separating behavior 289 Asynchronous JavaScript loading 290 Namespaces 290 An Object as a namespace 290 Namespaced constructors 291 A namespace() method 292 Init-time branching 293 Lazy definition 294 Configuration object 295 Private properties and methods 297 Privileged methods 298 Private functions as public methods 299 Immediate functions 300 Modules 301 Chaining 302 JSON 303 Design patterns 304 Singleton 305 Singleton 2 305 Global variable 306 Property of the Constructor 306 In a private property 307 Factory 307 Decorator 309 Decorating a Christmas tree 310 Observer 311 Summary 314 Appendix A: Reserved Words 316 Keywords 316 Future reserved words 317 Previously reserved words 318 Appendix B: Built-in Functions 320 Appendix C: Built-in Objects 324 Object 324 Members of the Object constructor 325 The Object.prototype members 325 ECMAScript5 additions to Object 327 Array 333 The Array.prototype members 334 ECMAScript5 additions to Array 337 Function 340 The Function.prototype members 341 ECMAScript5 additions to a function 342 Boolean 342 Number 342 Members of the Number constructor 343 The Number.prototype members 344 String 344 Members of the String constructor 345 The String.prototype members 346 ECMAScript5 additions to String 348 Date 348 Members of the Date constructor 349 The Date.prototype members 350 ECMAScript5 additions to Date 353 Math 354 Members of the Math object 354 RegExp 356 The RegExp.prototype members 356 Error objects 358 The Error.prototype members 358 JSON 358 Members of the JSON object 359 Appendix D: Regular Expressions 362 Index 368 Learn everything you need to know about OOJS in this comprehensive guide Overview Think in JavaScript Make object-oriented programming accessible and understandable to web developers Apply design patterns to solve JavaScript coding problems Learn coding patterns that unleash the unique power of the language Write better and more maintainable JavaScript code Type in and play around with examples that can be used in your own scripts In Detail JavaScript is the behavior, the third pillar in today's paradigm that looks at web pages as something that consists of clearly distinguishable parts: content (HTML), presentation (CSS) and behavior (JavaScript). Using JavaScript, you can create not only web pages but also desktop widgets, browser and application extensions, and other pieces of software. It's a pretty good deal: you learn one language and then code all kinds of different applications. While there's one chapter specifically dedicated to the web browser environment including DOM, Events and AJAX tutorials, the rest is applicable to the other environments Many web developers have tried coding or adopting some bits of JavaScript, but it is time to "man up" and learn the language properly because it is the language of the browser and is, virtually, everywhere. This book starts from zero, not assuming any prior JavaScript programming knowledge and takes you through all the in-depth and exciting futures hidden behind the facade. Once listed in the "nice to have" sections of job postings, these days the knowledge of JavaScript is a deciding factor when it comes to hiring web developers. After reading this book you'll be prepared to ace your JavaScript job interview and even impress with some bits that the interviewer maybe didn't know. You should read this book if you want to be able to take your JavaScript skills to a new level of sophistication. What you will learn from this book The basics of object-oriented programming, and how to apply it in the JavaScript environment How to set up and use your training environment (Firebug) In depth discussion of data types, operators, and flow control statements in JavaScript In depth discussion of functions, function usage patterns, and variable scope Understand how prototypes work Reuse code with common patterns for inheritance Make your programs cleaner, faster and compatible with other programs and libraries Use object-oriented JavaScript for improving script performance Achieve missing object-oriented features in JavaScript Approach You will first be introduced to object-oriented programming, then to the basics of objects in JavaScript. This book takes a do-it-yourself approach when it comes to writing code, because the best way to really learn a programming language is by writing code. You are encouraged to type code into Firebug's console, see how it works and then tweak it and play around with it. There are practice questions at the end of each chapter to help you review what you have learned. Who this book is written for For new to intermediate JavaScript developer who wants to prepare themselves for web development problems solved by smart JavaScript!