|
Everything we've done so far has been done in the Window object, since that is where most HTML and JavaScript is found. But, as you may or may not have noticed, we were only able to view one URL at a time per Window object. To be able to view more than one URL at a time, we will be using the Frames object. Frames are independent, scrollable, and are capable of containing its own URL. If you think back to when we created a second window, you could view only what was in that window, but you had to move that window around to view the original window. When you create a frame, you get two windows independent of each other and you can see the contents of each window without the other obstructing. You begin by dividing the HTML document into frames with the <FRAMESET>...</FRAMESET> tag pair. Only <FRAME> tags and other <FRAMESET>...</FRAMESET> tag pairs can be placed inside the initial <FRAMESET>...</FRAMESET> tag pair. These replace the <BODY>...</BODY>. If you were to leave the <BODY>...</BODY> tags in, the would override the <FRAMESET>...</FRAMESET> tags and what is between the <BODY>...</BODY> would be displayed. Think of a frame network as if you created a single page and you added a table with borders. You know you can set your tables up in rows or in columns. You can do the same with Frames by setting the ROWS and COLS attributes. Below, we will use tables to show what your frames will look like with different settings: <FRAMESET ROWS="50%, 50%" COLS="50%, 50%">
<FRAMESET ROWS="50%, 50%">
<FRAMESET COLS="50%, 50%">
<FRAMESET ROWS="33%, 33%, *" COLS="50%, 50%">
Notice in the last example we used an asterisk (*). We know the last value is going to be the remaining percentage, so instead of typing it, we can use the asterisk as a short-hand way of adding that value. Once we decide how many frames we want to use, we will then specify the options for each frame by using the <FRAME> tag. We'll use the SRC attribute to specify the URL to be opened in the individual frames. These will be place within the <FRAMESET>...</FRAMESET> tags. To tell them apart, they can be given names by using the NAME attribute. This becomes useful when using hyperlinks to target a desired frame. One reason why we would set up a web site like this is to have a table of contents. You would have the table of contents on one frame and the page that each hyperlink is linked to in the other. This eliminates having to open a new window or a new page for each hyperlink. To make sure that the hyperlink opens in the second frame and not the first, you need to use the <BASE TARGET="frameName"> tag. This locates the frames NAME attribute and opens the new page in that frame. Another interesting feature of frames is a term called nesting frames. Here, you'd add the <FRAMESET>...</FRAMESET> tags to the beginning and end of the existing frame set. Below is what a nested frame may look like:
To better understand what a web page with nested frames looks like, click here and take a look at a basic virtual housing site. You can control the appearance and behavior of your frames using several attributes. The table below lists the attributes associated with the <FRAME> tag:
Although what we've discussed seems like HTML and has nothing to do with JavaScript, we needed to explain it all so we could tell you about the objects associated with frames. The first one we'll take a look at is the location object. This allows you to change to a new web page using JavaScript. The location object works with the URL and has several properties associated with it:
|
| |||||||||||||||||||||||||||||||||||||||||||||||||
Question: But, I can do the same in Java...and Java is an object orientated language. So, aren't you saying that JavaScript is also an object orientated language?
Answer: Well, to most people, JavaScript will never be a true OOL. In the next lesson, we'll learn how to use Frames and other objects.
If you have a questions about any of the lessons, feel free to ask.