A348/A548 Mastering the World-Wide Web (4/3 cr.)

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

Internet Developer (from Apple)
Web Standards (from Netscape)

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:

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:

as an undergraduate provide the Remove capability, and
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