This example emphasizes more ideas you will want to be familiar with for writing on-line collaborative tool software. Make sure you understand the idea of an Array (indexing a variable with the same name by adding a pair of square brackets [ ] with an integer inside). Make sure you understand how to call a function available from the Math library (a software library being a collection of functions you can call from within your code). Note that the Math library is already available in the browser (if it wasn't, you'd see reference to it in some SCRIPT SRC attribute (i.e. <SCRIPT SRC=libraryname.js>>). What causes the randomThought() function to run? When does it run? How often does it run?
Make sure you undersand the idea of a parser. A parser is an algorithm (code recipe) for taking in a string (or strings) of text and breaking it into pieces for a program to use. What makes the parser run? A parser can be written with relative ease in JavaScript because the String library includes so many helpful functions (methods). The example here only uses the substring() and indexOf() methods. Look at the other available methods within the String class library in the tutorial. Make sure you understand how the parseCommand() function works and when it runs. And, make sure you understand how it fills in the table in the form with the parsed string components.
Make sure you understand how the openIt() functions works. What window does it open and under what circumstances? When does it open? You will probably want to use multiple windows for a sophisticated collaborative tool. Focus on how you can use JavaScript to open those windows for you when the time is appropriate.
An alternative presentation to having multiple windows is to use frame sets. A frame set opens multiple Web pages in the same browser window. You can use JavaScript to change the active loaded page in each frame from within JavaScript. The changeurl() function in this example shows how you could change two frames simultaneously from within a JavaScript function. Note how the Document Object Model (DOM) makes reference to the different frames (through a parent structure that knows about all the different frames). Think about the fact you would need a NAME attribute within each FRAME element in order to use JavaScript to dynamically change frame contents.
Challenge yourself to understand as much of this example as you can. We've gone over it in class on October 18th and you can ask questions about it next Tuesday before the exam.
<html>
<head>
<title>JavaScript Control Example</title>
<SCRIPT Language="Javascript">
lines = new Array(5);
lines[0]="JavaScript and a Web Browser"
lines[1]="The Java/JavaScript Interface"
lines[2]="HTML controls"
lines[3]="Loops and Conditions"
lines[4]="Tying it all together"
function randomThought() {
random_num=Math.round(Math.random()*4);
document.JSForm.thought.value=lines[random_num];
}
//A function to read a network message and perform some action
function parseCommand() {
var duration;
var start_time;
var end_time;
//Message Format Example: move|200|500|Bob|hall|office
message=document.JSForm.in_str.value;
index = message.indexOf("|");
command = message.substring(0,index);
document.JSForm.command.value=command;
if (command=="move") {
message = message.substring(index+1);
index = message.indexOf("|");
start_time = message.substring(0,index);
document.JSForm.start.value=start_time;
message = message.substring(index+1);
index = message.indexOf("|");
end_time = message.substring(0,index);
document.JSForm.end.value=end_time;
message = message.substring(index+1);
index = message.indexOf("|");
what = message.substring(0,index);
document.JSForm.what.value=what;
message = message.substring(index+1);
index = message.indexOf("|");
from = message.substring(0,index);
document.JSForm.from.value=from;
target = message.substring(index+1);
document.JSForm.to.value=target;
move(start_time, end_time, what, from, target);
} else if (command=="remove") {
message = message.substring(index+1);
index = message.indexOf("|");
start_time = message.substring(0,index);
end_time = start_time;
message = message.substring(index+1);
index = message.indexOf("|");
what = message.substring(0,index);
remove(start_time, end_time, what);
} else {
//Put new command type here
}
duration=end_time-start_time;
}
function move(start_time, end_time, what, from, target) {
}
function remove(start_time, end_time, what) {
}
function openIt() {
bname=navigator.appName;
if (bname.indexOf("Netscape")!=-1) {
window.open('http://www.netscape.com/','my_new_window','width=416,height=416,x=20,y=20');
return;
}
if (bname.indexOf("Microsoft")!=-1){
window.open('http://www.microsoft.com/','my_new_window','width=416,height=416,x=20,y=20');
return;
}
window.open('http://www.w3schools.com/','my_new_window','width=416,height=416,x=20,y=20');
}
function changeurl()
{
/*
requires page to be in a FRAMESET with two FRAME elements named
upperframe (NAME=upperframe) and lowerframe (NAME=lowerframe)
*/
parent.upperframe.location.href="frameA.html";
parent.lowerframe.location.href="frameB.html";
}
</SCRIPT>
</HEAD>
<BODY ONLOAD=randomThought()>
<FORM name=JSForm>
Enter a command here ( example: move|20|40|rock|pit|wall ):<br>
<input type=text name=in_str><input type=button value=PARSE onclick=parseCommand()><p>
<TABLE><TR><TD>
Command: </TD><TD><input type=text name=command><br>
</TD></TR><TR><TD>
What: </TD><TD><input type=text name=what><br>
</TD></TR><TR><TD>
Start: </TD><TD><input type=text name=start><br>
</TD></TR><TR><TD>
End: </TD><TD><input type=text name=end><br>
</TD></TR><TR><TD>
From: </TD><TD><input type=text name=from><br>
</TD></TR><TR><TD>
To: </TD><TD><input type=text name=to><br>
</TD></TR></TABLE>
<P>
I'm really good at <input type=text name=thought SIZE=40>
<P>
<input type=button value=OPEN onclick=openIt()>
</FORM>
</BODY>
</HTML>