DHTML

JavaScript Programming Fundamentals

Object Oriented Programming

JavaScript uses something called Object Oriented Programming (in keeping with the nutty world of computer related acronyms, this is sometimes called OOP). The OOP that JavaScript uses is similar to more powerful programming languages like C+ and Java. If you were considering learning those languages at some point, then JavaScript can be a good primer on OOP.

Dot syntax Explained

OOP languages all have one thing in common; They use a standard, dot syntax method of separating components in a hierarchal way. (We already touched on this a bit when we explained the Document Object Model.) It may seem a little confusing at first, but you have probably already seen dot syntax in action on the Web.

Web Addresses

Every time you type in a Web address into a browser's address bar, you are using a form of dot syntax. The FQDN, or Fully Qualified Domain Name portion of a Web address (www.yourcompanyname.com) contains elements separated by dots. First, the host name (www), followed by the domain (yourcompanyname), then the top level domain (com). So most people are already familiar with those little dots that seem to be everywhere these days. Some techno-geeks even like to use dot syntax to write out their telephone numbers, as in 204.555.5555.

Newsgroups

If you have ever used newsgroups, you may have already noticed that they make use of dot syntax as well. For example:

comp.lang.javascript

This is a newsgroup that discusses all things JavaScript. The "comp" part of the group stands for computers, "lang" is for language, and, well, I think you can guess what the last part of the name means.

comp.lang.c++ is a similar newsgroup, but it deals with the C++ language.

The most important thing to remember here is that dot syntax is hierarchal. Each part of the statement is contained in the part to the left of it. This will become clearer as we move on in this lecture.

Objects and Methods

Objects

JavaScript deals with objects. One good way to think about this is to compare it to real life objects. Let's take a car for example. A car is an object. The car has wheels, and these wheels each have tires. If we were to write out these objects in dot syntax, it would look like this:

car.wheels.tires

Besides tires, car wheels also have hubcaps (ok, not all cars, but let's assume so). So these objects can be written out this way:

car.wheels.hubcaps

Going back to the tires, we can take this a step further. The car's tires have tread. So this can be written out in dot syntax like this:

car.wheels.tires.tread

Therefore, it would obviously be incorrect to write cars.wheels.hubcaps.tread, as hubcaps don't have tread, but tires do. Get it? Good.

These objects can also have properties. By changing the properties of an object, you change the object. For example, the color of the hubcaps on the car are gray. This can be written out as:

car.wheels.hubcaps.colour.grey

If we wanted to change the colour of our car's hubcaps, we could do so by writing:

car.wheels.hubcaps.colour.silver

Ok, we can't to that to a car (if only it were that easy), but we can do this in JavaScript. As we will see.

One other thing to note is that many of our car's properties (wheels, hubcaps, etc) are also objects in their own right, which can have their own properties.

Methods

Methods are things that objects do. At this stage of the game, it can help you to think of methods as verbs, and objects as nouns. Methods are written out in dot syntax the same way. Let's stick with our car example:

car.wheels.spin()

Notice that the method looks a little different. In JavaScript, methods have parentheses () around them. Sometimes we put things inside these parentheses, but more on that later.

Let's move away from the car example now and shift to the world of JavaScript. Using the object examples above, we can write out:

window.document.location

In this example, window is the top-most object, and it contains the document object (also its property). The document object contains the location property. Window refers to the browser window itself, like what you are looking at right now. Document refers to the page, or document inside that window, like what you are reading right now. Location refers to the location of the Web page (http://www.somedomain.com/somepage.html). In this case, location is a property of document, but it is also an object.

Let's look at a method:

window.close()

This is a very simple statement, with only one object, window. The method that is invoked here is the
close() method. This statement is simply saying "Close this window". (Using the word "Invoke" is just another way of saying "do something".) Methods are easy to tell apart from objects or properties, because they usually have the double parentheses after them.

As you can see, we can use objects and methods together with the dot syntax to access objects, and tell them what to do.

What is an Event?

Besides being an object oriented programming language, JavaScript is also an event-driven language. Let's take a look at what an event is.

Whenever the user does something on a Web page, whether it's loading the page, clicking on something, or moving the mouse over something, it's called an event. For JavaScript to recognize an event, we need and event handler. Event handlers are easy to spot, as they usually start with the word "on". Two commonly used event handlers are: onclick and onmouseover. In the case of onmouseover, it is attached to an object (let's say an link) on the page. As soon as the user puts the mouse pointer over the object that this particular event handler is attached to, then whatever you specify in the event handler will happen. The JavaScript event handler is placed inside an HTML tag like so:

<a href="#" onclick="window.close();">Close this window</a>

An onclick event handler example.

We could also put a different event in that link so that the same action will happen but this time, when the mouse pointer is moved over the link.

An onmouseover event handler example.

The code inside that window is rather similar, but slightly different:

<a href="#" onmouseover="window.close();">Close this window</a>

Cool huh? Obviously, closing a window with an onmouseover event handler is not the best plan, as it's too easy to accidentally close a window this way. You might have also noticed that the two above examples don't need to be inside a <script> tag, as the event handler itself is really an HTML attribute, and the JavaScript is safely inside it. For small, simple scripts like these, it isn't always necessary to put them in a <script> tag.

Here are some of the most commonly used event handlers, with a quick explanation of each.

onclick - Triggered with the object is clicked.
onmouseover - Triggered when the mouse is move over the object.
onmouseout - Triggered when the curser is move off of the object.
onblur - Triggered when the object is no longer selected (like a from object, or when a window is no longer in front.
onfocus - Triggered when an object is brought to focus, such as bringing a window in front of another.
onload - Triggered when the object is done loading.
onunload - Triggered when the user unloads the page. (Loads another page into the Window)
onsubmit - Triggered when the user submits a form.
onselect - Triggered when the user selects the contents of an object.
onchange - Triggered when the user changes an object. (such as making a different selection in a form)
onerror - Triggered when a JavaScript error is encountered.
onabort - Triggered when the user stops the page from loading.

These are only a few of the many event handlers available in JavaScript. We will be covering other event handlers as we go.

Note: In previous versions of HTML, event handlers contained capital letters (onMouseOver). This is why you will sometimes see event handlers written with mixed case. However, in order for your pages to validate as XHTML, the new Web standard, it is necessary to make all tags and attributes lower case.

Object Oriented Programming Summary

JavaScript is an Object Oriented Programming (OOP) language.
JavaScript uses the dot syntax method of separating objects and properties in a hierarchal manner.
Web addresses and Newsgroups use a similar dot syntax.
Objects can be likened to nouns, while methods can be likened to verbs.
Objects can also be properties of another object.
Methods are things that objects do.
Methods usually have parentheses () after them
window.close() is an example of an object (window) and a method (close()).
Events are things that the user does while in the document.
JavaScript uses event handlers to recognize events.
Event handlers usually start with "on" (onmouseover for example).

DHTML - TOC - Introduction - Books -
JavaScript Programming Fundamentals - Links - Questions - Quiz -
1 - [ 2 ] - 3 - 4 - 5 - 6 - 7 - 8 - 9 -