This chapter is from the book
This chapter is from the book
This chapter is from the book
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?
You know that JavaScript has objects, which are similar to nouns. You also know that objects have properties that describe how objects look, just as adjectives describe nouns.
You also know that objects have methods, or actions, that can be performed to the object. Different objects have access to different properties and methods. But what follows what, and which of these is most important? How do you write the code to the page so that the JavaScript understands that this is a property of this, and this method is to act upon this object? You do it by writing objects, methods, and properties in a hierarchical fashion.
Now you'll learn THE secret to understanding JavaScript—the hierarchy of objects, illustrated in Figure 3.5. Don't tell a soul, but after you understand the hierarchy of objects, you've conquered JavaScript!
){kind=link}
Figure 3.5 The concept of an object hierarchy.
Click Here!
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.
Please understand that the image is not a complete representation of the hierarchy of JavaScript; it represents only what you've learned up to this point.
Terms, Terms, Terms: DOM
The purpose of this book is to teach you JavaScript in the friendliest and most easy-to-understand method possible.
Figure 3.5 shows the hierarchy of JavaScript. That hierarchy actually has a term—it's called a Document Object Model, or DOM for short.
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
All references begin with the top object, the window (the browser screen), and go down. window is the highest-level object in JavaScript. So much so that JavaScript doesn't even require that you use it in your code. JavaScript just understands that, unless told otherwise, everything happens within the browser window.
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:
document.write(location.href)
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 instance—the parentheses—of 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."
Let's say you have an HTML text box on your page, and the user writes something in the text box. To return the contents of that text box using JavaScript, you must use the property value; for example, document.myform.mytext.value. Just writing document.myform.mytext gives information about the form field but not its contents. The value command returns what is written inside the text box.
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 wrote—what 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?
Maybe not yet, but you will. Hierarchy is at the very heart of JavaScript. We will talk about hierarchy a great deal throughout the rest of the book.
Your Assignment
Here's a little bit of code for you to look at:
<FORM> <INPUT TYPE="button" Value="Click Here" onClick="parent.frames[1].location='zippy5.html'; parent.frames[2].location='zippy6.html'; parent.frames[3].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.
Also—think about how it does it.
Click Here!
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.