Help with Assignment Five: HTML and JavaScript

Let's start with a simple HTML file.

<html><head><title>Let's start</title>

</head><body bgcolor=white>
  This is my song for the asking... 
</body></html>
We test it, then add some Javascript.

<html><head><title>Let's start</title>
<script language="javascript">
  function fun() {
    alert('Howdy!'); 
  }
</script>
</head><body bgcolor=white>
  This is my song for the asking... 
</body></html>
Now I have a question for you.

Suppose you load this file here. How can you use fun once you load it?

Of course, you can't modify the file. But you can use the fun that's already loaded by (into) it.

Now we add an image and delete the Paul Simon (why wouldn't a quote be like a painting).

<html><head><title>Let's start</title>
<script language="javascript">
  function fun() {
    alert('Howdy!'); 
  }
</script>
</head><body bgcolor=white>
  <img src="http://www.cs.indiana.edu/classes/a202-dger/lectures/last/T1.gif">
  <!-- This is my song for the asking... -->
</body></html>
Now let's add a link that changes the src property of the img tag.

<html><head><title>Let's start</title>
<script language="javascript">
  function fun() {
    alert('Howdy!'); 
  }
</script>
</head><body bgcolor=white>

  <a href="javascript:fun()">Click</a> to change. <p> 

  <img src="http://www.cs.indiana.edu/classes/a202-dger/lectures/last/T1.gif">

</body></html>
Let's change the image when we click the link.

<html><head><title>Let's start</title>
<script language="javascript">
  function fun() {
    var name = "http://www.cs.indiana.edu/classes/a202-dger/lectures/last/T"; 
    document.images[0].src = name + "2.gif"; 
  }
</script>
</head><body bgcolor=white>

  <a href="javascript:fun()">Click</a> to change once. <p> 

  <img src="http://www.cs.indiana.edu/classes/a202-dger/lectures/last/T1.gif">

</body></html>
So changing the property of a tag can be done this way.

Now let's look at something else.

<html><head><title>No title.</title>

<style type="text/css">

#alpha {
  position: relative;
  visibility: hidden; 
}

</style>

</head><body bgcolor=white>

<script>

function fun(arg) {
  document.layers.alpha.visibility = 'visible'; 
}

</script>

<form>

<input type="button" value="Go ahead" onClick="fun('Come on!!')"> 

</form>

<div id="alpha">

You have clicked the button... 

</div>

</body></html>
This example is exactly as the one before, only the strategy of access is different.

That's because the div tag has no attributes.

Fortunately Javascript sees it as an HTMLElement object.

Unfortunately, though, Internet Explorer won't understand that.

So let's make the file cross-platform first.

<html><head><title>No title.</title>

<style type="text/css">

#alpha {
  position: relative;
  visibility: hidden; 
}

</style>

</head><body bgcolor=white>

<script>

function fun(arg) {
  if (document.layers) {
    document.layers.alpha.visibility = 'visible'; 
  } else {
    document.all.alpha.style.visibility = 'visible'; 
  }
}

</script>

<form>

<input type="button" value="Go ahead" onClick="fun('Come on!!')"> 

</form>

<div id="alpha">

You have clicked the button... 

</div>

</body></html>
And now that should work with both browsers.

Now let's look at the div tag as the HTMLElement that it is.

<html><head><title>No title.</title>
<style type="text/css">
#alpha {
  position: relative;
  visibility: visible; 
}
</style>
</head><body bgcolor=white>
<script>
var count = 0; 
function fun(arg) {
  count += 1;    
  var text = " You have pressed the button " + count + " time(s). "; 
  if (document.layers) {
    document.layers.alpha.innerHTML = text; 
  } else {
    document.all.alpha.innerHTML = text; 
  } 
}
</script>
<form>
<input type="button" value="Go ahead" onClick="fun('Come on!!')"> 
</form>
<div id="alpha">
Go ahead and click the button. 
</div>
</body></html>
That's OK, but it only works with Internet Explorer.

In Netscape this object does not have the innerHTML property.

Fortunately, still, it contains a document property inside and you can rewrite it.

So we now combine all the previous approaches.

<html><head><title>No title.</title>

  <style type="text/css">
    #alpha {
      position: relative;
      visibility: visible; 
    }
  </style>

</head><body bgcolor=white>

  <script>
    var count = 0; 
    function fun(arg) {
      count += 1;    
      var text = " You have pressed the button " + count + " time(s). "; 
      if (document.layers) {
        var doc = document.layers.alpha.document; 
        doc.clear(); // deprecated... 
        doc.open("text/html"); 
        doc.writeln(text); 
        doc.close(); 
      } else {
        document.all.alpha.innerHTML = text; 
      } 
    }
  </script>

  <form>

    <input type="button" value="Go ahead" onClick="fun('Come on!!')"> 

  </form>

  <div id="alpha">

    Go ahead and click the button. 

  </div>

</body></html>
But this won't work. Why?

The reason is that the layer needs to be have absolute positioning.

So we make this one change

<html><head><title>No title.</title>

<style type="text/css">

#alpha {
  position: absolute;
  visibility: visible; 
  top: 60px; 
  left: 40px; 
}

</style>

</head><body bgcolor=white>

<script>

var count = 0; 

function fun(arg) {

  count += 1;    
  var text = " You have pressed the button " + count + " time(s). "; 

  if (document.layers) {
    var doc = document.layers.alpha.document; 
    doc.clear(); // deprecated... 
    doc.open("text/html"); 
    doc.writeln(text); 
    doc.close(); 
  } else {
    document.all.alpha.innerHTML = text; 
  } 
}

</script>

<form>

<input type="button" value="Go ahead" onClick="fun('Come on!!')"> 

</form>

<div id="alpha">

Go ahead and click the button. 

</div>

</body></html>
And now it should work in Netscape.

What's more important it continues to work in Internet Explorer.

So let's try to get closer to the calculator example now.

<html><body bgcolor=white><script>
acc = 0; 

function calculate() {

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

  alert(fun); 

}
</script>

<form> 

Argument: <input type="text" name="arg"> <p> 

Function: <select name="fun">
<option selected value="non"> Click me!
<option value="add"> Add
<option value="sub"> Sub
</select>

<p> When done click 

<input type="button" value="Proceed" onClick="calculate();"> 

</form></body></html>
This reports the actual function selected.

Well, at this point you should have all the details for homework 5.

The due date becomes Nov 27 at midnight.

Good luck and please let me know if I can be of any help.


Last updated: Nov 20, 2001 by Adrian German for A348/A548