Spring Semester 2003

Lab Notes Nine: Help with Homework Five

It turns out things have changed for the better.

Read these documents (copies of which will soon be uploaded to our site):

Netscape 6 apparently is finally implementing the standard.

So we're finally back from the wilderness (except we were not prepared for it).

Let's focus exclusively on the standard in what follows.

We develop the calculator.

```<html>
<title>
The Calculator
</title>
<body bgcolor=white>

</body>
</html>```
OK, that's easy.

Let's add to the interface (by actually defining it).

```<html>
<title>
The Calculator
</title>
<body bgcolor=white>

The accumulator is currently <span name="acc"> 0 (zero). </span>

<form>

Please choose a function: <select name="fun">
<option value="non"> Click me!
<option value="sum"> Deposit
<option value="sub"> Withdraw
</select>

<br />

Then type an amount: <input type="text" name="arg" size=4>

<br />

</form>

</body>
</html>```
Let's face it: only the `<span>` tag is new, and used here merely for naming.

Now we need to pay attention to the user:

```<html>
<title>
The Calculator
</title>
<script language="javascript">
function calculate() {
}
</script>
<body bgcolor=white>

<form>

<tr> <td> The accumulator is currently <span name="acc"> 0 (zero). </span> </td> </tr>
<tr> <td> Please choose a function: <select name="fun">
<option value="non"> Click me!
<option value="sum"> Deposit
<option value="sub"> Withdraw
</select>

</td>
</tr>
<tr> <td> Then type an amount: <input type="text" name="arg" size=4> </td> </tr>

value="Proceed"
onClick="calculate()"
>
</td>
</tr>

</form>

</body>
</html>```
And, yes, we have changed the (code for the) interface significantly...

Here are a few more changes, and the ability to almost provide the right answer:

```<html>
<title>
The Calculator
</title>
<script language="javascript">
acc = 0;

function calculate() {
arg = document.forms[0].arg.value;

ind = document.forms[0].fun.selectedIndex;
fun = document.forms[0].fun.options[ind].value;

} else if (fun == "sub") {
} else {
}

}
</script>
<body bgcolor=white>

<form>

<tr> <td> The accumulator is currently <span name="acc"> 0 (zero). </span> </td> </tr>
<tr> <td> Please choose a function: <select name="fun">
<option value="non"> Click me!
<option value="sub"> Withdraw
</select>

</td>
</tr>
<tr> <td> Then type an amount: <input type="text" name="arg" size=4> </td> </tr>

value="Proceed"
onClick="calculate()"
>
</td>
</tr>

</form>

</body>
</html>```

So what do we do?

Here's a solution:

```<html>
<title>
The Calculator
</title>
<script language="javascript">
acc = 0;

function calculate() {
arg = document.forms[0].arg.value;

ind = document.forms[0].fun.selectedIndex;
fun = document.forms[0].fun.options[ind].value;

acc = eval(acc) + eval(arg);
} else if (fun == "sub") {
acc = acc - arg;
} else {
}

alert("The accumulator is currently: " + acc);

}
</script>
<body bgcolor=white>

<form>

<tr> <td> The accumulator is currently <span name="acc"> 0 (zero). </span> </td> </tr>
<tr> <td> Please choose a function: <select name="fun">
<option value="non"> Click me!
<option value="sub"> Withdraw
</select>

</td>
</tr>
<tr> <td> Then type an amount: <input type="text" name="arg" size=4> </td> </tr>

value="Proceed"
onClick="calculate()"
>
</td>
</tr>

</form>

</body>
</html>```
This is not bad, and only needs one more change.

```<html>
<title>
The Calculator
</title>
<script language="javascript">
acc = 0;

function calculate() {
arg = document.forms[0].arg.value;

ind = document.forms[0].fun.selectedIndex;
fun = document.forms[0].fun.options[ind].value;

acc = eval(acc) + eval(arg);
} else if (fun == "sub") {
acc = acc - arg;
} else {
}

// alert("The accumulator is currently: " + acc);

theNode = document.getElementById("acc");
theNode.firstChild.nodeValue = acc;

}
</script>
<body bgcolor=white>

<form>

<tr> <td> The accumulator is currently <span id="acc"> 0 (zero). </span> </td> </tr>
<tr> <td> Please choose a function: <select name="fun">
<option value="non"> Click me!
<option value="sub"> Withdraw
</select>

</td>
</tr>
<tr> <td> Then type an amount: <input type="text" name="arg" size=4> </td> </tr>

value="Proceed"
onClick="calculate()"
>
</td>
</tr>

</form>

</body>
</html>```
All these stages don't really tell the (whole) truth; they only tell the truth for the particular stage they're illustrating. That is, this last stage not only has some new code, but (as it happened before) there's always some crucial typo that has just been fixed. I will let you find those, as I am sure it will help you build solid debugging skills. So here's the final, completely finished calculator.

```<html>
<title>
The Calculator
</title>
<script language="javascript">
acc = 0;

function calculate() {
arg = document.forms[0].arg.value;

ind = document.forms[0].fun.selectedIndex;
fun = document.forms[0].fun.options[ind].value;

acc = eval(acc) + eval(arg);
} else if (fun == "sub") {
acc = acc - arg;
} else {
}

document.getElementById("acc").firstChild.nodeValue = acc;
document.forms[0].arg.value = "";

}
</script>
<body bgcolor=white>

<form>

<tr> <td> The accumulator is currently <span id="acc"> 0 (zero). </span> </td> </tr>
<tr> <td> Please choose a function: <select name="fun">
<option value="non"> Click me!
<option value="sub"> Withdraw
</select>

</td>
</tr>
<tr> <td> Then type an amount: <input type="text" name="arg" size=4> </td> </tr>

value="Proceed"
onClick="calculate()"
>
</td>
</tr>

</form>

</body>
</html>```
That's it.

I will now apply the very same procedure in building the portfolio.

```<html>
<title>
The Lindley Portfolio
</title>
<body bgcolor=white>
<tr><td align=center> Lindley One
<td align=center> Lindley Eight
<td align=center> Lindley Seven
<td align=center> Lindley Nine
<tr><td colspan=4 align=center>
<img src="http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif"/ >
<tr><td colspan=4 align=center>
Picture of Dilbert working like crazy in Lindley
<tr><td colspan=4 align=center>
<code>http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif</code>
</table>
</body>
</html>```
This is the same starting point as when we used PHP.

Now let's make the changes one by one, slowly.

```<html>
<title>
The Lindley Portfolio
</title>
<script language="javascript">
function show(what) {
if (what == 'one') {
document.getElementById("titleOne").innerHTML = "Lindley One";
} else {
}
}
</script>
<body bgcolor=white>
<tr><td align=center>
<span id="titleOne"><a href="javascript:show('one')">Lindley One</a></span> </td>
<td align=center> Lindley Eight </td>
<td align=center> Lindley Seven </td>
<td align=center> Lindley Nine </td>
<tr><td colspan=4 align=center>
<img src="http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif"/ >
</td>
</tr>
<tr><td colspan=4 align=center>
Picture of Dilbert working like crazy in Lindley
</td>
</tr>
<tr><td colspan=4 align=center>
<code>http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif</code>
</td>
</tr>
</table>
</body>
</html>```
I know, this is not that standard, but it's widely supported (and so much easier to use,) that we use it throughout.

```<html>
<title>
The Lindley Portfolio
</title>
<script language="javascript">
function show(what) {
document.getElementById("titleOne"  ).innerHTML = "<a href=\"javascript:show('one'  )\">Lindley One</a>";
document.getElementById("titleEight").innerHTML = "<a href=\"javascript:show('eight')\">Lindley Eight</a>";
document.getElementById("titleSeven").innerHTML = "<a href=\"javascript:show('seven')\">Lindley Seven</a>";
document.getElementById("titleNine" ).innerHTML = "<a href=\"javascript:show('nine' )\">Lindley Nine</a>";
if (what == 'one') {
document.getElementById("titleOne"  ).innerHTML = "Lindley One";
} else if (what == 'eight') {
document.getElementById("titleEight").innerHTML = "Lindley Eight";
} else if (what == 'seven') {
document.getElementById("titleSeven").innerHTML = "Lindley Seven";
} else if (what == 'nine') {
document.getElementById("titleNine" ).innerHTML = "Lindley Nine";
} else {
}
}
</script>
<body bgcolor=white>
<tr><td align=center>
<span id="titleOne"  ><a href="javascript:show('one')">Lindley One</a></span>
</td>
<td align=center>
<span id="titleEight"><a href="javascript:show('eight')">Lindley Eight</a></span>
</td>
<td align=center>
<span id="titleSeven"><a href="javascript:show('seven')">Lindley Seven</a></span>
</td>
<td align=center>
<span id="titleNine" ><a href="javascript:show('nine')">Lindley Nine</a></span>
</td>
<tr><td colspan=4 align=center>
<img src="http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif"/ >
</td>
</tr>
<tr><td colspan=4 align=center>
Picture of Dilbert working like crazy in Lindley
</td>
</tr>
<tr><td colspan=4 align=center>
<code>http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif</code>
</td>
</tr>
</table>
</body>
</html>```
At this stage we're done with the links.

The rest is as easy as pie. (I mean, really, this is exactly as PHP.)

```<html>
<title>
The Lindley Portfolio
</title>
<script language="javascript">
function show(what) {
document.getElementById("titleOne"  ).innerHTML = "<a href=\"javascript:show('one'  )\">Lindley One</a>";
document.getElementById("titleEight").innerHTML = "<a href=\"javascript:show('eight')\">Lindley Eight</a>";
document.getElementById("titleSeven").innerHTML = "<a href=\"javascript:show('seven')\">Lindley Seven</a>";
document.getElementById("titleNine" ).innerHTML = "<a href=\"javascript:show('nine' )\">Lindley Nine</a>";
if (what == 'one') {

document.getElementById("titleOne"  ).innerHTML = "Lindley One";

url = "http://www.cs.indiana.edu/dept/img/lh01.gif";

document.getElementById("pic"       ).innerHTML = "<img src=\"" + url + "\"/ >";
document.getElementById("caption"   ).innerHTML = "Red October Lindley";
document.getElementById("url"       ).innerHTML = url;

} else if (what == 'eight') {
document.getElementById("titleEight").innerHTML = "Lindley Eight";
} else if (what == 'seven') {
document.getElementById("titleSeven").innerHTML = "Lindley Seven";
} else if (what == 'nine') {
document.getElementById("titleNine" ).innerHTML = "Lindley Nine";
} else {
}
}
</script>
<body bgcolor=white>
<tr><td align=center>
<span id="titleOne"  ><a href="javascript:show('one')">Lindley One</a></span>
</td>
<td align=center>
<span id="titleEight"><a href="javascript:show('eight')">Lindley Eight</a></span>
</td>
<td align=center>
<span id="titleSeven"><a href="javascript:show('seven')">Lindley Seven</a></span>
</td>
<td align=center>
<span id="titleNine" ><a href="javascript:show('nine')">Lindley Nine</a></span>
</td>
<tr><td colspan=4 align=center>
<span id="pic"> <img src="http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif"/ > </span>
</td>
</tr>
<tr><td colspan=4 align=center>
<span id="caption"> Picture of Dilbert working like crazy in Lindley </span>
</td>
</tr>
<tr><td colspan=4 align=center>
<span id="url"> <code>http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif</code> </span>
</td>
</tr>
</table>
</body>
</html>```
And we simply apply this everywhere:

```<html>
<title>
The Lindley Portfolio
</title>
<script language="javascript">
function show(what) {
document.getElementById("titleOne"  ).innerHTML = "<a href=\"javascript:show('one'  )\">Lindley One</a>";
document.getElementById("titleEight").innerHTML = "<a href=\"javascript:show('eight')\">Lindley Eight</a>";
document.getElementById("titleSeven").innerHTML = "<a href=\"javascript:show('seven')\">Lindley Seven</a>";
document.getElementById("titleNine" ).innerHTML = "<a href=\"javascript:show('nine' )\">Lindley Nine</a>";
if (what == 'one') {

document.getElementById("titleOne"  ).innerHTML = "Lindley One";

url = "http://www.cs.indiana.edu/dept/img/lh01.gif";

document.getElementById("pic"       ).innerHTML = "<img src=\"" + url + "\"/ >";
document.getElementById("caption"   ).innerHTML = "Red October Lindley";
document.getElementById("url"       ).innerHTML = url;

} else if (what == 'eight') {
document.getElementById("titleEight").innerHTML = "Lindley Eight";

url = "http://www.cs.indiana.edu/dept/img/lh08.gif";

document.getElementById("pic"       ).innerHTML = "<img src=\"" + url + "\"/ >";
document.getElementById("caption"   ).innerHTML = "Lindley Twlight Picture";
document.getElementById("url"       ).innerHTML = url;

} else if (what == 'seven') {
document.getElementById("titleSeven").innerHTML = "Lindley Seven";

url = "http://www.cs.indiana.edu/dept/img/lh07.gif";

document.getElementById("pic"       ).innerHTML = "<img src=\"" + url + "\"/ >";
document.getElementById("caption"   ).innerHTML = "Lindley from Oz";
document.getElementById("url"       ).innerHTML = url;

} else if (what == 'nine') {
document.getElementById("titleNine" ).innerHTML = "Lindley Nine";

url = "http://www.cs.indiana.edu/dept/img/lh09.gif";

document.getElementById("pic"       ).innerHTML = "<img src=\"" + url + "\"/ >";
document.getElementById("caption"   ).innerHTML = "SouthWest of Lindley";
document.getElementById("url"       ).innerHTML = url;

} else {
}
}
</script>
<body bgcolor=white>
<tr><td align=center>
<span id="titleOne"  ><a href="javascript:show('one')">Lindley One</a></span>
</td>
<td align=center>
<span id="titleEight"><a href="javascript:show('eight')">Lindley Eight</a></span>
</td>
<td align=center>
<span id="titleSeven"><a href="javascript:show('seven')">Lindley Seven</a></span>
</td>
<td align=center>
<span id="titleNine" ><a href="javascript:show('nine')">Lindley Nine</a></span>
</td>
<tr><td colspan=4 align=center>
<span id="pic"> <img src="http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif"/ > </span>
</td>
</tr>
<tr><td colspan=4 align=center>
<span id="caption"> Picture of Dilbert working like crazy in Lindley </span>
</td>
</tr>
<tr><td colspan=4 align=center>
<span id="url"> <code>http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif</code> </span>
</td>
</tr>
</table>
</body>
</html>```
Now I am sure you would like more general perspective, so I provide the following links:

• Getting ready for the W3C DOM by Danny Goodman
• Dynamic HTML tips and how-to articles
• W3C DOM Developer Central
• Level 1 DOM introduction, by Peter-Paul Koch
• Browser compatibility chart at `webreview.com`
• A review of JavaScript (somewhere on the web site)
To sum up, here's your...

A348/A548 LAB ASSIGNMENT NINE

Finish the Javascript shopping cart:
1. as an undergraduate provide the `Remove` capability, and
2. as a graduate: add the missing CGI (or .php) script that e-mails the order

Last updated: Mar 10, 2003 by Adrian German for A348/A548