Previous Page
Next Page

The Snap-Together Language

Here's another buzzword that we should get out of the way: JavaScript is an object-oriented language. So what does that mean?

Objects

First, let's think about objects. An object is some kind of a thing. A cat, a computer, and a bicycle are all objects (Figure 1.5) in the physical world. To JavaScript, there are objects it deals with in Web browsers, such as windows and forms, and the elements of the form, such as buttons and check boxes (Figure 1.6).

Figure 1.5. The cat object (this one's name is Pixel).


Figure 1.6. The buttons and check box are browser objects, which can be manipulated by JavaScript.


Because you can have more than one cat, or more than one window, it makes sense to give them names. While you could refer to your pets as Cat #1 and Cat #2, it's a bad idea for two reasons: first, it's easier to tell the cats apart if they have unique names, and second, it's just plain impolite. In the same way, all the examples in this book will give objects their own unique names.

Tip

  • Be aware that scripts you might see on the Internet will refer to objects like window[0] and form[1]. This is poor style for the reasons given above, and you'll find that it's much easier for you to keep track of the different objects in your scripts if you give them names instead of numbers.


Properties

Objects have properties. A cat has fur, the computer has a keyboard, and the bicycle has wheels. In the JavaScript world, a window has a title, and a form can have a check box.

Changing a property of an object modifies that object, and the same property name can be a part of completely different objects. Let's say that you have a property called empty. It's okay to use empty wherever it applies, so you could say that both the cat's tummy is empty and the cat's bowl is empty.

Note that the computer's keyboard and the bicycle's wheels aren't only properties; they are also objects in their own right, which can have their own properties. So objects can have sub-objects.

Methods

The things that objects can do are called methods. Cats purr, computers crash, and bicycles roll. JavaScript objects also have methods: buttons click(), windows open(), and text can be selected(). The parentheses signal that we're referring to a method, rather than a property.

Tip

  • It might help to think of objects and properties as nouns, and methods as verbs. The former are things, and the latter are actions that those things can do, or have done to them.


Putting the pieces together

You can put together objects, properties, and methods to get a better description of an object, or to describe a process. In JavaScript, these pieces are separated by periods (also known as dots, as in Internet addresses). This is called dot syntax. Here are some examples of objects and their properties written in this way:

bicycle.wheels

cat.paws.front.left

computer.disk.floppy

document.images.name

window.status

And here are some examples of objects and methods written in dot syntax:

cat.purr()

document.write()

forms.elements.radio.click()

Introducing the Document Object Model

On a Web page, the objects that make up the page (or document) are represented in a tree structure. You've seen this sort of thing before when building HTML pages; the top level of the page is contained in the <html> tag, and inside that you'll find the <head> and <body> tags, with other tags within each of those, and so on. Some browsers can show you representations of this tree structure, as in Figure 1.7. JavaScript considers each of the items in the document tree to be objects, and you can use JavaScript to manipulate those objects. The representation of the objects within the document is called the Document Object Model (DOM).

Figure 1.7. You can see a document's tree structure using the DOM Inspector, which is part of Firefox; there are similar features in Safari and Internet Explorer.


Each of the objects on the tree is also called a node of the tree. We can use JavaScript to modify any aspect of the tree, including adding, accessing, changing, and deleting nodes on the tree. Each object on the tree is a node. If the node contains an HTML tag, it's referred to as an element node. Otherwise, it's referred to as a text node. Of course, element nodes can contain text nodes. That's all you need to know about the DOM and nodes for now; you'll see more about them throughout the book, especially in Chapter 12.


Previous Page
Next Page