School Map:  Home / Enroll $ Student Records; Class  
$ News @ LIVE Tech Radio * Support/FAQ | Store | FORUMS

Class / Forums / javascript101 Refresh the current page Post your Week #4 ADVANCED TO-DO ASSIGNMENT here
 

 (#33 2003-01-04 02:42:23) Post Reply

TDavid
php mySQL Perl C/C++
Principal


Enrolled: Mar 2000
Posts: 193
AP: 1

 Your Week #4 ADVANCED TO-DO assignment should be posted here in this thread only. If you have specific questions about the week 1 course text then please also post them in this thread so that other students can learn from the information.

You can earn *up to 25* Script School activity points for turning in your ADVANCED to-do assignment. Your advanced to-do assignment will be graded on such things as completeness, attention to detail, creativity, originality, ingenuity and effort.

Here is the details on what you need to do for this assignment:

Show communication between Frames or Windows that share a variable. If You use Frames make the one with the variable 'hidden'.
 

 (#40 2003-01-12 21:11:51) Post Reply

wal
Need To Set


Enrolled: Jan 2003
Posts: 10
AP: 1

 I was sure that cookies would play a major role in the advanced assignment that I implemented the sharing via cookies. This was more of "information" sharing than "variable" sharing. I left it in nonetheless.
I did finally implement variable sharing two ways: a "master" window writes the contents of an input text field into a "slave" window. The master updates the slave on each keystroke. The master does the work while the slave is passive.
In the second method, the slave, every 2 seconds, copies the contents of a second input field from the master (and also checks for a new cookie in the same timer tick). Here, the master is passive while the slave does all the work.
 

 (#41 2003-01-12 21:15:24) Post Reply

wal
Need To Set


Enrolled: Jan 2003
Posts: 10
AP: 1

 Oops...

http://www.wal1.com/jschool/master.htm

Sorry.
 

 (#42 2003-01-13 22:24:28) Post Reply

logspirit
Need To Set


Enrolled: Oct 2001
Posts: 63
AP: 1

 Wal,

It looks like You really aced this one!!!

Great work... Perhaps You would be willing to post the code You wrote directly to the forum to make it easier for other students to view it... (and preserve it in case Your server ever 'goes down')

I'll let the Principal know about Your excellent efforts.

If You can make the chat 'workshop' on Tuesday at 5:00 Eastern Time You will be welcome and appreciated! Just go to http://www.scriptschool.com/commons/
or use Your own chat room viewer with:
/ irc.webmasterlive.com #scriptschool


logspirit
 

 (#48 2003-01-17 17:46:40) Post Reply

wal
Need To Set


Enrolled: Jan 2003
Posts: 10
AP: 1

 Thanks but I probably didn't ace this. I had this working for Opera6, IE5, NS4. I downloaded IE6 and NS6 and while it works for IE6 it doesn't for NS6. I've gotta fix it - dammit!
 

 (#49 2003-01-17 17:46:57) Post Reply

wal
Need To Set


Enrolled: Jan 2003
Posts: 10
AP: 1

 Thanks but I probably didn't ace this. I had this working for Opera6, IE5, NS4. I downloaded IE6 and NS6 and while it works for IE6 it doesn't for NS6. I've gotta fix it - dammit!
 

 (#50 2003-01-19 16:22:45) Post Reply

logspirit
Need To Set


Enrolled: Oct 2001
Posts: 63
AP: 1

 Wal,
You have done excellent work... x-browser scripting, especially attempting to 'write-on-the-fly' (to inner HTML - It might be easier with div's and span's), can be some of the most difficult things to do with Client Side scripting... To do this sort of thing I generally recommend using Server Scripts - like php - and just write each page as basic HTML from the server. This eliminates the problems of browser differences - especially when new versions come out after a site is written. I personally think only basic compatible (old) code methods should be used in Client Side JavaScript. Or perhaps use Flash on the Client if You want to 'spread the processing load' to the Client. Flash also eliminates the page reload problem of server scripts.

BTW, If You ever get a chance to tune into the Script School Web-Casts, please do... They are a really major part of what is happening... It took me a while to realize that myself! Your work was mentioned (and praised!) on last Friday's show!!!
The principal has requested that You (re)post Your code 'raw' so others will always be able to see it no matter what happens to Your server situation... We're all here to help each other...

Also, I'm sure You have noticed that the 'activity points' are not really current for anyone yet - that is something the principal himself is working on... it is a matter of integrating a lot of diverse information for over 3,500 students!!! But it will happen soon.

- logspirit -
 

 (#52 2003-01-24 18:30:20) Post Reply

wal
Need To Set


Enrolled: Jan 2003
Posts: 10
AP: 1

 As you requested, here's my source for this assignment. It's been modified since my earlier post because I have since fixed the cross-browser problems (I hope).


<!-- Begin master.htm -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Master</title>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

var uagent=navigator.userAgent;
var isIE = false;
if ((uagent.indexOf("MSIE") == 25)&&(navigator.appVersion >= '4'))
{
isIE = true;
}

var slaveWindow;

// createSlaveWindow and other sections of code are copied
// from course notes.
function createSlaveWindow()
{
slaveWindow = window.open('slave.htm', "Slave",
'width=300,height=500,scrollbars=yes,toolbar=no,status=no,resizable=no,menubar=no,location=no,left=200,top=100');
slaveWindow.focus();
}


// Create a cookie which will hold the URL of an image.
// Also check that the user hasn't closed the Slave window.
function makeCookie(value, w, h)
{
if (slaveWindow.closed) {
createSlaveWindow();
}

var expire = new Date();
expire.setTime(expire.getTime() + 60*1000);

document.cookie = "img=" + escape(value);
document.cookie = "width=" + escape(w);
document.cookie = "height=" + escape(h);

}

// This will set a (hard-coded) specific field in the Slave window.
// This should be parametrized for flexibility.
function pushIt() {
if (slaveWindow.closed) {
createSlaveWindow();
}
if (isIE) {
slaveWindow.document.all.wordPushed.innerText=document.frmShared.pushedWord.value;
}
else {
slaveWindow.document.frmShared.wordPushed.value=document.frmShared.pushedWord.value;
}
}

// -->
</SCRIPT>

</head>
<body onload="javascript:createSlaveWindow('Slave', 80)">
<H1>"Master" Window.</H1>
<P>
Click on an image. A cookie will be set with it's URL.
The Slave window will read the cookie and display the
image chosen.
</P>
<TABLE>
<TR>
<TD>
<A
HREF=
"javascript:makeCookie('thnSpiral1.jpg',128,96)">
<IMG
ALT="Spiral1"
SRC="thnSpiral1.jpg"
HEIGHT="96"
WIDTH="128"></A>
</TD>
<TD>
<A
HREF=
"javascript:makeCookie('thnSpiral2.jpg',128,80)">
<IMG
ALT="Spiral2"
SRC="thnSpiral2.jpg"
HEIGHT="80"
WIDTH="128"></A>
</TD>
<TD>
<A
HREF=
"javascript:makeCookie('thnSpiral3.jpg',128,80)">
<IMG
ALT="Spiral3"
SRC="thnSpiral3.jpg"
HEIGHT="80"
WIDTH="128"></A>
</TD>
</TR>
<TR>
<TD>
<A
HREF=
"javascript:makeCookie('thnWorm.jpg',128,96)">
<IMG
ALT="Worm"
SRC="thnWorm.jpg"
HEIGHT="96"
WIDTH="128"></A>
</TD>
<TD>
<A
HREF=
"javascript:makeCookie('thnWorm2.jpg',128,96)">
<IMG
ALT="Worm2"
SRC="thnWorm2.jpg"
HEIGHT="96"
WIDTH="128"></A>
</TD>
</TR>
</TABLE>
<P>
<FORM NAME="frmShared" action="" method="">
The Master window will tell the Slave which field to read.
The Slave Window will read this input field:<BR>
<!-- We should call a function which first checks for Slave still opened. -->
<INPUT type="text" size="25" value="" name="fetchedWord"
onKeyUp="slaveWindow.fetchMe(this)">
</P>
<P>
The Master window will set this data directly into the Slave window:<BR>
<INPUT type="text" size="25" value="" name="pushedWord"
onKeyUp="pushIt()">
</P>
<P>
The Master window will call a JavaScript function in the Slave
window and pass in this value. The Slave will set some field to the value:<BR>
<!-- We should call a function which first checks for Slave still opened. -->
<INPUT type="text" size="25" value="" name="sharedWord"
onKeyUp="slaveWindow.setMe(this.value)">
</FORM>
</P>
</body>
</html>

<!-- End master.htm -->
<!-- Begin slave.htm -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Slave</title>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
var uagent=navigator.userAgent;
var isIE = false;
if ((uagent.indexOf("MSIE") == 25)&&(navigator.appVersion >= '4'))
{
isIE = true;
}

// GetCookie and other sections of code are copied
// from course notes.
function GetCookie(Name)
{
var dc = document.cookie;
var find = Name + "=";
if (dc.length != 0) {
var start = dc.indexOf(find);
}
else {
return "nocookie";
}
// if Cookie Name found...
if (start != -1) {
start += find.length;
var stop = dc.indexOf(";", start);
if (stop == -1) {
stop = dc.length;
}
return unescape(dc.substring(start, stop));
}
else return "cookiename not found";
}

// Every once in a while, check the cookie.
function cookieCheck()
{
document.cookieImage.src = GetCookie("img");
document.cookieImage.height = GetCookie("height");
document.cookieImage.width = GetCookie("width");
}
// check for cookies every two seconds.
window.setInterval( "cookieCheck()", 2000 );

// Called by the other window, passes a field reference
// which this document fetches the value of.
function fetchMe(fld) {
if (isIE) {
document.all.wordFetched.innerText=
fld.value;
}
else {
document.frmShared.wordFetched.value=
fld.value;
}
}

// Called by the Master window, delivers a value to
// this Slave window.
function setMe(val) {
document.frmShared.wordShared.value=val;
}
// Sets a variable in the Master window. Directly writes
// to the form's field in the Master window.
function pushIt() {
window.opener.document.frmShared.sharedWord.value=
document.frmShared.wordShared.value;
}
// -->
</SCRIPT>

</head>
<body>
<H1>"Slave" Window</H1>
<FORM NAME="frmShared" action="" method="">

<P>
The Master window calls a slave function passing a field reference.
The Slave fetches the field value directly and shows it here:<BR>
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
var output;

if (isIE) {
output = "<H3><P ID="wordFetched"></P></H3>";
}
else {
output = "<INPUT TYPE="text" " ;
output += "NAME="wordFetched" SIZE="25" VALUE=" " />n";
}
document.write(output);
// -->
</SCRIPT>
</P>
<P>
The Master writes directly into this field:<BR>
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
var output = "";

if (isIE) {
output = "<H3><P ID="wordPushed"></P></H3>";
}
else {

output = "<INPUT TYPE="text" " ;
output += "NAME="wordPushed" SIZE="25" VALUE=" " n";

}
document.write(output);
// -->
</SCRIPT>
</P>

<P>
What is typed here, the Slave writes directly into the Master's field:<BR>
<INPUT type="text" size="25" value="" name="wordShared"
onKeyUp="pushIt()">
</P>
</FORM>

<P>
This image URL is written as a cookie by the Master Window.
The cookie is read by the Slave Window and the image shown.
(Sharing a variable using a cookie.)
<BR>
<IMG NAME="cookieImage" SRC="clear.gif" ALT="Cookie Image" BORDER="0"
HEIGHT="96" width="128">
</P>

</body>
</html>
<!-- End slave.htm -->
 

 

View Previous Thread
Print this page Print This Page

View Next Thread

School Map:  Home / Enroll $ Student Records; Class  
$ News @ LIVE Tech Radio * Support/FAQ | Store

Advertising | Link To Us | Privacy 
Copyright 2000-2002 Script School Productions / KMR Enterprises 
No part of this website may be reproduced, copied and/or distributed in any medium 
without express written permission