• A brief introduction to the story behind JavaScript
• The basic concepts you'll encounter in discussions on object-oriented programming

Initially, the Web was not much more than just a number of scientific publications in the form of static HTML documents connected together with hyperlinks. Believe it or not, there was a time when there was no way to put an image in a page. But that soon changed. As the Web grew in popularity and size, the webmasters who were creating HTML pages felt they needed something more. They wanted to create richer user interactions, mainly driven by the desire to save server roundtrips for simple tasks such as form validation. Two options came up: Java applets and LiveScript, a language conceived by Brendan Eich at Netscape in 1995 and later included in the Netscape 2.0 browser under the name of JavaScript.

The applets didn'tquite catch on, but JavaScript did. The ability to use short code snippets embedded in HTML documents and alter otherwise static elements of a web page was embraced by the webmaster community. Soon, the competing browser vendor Microsoft shipped Internet Explorer (IE) 3.0 with JScript, which was a reverse engineered version of JavaScript plus some IE-specific features. Eventually, there was an effort to standardize the various implementations of the language, and this is how ECMAScript was born.ECMA (European Computer Manufacturers Association) created the standard called ECMA-262, which describes the core parts of the JavaScript programming language without browser and web page-specific features.

You can think of JavaScript as a term that encompasses three pieces:

While there is one chapter in the book dedicated to the browser, the DOM, and the BOM, most of the book describes the core language and teaches you skills you can use in any environment where JavaScript programs run.

"use strict";

• Object, method, and property
• Class
• Encapsulation
• Aggregation
• Reusability/inheritance
• Polymorphism

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 calledproperties in OOP-speak, and the actions are calledmethods.

There is also an analogy with the spoken language:

Take the sentence "The black cat sleeps on the mat". "The cat" (a noun) is the object, "black" (adjective) is the value of thecolor 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 thesleep method.

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 upBirds class. In OOP, a class is a blueprint, or a recipe for an object. Another name for "object" is "instance", so we saythat the eagle is one concrete instance of the general classBirds. 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.

There's a difference between JavaScript and the "classic" OO languages such as C++ and Java. You should be aware right from the start that in JavaScript, there are no classes; everything is based on objects. JavaScript has the notion of prototypes, which are also objects (we'll discuss them later in detail). In a classic OO language, you'd say something like "create me a new object called Bob, which is ofclass Person". In a prototypal OO language, you'd say, "I'm going to take thisobject called Bob's dad that I have lying around (on the couch in front of the TV?) and reuse it as aprototype for a new object that I'll call Bob".

Encapsulation is anotherOOP-related concept, which illustrates the fact that an object contains (encapsulates) both:

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.

Imagine an object, say, an MP3 player. You, as the user of the object, are given some interface to work with, such as buttons, display, and so on. You use the interface in order to get the object to do something useful for you, like play a song. How exactly the device is working on the inside, you don't know, and, most often, don't care. In other words, the implementation of the interface is hidden from you. The same thing happens in OOP when your code uses an object by calling its methods. It doesn't matter if you coded the object yourself or it came from some third-party library; your code doesn't need to know how the methods work internally. In compiled languages, you can't actually read the code that makes an object work. In JavaScript, because it's an interpreted language, you can see the source code, but the concept is still the same—you work with the object's interface, without worrying about its implementation.

Another aspect of information hiding is the visibility of methods and properties. In some languages, objects can havepublic,private, andprotected 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 theprivate methods, while anyone has access to thepublic ones. In JavaScript, all methods and properties arepublic, 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 asaggregation orcomposition. 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 yourComputer object consists of—theMonitor object, theMouse object, theKeyboard 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.

To use another analogy,aBook object can contain (aggregate) one or moreAuthor objects, aPublisher object, severalChapter objects, aTOC (table of contents), and so on.

Inheritance is an elegant way to reuse existing code. For example, you can have a generic object,Person, which has properties such asname anddate_of_birth, and which also implements the functionalitywalk,talk,sleep, andeat. Then, you figure out that you need another object calledProgrammer. You could re-implement all the methods and properties thatPerson has, but it would be smarter to just say thatProgrammer inheritsPerson, and save yourself some work. TheProgrammer object only needs to implement more-specific functionality, such as thewriteCode method, while reusing all of thePerson object's functionality.

In classical OOP, classes inherit from other classes, but in JavaScript, since there are no classes, objects inherit from other objects.

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 asoverriding.

In the preceding example, aProgrammer object inherited all of the methods of the parentPerson object. This means that both objects provide atalk method, among others. Now imagine that somewhere in your code there's a variable calledBob, and it just so happens that you don't know ifBob is aPerson object or aProgrammer object. You can still call thetalk method on theBob 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 calledpolymorphism.

This example shows how you can use the console to type in some code that swaps the logo on thegoogle.com home pagewith an imageof your choice. As you can see, you can test your JavaScript code live on any page.

In order to bring up the console in Chrome or Safari, right-click anywhere on a page and selectInspect Element. The additional window that shows up is the Web Inspector feature. Select theConsole 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 typelocation.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 typedocu and hit theTab key or the right arrow key,docu will be autocompleted todocument. Then, if you type. (the dot operator), you can iterate through all the available properties and methods you can call on thedocument object.

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.

The console gives you only one line to type in, but you can execute several JavaScript statements by separating them with semicolons. If you need more lines, you can pressShift +Enter to go to a new line without executing the result just yet.

On a Mac, you don't actually need a browser; you can explore JavaScript directly from your command lineTerminal application.

If you've never usedTerminal, you can simply search for it in the Spotlight search. Once you've launched it, type:

alias jsc='/System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Resources/jsc'

This command makes an alias to the littlejsc application, which stands for "JavaScriptCore" and is part of the WebKit engine. JavaScriptCore is shipped together with Mac operating systems.

You can add thealias line shown previously to your~/.profilefile so thatjsc is always there when you need it.

Now, in order to start the interactive shell, you simply typejsc from any directory. Then you can type JavaScript expressions, and when you hitEnter, you'll see the result of the expression.

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 theTools/Web Developer/Web Console menu.

Internet Explorer, since Version 8, has an F12 Developer Tools feature, which has a console in itsScript tab.

It's also a good idea to familiarize yourself withNode.js, and you can start by trying out its console. InstallNode.js fromhttp://nodejs.org and try the console in your command prompt (terminal).

As you can see, you can use theNode.js console to try out quick examples. But, you can also write longer shell scripts (test.js in the screenshot) and run them with thescriptname.js node.