Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications, and libraries

Table of Contents

Object-Oriented JavaScript

Credits

About the Author

About the Reviewers

Preface

What This Book Covers

Conventions

Reader Feedback

Customer Support

Errata

Questions

1. Introduction

A Bit of History

The Winds of Change

The Present

The Future

Object-Oriented Programming

Objects

Classes

Encapsulation

Aggregation

Inheritance

Polymorphism

OOP Summary

Setting up Your Training Environment

Getting the Tools You Need

Using the Firebug Console

Summary

2. Primitive Data Types, Arrays, Loops, and Conditions

Variables

Variables are Case Sensitive

Operators

Primitive Data Types

Finding out the Value Type —the typeof Operator

Numbers

Octal and Hexadecimal Numbers

Exponent Literals

Infinity

NaN

Strings

String Conversions

Special Strings

Booleans

Logical Operators

Operator Precedence

Lazy Evaluation

Comparison

Undefined and null

Primitive Data Types Recap

Arrays

Adding/Updating Array Elements

Deleting Elements

Arrays of arrays

Conditions and Loops

Code Blocks

if Conditions

Checking if a Variable Exists

Alternative if Syntax

Switch

Loops

While Loops

Do-while loops

For Loops

For-in Loops

Comments

Summary

Exercises

3. Functions

What is a Function?

Calling a Function

Parameters

Pre-defined Functions

parseInt()

parseFloat()

isNaN()

isFinite()

Encode/Decode URIs

eval()

A Bonus—the alert() Function

Scope of Variables

Functions are Data

A nonymous Functions

C allback Functions

C allback Examples

Self-invoking Functions

Inner (Private) Functions

Functions that Return Functions

Function, Rewrite Thyself!

Closures

Scope Chain

Lexical Scope

Breaking the Chain with a Closure

Closure #1

Closure #2

A Definition and Closure #3

Closures in a Loop

Getter/Setter

Iterator

Summary

Exercises

4. Objects

From Arrays to Objects

Elements, Properties, Methods

Hashes, Associative Arrays

Accessing Object's Properties

Calling an Object's Methods

Altering Properties/Methods

Using this Value

Constructor Functions

The Global Object

constructor Property

instanceof Operator

Functions that Return Objects

Passing Objects

Comparing Objects

Objects in the Firebug Console

Built-in Objects

Object

Array

Interesting Array Methods

Function

Properties of the Function Objects

Methods of the Function Objects

The arguments Object Revisited

Boolean

Number

String

Interesting Methods of the String Objects

Math

Date

Methods to Work with Date Objects

RegExp

Properties of the RegExp Objects

Methods of the RegExp Objects

String Methods that Accept Regular Expressions as Parameters

search() and match()

replace()

Replace callbacks

split()

Passing a String When a regexp is Expected

Error Objects

Summary

Exercises

5. Prototype

The prototype Property

Adding Methods and Properties Using the Prototype

Using the Prototype's Methods and Properties

Own Properties versus prototype Properties

Overwriting Prototype's Property with Own Property

Enumerating Properties

isPrototypeOf()

The Secret __proto__ Link

Augmenting Built-in Objects

Augmenting Built-in Objects—Discussion

Some Prototype gotchas

Summary

Exercises

6. Inheritance

Prototype Chaining

Prototype Chaining Example

Moving Shared Properties to the Prototype

Inheriting the Prototype Only

A Temporary Constructor—new F()

Uber—Access to the Parent from a Child Object

Isolating the Inheritance Part into a Function

Copying Properties

Heads-up When Copying by Reference

Objects Inherit from Objects

Deep Copy

object()

Using a Mix of Prototypal Inheritance and Copying Properties

Multiple Inheritance

Mixins

Parasitic Inheritance

Borrowing a Constructor

Borrow a Constructor and Copy its Prototype

Summary

Case Study: Drawing Shapes

Analysis

Implementation

Testing

Exercises

7. The Browser Environment

Including JavaScript in an HTML Page

BOM and DOM—An Overview

BOM

The window Object Revisited

window.navigator

Firebug as a Cheat Sheet

window.location

window.history

window.frames

window.screen

window.open()/close()

window.moveTo(), window.resizeTo()

window.alert(), window.prompt(), window.confirm()

window.setTimeout(), window.setInterval()

window.document

DOM

Core DOM and HTML DOM

Accessing DOM Nodes

The document Node

documentElement

Child Nodes

Attributes

Accessing the Content Inside a Tag

DOM Access Shortcuts

Siblings, Body, First, and Last Child

Walk the DOM

Modifying DOM Nodes

Modifying Styles

Fun with Forms

Creating New Nodes

DOM-only Method

cloneNode()

insertBefore()

Removing Nodes

HTML-Only DOM Objects

Primitive Ways to Access the Document

document.write()

Cookies, Title, Referrer, Domain

Events

Inline HTML Attributes

Element Properties

DOM Event Listeners

Capturing and Bubbling

Stop Propagation

Prevent Default Behavior

Cross-Browser Event Listeners

Types of Events

XMLHttpRequest

Send the Request

Process the Response

Creating XMLHttpRequest Objects in IE prior to version 7

A is for Asynchronous

X is for XML

An Example

Summary

Exercises

8. Coding and Design Patterns

Coding Patterns

Separating Behavior

Content

Presentation

Behavior

Example of Separating Behavior

Namespaces

An Object as a Namespace

Namespaced Constructors

A namespace() Method

Init-Time Branching

Lazy Definition

Configuration Object

Private Properties and Methods

Privileged Methods

Private Functions as Public Methods

Self-Executing Functions

Chaining

JSON

Design Patterns

Singleton

Singleton 2

Global Variable

Property of the Constructor

In a Private Property

Factory

Decorator

Decorating a Christmas Tree

Observer

Summary

A. Reserved Words

Keywords

Future Reserved Words

B. Built-in Functions

C. Built-in Objects

Object

Members of the Object Constructor

Members of the Objects Created by the Object Constructor

Array

Members of the Array Objects

Function

Members of the Function Objects

Boolean

Number

Members of the Number Constructor

Members of the Number Objects

String

Members of the String Constructor

Members of the String Objects

Date

Members of the Date Constructor

Members of the Date Objects

Math

Members of the Math Object

RegExp

Members of RegExp Objects

Error Objects

Members of the Error Objects

D. Regular Expressions

Index

Object-Oriented JavaScript

Create scalable, reusable high-quality JavaScript applications, and libraries

Stoyan Stefanov

Object-Oriented JavaScript

Create scalable, reusable high-quality JavaScript applications, and libraries

Copyright © 2008 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: July 2008

Production Reference: 1160708

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-847194-14-5

www.packtpub.com

Cover Image by Nilesh Mohite (<[email protected]>)

Credits

Author

Stoyan Stefanov

Reviewers

Dan Wellman

Douglas Crockford

Gamaiel Zavala

Jayme Cousins

Julie London

Nicolas Zakas

Nicole Sullivan

Philip Tellis

Ross Harmes

Tenni Theurer

Wayne Shea

Yavor Paunov

Senior Acquisition Editor

Douglas Paterson

Development Editor

Nikhil Bangera

Technical Editor

Gagandeep Singh

Editorial Team Leader

Akshara Aware

Project Manager

Abhijeet Deobhakta

Project Coordinator

Patricia Weir

Indexer

Monica Ajmera

Proofreader

Dirk Manuel

Production Coordinator

Rajni Thorat

Cover Designer

Rajni Thorat

About the Author

Stoyan Stefanov is a Yahoo! web developer, Zend Certified Engineer, and book author. He talks regularly about JavaScript, PHP, and other web development topics at conferences and on his blog at www.phpied.com, and also runs a number of other sites, including JSPatterns.com—a site dedicated to exploring JavaScript patterns. Stoyan is the engineering lead of Yahoo!'s performance optimization tool YSlow, and contributes to other open-source projects such as Firebug and PEAR.

A citizen of the world, Stoyan was born and raised in Bulgaria, but is also a Canadian citizen, and is currently residing in Los Angeles, California. In his rare offline moments, he enjoys playing the guitar and going to the Santa Monica beaches and pools with his family.

About the Reviewers

Dan Wellman lives with his wife and three children in his home town of Southampton on the south coast of England. By day his mild-mannered alter-ego works for a small yet accomplished e-commerce production agency. By night he battles the forces of darkness and fights for truth, justice, and less intrusive JavaScript.

He has been writing computer-related articles, tutorials, and reviews for around five years and is rarely very far from a keyboard of some description.

Douglas Crockford is a product of the US public education system. A registered voter, he owns his own car. He is the world's foremost living authority on JavaScript. He is the author of JavaScript: The Good Parts. He has developed office automation systems. He did research in games and music at Atari. He was Director of Technology at Lucasfilm. He was Director of New Media at Paramount.

He was the founder and CEO of Electric Communities/Communities.com. He was founder and CTO of State Software, where he discovered JSON, the data interchange standard. He is now an architect at Yahoo!

Gamaiel Zavala is a frontend engineer at Yahoo! in Santa Monica, California. He enjoys writing all types of code and strives to understand the big picture, from protocols and packets to the wide gamut of technologies delivering user experience to the front end. Aside from the geeky stuff, he is enjoying a new family with his lovely wife and baby boy.

Jayme Cousins started creating commercial websites once released from University with a degree in Geography. His projects include marketing super-niche spatial analysis software, preparing online content overnight for his city's newspaper, printing road names on maps, painting houses, and teaching College tech courses to adults. He currently lives behind a keypad in London, Canada with his wife Heather and newborn son Alan. Jayme previously reviewed Learning Mambo from Packt Publishing. He enjoys matching technology with real-world applications for real-world people and often feels that his primary role is that of a translator of technobabble for entrepreneurs.

Jayme now provides web development, consulting, and technical training through his business, In House Logic (www.inhouselogic.com).

Julie London is a software engineer with over eight years of experience in building enterprise-level web applications. A Flash developer for many years, she now concentrates on other client-side technologies including CSS, JavaScript, and XSL. She currently lives in Los Angeles where she works as a frontend engineer for Yahoo!

Nicholas C. Zakas is principal frontend engineer for the Yahoo! front page, a contributor to YUI, and JavaScript teacher at Yahoo! He is the author of two books, Professional JavaScript for Web Developers and Professional Ajax, as well as over a dozen online articles on JavaScript.

Nicholas began his career as webmaster of a small software company, transitioning into a user interface designer and prototyper before moving fully into software engineering. He moved to Silicon Valley from Massachusetts in 2006 to join Yahoo! Nicholas can be contacted through his website at www.nczonline.net.

Nicole Sullivan is a CSS performance guru living in California. She began her professional career in 2000, when her future husband (then a W3C employee) told her that if her website didn't validate he wouldn't be able to sleep at night. She thought she'd better figure out what this ‘validator' thing was all about, and a love for standards was born.

She began building Section 508 compliant, accessible websites. As her appreciation for performance and large-scale sites grew, she went on to work in the online marketing business, building CSS framework solutions for many well-known European and world-wide brands, such as SFR, Club Med, SNCF, La Poste, FNAC, Accor Hotels, and Renault.

Nicole now works for Yahoo! in the Exceptional Performance group. Her role involves researching and evangelizing performance best practices and building tools like YSlow that help other F2E's create better sites. She writes about standards, her dog, and her obsession with object oriented CSS at www.stubbornella.org.

Philip Tellis is a lazy geek working with Yahoo! He likes letting the computer do his work for him, and if it can't, he'll just reprogram it.

When he isn't hacking code, Philip rides his bike around Silicon Valley, and tries his hand at food hacking, but not at the same time.

Ross Harmes works as a frontend engineer for Flickr in San Francisco, California. He's also an author of the book Pro JavaScript Design Patterns. Some of his technical writings and online projects, such as the YUI Bundle for TextMate, can be found at www.techfoolery.com.

Tenni Theurer joined Yahoo! in early 2006 as a technical evangelist in Yahoo!'s Exceptional Performance group. She then took the reins as manager and grew the engineering team to lead the global effort in making Yahoo! products faster and accelerating the user experience worldwide. Tenni is currently a Sr. Product Manager in Yahoo!'s Search Distribution group. Tenni has spoken at several conferences including Web 2.0 Expo, Ajax Experience, Rich Web Experience, AJAXWorld, BlogHer, WITI, and CSDN-DrDobbs. She is a featured guest blogger on Yahoo! Developer Network and Yahoo! User Interface Blog. Prior to Yahoo!, Tenni worked in IBM's Pervasive Computing group on enterprise mobile solutions where she worked directly with high profile customers on large-scale deployments.

Wayne Shea is a software engineer at Yahoo!. His projects at Yahoo! include research on improving mobile web performances and developing scalable high-performance web services. Before joining Yahoo!, he had been busy creating mobile web browsers for cell phones at Openwave and Access.

Yavor Paunov is a product of the joined efforts of the Computer Science departments of the Technical University, Sofia, Bulgaria, and Concordia University in Montreal, Canada. His experience spans from two-person startups to multi-national companies. Outside work, Yavor's habits include listening to live music and extended walks with his charming shoe-eating cocker spaniel.

Preface

This book explores JavaScript for what it is: a highly expressive and flexible prototype-based object-oriented programming language. Once dismissed as a toy for designers to make things such as rollover buttons, today this interesting and unique language is back, stronger than ever. Today's Web 2.0 world of AJAX, fat-client programming, desktop-like rich Internet applications, drag-and-drop maps and webmail clients, rely heavily on JavaScript to provide a highly interactive user experience. And if we never had the chance to properly explore JavaScript before, now is the time to sit down and (re-)learn it.

This book doesn't assume any prior knowledge of JavaScript and works from the ground up to give you a thorough understanding of the language.

What This Book Covers

Chapter 1 talks briefly about the history, present, and future of JavaScript, and then moves on to explore the basics of object-oriented programming (OOP) in general. You then learn how to set up your training environment (Firebug) in order to dive into the language on your own, using the book examples as a base.

Chapter 2 discuses the language basics: variables, data types, arrays, loops, and conditionals.

Chapter 3 covers functions. JavaScript has many uses for functions and here you learn to master them all. You also learn about the scope of variables and JavaScript's built-in functions. An interesting, but often misunderstood feature of the language—closures—is demystified at the end of the chapter.

Chapter 4 introduces objects: how to work with properties and methods, and the various ways to create your objects. There's also an overview of the built-in objects in JavaScript, such as Math and Date (just an overview, Appendix C has all the details).

Chapter 5 is dedicated to the all-important concept of prototypes in JavaScript.

Chapter 6 expands your thinking in JavaScript horizon, discussing a dozen ways to implement inheritance in JavaScript.

Chapter 7 is the browser chapter. In this chapter, you learn about BOM (Browser Object Model), DOM (W3C's Document Object Model), browser events, and AJAX.

Chapter 8 dives into various unique JavaScript coding patterns, as well as several language-independent design patterns, translated to JavaScript from the Book of Four, the most influential work of software design patterns.

Appendix A lists the reserved words in JavaScript.

Appendix B is a reference to the built-in JavaScript functions, together with sample uses.

Appendix C is a reference that provides detail and provides examples of the use of every method and property of every built-in object in JavaScript.

Appendix D is a regular expressions pattern reference.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: The key/value pairs are divided by colons, in the format key: value .

A block of code will be set as follows:

var book = {

  name: 'Catch-22',

  published: 1961,

  author: {

    firstname: 'Joseph',

    lastname: 'Heller'

  }

};

When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be shown in bold:

function TwoDShape(){}

// take care of inheritance

TwoDShape.prototype = Shape.prototype;

TwoDShape.prototype.constructor = TwoDShape;

New terms and important words are introduced in a bold-type font. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: clicking the Next button moves you to the next screen.

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader Feedback

Feedback from our readers is always welcome. Let us know what you think about this book— what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an email to <[email protected]>, and mention the book title in the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email .

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer Support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Errata

Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing this you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any mistakes, report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of the error. Once your comments have been verified, your submission will be accepted and added to the list of existing errata for the book. Any existing errata can be viewed by selecting your book from http://www.packtpub.com/support.

Questions

If you are having a problem with some aspect of the book you can contact us at <[email protected]>, and we will do our best to address it.

I'd like to dedicate this book to my wife Eva and my daughters Zlatina and Nathalie. Thank you for your patience, support, and encouragement.

To my reviewers who volunteered their time reviewing drafts of this book and whom I deeply respect and look up to: a big thank you for your invaluable input.

Chapter 1. Introduction

What do Yahoo! Maps, Google Maps, Yahoo! Mail, My Yahoo!, Gmail, Digg, YouTube and a plethora of other popular Web 2.0 applications have in common? They all offer rich and responsive user interfaces, heavily employing code written in the JavaScript language. JavaScript started with simple one-liners embedded in HTML, but is now used in much more sophisticated ways. Developers leverage the object-oriented nature of the language to build scalable code architectures made up of reusable pieces. JavaScript provides behavior, the third pillar in today's paradigm that sees web pages as consisting of three clearly distinguishable parts: content (HTML), presentation (CSS), and behavior (JavaScript).

JavaScript programs run inside a host environment. The web browser is the most common environment, but it is not the only one. Using JavaScript, you can create all kinds of widgets, application extensions, and other pieces of software. Learning JavaScript is a pretty good deal: you learn one language and can then code all kinds of different applications.

This book is about JavaScript and focuses on its object-oriented nature. The book starts from zero, and does not assume any prior programming knowledge. Although there is one chapter dedicated to the web browser environment, the rest of the book is about JavaScript in general, so is applicable to all environments.

Let's start with the first chapter, which gives you an overview of the story behind JavaScript. It also introduces the basic concepts you'll encounter in discussions on object-oriented programming.

A Bit of History

Initially, the Web was conceived as a collection of static HTML documents, tied together with hyperlinks. Soon, as the Web grew in popularity and size, the webmasters who were creating static HTML web pages felt they needed something more. They wanted the opportunity for richer user interaction, mainly driven by desire to save server round-trips for simple tasks such as form validation. Two options came up: Java applets (they failed) and LiveScript, which was conceived by Netscape in 1995 and later included in the Netscape 2.0 browser under the name of JavaScript.

The ability to alter otherwise static elements of a web page was very well received and other browsers followed suit. Microsoft's Internet Explorer (IE) 3.0 shipped with JScript, which was a copy of the same language plus some IE-specific features. Eventually there was an effort to standardize the various implementations of the language and this is how ECMAScript (European Computer Manufacturers Association) was born. Today we have the standard, called ECMA-262, and JavaScript is just one implementation of this standard, albeit the most popular one.

For better or for worse, JavaScript's instant popularity happened during the period of the Browser Wars I (approximately 1996-2001). Those were the times of the initial Internet