Object Oriented Programming
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.
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.
If you have ever used newsgroups, you may have already noticed that they make use of dot syntax as well. For example:
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
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:
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:
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:
If we wanted to change the colour of our car's hubcaps, we could do so by writing:
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 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:
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:
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?
<a href="#" onclick="window.close();">Close this window</a>
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.
The code inside that window is rather similar, but slightly different:
<a href="#" onmouseover="window.close();">Close this window</a>
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)
- onabort - Triggered when the user stops the page from loading.
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
- 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.
- Event handlers usually start with "on" (onmouseover for example).
DHTML - TOC - Introduction - Books -
1 - [ 2 ] - 3 - 4 - 5 - 6 - 7 - 8 - 9 -