Lesson 13: Hierarchy of Objects
Whoa! Let's pause and get familiar with the concept of hierarchy. What better time to stop than lucky Lesson 13?
Figure 3.5 The concept of an object hierarchy.
You can either see this diagram up close by clicking Lesson Thirteen Script's Effect or see it online at http://www.htmlgoodies.com/JSBook/lesson13effect.html.
Terms, Terms, Terms: DOM
I don't use the term because it really doesn't tell you, the reader, anything. In fact, at the level you're at, it might actually be confusing.
I use the term hierarchy statement because it is a better representation of the code.
Just keep in mind at your next party full of technical people that the true term is DOM, or Document Object Model.
The Hierarchy of Objects' Effects
That means that everything you've seen so far actually should be written with the object window at the beginning, like so:
window.document.write window.RightNow.getDay() window.default.status
If you want to write your code this way, great, but it's not required, obviously, because the top-level object, window, is understood to be the overriding object.
Here are some examples. Notice they follow the hierarchy pattern from Figure 3.5, from top to bottom:
document.mypic.src = "pic1.gif"
Again, window is not needed at the very beginning because it is assumed that all this is inside the window. This references an image named mypic, changing its contents to pic1.gif. Did you follow that? document is the page the item is on, mypic is the item's name, and SRC is the item's source.
It is getting smaller going left to right, one inside the other. It's similar to how a page contains a sentence, a sentence contains a word, and a word contains a letter. Look at this example:
write() is a method of the document object, and location.href returns the full URL of the window. Notice that location and document are at the same level. They are written to the left of the only dot. However, one has a method following it (write), and the other has a property following it (href).
That means you get the location of that same-level document denoted by document.write, even though one hierarchy statement is sitting in the instancethe parenthesesof the other. Both document.write and location.href act within the same document window because they are at the same level. Still with me?
Deconstructing the Hierarchy of Objects
What's most confusing about this is that some objects are also properties. I'm referencing Figure 3.5 again here:
window is just an object.
document is an object inside the window.
form is a property of document, but it is also an object with its own properties.
value and src are just properties.
Not all objects and properties are displayed here. However, this should be enough to help you understand this format. All references start at the top with window and go down, writing them left to right, separated by dots.
You therefore can't write document.mytext.myform or mypic.src.document because they are not in correct order. The order must go biggest to smallest from left to right.
A Very Important Concept
Order is paramount in hierarchy. It will come into play when we start to talk about forms in Chapter 6, "Mathematics, Random Things, and Loops."
Just know that an HTML form field, like a text box or a radio button, is given a name. In the preceding example, it's myform. If you call for that alone, you'll get information about the form item itself, just like getDay() returns the day number. But if you want what is written in the form element itself, you must add value to the end of the hierarchy statement. Now you're one level below the form field itself. You're at the level of what the user wrotewhat is contained within the form.
Think of value as a reading of what something is or is not at a specific time. A check box can have a value of on or off depending on whether it has been clicked. A text box field can have a value of "hidden" if you don't want the user to see it. And, as noted previously, a TEXT field can have input written to it, which is that field's value. Get it?
Here's a little bit of code for you to look at:
<FORM> <INPUT TYPE="button" Value="Click Here" onClick="parent.frames.location='zippy5.html'; parent.frames.location='zippy6.html'; parent.frames.location='zippy7.html';" </FORM>
You can see the basic format as a FORM button, but what does all that stuff after the onClick stand for?
Follow the thought process from the preceding lesson and without looking at the answer, make a point of writing down what you think this script does.
Alsothink about how it does it.
You can see a full tutorial on what that link does by clicking Lesson Thirteen Assignment in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/ assignment13.html.