Fall Semester 2002


Lab Notes Nine: Help with Homework Four

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.

Start with a very simple file, such as:

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

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

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

<html>
  <head>
    <title>
      The Calculator
    </title>
  </head>
  <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 /> 

    When ready, please press <input type="button" value="Proceed">

  </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>
  <head>
    <title>
      The Calculator
    </title>
  <script language="javascript">
    function calculate() {
      alert('I can see you...'); 
    }
  </script>
  </head>
  <body bgcolor=white>

  <form> 
 
    <table cellpadding=6> 

    <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> 

    <tr> <td> When ready, please press <input type="button" 
                                              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>
  <head>
    <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; 

      if (fun == "add") { 
        alert(acc + arg); 
      } else if (fun == "sub") {
        alert(acc - arg); 
      } else { 
        alert('No way!'); 
      }

    }
  </script>
  </head>
  <body bgcolor=white>

  <form> 
 
    <table cellpadding=6> 

    <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="add"> Deposit
                <option value="sub"> Withdraw
              </select> 

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

    <tr> <td> When ready, please press <input type="button" 
                                              value="Proceed"
                                              onClick="calculate()" 
                                       >
         </td> 
    </tr> 

  </form> 

  </body>
</html>
Among other things we obtain concatenation instead of addition.

So what do we do?

Here's a solution:

<html>
  <head>
    <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; 

      if (fun == "add") { 
        acc = eval(acc) + eval(arg);  
      } else if (fun == "sub") {
        acc = acc - arg; 
      } else { 
        alert('No way!'); 
      }

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

    }
  </script>
  </head>
  <body bgcolor=white>

  <form> 
 
    <table cellpadding=6> 

    <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="add"> Deposit
                <option value="sub"> Withdraw
              </select> 

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

    <tr> <td> When ready, please press <input type="button" 
                                              value="Proceed"
                                              onClick="calculate()" 
                                       >
         </td> 
    </tr> 

  </form> 

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

<html>
  <head>
    <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; 

      if (fun == "add") { 
        acc = eval(acc) + eval(arg);  
      } else if (fun == "sub") {
        acc = acc - arg; 
      } else { 
        alert('No way!'); 
      }

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

      theNode = document.getElementById("acc");
      theNode.firstChild.nodeValue = acc; 
   
    }
  </script>
  </head>
  <body bgcolor=white>

  <form> 
 
    <table cellpadding=6> 

    <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="add"> Deposit
                <option value="sub"> Withdraw
              </select> 

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

    <tr> <td> When ready, please press <input type="button" 
                                              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>
  <head>
    <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; 

      if (fun == "add") { 
        acc = eval(acc) + eval(arg);  
      } else if (fun == "sub") {
        acc = acc - arg; 
      } else { 
        alert('Please choose either Deposit or Withdraw, then push Proceed.'); 
      } 

      document.getElementById("acc").firstChild.nodeValue = acc; 
      document.forms[0].arg.value = ""; 
   
    }
  </script>
  </head>
  <body bgcolor=white>

  <form> 
 
    <table cellpadding=6> 

    <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="add"> Deposit
                <option value="sub"> Withdraw
              </select> 

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

    <tr> <td> When ready, please press <input type="button" 
                                              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>
  <head>
    <title>
      The Lindley Portfolio 
    </title>
  </head>
  <body bgcolor=white>
    <table cellpadding=6>
      <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>
  <head>
    <title>
      The Lindley Portfolio 
    </title>
  <script language="javascript">
    function show(what) {
      if (what == 'one') {
        document.getElementById("titleOne").innerHTML = "Lindley One"; 
      } else {
        alert("Sorry, I don't quite understand..."); 
      } 
    }
  </script>
  </head>
  <body bgcolor=white>
    <table cellpadding=6>
      <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>
  <head>
    <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 {
        alert("Sorry, I don't quite understand..."); 
      } 
    }
  </script>
  </head>
  <body bgcolor=white>
    <table cellpadding=6>
      <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>
  <head>
    <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 {
        alert("Sorry, I don't quite understand..."); 
      } 
    }
  </script>
  </head>
  <body bgcolor=white>
    <table cellpadding=6>
      <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>
  <head>
    <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 {
        alert("Sorry, I don't quite understand..."); 
      } 
    }
  </script>
  </head>
  <body bgcolor=white>
    <table cellpadding=6>
      <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:

To sum up, here's your...

A348/A548 LAB ASSIGNMENT NINE

Implement the following behaviour in Javascript (as shown in class).

(This code has been discussed in class on Thu Oct 17.)

You have to emulate the screen, without any server-side programming.


Last updated: Oct 18, 2002 by Adrian German for A348/A548