| |
|
|
| |
First let's come up with a simple function that will write to the right frame. I've found that when using javascript with frames, it is wise to put as much coding as possible in the topmost frameset page (master.html in this example). So re-open master.html and add the following...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript"><!--
function RightWrite()
{
}
//--></SCRIPT>
</HEAD>
<FRAMESET COLS="200,*">
<FRAME SRC="left.html" NAME="leftframe">
<FRAME SRC="right.html" NAME="rightframe">
</FRAMESET>
</HTML>
|
So far just an empty function. Now let's write my name to the right frame.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript"><!--
function RightWrite()
{
window.rightframe.document.clear();
window.rightframe.document.open();
window.rightframe.document.write("Joe");
window.rightframe.document.close();
}
//--></SCRIPT>
</HEAD>
<FRAMESET COLS="200,*">
<FRAME SRC="left.html" NAME="leftframe">
<FRAME SRC="right.html" NAME="rightframe">
</FRAMESET>
</HTML>
|
See what we're doing here? Basically it's a simple document.write() thing except we're telling the document to do it to the document that resides in the rightframe. There are also a couple other lines that are necessary when writing to a window (or frame). First we clear() it, then we open() it then we write() to it, then we close() it.
We're not quite done yet. We have to make the link that calls the function. Re-open left.html and add the following...
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <A HREF="javascript:top.RightWrite()">Click here</A> </BODY> </HTML> |
Note we call the function using top.RightWrite(). If we simply said RightWrite() the browser would look for the function in the same document as the link that called it. But since our function resides in the topmost frameset, we must specify top.RightWrite(). A little confusing maybe, but not too too difficult.
Study that last example until you understand exactly what's going on.
One thing that should be noted is that we just wrote "Joe" to the document, not any HTML tags. If you look at the source of that frame after it's written, you will simply find "Joe"... no <HTML>, <HEAD> or <BODY> tags. That stuff would only be there if we wrote it as well...
window.rightframe.document.clear();
window.rightframe.document.open();
window.rightframe.document.write("<HTML>");
window.rightframe.document.write("<HEAD><TITLE></TITLE></HEAD>");
window.rightframe.document.write("<BODY>");
window.rightframe.document.write("Joe");
window.rightframe.document.write("</BODY>");
window.rightframe.document.write("</HTML>");
window.rightframe.document.close();
While it's usually a fine idea to write a complete HTML document, we can probably skip it for now for the sake of simplicity.
Exercise: Alter the last example to send a value to the function from the link. Hint: you'll run into the nested quotes problem again, although this time it's a little different. The fix here is to use single quotes (') for the value you wish to pass...
<A HREF="javascript:top.RightWrite('Frank')">Click here</A>
While the browser is confused by nested quotes, it can handle a set of single quotes within a set of double quotes.
Exercise: Find a way to throw up a prompt box that asks for a name (or whatever) and then writes that user input to the right frame.
Exercise: Expand on your last exercise by also asking for not only the user's name, but throw up additional prompt boxes asking for his age and a hex background color (such as CC99FF). Re-write the right frame to say something like "Paul is 22 years old" and make the document render with the chosen background color (do it by writing a BODY tag, don't just change the color via javascript). While you're at it, place a default color in the prompt box like so.
Exercise: Instead of throwing up prompt boxes, use a simple form with 3 input boxes and a button. When the button is pressed, values are snagged from the inputs and used to re-write the right frame.
Be persistant with this one. It draws on several items we've learned in previous lessons and is not as simple as it appears. If it doesn't work, you'll find clues in the error messages that are generated. Hint: I find the error messages generated by Netscape are FAR more useful than those generated by Internet Explorer. Personally I use Netscape as an authoring environment, then check pages and scripts in Explorer.
Hang in there until you complete this exercise and get it to work as expected (Even if it takes you three days!). Some of the most useful and intensive learning comes when you are struggling with some problem. Reminds me of a line from Dog Day Afternoon... "Can't you see I'm dyin' over here?" You'll do your best learning when you're "dyin'".
Exercise: Using simple math in the script, calculate how many hours old the user is and add that to your page re-write. Something like "That's over 1000 hours old!"
| << BACK NEXT >> |
|
|
Javascript Reference irt.org/Javascript FAQ Deja Power Search  Joke Break |
|
| Print version available - Get the PageTutor book & CD |
|
 |
|
|
Lifetime Web Hosting