Let's start with the following:
The basic concepts you'll encounter in discussions on object-oriented programming
Browser Object Model (BOM), which is a set of objects related to the browser environment and was never part of any standard until HTML5 started standardizing some of the common objects that exist across browsers.
Microsoft won the war with the introduction of IE6, the best browser at the time, and for many years they stopped developing Internet Explorer. This allowed time for other browsers to catch up and even surpass IE's capabilities.
The movement for web standards was embraced by developers and browser vendors alike. Naturally, developers didn't like having to code everything two (or more) times to account for browsers' differences; therefore, they liked the idea of having agreed-upon standards that everyone would follow.
Developers and technologies matured and more people started caring about things like usability, progressive enhancement techniques, and accessibility. Tools such as Firebug made developers much more productive and the development less of a pain.
XMLHttpRequest object, which was once an IE-only innovation, but was then implemented by most other browsers.
XMLHttpRequest, a new breed of desktop-like web applications, dubbed Ajax applications, was born.
Create rich and powerful web applications (the kind of applications that run inside the web browser). Additions to HTML5 such as application cache, client-side storage, and databases make browser programming more and more powerful for both online and offline applications.
Write server-side code using .NET or
Create rich media applications (Flash, Flex) using ActionScript, which is based on ECMAScript.
Create cross operating system desktop applications using Mozilla's XULRunner or Adobe Air.
Create desktop widgets using Yahoo! widgets or Mac Dashboard widgets. Interestingly, Yahoo! widgets can also run on your TV.
Revision 3 of ECMAScript is the one you can take for granted to be implemented in all browsers and environments. Revision 4 was skipped and revision 5 (let's call it ES5 for short) was officially accepted in December 2009.
ES5 introduces some new objects and properties and also the so-called "strict mode". Strict mode is a subset of the language that excludes deprecated features. The strict mode is opt-in and not required, meaning that if you want your code to run in the strict mode, you declare your intention using (once per function, or once for the whole program) the following string:
In future versions, strict mode is likely to become the default or the only mode. For the time being, it's optional.
For backwards compatibility, all the examples in this book work in ES3, but at the same time, all the code in the book is written so that it will run without warnings in ES5's strict mode. Additionally, any ES5-specific parts will be clearly marked. Appendix C, Built-in Objects, lists the new additions to ES5 in detail.
Object, method, and property
Let's take a closer look into each one of these concepts. If you're new to the object-oriented programming lingo, these concepts might sound too theoretical, and you might have trouble grasping them or remembering them from one reading. Don't worry, it does take a few tries, and the subject could be a little dry at a conceptual level. But, we'll look at plenty of code examples further on in the book, and you'll see that things are much simpler in practice.
As the name object-oriented suggests, objects are important. An object is a representation of a "thing" (someone or something), and this representation is expressed with the help of a programming language. The thing can be anything—a real-life object, or a more convoluted concept. Taking a common object like a cat for example, you can see that it has certain characteristics (color, name, weight, and so on) and can perform some actions (meow, sleep, hide, escape, and so on). The characteristics of the object are called properties in OOP-speak, and the actions are called methods.
There is also an analogy with the spoken language:
Objects are most often named using nouns (book, person, and so on)
Methods are verbs (read, run, and so on)
Values of the properties are adjectives
Take the sentence "The black cat sleeps on the mat". "The cat" (a noun) is the object, "black" (adjective) is the value of the
color property, and "sleep" (a verb) is an action, or a method in OOP. For the sake of the analogy, we can go a step further and say that "on the mat " specifies something about the action "sleep", so it's acting as a parameter passed to the
In real life, similar objects can be grouped based on some criteria. A hummingbird and an eagle are both birds, so they can be classified as belonging to some made up
Birds class. In OOP, a class is a blueprint, or a recipe for an object. Another name for "object" is "instance", so we say that the eagle is one concrete instance of the general class
Birds. You can create different objects using the same class, because a class is just a template, while the objects are concrete instances based on the template.
Data (stored in properties)
The means to do something with the data (using methods)
One other term that goes together with encapsulation is information hiding. This is a rather broad term and can mean different things, but let's see what people usually mean when they use it in the context of OOP.
Another aspect of information hiding is the visibility of methods and properties. In some languages, objects can have
protected methods and properties. This categorization defines the level of access the users of the object have. For example, only the methods of the same object have access to the
private methods, while anyone has access to the
public, but we'll see that there are ways to protect the data inside an object and achieve privacy.
Combining several objects into a new one is known as aggregation or composition. It's a powerful way to separate a problem into smaller and more manageable parts (divide and conquer). When a problem scope is so complex that it's impossible to think about it at a detailed level in its entirety, you can separate the problem into several smaller areas, and possibly then separate each of these into even smaller chunks. This allows you to think about the problem on several levels of abstraction.
Take, for example, a personal computer. It's a complex object. You cannot think about all the things that need to happen when you start your computer. But, you can abstract the problem saying that you need to initialize all the separate objects that your
Computer object consists of—the
Monitor object, the
Mouse object, the
Keyboard object, and so on. Then, you can dive deeper into each of the sub-objects. This way, you're composing complex objects by assembling reusable parts.
Inheritance is an elegant way to reuse existing code. For example, you can have a generic object,
Person, which has properties such as
date_of_birth, and which also implements the functionality
eat. Then, you figure out that you need another object called
Programmer. You could re-implement all the methods and properties that
Person has, but it would be smarter to just say that
Person, and save yourself some work. The
Programmer object only needs to implement more-specific functionality, such as the
writeCode method, while reusing all of the
Person object's functionality.
When an object inherits from another object, it usually adds new methods to the inherited ones, thus extending the old object. Often, the following phrases can be used interchangeably: "B inherits from A" and "B extends A". Also, the object that inherits can pick one or more methods and redefine them, customizing them for its own needs. This way, the interface stays the same, the method name is the same, but when called on the new object, the method behaves differently. This way of redefining how an inherited method works is known as overriding.
In the preceding example, a
Programmer object inherited all of the methods of the parent
Person object. This means that both objects provide a
talk method, among others. Now imagine that somewhere in your code there's a variable called
Bob, and it just so happens that you don't know if
Bob is a
Person object or a
Programmer object. You can still call the
talk method on the
Bob object and the code will work. This ability to call the same method on different objects and have each of them respond in their own way is called
Bob is a man (an object).
Bob's date of birth is June 1, 1980, gender: male, and hair: black.
Bob is an instance of the
Class (in classical OOP)
Bob is based on another object, called
(in prototypal OOP)
Bob holds data (such as
You don't need to know how the calculation method works internally. The object might have some private data, such as the number of days in February in a leap year. You don't know, nor do you want to know.
Bob is part of a
Aggregation and composition
You can call the methods
Polymorphism and method overriding
In order to bring up the console in Chrome or Safari, right-click anywhere on a page and select Inspect Element. The additional window that shows up is the Web Inspector feature. Select the Console tab and you're ready to go.
You type code directly into the console, and when you press Enter, your code is executed. The return value of the code is printed in the console. The code is executed in the context of the currently loaded page, so for example, if you type
location.href, it will return the URL of the current page.
The console also has an autocomplete feature. It works similar to the normal command line prompt in your operating system. If, for example, you type
docu and hit the Tab key or the right arrow key,
docu will be autocompleted to
document. Then, if you type
. (the dot operator), you can iterate through all the available properties and methods you can call on the
By using the up and down arrow keys, you can go through the list of already executed commands and bring them back in the console.
You can add the
alias line shown previously to your
~/.profile file so that
jsc is always there when you need it.
Now, in order to start the interactive shell, you simply type
All modern browsers have consoles built in. You have seen the Chrome/Safari console previously. In any Firefox version, you can install the Firebug extension, which comes with a console. Additionally, in newer Firefox releases, there's a console built in and accessible via the Tools/Web Developer/Web Console menu.
It's also a good idea to familiarize yourself with
Node.js, and you can start by trying out its console. Install
Node.js from http://nodejs.org and try the console in your command prompt (terminal).