Document Object Model

Anybody confused by the Document Object Model?
Anybody want my take on the matter?
(This was written an hour after class Monday night and briefly
revised before being typed in Friday morning.)

The lesson #3 homework had two parts: The Document Object Model stuff
plus the frames stuff.

The Document Object Model is based on the concept of objects.
It's a very abstract concept, but a powerful one nonetheless.
At its most basic level, objects can be anything: documents,
windows, forms, images, etc. Objects have properties (or you
can call them attributes), and these properties have values.

Here's a concrete example: take the object  cats.
Cats come in all shapes and sizes, colors, types.
To accurately describe each one, you need properties.
For instance, you can have the following properties:
(some of their possible values are listed on the right)

   property (or attribute)                possible values
 --------------------------       -----------------------------------
     hair-length                      short, long
     type (breed)                     tabby, calico, manx, siamese
     name                             Spot, Kitty
     eye-color                        blue, brown, black...

Ok, with enough properties and values listed, you can describe all cats.

Now, objects not only have properties/attributes, they have methods.
Methods are the actions that the objects know HOW to do/perform.

Here are some typical methods you would find for the object cats:

    purr()
    meow()
    eat()
    sleep()

Notice how these methods have parentheses around them. What goes
inside the parentheses are the parameters for the methods (actions).
For instance, let's say sleep has a parameter of time--how long a cat
sleeps.

    sleep(60)  <-- arbitrarily chose units to be minutes,
                   so this will make a cat sleep for an hour.

Even when you have no parameters, you still need the parentheses.
They help to distinguish between properties (what a cat is)
and methods (what a cat knows how to do).

So, starting from the general (cats), and getting more specific,
we have:

   cats.name = "Kitty"
   cats.type = "tabby"

Now, notice the next two lines:

   cats.sleep       <-- this is an attribute/property, which
                        may be how the cat sleeps (on its side, back, etc.)
   cats.sleep(60)   <--- this is a method; cat sleeps for 60 minutes
   cats.sleep()     <--- this is also a method; cat sleeps for amount of
                         time as determined within sleep() itself, since
                         the parameter of time to sleep is not given
                         within the parentheses.

See the important distinction involving parentheses?

Now, let's review. Objects have properties and methods.
We know WHAT THEY ARE (attributes) and WHAT THEY DO (methods).

The great thing about objects is that they can communicate with one
another by sending messages. The jist of lesson #3 is
sending messages from a web page within one frame to another web page
within another frame.

Let's move from the cat analogy to the web page or Document Model.
We start at the top with the object known as Window. It is the first
browser window that you open. Think of this as your starting point.
You open a browser window, and within that window you open a web page
(technically a Document Object). Now, a brief explanation of DOM.

The hierarchy of the Document Object Model is similar in concept
to that of a family tree. You begin at your earliest ancestor, and
you work your way down through the upside-down tree, branching out
as children lead to grandchildren, etc, etc.

OK, we've just opened a web page (Document Object) within our
first or top-most browser window (Window Object). On this web page
can be images, text, forms, frames, etc. Each of those things are
objects. Because everything is defined in terms of objects, they can
talk to one another. Neat huh?

Now, based on what was shown in class, we have:

<IMG SRC="bobby.gif" NAME="graphic1">
<IMG SRC="bobby.gif" NAME="graphic2">

Notice that bobby.gif shows up twice. To refer to the first graphic
object, we use the name "graphic1". Likewise, we use "graphic2" to
refer to the second bobby.gif graphic.

To change the SRC from bobby.gif to say tom.gif we use javascript
thusly:

   window.document.graphic1.src = "tom.gif"

Notice that window is usually left out of the javascript code
because the window is known by context. That is, window is not
needed because it is implied which window we're in. If we were
to refer to another browser window, we would then include window,
along with the window's name, but that is beyond the scope of this lesson.

So, from now on, we'll leave out the window part:

   document.graphic1.src = "tom.gif"

We start with the document object (the web page), then we narrow our
focus to something more specific, such as the first graphic on the page.
Then we set that graphic's SRC attribute or property, which started out
as "bobby.gif" to "tom.gif".

Do you see how the document object's "graphic1" property is also
an object (namely IMG object), and you can get that (IMG) object's "SRC"
property?

In math, there is a term for it, but I forgot the name but it looks
something like this:

    ( ( ( A ) + B ) + C )

so,

  ( document )
  ( document.graphic1 )
  ( ( document.graphic1 ) . src )

pay attention to the last line...

the ( document.graphic1 ) refers to the <IMG> tag.
One of the <IMG> tag's properties/attributes is "SRC",
and that's why we add the .src at the end. Get it?

Ok, now I digress. Look at Thau's homework exercise. Play with it
to see how it works.

When you first look at the example, you may notice that the navigation
graphics (back, forth, home, green-button, yellow-button) and
the Goto: graphic are in one frame, and the other stuff is in the
lower frame.

When you click on the button on the right, a page loads in the frame
below where you can rollover an image to personalize your browser graphic.
Note that this rollover stuff is from lesson #2. The difference now is 
that the javascript communicates between frames, not within the same web
page.

So you need to add something before "document.the_image.src"
because this web page is within a frame and that frame is within the
entire browser window. Remember how we start from general (the
top-most browser window) and get more specific (to a particular element
on a web page)?

Thau started with "parent." but I chose "top." but the results in
this exercise seem to be the same. I'll explain mine.

When you start with "top." you're starting in the main browser window.
The web page you see contains the FRAMESET, which defines the frames
you see in the browser window. Now you need to get to one of the frames.
To do that, you need to have given each frame a name.

Now we have

"top.targeted_frame."

where "targeted_frame" is the name I've given the frame I'm going into
to swap the image. Next up is the document or web page within that frame.
We add "document." to get

"top.targeted_frame.document."

Once we're in the web page we can go directly to the image which we've
given a name to, let's say: "swap_this_image"

Now we get

"top.targeted_frame.document.swap_this_image"

and the last thing we add is the "Src" because this is what we want
to change. The result

"top.targeted_frame.document.swap_this_image.src"

describes moving from the very general browser window, through the
framesets to a frame, then to a document within that frame, to an
image therein, and finally to change the source of that image.

The other javascript needed is changing the background color.

It looks something like this:  document.bgColor = "#FFFFFF"
                          or:  document.bgColor = "YELLOW"

Don't forget to add stuff before the "document.bgColor" if you
are communicating from one frame to another.

This is a partial solution, and I believe enough is given here
for you to figure the rest out. By discovering the rest on your
own, you would benefit from having had an "A-ha!" experience
that would have made the learning and retention more meaningful
to you. But I could be wrong.

If you're still confused and looking at Thau's source code makes
no sense, just ask and I'll explain more.

When I did this assignment, it didn't work the first time. I kept
changing the code and trying different things until I was able to
get it to work.

One final tip:  you can think of all that dotted stuff
as a path to a file or web page.

like,

online.sfsu.edu/~jahollen/ITEC845/javascript/exercise3/main.html

where online represents the document, and each successive item
represents a more specific attribute which in turn is an object
that has attributes, and so on, until you get to the most specific
item on a web page or directory.

Good luck.
Dan